設計師失業預警？我用 Open Design 一小時交付了完整 UI
整理版優先睇
用Open Design一個鐘搞掂健身打卡小程序UI，從諗法到可運行原型嘅完整體驗
呢篇文章係一位獨立開發者嘅真實經驗分享。佢想自己做一個健身打卡微信小程序俾自己同朋友用，核心功能得四個。以往做呢類項目，要自己畫線框、揾設計師出高保真、再對住寫代碼，前後至少兩三日，如果設計師唔得閒，可能搞成個禮拜。佢最近試用Open Design呢個開源AI設計工具，發現可以喺大約1小時內，由一個諗法直接變成可運行嘅小程序UI原型。佢詳細記錄咗成個過程，包括安裝配置、交互式問卷、生成迭代、導出同轉碼做uniapp，仲特別比較咗Open Design同Google Stitch、Pencil.dev呢三個工具嘅差異。
整體結論係：AI設計工具而家已經可以大幅壓縮從想法到原型嘅時間，但要留意交付嘅只係UI骨架，唔係完整產品。對於「先做個出嚟睇效果、收集反饋」嘅目標，呢啲工具完全夠用。作者認為最關鍵嘅設計理念係「先問清楚再動手」——交互式問卷逼你用30秒諗清楚需求，慳返之後大量修改時間。
橫評方面，作者指出三種工具各有側重：Open Design強在工作流確定性同品牌一致性；Google Stitch適合快速探索多個UI方向；Pencil.dev提供設計-代碼一致性，適合開發者主導嘅閉環。佢哋各自都有侷限：Open Design手動編輯弱、要技術門檻；Google Stitch唔開源、輸出唔穩定；Pencil.dev依賴Claude Code、缺乏協作功能。最後作者展望AI設計工具正從「生成一張圖」進化到「交付一個產品」…
- 作者用Open Design一個鐘交付咗健身打卡小程序完整UI原型，從想法到可驗證方案大幅壓縮時間。
- 核心方法係「先問清楚再動手」：交互式問卷強制喺畫圖前釐清需求，配合技能驅動生成同對話式迭代。
- Open Design vs Google Stitch vs Pencil.dev 分別代表工作流、探索、融合三種範式，各有優缺同適用場景。
- 關鍵啟發：目前AI設計工具交付嘅係UI骨架，唔係完整產品，但對原型驗證階段已經好夠用。
- 可行動點：獨立開發者可以試用Open Design快速起步，注意環境配置同轉碼踩坑位。
Open Design
開源AI設計工作流編排器，本地運行，支援132個設計技能、150套設計系統，可生成HTML/PDF/PPTX等。GitHub: ，桌面客戶端:
Google Stitch
Google Labs嘅AI原生設計畫布，閉源雲端，支援自然語言/語音/圖片輸入，可導出Figma。官網:
Pencil.dev
IDE內嵌嘅Figma-like設計畫布，桌面App/插件，依賴Claude Code，支援設計-代碼一致性。官網:
背景與訴求
作者想自己做一個健身打卡微信小程序俾自己同朋友用，核心功能得四個：每日運動打卡、運動記錄時間線、數據統計看板、周目標進度環。
由諗法到可運行代碼嘅完整路徑
以往流程要自己畫線框、揾設計師出稿、對住寫代碼，前後至少兩三日，如果設計師排唔到期，可能搞成個禮拜。藉助Open Design，成個鏈路壓縮到一個鐘以內。
先問清楚再動手
後文會對比Open Design同Google Stitch、Pencil.dev，供唔同場景嘅讀者參考。
實戰：健身打卡小程序
本地優先、技能驅動、品牌級設計系統
Open Design係一個本地優先嘅開源AI設計系統平台，核心特點包括：
- 本地運行：數據存喺本地SQLite，唔使上雲
- 技能驅動：內置132個設計技能，覆蓋UI原型到文檔生成
- 品牌級設計系統：150套預置系統，包括Linear、Stripe等一線產品規範
- 沙箱預覽：安全環境實時渲染設計稿
- 多Agent支援：自動檢測16種Agent CLI，BYOK無鎖定
- 多格式導出：HTML、PDF、PPTX、ZIP等
環境準備需要Node.js >=24、pnpm、至少一個Agent CLI同Git。如果唔想折騰，可以下載桌面客戶端。
- 1 git clone 倉庫
- 2 corepack enable 同 pnpm install
- 3 pnpm tools-dev 啟動
登入Web界面後，揀mobile-app技能，填名稱「FitCheck」，精度選高保真。
交互式問卷：先問清楚再動手
呢個係最驚喜嘅設計。AI會彈出表單問目標平台、受眾、調性等，30秒填完，慳返大量修改時間。理念係：唔知你要做咩風格就開始畫圖，100%會改到崩潰。
TodoWrite實時進度 + 沙箱預覽
提交問卷後，Agent逐步完成5個步驟，每個步驟完成後沙箱實時渲染。首頁有周目標進度環、今日打卡入口等。
第一版出嚟後，可以對話式迭代。作者提出三個修改，每次10秒內見到新版本。最終迭代完成。
Agent在當前基礎上迭代，不是從頭重來
導出時支援多種格式。作者目標係uniapp小程序，用Agent配合轉碼Prompt將HTML轉為Vue組件，30分鐘後輸出完整頁面目錄，包括首頁、記錄、統計、個人中心同幾個共用組件。
整體用咗：需求梳理15min + 設計迭代20min + 轉碼30min = 約1小時。注意交付係UI骨架，唔含完整業務邏輯。
橫評：Open Design vs Google Stitch vs Pencil.dev
三種工具代表三種範式
呢三個工具分別代表工作流、探索、融合範式。Open Design以問卷驅動、確定性視覺方向見稱；Google Stitch以Prompt驅動、快速探索多方向見長；Pencil.dev以設計-代碼一致性為核心。
- 需要品牌一致性的多頁面項目 → Open Design
- 快速UI探索，一下午試5個方向 → Google Stitch
- 開發者主導的設計-代碼閉環 → Pencil.dev
- 成本敏感的獨立開發者 → Open Design（開源免費）
- 已有Figma設計稿需轉碼 → Pencil.dev
各自侷限：Open Design手動編輯弱、唔支援Figma集成、配置有門檻；Google Stitch閉源、確定性低、代碼導出質量有限；Pencil.dev強依賴Claude Code、冇瀏覽器版、協作功能缺。
工作流範式 vs 探索範式 vs 融合範式
未來展望與相關資料
AI設計工具從生成一張圖到交付一個產品
Open Design代表工作流範式，技能文件化、設計系統Markdown化、Agent可插拔，指向可組合的設計基礎設施。Google Stitch代表探索範式，語音交互適合設計頭腦風暴。Pencil.dev代表融合範式，設計同代碼喺同一個工作空間。
相關資料已放喺resources，包括GitHub連結同官網。
當 AI 設計工具周圍都係，我哋真正需要嘅唔係一個更靚嘅 Demo，而係一條由「想法」到「可運行代碼」嘅完整路徑。呢篇文章記錄咗我用 Open Design 完成一個「健身打卡小程序」由設計到代碼交付嘅全過程。
一、背景同訴求
最近想整一個健身打卡微信小程序，俾自己同朋友用。核心功能得四個：
呢啲需求唔複雜，但以住嘅流程係：自己畫線框圖 → 揾設計師出高保真稿 → 對住設計稿寫前端代碼——前後至少兩三日，如果設計師排唔到期，可能一個星期都搞唔掂。
而藉助 Open Design，我只需要喺交互式問捲入面講清楚需求，AI Agent 就可以直接生成可運行嘅小程序 UI 原型。由想法到可驗證原型，成條鏈路壓縮到 1 個鐘以內。
下文第三章會詳細比較 Open Design 同 Google Stitch、Pencil.dev 嘅分別，方便唔同場景嘅讀者參考。
二、實戰：健身打卡小程序
2.1 Open Design 係咩嘢
Open Design 係一個本地優先嘅開源 AI 設計系統平台（Apache 2.0 許可），核心特點：
2.2 環境準備
Open Design 對運行環境有一定要求：
如果唔想搞環境，都可以直接由 open-design.ai[1] 下載桌面客戶端，免安裝即用。
2.3 安裝同啟動
踩坑提示：安裝過程中可能會卡喺依賴下載，呢個係鏡像問題。將報錯信息交俾 Agent 叫佢幫手換源就得。
首次啟動後，守護進程自動掃描 $PATH，檢測到已安裝嘅 Agent CLI，加載全部技能同設計系統。Web 界面喺 http://localhost:7456 打開：
2.4 新建原型
入 Web UI，揀 mobile-app 技能（專門用嚟做移動端原型），填原型名「FitCheck」，精度揀高保真。
2.5 交互式問卷：問清楚先動手
呢個係 Open Design 最令我驚喜嘅設計。當我輸入「幫我設計一個健身打卡微信小程序」之後，AI 嘅第一反應唔係畫圖，而係彈出一個交互表單：
30 秒嘅表單填寫，省咗 30 分鐘嘅來回修改。
呢個設計理念係：先將問題問完，至展示睇到嘅嘢。 唔知你想做咩風格就開始畫圖，100% 會改到崩潰。
2.6 生成過程：實時進度 + 沙箱預覽
提交問卷後，Agent 開始工作。界面上透過 TodoWrite 實時展示進度：
每步完成後，沙箱 iframe 實時渲染。生成完畢後，我見到嘅就係呢個效果：
首頁有週目標進度環、今日打卡入口、本週完成狀態——一眼睇清今日應唔應該鬱。
2.7 對話式迭代
第一版出咗之後，我提咗幾個修改：
每次修改 10 秒內就睇到新版本。Agent 喺當前基礎上迭代，唔係從頭嚟過。
最終迭代後嘅運動記錄頁同統計頁：
傳統流程裏面，呢三個頁面嘅設計迭代至少要同設計師來回溝通兩三日。
2.8 導出同代碼落地
設計稿確認後，Open Design 支援多種導出格式：
我嘅目標係 uniapp 小程序，需要將 HTML/CSS 原型轉譯做 Vue 單文件組件。Open Design 本身唔原生支援 uniapp 轉碼，但可以利用佢嘅 Agent 適配能力——將導出嘅 HTML 檔案路徑話俾 Agent 知，配合轉碼 Prompt：
Agent 逐頁面轉譯，30 分鐘後輸出咗完整嘅頁面目錄：
踩坑提示：Agent 轉碼時常見問題——
<img>未轉為<image>、px未換算做rpx、CSS 偽元素喺小程序入面支援有限要改用真實節點。建議轉碼後全域搜索呢啲關鍵詞逐一排查。
2.9 關鍵經驗總結
注意：呢 1 個鐘交付嘅係「可運行嘅 UI 骨架」，唔係完整產品。數據持久化、運動計時器邏輯、微信登錄等仍要後續開發。但對於「先整出嚟俾朋友睇嚇效果、收集反饋」呢個目標，完全夠用。
三、橫評：Open Design vs Google Stitch vs Pencil.dev
呢三個工具代表咗 AI 設計領域嘅三種唔同範式。我喺做健身打卡小程序之前都試過一轉，以下係實際體驗後嘅對比。
3.1 定位同架構
3.2 核心能力對比
3.3 工作流對比
Open Design — 問卷驅動 → 方向選擇 → 生成交付
核心優勢係確定性——揀定方向後，調色板同字體棧係固定嘅，唔係俾模型即興發揮。需要品牌一致性嘅項目，呢點係關鍵。
Google Stitch — Prompt → Canvas → Iterate → Export
核心優勢係探索速度——一個下晝嘗試 5 個完全不同嘅 UI 方向。語音迭代能力係三者中最強。
Pencil.dev — Canvas → Agent → Edit → Code
核心優勢係設計-代碼一致性——Agent 讀取嘅係畫布嘅 JSON 數據（座標、token、圖層結構），而唔係截圖猜測，代碼輸出更接近設計意圖。
3.4 適用場景速查
3.5 各自嘅侷限
Open Design：
Google Stitch：
Pencil.dev：
四、未來展望
AI 設計工具正喺度經歷由「生成一張圖」到「交付一個產品」嘅躍遷。三個工具各自代表咗唔同嘅進化方向：
Open Design 代表了工作流範式——唔係俾 AI 代你設計，而係俾 AI 喺一套嚴謹嘅設計工作流入面工作。技能文件化、設計系統 Markdown 化、Agent 可插拔，指向嘅係「可組合嘅設計基礎設施」。
Google Stitch 代表了探索範式——用最快嘅速度將模糊嘅想法變成可視化嘅 UI，然後喺 AI 原生畫布上迭代。語音交互令佢喺「設計頭腦風暴」場景中獨樹一幟。
Pencil.dev 代表了融合範式——設計同代碼唔再係兩個世界，而係同一個工作空間入面嘅兩種視圖。.pen 檔案版本化、MCP 精確上下文、手動編輯唔消耗 token，指向嘅係「設計即代碼」嘅終極形態。
五、相關資料
https://github.com/nexu-io/open-design（Apache 2.0 開源）https://stitch.withgoogle.com/（免費，需要 Google 賬號）https://www.pencil.dev/（桌面 App 免費下載）當 AI 設計工具遍地開花，我們真正需要的不是一個更炫的 Demo，而是一條從"想法"到"可運行代碼"的完整路徑。本文記錄了我用 Open Design 完成一個「健身打卡小程序」從設計到代碼交付的全過程。
一、背景與訴求
最近想做一個健身打卡微信小程序，給自己和朋友用。核心功能就四個：
這種需求不復雜，但以往的流程是：自己畫線框圖 → 找設計師出高保真稿 → 對照設計稿寫前端代碼——前後至少兩三天，如果設計師排不上期，可能一週都搞不定。
而藉助 Open Design，我只需要在交互式問卷中描述清楚需求，AI Agent 就能直接生成可運行的小程序 UI 原型。從想法到可驗證原型，整個鏈路壓縮到 1 小時以內。
後文第三章會詳細對比 Open Design 和 Google Stitch、Pencil.dev 的差異，供不同場景的讀者參考。
二、實戰：健身打卡小程序
2.1 Open Design 是什麼
Open Design 是一個本地優先（Local-first）的開源 AI 設計系統平台（Apache 2.0 許可），核心特點：
2.2 環境準備
Open Design 對運行環境有一定要求：
如果不想折騰環境，也可以直接從 open-design.ai[1] 下載桌面客戶端，免安裝即用。
2.3 安裝與啓動
踩坑提示：安裝過程中可能會卡在依賴下載，這是鏡像問題。把報錯信息拋給 Agent 讓它幫忙換源即可。
首次啓動後，守護進程自動掃描 $PATH，檢測到已安裝的 Agent CLI，加載全部技能和設計系統。Web 界面在 http://localhost:7456 打開：
2.4 新建原型
進入 Web UI，選擇 mobile-app 技能（專門用於移動端原型），填入原型名稱「FitCheck」，精度選擇高保真。
2.5 交互式問卷：先問清楚再動手
這是 Open Design 最讓我驚喜的設計。當我輸入"幫我設計一個健身打卡微信小程序"後，AI 的第一反應不是畫圖，而是彈出一個交互表單：
30 秒的表單填寫，省掉了 30 分鐘的來回修改。
這個設計理念是：先把問題問完，再展示看得見的東西。 不知道你要做什麼風格就開始畫圖，100% 會改到崩潰。
2.6 生成過程：實時進度 + 沙箱預覽
提交問卷後，Agent 開始工作。界面上通過 TodoWrite 實時展示進度：
每個步驟完成後，沙箱 iframe 實時渲染。生成完畢後，我看到的就是這個效果：
首頁有周目標進度環、今日打卡入口、本週完成狀態——一眼看清今天該不該動。
2.7 對話式迭代
第一版出來後，我提了幾個修改：
每次修改 10 秒內就能看到新版本。Agent 在當前基礎上迭代，不是從頭重來。
最終迭代後的運動記錄頁和統計頁：
傳統流程裏，這三個頁面的設計迭代至少要跟設計師來回溝通兩三天。
2.8 導出與代碼落地
設計稿確認後，Open Design 支持多種導出格式：
我的目標是 uniapp 小程序，需要把 HTML/CSS 原型轉譯為 Vue 單文件組件。Open Design 本身不原生支持 uniapp 轉碼，但可以利用它的 Agent 適配能力——將導出的 HTML 文件路徑告知 Agent，配合轉碼 Prompt：
Agent 逐頁面轉譯，30 分鐘後輸出了完整的頁面目錄：
踩坑提示：Agent 轉碼時常見問題——
<img>未轉為<image>、px未換算為rpx、CSS 偽元素在小程序中支持有限需改用真實節點。建議轉碼後全局搜索這些關鍵詞逐一排查。
2.9 關鍵經驗總結
注意：這 1 小時交付的是"可運行的 UI 骨架"，不是完整產品。數據持久化、運動計時器邏輯、微信登錄等仍需後續開發。但對於"先做出來給朋友看看效果、收集反饋"這個目標，完全夠用。
三、橫評：Open Design vs Google Stitch vs Pencil.dev
這三個工具代表了 AI 設計領域的三種不同範式。我在做健身打卡小程序之前都試了一圈，以下是實際體驗後的對比。
3.1 定位與架構
3.2 核心能力對比
3.3 工作流對比
Open Design — 問卷驅動 → 方向選擇 → 生成交付
核心優勢是確定性——選定方向後，調色板和字體棧是固定的，不是讓模型即興發揮。需要品牌一致性的項目，這點是關鍵。
Google Stitch — Prompt → Canvas → Iterate → Export
核心優勢是探索速度——一個下午嘗試 5 個完全不同的 UI 方向。語音迭代能力是三者中最強的。
Pencil.dev — Canvas → Agent → Edit → Code
核心優勢是設計-代碼一致性——Agent 讀取的是畫布的 JSON 數據（座標、token、圖層結構），而不是截圖猜測，代碼輸出更接近設計意圖。
3.4 適用場景速查
3.5 各自的侷限
Open Design：
Google Stitch：
Pencil.dev：
四、未來展望
AI 設計工具正在經歷從"生成一張圖"到"交付一個產品"的躍遷。三個工具各代表了不同的進化方向：
Open Design 代表了工作流範式——不是讓 AI 替你設計，而是讓 AI 在一套嚴謹的設計工作流中工作。技能文件化、設計系統 Markdown 化、Agent 可插拔，指向的是"可組合的設計基礎設施"。
Google Stitch 代表了探索範式——用最快的速度把模糊的想法變成可視化的 UI，然後在 AI 原生畫布上迭代。語音交互讓它在"設計頭腦風暴"場景中獨樹一幟。
Pencil.dev 代表了融合範式——設計和代碼不再是兩個世界，而是同一個工作空間中的兩種視圖。.pen 文件版本化、MCP 精確上下文、手動編輯不消耗 token，指向的是"設計即代碼"的終極形態。
五、相關資料
https://github.com/nexu-io/open-design（Apache 2.0 開源）https://stitch.withgoogle.com/（免費，需 Google 賬號）https://www.pencil.dev/（桌面 App 免費下載）