你定方向——讓 agent 幹生產
你定系統和標準,agent 算繪畫面、狀態、變體、高保真稿。少推方塊,多決定什麼叫好。
一句話
Open Design 是不會累的生產助手:你定義設計系統、把控品味;agent 產生其餘的,貼合系統、就在你的儲存庫裡。
設計師怎麼用 Open Design
- 01
把系統編碼
把品牌變成一份 DESIGN.md——字級體系、顏色、間距、元件、語氣。這是 agent 遵守的事實來源。
- 02
產生長尾
那些你本來要手搭的畫面、狀態、變體——agent 貼合系統算繪,無聊的 80% 幾分鐘搞定。
- 03
指揮並打磨
用語言點評——「收緊間距、空狀態做暖一點」。你保留最終決定權,agent 做迭代。
設計師能指揮什麼
原型 閱讀完整提示 → Web Prototype Taste 編輯風格
極簡編輯風格網頁原型。暖色單色調畫布,襯線標題配無襯線內文,1px 細線邊框,柔和粉彩色塊,大量留白,微妙動效。
原型 閱讀完整提示 → Web Prototype Taste Brutalist
瑞士工業印刷風格網頁原型。新聞紙畫布、黑色粗體字、溢出式數字、細線網格分隔、危險紅強調色、ASCII 語法裝飾。源自 Leonxlnx/taste-skill `brutalist-skill`(瑞士工業印刷模式)。
原型 閱讀完整提示 → 行動端引導
多螢幕行動引導流程,呈現為三個並排的手機框架——啟動頁、價值主張、登入頁。包含狀態列、滑動指示點和主要CTA按鈕。適用於需要『行動端引導』、『iOS引導』、『手機註冊』或『移动端引导』的場景。
原型 閱讀完整提示 → 線框草圖
手繪風格的線框圖,包含方格紙背景、麥克筆/鉛筆質感、多標籤頁變體、便利貼註解、圖表佔位符和陰影填充。適用於「線框圖」「草圖線框」「手繪」「低保真」「白板」「草稿」「手繪原型」等需求。
原型 閱讀完整提示 → Web Prototype Taste Soft
Apple 等級柔和風格網頁原型。銀灰/奶油色畫布,雙邊框卡片,嵌套按鈕 CTA,大圓角,彈性動效和環境網格。基於 Leonxlnx/taste-skill 的 soft-skill 及第 4-8 節。
影像 閱讀完整提示 → 圖像海報
用於海報、主視覺和編輯插圖的單圖生成工具。預設使用 gpt-image-2,但支援透過上游工具切換至 Flux、Imagen 或 Midjourney。輸出為儲存到專案資料夾的 PNG/JPEG 檔案。
用 Open Design 做設計 vs. 純手工
| 你需要什麼 | 用 Open Design | 手工設計工具 |
|---|---|---|
| 搭建設計系統 | ●一份 agent 處處套用的 DESIGN.md | 一個每個工具手維護的元件庫 |
| 產出變體和狀態 | ●從 prompt 貼合系統產生 | 複製畫板、逐個調 |
| 高保真稿 | ●算繪成真實 HTML,不是扁平 mockup | 工程還要重建一遍的像素活 |
| 保持一致 | ●一套系統、自動強制 | 靠人工自律,時間一長就跑偏 |
| 交接 | ●產物即程式碼——沒有翻譯斷層 | 規格文件和標註 |
agent 從指揮算繪出的高保真、貼合系統的作品。挑一個接近你風格的,打磨它。
設計師常見問題
-
01 這會取代我嗎?
不會——它取代的是苦工。你定系統和品味,agent 幹重複生產,你把時間花在只有你能做的決定上。
-
02 我怎麼把控樣子?
你的 DESIGN.md 就是契約。agent 在其中算繪,你用語言點評直到對為止。
-
03 產出可編輯/真實嗎?
是真實的 HTML/CSS,不是扁平匯出——直接帶進生產,而不是被重建。
-
04 可以用哪些 agent?
Claude Code、Codex、Cursor Agent、Gemini CLI 等一方轉接,自帶 provider 金鑰。
今晚就指揮你的下一個設計
給儲存庫點個 star、裝上 Open Design,讓 agent 幹生產、你來把控品味——在你本來就用的 agent 裡。