從規格到前端，中間沒有交接
把 agent 指向一份 DESIGN.md 和一段描述，它就寫出貼合系統的真實前端程式碼——元件、畫面、儀表板——直接在你的專案裡。沒有標註、不用「等設計」。
一句話
Open Design 把設計系統變成機器可讀，弭平設計到工程的斷層：寫你程式碼的同一個 agent 套用系統、算繪出真實 UI。
工程師怎麼用 Open Design
- 01
讀系統，不讀標註
DESIGN.md 就在儲存庫裡。agent 像讀程式碼庫其餘部分一樣讀它——沒有匯出的規格要解讀。
- 02
產生貼合系統的 UI
描述畫面或元件，agent 寫出已經符合系統的前端。原型、後台儀表板、內部工具——幾分鐘搞定。
- 03
它本就是你的程式碼
產出是儲存庫裡的 HTML / 框架程式碼，能在 PR 裡 review。「設計」和「實作」之間沒有翻譯步驟。
工程師能產生什麼
原型 閱讀完整提示 → 文件頁面
文件頁面 — 側邊導覽、可捲動內文和目錄。當需求提到'文件'、'指南'、'API 參考'或'教學'時使用。
原型 閱讀完整提示 → 工程運維手冊
工程運維手冊 — 包含服務概覽、告警表、儀表板連結、常用指令操作步驟、值班輪換和事故回應清單。適用於需要運維文件、值班指南、SRE 文件或運維手冊的場景。
簡報 閱讀完整提示 → Html Ppt 知識架構藍圖
奶油藍圖架構 deck — 奶油紙 #F0EAE0 底色 + 單一鏽紅 #B5392A 高亮、48px 藍圖網格 mask、2px 黑邊硬卡片、pipeline 步驟盒（其中一個抬高）、右側鏽紅 insight callout、Playfair 襯線大字、SVG 虛線回饋環。零漸層零軟陰影，認真且印刷友好。
簡報 閱讀完整提示 → Html Ppt 技術分享
會議 / 內部技術分享簡報 — GitHub-dark 風格、JetBrains Mono 字型、終端程式碼區塊、議程 + 問答頁面。適用於工程簡報、內部分享會、技術研討會演講和程式碼詳解。
原型 閱讀完整提示 → 資料視覺化報告
將 CSV、Excel 或 JSON 資料轉換為精美的視覺化報告頁面。
原型 閱讀完整提示 → 看板
看板/任務面板，包含多個欄位（待辦/進行中/審核中/已完成）、可拖曳樣式的卡片、成員頭像、泳道和頂部篩選列。當需求中提到'kanban'、'task board'、'sprint board'、'trello'、'看板'時使用。
用 Open Design 做前端 vs. 交接式
| 你需要什麼 | 用 Open Design | 設計到開發交接 |
|---|---|---|
| 拿到可開工的設計 | ●一份 agent 直接讀的 DESIGN.md | 一個你手動重新解讀的 Figma 檔案 |
| 符合系統 | ●產生時自動強制 | 對著規格肉眼比、慢慢跑偏 |
| 做內部工具 / 儀表板 | ●prompt → 儲存庫裡貼合系統的前端 | 等設計師，然後做兩遍 |
| review | ●它是程式碼——在 PR 裡 diff | 對著 mockup 像素比對 |
| 成本與鎖定 | ●開源、在你儲存庫裡、本機執行 | 全團隊都要授權的設計工具 |
直接在儲存庫裡產生的、貼合系統的真實前端。挑一個接近你在做的，描述它。
工程常見問題
-
01 我還需要設計師嗎？
品牌和方向需要。但做貼合系統的 UI 和內部工具時，agent 讀 DESIGN.md 直接寫前端——不用交接往返。
-
02 它產出什麼？
儲存庫裡真實的 HTML / 框架程式碼，在 PR 裡可 review——不是你要重寫一遍的 mockup。
-
03 怎麼保持貼合系統？
DESIGN.md 是事實來源；agent 在產生時套用，所以產出無需手動像素核對就符合。
-
04 可以用哪些 agent？
Claude Code、Codex、Cursor Agent、Gemini CLI 等一方轉接，自帶 provider 金鑰。
今晚就產生你的下一個 UI
給儲存庫點個 star、裝上 Open Design，把一份 DESIGN.md 變成前端——在你本來就用的 agent 裡。