小白如何使用AI編程，快速打造商用級UI

冇前端底子，又唔識設計☹️

如何用最低成本，快速打造商用級別咁精緻嘅頁面？😃

今期唔係單純教某個SKILL或者技巧，而係成個戰術體系打法🥸

正式開始之前，我哋先嚟個前菜～🧏‍♀️

驍哥帶你睇下大廠，大廠研發點樣寫UI

我哋先睇嚇，大廠裏面嘅職責分工💁‍♀️

總共分三個崗位：產品、設計、研發

🕵️ 產品：負責出需求稿（PRD）

需求稿入麪包括：今次要迭代嘅功能嘅全部細節。呢個應該唔難理解，大概感覺👇

同埋要出：交互稿（wireframe，又叫「線稿」）

交互稿就係指：只係表達當前頁面嘅基本功能、主要嘅交互、同埋大概嘅排列佈局

交互稿通常比較簡單，得啲框框線線，一眼睇落去，大概知道頁面有咩功能，大概係點樣，目的就達到喇。大概感覺如下👇

🧑‍🎨 設計：負責出視覺稿（mockup）

設計同學收到產品同學嘅需求稿同線稿之後，就會開始畫視覺稿

視覺稿就係頁面喺線上真實嘅樣。通常會用Figma、Sketch呢類專業畫圖工具。大概感覺如下👇

🧑‍🦲 研發：進行UI開發

研發收到視覺稿之後，就可以對住視覺稿嚟寫代碼

以上就係大廠裏面，開發UI嘅成個流程🙆‍♀️

好！將上面嘅流程，用AI行一次！

今日，我哋用TRAE嚟做示範

開TRAE嘅SOLO Coder模式，我哋要用到SOLO Coder嘅多Agent能力

第一步：先同「產品Agent」傾需求

我哋先開第一個Agent，呢個Agent就係我哋嘅產品🕵️‍♀️

喺呢個Agent入面，不斷咁打磨需求（呢度可以用到驍哥之前講嘅「反向提問」等技巧）

一個好嘅需求稿嘅標準就係：將呢個需求稿直接掉俾設計、研發同學，佢哋可以清楚直觀咁瞭解需求嘅所有細節（呢句都可以掉俾AI）

出嘅需求稿可以放喺docs/requirement.md中

第二步：叫「產品Agent」出線稿

需求稿打磨好咗，就可以繼續叫「產品Agent」出線稿🕵️‍♀️

開一個新目錄wireframes，然後同「產品Agent」講：

「根據需求，用SVG，喺wireframes下生成主要界面嘅線稿，唔需要樣式，展示基本佈局同功能就得」

可以見到喺wireframes之下，出咗好多SVG線稿，編輯器入面可以直接預覽效果

呢一步有兩個好處：

☝️圖形展示就更加直觀。需求稿全部都係字，好悶，唔形象。有咗線稿，可以幫我哋更容易理解需求功能，發現唔合理嘅地方然後打磨

✌️為下一步嘅視覺稿做基本定調

第三步：叫「設計Agent」出視覺稿

左邊Agent管理，開新任務，改名：「設計師」👩‍🎨

呢度我哋要用少少外掛～～🧏‍♀️

https://ui-ux-pro-max-skill.nextlevelbuilder.io/

呢度為咗唔令文章變得太複雜，我哋唔多講Agent Skill呢個概念，有興趣嘅同學可以移步👉俾8歲細路嘅Agent Skill入門教學點樣喺Cursor、TRAE入面，用Skills 3分鐘整靚PPT

大家只需要知，呢個係一個，可以令頁面變靚嘅SKILL，就夠

至於點用，會用OpenSkill嘅同學直接用OpenSkill，唔會用都冇問題，驍哥有獨門邪修秘訣😈

直接將倉庫裏面呢個目錄嘅內容，複製落嚟

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.codex/skills/ui-ux-pro-max

複製到當前工作目錄

返去上面嗰個網站

https://ui-ux-pro-max-skill.nextlevelbuilder.io/

