以一句話的速度做原型
把腦中的流程描述出來，讓 agent 拼出真實可點擊的原型——多個畫面、統一樣式、可互動——直接算繪成 HTML，能開啟、能分享、能交給工程。
一句話
Open Design 是你正在用的編碼 agent 的設計層。對原型來說，就是在一次對話裡從一段想法走到可導覽、有樣式的原型——不用設計工具、不用匯出、沒有交接斷層。
用 Open Design 做原型的流程
- 01
描述流程
用白話告訴 agent 你要做什麼——「一個導引流程，含歡迎頁、方案選擇頁和確認頁」。Open Design 會載入原型 skill，讓 agent 知道要產出多個畫面，而不是單頁。
- 02
產生帶樣式的畫面
agent 套用 Open Design 的設計系統和原型範本，每個畫面共用字體、間距和元件，而不是看起來像草稿。你得到的是一套連貫的畫面，不是互不相干的 mockup。
- 03
接上互動
按鈕能跳轉、分頁能切換、彈窗能開啟。原型算繪成自包含的 HTML，在任何瀏覽器裡都像真東西一樣運作——檢視它不需要任何原型工具帳號。
- 04
迭代並交付
靠跟 agent 對話來改——「把方案選擇頁改成三欄版面」。因為產物就在你的專案裡，設計和最終程式碼共用同一份事實來源，弭平了設計到工程的交接斷層。
你能做出哪些原型
原型 閱讀完整提示 → 網頁原型
通用桌面網頁原型。透過複製種子檔案 `assets/template.html` 並貼上 `references/layouts.md` 中的版面配置生成單一獨立 HTML 檔案。適用於著陸頁、行銷頁、文件或 SaaS 頁面的預設選項。
原型 閱讀完整提示 → 行動應用程式
在頁面中渲染於像素級精確的 iPhone 15 Pro 框架內的行動應用程式畫面。透過複製種子檔案 assets/template.html 並貼上 references/layouts.md 中的一個畫面原型來建構。當需求提到「行動應用程式」、「iOS 應用程式」、「Android 應用程式」、「手機畫面」或「應用程式 UI」時使用。
原型 閱讀完整提示 → SaaS 著陸頁
單頁 SaaS 著陸頁面，包含主視覺區、功能特色、社會證明、定價方案與行動呼籲。遵循當前 DESIGN.md 的顏色/排版/版面配置規範。觸發關鍵字："saas landing"、"marketing page"、"product landing"。
原型 閱讀完整提示 → 遊戲化應用程式
三屏手機原型展示遊戲化應用介面：封面海報、每日任務與經驗值進度條、任務詳情。適用於遊戲化應用、習慣追蹤、RPG 風格生活應用、升級系統、每日任務、XP/連擊應用等需求。
原型 閱讀完整提示 → 員工入職
單頁新進員工入職計畫——第一週日程安排、夥伴+主管介紹、學習路徑、設備清單以及「完成標誌」目標。當需求提及「入職」、「新進員工」、「第一週計畫」或「onboarding」時使用。
原型 閱讀完整提示 → Kami Landing
產生印刷級單頁紙質文件——溫暖羊皮紙底色、墨藍強調色、單一襯線字重，無斜體，無冷灰。輸出呈現專業白皮書或工作室單頁效果，而非應用程式 UI。原生多語言支援（EN · zh-CN · ja）。單個獨立 HTML 檔案，零相依性。
用 Open Design 做原型 vs. 老方法
| 你需要什麼 | 用 Open Design | 傳統原型工具 |
|---|---|---|
| 從想法到第一個畫面 | ●在你本來就開著的 agent 裡一句話 | 開啟另一個工具、新建檔案、手動拖框 |
| 多個相互連結的畫面 | ●成套產生，共用樣式、導覽可用 | 每個畫面手動繪製並手動連線 |
| 一致的視覺系統 | ●從可重複使用的設計系統裡取，由 agent 套用 | 每個檔案重做一遍，或純靠手維護 |
| 可分享的成果 | ●自包含 HTML——任何瀏覽器都能開啟，不需帳號 | 檢視者要佔一個席位或要廠商工具的分享連結 |
| 通往真實程式碼的路徑 | ●產物在你的儲存庫裡，設計與程式碼同源 | 一次交接之後從零重建 |
| 成本與綁定 | ●開源、自帶金鑰、本機執行 | 按席位訂閱、廠商代管、匯出受限 |
下面每一個都是從一句 prompt 開始、算繪成可點擊產物的。挑一個跟你想法接近的範本，描述你的改法，agent 幫你改。
原型常見問題
-
01 用 Open Design 做原型需要 Figma 這類設計工具嗎？
不需要。Open Design 在你的編碼 agent 裡執行，把原型算繪成 HTML。你用語言描述流程，agent 產出畫面。沒有額外的畫布工具要學或要付費。
-
02 產出的是可互動原型還是靜態 mockup？
可互動。導覽、分頁、彈窗都能用，因為輸出是真實的 HTML 和 CSS。你能在任何瀏覽器裡像使用者一樣點擊體驗。
-
03 可以用哪些 agent？
Open Design 支援 Claude Code、Codex、Cursor Agent、Gemini CLI 等十多個第一方轉接器。你自帶 provider 金鑰，沒有任何東西替你代管。
-
04 原型能變成真正的產品嗎？
這正是重點。產物就在你的專案裡，同一套設計系統和元件會帶進正式環境程式碼，而不是交接後被丟棄。
今晚就把下一個想法做成原型
給儲存庫點個 star、裝上 Open Design，在你本來就用的 agent 裡，把下一個「要是……」變成能點擊的東西。