設計規範文檔怎麼寫：設計系統組件文檔提示詞（用途、變體、狀態、用法規範、Do / Don't、無障礙與開發說明）
團隊在建設計系統（Design System）或組件庫、需要為按鈕、輸入框、彈窗、卡片等組件寫使用文檔時用：生成結構統一的組件文檔，讓設計師知道什麼時候用、怎麼用，讓開發知道有哪些屬性和狀態，減少各頁面「各做各的」。
通用大模型 對話模型通用
你是一名設計系統負責人，同時懂前端。你知道組件文檔最重要的部分不是「它長什麼樣」，而是「什麼時候用它、什麼時候不要用它」。 組件名稱：[組件名稱] 組件的作用與使用場景：[組件作用] 現有的變體與樣式（尺寸、類型、顏色層級）：[現有變體] 產品中已經出現的不一致用法（如有）：[不一致用法] 技術棧（如 React / Vue / 小程式）與已有的組件屬性：[技術棧] 品牌與無障礙要求：[品牌與無障礙] 請寫出組件文檔： 1. 概述：一句話說明組件是什麼、解決什麼問題。 2. 何時使用 / 何時不用：各 3–5 條，並指出應該改用哪個組件（如「需要用戶確認危險操作時使用對話框，不要用 Toast」）。 3. 結構（Anatomy）：組件由哪些部分組成，各部分是否必需。 4. 變體（Variants）：每種類型、尺寸的用途與選擇規則（如一個頁面最多一個主按鈕）。 5. 狀態（States）：預設、懸停、按下、聚焦、禁用、加載中、錯誤等，每個狀態的表現與觸發條件。 6. 用法規範：內容與文案規則（按鈕文字用動詞、長度限制）、佈局與間距、與其他組件的組合方式。 7. Do / Don't：至少 4 組正反例，用文字描述。 8. 無障礙：鍵盤操作、焦點樣式、讀屏標籤、對比度要求、點擊區域大小。 9. 開發說明：屬性（Props）表——屬性名 | 類型 | 預設值 | 說明；事件；與設計稿變體的對應關係。 10. 變更記錄模板。 約束：屬性與技術細節以我提供的為準，不確定的標「待開發確認」；規範要具體到能判斷對錯，不寫「保持美觀」這類空話。
高亮處換成你自己的內容：[組件名稱]、[組件作用]、[現有變體]、[不一致用法]、[技術棧]、[品牌與無障礙]
ChatGPT Plus 充值
已被複製 0 次
使用說明
怎麼填變量：[不一致用法] 很有價值，比如「有的頁面危險操作用紅色按鈕，有的用灰色」，文檔會針對這些問題寫出明確規則。[技術棧] 和 [現有變體] 寫清楚，開發說明部分才會貼近實際代碼。
常見坑：
- 文檔只有組件截圖和顏色值，沒有「何時使用」，結果大家還是憑感覺用；
- 狀態寫得不全，尤其是加載中和禁用狀態，開發只能自己發揮；
- 設計稿裏的變體名稱和代碼裏的屬性名對不上，交接時互相猜。
迭代追問：「按同樣的結構為輸入框組件寫一份文檔」「檢查我們現有的 10 個頁面，找出不符合按鈕規範的地方」「把這份文檔整理成適合放進 Storybook 的說明」。
示例輸出
示例，僅供參考（組件：按鈕 Button）
何時不用
- 需要跳轉到其他頁面且不是主要操作時，用文字連結而不是按鈕
- 一組互斥選項的切換，用分段控件（Segmented Control）
變體
| 類型 | 用途 | 規則 |
|---|---|---|
| 主按鈕 | 頁面最主要的操作 | 每個視圖最多 1 個 |
| 次按鈕 | 次要操作 | 可與主按鈕並列，放在左側 |
| 危險按鈕 | 刪除等不可逆操作 | 必須配合二次確認 |
Do / Don't：Do——「儲存草稿」；Don't——「確定」「OK」（看不出點了會發生什麼）
同款作品
用這條提示詞做出來的作品；原作者會因此獲得積分
還沒有同款，來做第一個。
0 條評論
還沒有評論，來搶沙發～