欢迎光临
我们一直在努力

用AI开发“支持SVG管理的多用户版原型设计软件”,分享拆分AI开发任务技巧

本期内容会分享我是如何用AI开发多用户版的原型设计软件。一开始我先讲讲这个原型设计软件有哪些功能,方便你知道这个系统有哪些复杂的逻辑点,后面我会有针对性得讲讲,如何使用AI来开发这样的带有多重交互和复杂逻辑的软件。只要你掌握了这个技巧,你也能用AI开发可以用于销售的软件来赚钱。

这个原型设计软件https://tools.gushiio.com/proto/ 主要功能分别是画板管理,颜色管理,图标管理,个人中心。

颜色管理这个功能主要有两个用途,第一,是可以保存你喜欢的颜色色码,方便后续用AI开发软件时使用,你可以看看我的提示词里都会告诉AI准确的色码,保证生成的界面颜色跟我需要的一致,第二,原型设计软件里的画板可以直接调用你保存的颜色,用来制作软件界面。

这里可以添加你在网上看到的喜欢的颜色,输入颜色代码后这里可以预览颜色,也可以选择这里系统推荐的颜色,这个调色板也可以选择成千上万的颜色,选择好颜色后这里点保存,颜色就会保存到你的颜色库里,在画板这里点击不同元素就可以在右边属性的颜色这里选择你的颜色库颜色,这里可以使用调色板来选择颜色。

这是图标库,这里的图标都是使用svg格式的图片,为什么是用svg格式呢?因为我感觉这种格式的图片未来可拓展性会很大,现在国内外很多网站的图标和logo都采用svg格式,比如阿里云和腾讯云的logo都是svg格式的。现在不少图标网站都支持提供svg格式图标,例如阿里做的iconfont,这里可以选择一个图标,复制svg代码,在创建图标这里粘贴,输入支付宝名称保存即可,这个图标就保存到你的图标库。而且它的代码很规范,这种格式的图片是可以进行二次在线编辑,我的画板里就支持可以编辑svg格式图标的颜色。

这个svg图标库是这个原型设计软件里其中一个难点,经过我的探索,我最终把它们分成三类,第一类线条型,第二类填充色型,第三类是图片型。这三种类别的在画板分别对应不同的属性。

在画板这个“打开我的图标库”里选择刚刚的支付宝图标,还有线条型和填充型图标,你可以看看他们在右边属性栏里显示的效果,线条型和填充型图标都可以编辑颜色,只有图片型不可以。

大家看看我这个logo,我是通过第三方软件把logo的png格式图片转成svg格式,然后把svg代码通过图标管理添加到这里的,所以我的原型设计软件没有做上传图片这个功能,也是因为svg这种格式的图片已经满足原型设计的需要,目前我看了好几个主流的原型设计软件都没有这个功能,在我目前认知范围内这算是我们独家功能了

这个画板编辑界面是整个软件的核心,也是最难的部分,也是我用AI开发最耗时的地方,主要是逻辑和交互比较多,所以很容易出bug,这个功能修好了,另外一个功能又出错了。这里还有一个最大的问题就是我边做边升级,这也算是开发软件的一个小弊病吧,毕竟在实际使用时,会让你觉得这里可以再完善一下,哪里可以加多一点功能。这很容易让人无休止的开发下去,所以开发软件一定要有一个结束的时间节点,就是要把软件开发拆分成第一期功能,第二期功能,完成第一期功能后,再收集整理第二期需要开发的功能,这样软件才能正常上线。

这也是为什么即使我知道我的原型设计软件还有很多问题,但我依然选择先上线后升级的原因。

现在我已经整理了软件的各种问题和新功能的规划,并且已经放到第二期开发文档里。以后我会制作一期内容,如何用AI给已经在有用户使用的软件上升级,毕竟基于现有软件升级,而且是在有用户使用的前提下升级和从0开发软件是两个不同量级的难度,要规避的坑太多了,不要说代码小白,就算是经验丰富的程序员,处理起来也十分头疼,所以想学习AI进阶开发软件的朋友千万不要错过后面的内容教程。

如何开发这种有复杂交互逻辑的软件?

