本期內容會分享我是如何用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/ 先了解一下里面有哪些頁面和功能，方便後續學習。所以下期內容我會詳細講解其中的開發技巧，敬請期待。