裏面有好多主題，揀一個心儀嘅，點擊Show Prompt

Prompt唔好照抄，提煉幾個風格關鍵詞就得

開一個新mockup目錄，然後同「設計Agent」講：

「根據需求稿，喺mockup目錄下出主要頁面嘅靜態視覺稿。唔使實現功能，用純html+css就得。」

「use ui-ux-pro-max（剛拷貝的目錄） skill，視覺風格：[提煉嘅視覺風格關鍵詞]」

咁樣完全達到觸發skill嘅效果🤪

是的！對於小白嚟講，Figma呢啲工具太專業，所以我哋用HTML嚟做視覺稿😃

可以見到喺mockup之下，陸續出咗好多HTML「視覺稿」👇

將html檔案直接拉到瀏覽器，就可以睇到效果！😎

Tips：如果覺得視覺稿效果唔滿意，叫AI直接修改視覺稿，或者重新生成

最後一步：叫「研發Agent」進行開發

左邊Agent管理，開新任務，改名：「研發」🧑‍🦲

同研發Agent講：「實現功能，整型啲」

咁樣我哋就可以見到效果....

喺技術方案文檔整理好嘅前提下（點樣寫技術方案呢篇唔詳細介紹），同研發Agent講：

「依照PRD同技術方案，寫代碼。視覺風格嚴格跟足視覺稿」

嚟啦！請你睇🤩

🎉🎉🎉

總結

呢套打法有幾個好處：

☝️門檻低，成型快：唔識前端、唔識設計嘅小白，都可以快靚正咁整出好用嘅產品

✌️唔係太食模型：文章入面我用嘅係GLM-4.7，如果用海外一線模型，細節實現上會再好啲

不過有一點要注意：唔好成日諗住「一次搞掂」。無論係靚UI，定係好產品，都要後期不斷打磨，執細節

呢篇文其實就係 Spec Coding工作流 + 多Agent協作 + Agent Skill嘅綜合實戰

如果掌握到呢篇文嘅精髓，舉一反三，AI編程水平會飛昇😼

大家快啲親手試嚇啦～

咁今期就係咁，我係AI編程驍哥，下期見，88👋🤓

沒有前端基礎，又不懂設計☹️

如何用最低成本，快速打造商用級別精緻的頁面？😃

本期不是單單某個SKILL、或者某個技巧的教程，而是一整套的戰術體系打法🥸

正式開始之前，我們先來點前菜～🧏‍♀️

驍哥帶你窺探大廠，大廠研發如何寫UI

我們先來看下，大廠裏的職責分工💁‍♀️

總體分為三大崗位：產品、設計、研發

🕵️ 產品：負責產出需求稿（PRD）

需求稿中包含：本次需要迭代的功能的全部細節。這個應該不難理解，大體感覺👇

以及產出：交互稿（wireframe，又稱“線稿”）

交互稿就是指：只表達當前頁面的基礎功能、主要的交互、以及大致的排列布局

交互稿通常比較簡單，只有條條框框，一眼看上去，大致知道頁面功能有哪些，大概長啥樣，目的就達到了。大致感覺如下👇

🧑‍🎨 設計：負責產出視覺稿（mockup）

設計同學拿到了產品同學的需求稿，以及線稿後，就會開始畫視覺稿

視覺稿就是頁面線上真實的樣子了。一般會使用Figma、Sketch這類專業的作圖工具。大體感覺如下👇

🧑‍🦲 研發：進行UI開發

研發拿到了視覺稿後，就可以對照視覺稿，進行代碼編寫了

以上就是大廠裏，開發UI的全流程🙆‍♀️

好！把以上的流程，用 AI 來跑一遍！

今天，我們用 TRAE 來作為演示

開啓 TRAE SOLO Coder 模式，我們需要用到 SOLO Coder 的多 Agent 能力

第一步：先和“產品Agent”聊需求

我們先起第一個Agent，這個Agent就是我們的產品🕵️‍♀️

在這個Agent中，不斷的打磨需求（這裏可以用到驍哥之前講的“反向提問”等技巧）