好,现在开始正式分享教程内容。如果要用AI开发一些功能复杂的软件,必须先简单测试一下AI理解这个功能的程度,例如先让AI做一个简单的原型设计软件出来,看AI能做到什么样子,然后再增加一些轻量级的功能试试,再看看AI能做到什么样子,确认AI能把很多基础功能和核心功能都可以做出来后,再开始正式开发。毕竟如果AI不能开发你需要的软件功能,那再努力也是白费的。你可以看看,我这几版AI生成的原型设计软件的界面,这是第一版,这一版是我用一句话让AI开发原型设计软件生成出来的,也是这一版给了我可以把原型设计软件做出来的信心。这是第二版,这一版AI居然帮我生成了多画板管理功能,所以后面我再让AI开发的时候都让它做上多画板管理功能。这是第三版,第三版基本上跟现在我的原型设计软件已经很相近了,所以接下来我是基于第三版开始重点开发。

经过刚刚验证AI开发功能的可行性后,接下来进入到如何开始开发的问题。这个软件主要功能包括三块,分别是颜色库、图标库、画板功能,按照目前AI的能力和输入输出的程度,一口气很难生成一个完整的软件出来,所以我们需要拆分功能来开发,这也是开发大型系统,必须经历的过程。

那如何拆分呢?我分享一下我的拆分思路。

1、让AI尽可能一口气开发更多功能出来,否则以后一个一个接不好弄

2、如果功能太大或功能相对独立,那必须拆分出来单独开发

3、关联性较大的功能,尽量一起开发,否则后面再把关联功能接上去会有更多问题

基于以上思路,我最后是把“用户注册登录”“会员中心”“颜色库”放到一起开发,SVG图标库独立开发,画板和画板管理独立开发。为什么这样安排呢?首先颜色库功能比较简单,跟用户注册登录和会员中心一起开发bug会相对较少,SVG图标库虽然跟颜色库类似,但是它涉及的功能较多,涉及的逻辑判断也多,所以单独开发会更好。画板和画板管理就不用多说了,这种关联性强的功能必须一起开发。

好,现在AI都把3大块的功能做好了,那如何把他们链接在一起呢?如果有看过上一期内容的网友应该知道,就是通过数据库表代码来链接,如果这里你不清楚的话,可以看看这个内容。我们现在需要把它们几个功能的数据库表先合并在一起,然后功能上画板主界面是需要调用颜色和SVG图标的,这个简单,直接把所有画板功能的代码,注意这里可以不需要画板管理栏目代码,只需要提供画板主功能代码就可以了,并且一起提供颜色库和图标库的数据库表代码给AI,并告诉AI如何判断和调用不同用户的颜色和图标,就可以让AI把这些功能接入到画板功能上。如果这里你不知道如何描述给AI,可以直接把颜色库和图标库的页面代码一起发给AI也行,然后告诉AI用户的颜色和图标在画板那个功能需要调用它们即可,因为所有功能的代码里面都会有大量的代码注释,这些注释都是AI在写代码的时候生成好的,代码注释会让AI知道每个功能究竟是如何运作的。

经过几轮修bug后,就有了现在这个鼓狮原型设计软件出来。或许你看完内容后,还有点迷糊,这样软件就开发出来了?感觉自己用AI还是做不出来。不用担心,你可以先从我这几个内容开始看,边看边做,先从简单的入手,然后慢慢提升难度来开发,相信你很快就能做出一个属于自己的软件出来。毕竟只有行动才能让你变强,看完内容不代表你就学会了,学了做了用了才能吸收知识的养分。

相信不久将来,AI会全面取缔人类写代码的工作,所以未来用AI开发软件最重要的是开发思路,只要思路对了开发软件就是小菜一碟。这也是为什么我近几个教学内容分享的都是开发思路和技巧,并没有给你们看具体代码的原因。

下期内容,我将分享如何利用 AI + 大平台 API 开发‘加密货币市值排行榜’网站,毕竟以后开发软件或多或少都需要接入第三方的API来获取数据或能力,比如做电商的需要接物流平台的API获取物流信息,做AI分析的需要接DeepSeek的API等等,你可以先看看https://data.gushiio.com/ 先了解一下里面有哪些页面和功能,方便后续学习。所以下期内容我会详细讲解其中的开发技巧,敬请期待。

https://segmentfault.com/a/1190000046818024

未经允许不得转载:IT极限技术分享汇 » 用AI开发“支持SVG管理的多用户版原型设计软件”,分享拆分AI开发任务技巧

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址