Stitch 設計品味 — 語義設計系統技能
概觀
此技能可針對 Google Stitch 螢幕生成，產生最佳化的 DESIGN.md 檔案。它將經過實戰驗證的 anti-slop 前端工程規範，翻譯成 Stitch 原生的語義設計語言 — 以描述性、自然語言的規則，搭配精確的數值，讓 Stitch 的 AI 代理能解讀並產出高品質、非一般的介面。
產生的 DESIGN.md 作為單一事實來源，用於提示 Stitch 生成符合精心策劃、高能動性設計語言的新螢幕。Stitch 透過「視覺描述」（Visual Descriptions）來解讀設計，並以特定的顏色值、字型規格和元件行為作為支援。
先決條件
- 透過 labs.google/stitch 存取 Google Stitch
- （可選）Stitch MCP Server，用於與 Cursor、Antigravity 或 Gemini CLI 進行程式化整合
目標
產生一個 DESIGN.md 檔案，其中編碼以下內容：
- 視覺氛圍 — 情緒、密度與設計哲學
- 色彩校準 — 中性色、強調色及禁止使用的模式（含十六進位色碼）
- 排印架構 — 字型堆疊、尺寸層級與反模式
- 元件行為 — 按鈕、卡片、輸入框及其互動狀態
- 佈局原則 — 網格系統、間距哲學、響應式策略
- 動畫哲學 — 動畫引擎規格、彈簧物理、持續微互動
- 反模式 — 明確列出被禁止的 AI 設計陳腔濫調
分析與綜合指令
1. 定義氛圍
評估目標專案的意圖。使用品味光譜中富有表現力的形容詞：
- 密度：「畫廊般空曠」(1–3) → 「日常應用平衡」(4–7) → 「駕駛艙密集」(8–10)
- 變異性：「可預測的對稱」(1–3) → 「偏移不對稱」(4–7) → 「藝術性混亂」(8–10)
- 動態：「靜態克制」(1–3) → 「流暢 CSS」(4–7) → 「電影級編排」(8–10)
預設基準：變異性 8、動態 6、密度 4。根據使用者描述的氛圍動態調整。
2. 映射色板
對每種顏色提供：描述性名稱 + 十六進位色碼 + 功能角色。
強制約束：
- 最多 1 種強調色。飽和度低於 80%
- 嚴格禁止「AI 紫色/藍色霓虹」美學 — 沒有紫色按鈕光暈，沒有霓虹漸層
- 使用絕對中性基底（Zinc/Slate）搭配高對比度的單一強調色
- 整個輸出從頭到尾只使用一種色板 — 不允許冷暖灰色波動
- 絕不使用純黑（
#000000）— 使用近似黑色、Zinc-950 或 Charcoal
3. 建立排印規則
- 展示/標題： 字距緊湊，尺寸受控。不張揚。透過粗細和顏色建立層級，而非僅靠巨大的字體尺寸
- 內文： 放鬆的行距，每行最多 65 個字元
- 字型選擇： 在進階/創意情境中禁止使用
Inter。強制使用獨特字型：Geist、Outfit、Cabinet Grotesk或Satoshi - 襯線字體禁令： 禁止使用通用襯線字體（
Times New Roman、Georgia、Garamond、Palatino）。如果編輯/創意情境需要襯線字體，僅可使用特色現代襯線字體：Fraunces、Gambarino、Editorial New或Instrument Serif。在儀表板或軟體 UI 中始終禁止使用襯線字體 - 儀表板約束： 僅使用無襯線字體配對（
Geist+Geist Mono或Satoshi+JetBrains Mono） - 高密度覆寫： 當密度超過 7 時，所有數字必須使用等寬字體
4. 定義英雄區塊
英雄區塊是第一印象，必須具有創意、引人注目，且絕不流於俗套：
- 內嵌圖片文字： 在標題的文字或字母之間嵌入小尺寸、符合情境的照片或視覺元素。圖片以字體高度內嵌、圓角，作為視覺標點。這是標誌性的創意手法
- 不重疊： 文字不得與圖片或其他文字重疊。每個元素佔據自己清晰的空間區域
- 無填充文字： 禁止使用「向下滑動查看」、「向下滑」、滾動箭頭圖示、彈跳角括號。內容應自然吸引使用者
- 不對稱結構： 當變異性超過 4 時，禁止使用置中英雄區塊佈局
- CTA 約束： 最多一個主要 CTA。無次要的「了解更多」連結
5. 描述元件樣式
對每種元件類型，描述其形狀、顏色、陰影深度和互動行為：
- 按鈕： 按壓狀態時有觸覺式回饋。無霓虹外光暈。無自訂滑鼠游標
- 卡片： 僅在高度能傳達層級時使用。將陰影色調調整為背景色調。對於高密度佈局，以邊框頂部分隔線或負空間取代卡片
- 輸入框/表單： 標籤位於輸入框上方，輔助文字可選，錯誤文字位於下方。使用標準間距
- 載入狀態： 符合佈局尺寸的骨架載入器 — 無通用圓形旋轉器
- 空狀態： 精心設計的組合，指示如何填充資料
- 錯誤狀態： 清晰、內聯的錯誤回報
6. 定義佈局原則
- 無重疊元素 — 每個元素佔據自己清晰的空間區域。無絕對定位的內容堆疊
- 當變異性超過 4 時，禁止使用置中英雄區塊 — 強制使用分割畫面、左對齊或不對稱留白
- 禁止使用通用的「3 張等寬卡片水平排列」功能列 — 使用 2 欄鋸齒形、不對稱網格或水平滾動
- 使用 CSS Grid 而非 Flexbox 數學計算 — 絕不使用
calc()百分比技巧 - 使用最大寬度約束來包含佈局（例如，置中 1400px）
- 全高區塊必須使用
min-h-[100dvh]— 絕不使用h-screen（iOS Safari 災難性跳躍）
7. 定義響應式規則
每個設計都必須在所有視口中正常運作：
- 手機優先折疊（< 768px）： 所有多欄佈局折疊為單欄。無例外
- 無水平滾動： 手機上的水平溢位是關鍵性失敗
- 字型縮放： 標題透過
clamp()縮放。內文最小1rem/14px - 觸控目標： 所有互動元素最小
44px點擊目標 - 圖片行為： 內嵌字型圖片（文字之間的照片）在手機上堆疊在標題下方
- 導航： 桌面水平導航折疊為簡潔的手機選單
- 間距： 垂直區塊間距按比例縮小（
clamp(3rem, 8vw, 6rem)）
8. 編碼動畫哲學
- 預設彈簧物理：
stiffness: 100, damping: 20— 高級、有份量的感覺。無線性緩動 - 持續微互動： 每個活動元件都應有無限循環狀態（脈衝、打字機、浮動、微光）
- 交錯編排： 切勿一次性掛載列表 — 使用級聯延遲實現瀑布式揭示
- 效能： 僅透過
transform和opacity進行動畫。絕不對top、left、width、height進行動畫。僅在固定偽元素上使用紋理/雜訊濾鏡
9. 列出反模式（AI 特徵）
將這些編碼為 DESIGN.md 中明確的「絕對不要做」規則：
- 任何地方都不能使用 emoji
- 不能使用
Inter字體 - 不能使用通用襯線字體（
Times New Roman、Georgia、Garamond）— 僅在需要時使用特色現代襯線字體 - 不能使用純黑（
#000000） - 不能使用霓虹/外光暈陰影
- 不能使用過度高飽和的強調色
- 不能在大型標題上使用過多的漸層文字
- 不能使用自訂滑鼠游標
- 不能有重疊元素 — 始終保持清晰的空間分離
- 不能使用 3 欄等寬卡片佈局
- 不能使用通用名稱（「John Doe」、「Acme」、「Nexus」）
- 不能使用虛假的整數（
99.99%、50%） - 不能使用 AI 文案陳腔濫調（「Elevate」、「Seamless」、「Unleash」、「Next-Gen」）
- 不能使用填充 UI 文字：「向下滑動查看」、「向下滑」、滾動箭頭、彈跳角括號
- 不能使用損壞的 Unsplash 連結 — 使用
picsum.photos或 SVG 頭像 - 不能使用置中英雄區塊（針對高變異性專案）
輸出格式（DESIGN.md 結構）
# 設計系統：[專案標題]
## 1. 視覺主題與氛圍
（對情緒、密度、變異性和動態強度的富有表現力的描述。
範例：「一個克制、畫廊般空曠的介面，具有自信的不對稱佈局
和流暢的彈簧物理動畫。氛圍在臨床感中帶有溫暖 — 就像一個
光線充足的建築工作室。」）
## 2. 色板與角色
- **畫布白** (#F9FAFB) — 主要背景表面
- **純白表面** (#FFFFFF) — 卡片和容器填充
- **炭灰墨** (#18181B) — 主要文字，Zinc-950 深度
- **柔和鋼** (#71717A) — 次要文字、描述、元資料
- **低語邊框** (rgba(226,232,240,0.5)) — 卡片邊框，1px 結構線
- **[強調色名稱]** (#XXXXXX) — 單一強調色，用於 CTA、活動狀態、焦點環
（最多 1 種強調色。飽和度 < 80%。無紫色/霓虹。）
## 3. 排印規則
- **展示：** [字體名稱] — 字距緊湊，尺寸受控，粗細驅動層級
- **內文：** [字體名稱] — 放鬆的行距，65ch 最大寬度，中性次要顏色
- **等寬：** [字體名稱] — 用於程式碼、元資料、時間戳記、高密度數字
- **禁止使用：** Inter、進階情境中的通用系統字體。儀表板中禁止使用襯線字體。
## 4. 元件樣式
* **按鈕：** 平面，無外光暈。活動時有觸覺 -1px 位移。主要按鈕使用強調色填充，次要按鈕使用幽靈/外框樣式。
* **卡片：** 寬大的圓角 (2.5rem)。擴散的低語陰影。僅在高度有助於傳達層級時使用。高密度：改用邊框頂部分隔線。
* **輸入框：** 標籤在上方，錯誤在下方。焦點環使用強調色。無浮動標籤。
* **載入器：** 完全符合精確佈局尺寸的骨架微光效果。無圓形旋轉器。
* **空狀態：** 精心設計的組合式構圖 — 不只是「無資料」文字。
## 5. 佈局原則
（以網格優先的響應式架構。英雄區塊採用不對稱分割。
小於 768px 時嚴格折疊為單欄。最大寬度包含。
無 flexbox 百分比數學計算。寬敞的內部間距。）
## 6. 動畫與互動
（所有互動元素使用彈簧物理。交錯級聯揭示。
活動儀表板元件上的持續微循環。僅限硬體加速
變換。CPU 密集型動畫使用隔離的客戶端元件。）
## 7. 反模式（禁止）
（明確的禁止模式列表：無 emoji、無 Inter、無純黑、
無霓虹光暈、無 3 欄等寬網格、無 AI 文案陳腔濫調、
無通用佔位符名稱、無損壞的圖片連結。）
最佳實踐
- 有描述性：「深炭灰墨 (#18181B)」— 而不僅僅是「深色文字」
- 有功能性： 解釋每個元素的用途
- 保持一致： 整個文件使用相同的術語
- 精確： 在括號中包含確切的十六進位色碼、rem 值、像素值
- 有主見： 這不是中性的範本 — 它強制執行特定的高級美學
成功秘訣
- 從氛圍開始 — 在詳述標記之前先理解氛圍
- 尋找模式 — 識別一致的間距、尺寸和樣式
- 語義思考 — 根據用途而非僅僅外觀來命名顏色
- 考慮層級 — 記錄視覺重量如何傳達重要性
- 編碼禁令 — 反模式與規則本身同樣重要
應避免的常見陷阱
- 使用未經轉譯的技術行話（例如「rounded-xl」而非「寬大的圓角」）
- 遺漏十六進位色碼或僅使用描述性名稱
- 忘記設計元素的功能角色
- 氛圍描述過於模糊
- 忽略反模式列表 — 這些正是讓輸出變得高級的關鍵
- 預設使用通用「安全」設計，而非強制執行策劃過的美學