一個好的需求稿的標準就是：把這個需求稿直接扔給設計、研發同學，他們可以清晰直觀的瞭解需求的所有細節（這句話也可以扔給AI）

產出需求稿可以放到docs/requirement.md中

第二步：讓“產品Agent”產出線稿

需求稿打磨好了，就可以接着讓“產品Agent”產出線稿了🕵️‍♀️

新建一個目錄wireframes，然後跟“產品Agent”說：

“根據需求，用SVG，在wireframes下生成下主要界面的線稿，不需要樣式，展示出基本佈局與功能即可”

可以看到在wireframes下，產出了很多SVG線稿，編輯器內可以直接預覽效果

這一步有兩個好處：

☝️圖形展示更加直觀。需求稿全是字，非常枯燥，不形象。有了線稿，能幫助我們更容易的理解需求功能，發覺不合理的地方並進行打磨

✌️為直接下來的視覺稿進行基本定調

第三步：讓“設計Agent”產出視覺稿

左側Agent管理，新建任務，起名：“設計師”👩‍🎨

這裏我們需要動用一點外掛～～🧏‍♀️

https://ui-ux-pro-max-skill.nextlevelbuilder.io/

這裏為了不讓文章變得複雜，我們不過多引入Agent Skill 這個概念，感興趣的同學可以移步👉給8歲寶寶的Agent Skill入門教程如何在Cursor、TRAE中，用Skills 3分鐘製作精美PPT

大家只需要知道，這是一個，可以讓頁面變得好看的 SKILL，就夠了

至於怎麼用，會用OpenSkill的同學直接用OpenSkill，不會用也沒關係，驍哥有獨門邪修秘訣😈

直接把倉庫裏這個目錄裏的內容，拷下來

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.codex/skills/ui-ux-pro-max

拷到當前工作目錄裏

回到上面那個網站

https://ui-ux-pro-max-skill.nextlevelbuilder.io/

裏面有很多主題，挑一個心儀的，點擊Show Prompt

Prompt不要原封不動的抄，提煉幾個風格關鍵詞即可

新建一個mockup目錄，然後和“設計Agent”說：

“依據需求稿，在mockup目錄下產出主要頁面的靜態視覺稿。不用實現功能，用純html+css就好。”

“use ui-ux-pro-max（剛拷貝的目錄） skill，視覺風格：[提煉的視覺風格關鍵詞]”

這樣完全可以達到觸發skill的效果🤪

是的！對於小白來說，Figma這種工具太專業了，所以我們採用HTML來作為視覺稿😃

可以看到在mockup下，陸續產出了許多HTML“視覺稿”👇

把html文件直接拖到瀏覽器裏，就可以看到效果了！😎

Tips：如果覺得視覺稿效果不滿意，讓AI直接修改視覺稿，或者重新生成

最後一步：讓“研發Agent”進行開發

左側Agent管理，新建任務，起名：“研發”🧑‍🦲

跟研發Agent說：“實現下功能，炫酷一點”

這樣我們就可以看到效果....

在技術方案文檔梳理完畢的前提下（如何寫技術方案本文暫不過多介紹），跟研發Agent說：

“依照PRD，以及技術方案，編寫代碼。視覺風格嚴格參考視覺稿”

來吧！請上眼🤩

🎉🎉🎉

總結

這套打法有幾個好處：

☝️門檻低，成型快：不懂前端，不懂設計的小白，也能快速做出好看的產品

✌️不太吃模型：文章中我用的都是GLM-4.7，如果用海外一線模型，細節實現上能更好一點

不過有一點要注意：不要總想着“一次成”。無論是好的UI，還是好的產品，還是要後期不斷的打磨，摳細節

本文其實算是 Spec Coding 工作流 + 多Agent協作 + Agent Skill的綜合實戰

如果能掌握本文內容的精髓，舉一反三，AI 編程水平會實現渡劫式飛昇😼

大家去親手實踐一下吧～

那本期就這樣，我是AI編程驍哥，下期見，88👋🤓