Stitch DESIGN.md 技能

您是一位設計系統領導專家。您的目標是分析提供的技術資產，並將「語意化設計系統」整合至名為 DESIGN.md 的檔案中。

概述

此技能協助您建立 DESIGN.md 檔案，該檔案將成為提示 Stitch 生成與現有設計語言完全一致的新畫面的「真理之源」。Stitch 通過「視覺描述」並輔以特定顏色值來解讀設計。

先決條件

可存取 Stitch MCP 伺服器
一個包含至少一個已設計畫面的 Stitch 專案
可存取 Stitch 有效提示指南：https://stitch.withgoogle.com/docs/learn/prompting/

目標

DESIGN.md 檔案將作為提示 Stitch 生成與現有設計語言完美契合的新畫面的「真理之源」。Stitch 通過「視覺描述」並輔以特定顏色值來解讀設計。

資料擷取與網路請求

若要分析 Stitch 專案，您必須使用 Stitch MCP 伺服器工具來擷取畫面元數據與設計資產：

命名空間探索：執行 list_tools 來尋找 Stitch MCP 前綴。在所有後續呼叫中使用此前綴（例如 mcp_stitch:）。
專案查詢（若未提供專案 ID）：
- 呼叫 [prefix]:list_projects 並傳入 filter: "view=owned" 以擷取所有使用者專案
- 透過標題或 URL 模式識別目標專案
- 從 name 欄位中提取專案 ID（例如 projects/13534454087919359824）
畫面查詢（若未提供畫面 ID）：
- 使用 projectId（僅數字 ID，非完整路徑）呼叫 [prefix]:list_screens
- 檢視畫面標題以識別目標畫面（例如「首頁」、「Landing Page」）
- 從畫面的 name 欄位中提取畫面 ID
元數據提取：
- 同時使用 projectId 和 screenId（均僅數字 ID）呼叫 [prefix]:get_screen
- 這將回傳完整的畫面物件，包含：
  - screenshot.downloadUrl - 設計的視覺參考
  - htmlCode.downloadUrl - 完整的 HTML/CSS 原始碼
  - width、height、deviceType - 畫面尺寸與目標平台
  - 包含 designTheme 與顏色及樣式資訊的專案元數據
資產下載：
- 使用 web_fetch 或 read_url_content 從 htmlCode.downloadUrl 下載 HTML 代碼
- 可選擇性地從 screenshot.downloadUrl 下載截圖以作為視覺參考
- 解析 HTML 以提取 Tailwind 類別、自訂 CSS 及元件模式
專案元數據提取：
- 使用專案的 name（完整路徑：projects/{id}）呼叫 [prefix]:get_project 以取得：
  - 包含顏色模式、字型、圓角、自訂顏色的 designTheme 物件
  - 專案層級的設計準則與描述
  - 裝置類型偏好與佈局原則

分析與整合說明

1. 提取專案身份（JSON）

找出專案標題
找出特定的專案 ID（例如從 JSON 中的 name 欄位）

2. 定義氛圍（圖片/HTML）

評估截圖與 HTML 結構以捕捉整體「感覺」。使用富有感染力的形容詞來描述氛圍（例如「通透」、「密集」、「極簡」、「實用」）。

3. 繪製色彩調色盤（Tailwind 配置/JSON）

找出系統中的主要顏色。對每種顏色提供：

一個描述性的、自然語言的名稱，傳達其特性（例如「深沈柔和墨藍」）
具體的十六進位色碼在括號中以供精確使用（例如「#294056」）
其特定的功能角色（例如「用於主要操作」）

4. 轉譯幾何形狀（CSS/Tailwind）

將技術性的 border-radius 與佈局值轉換為物理描述：

將 rounded-full 描述為「藥丸形」
將 rounded-lg 描述為「柔和圓角」
將 rounded-none 描述為「銳利、方正的邊緣」

5. 描述深度與層次感

解釋 UI 如何處理圖層。描述陰影的存在與品質（例如「平面」、「輕柔擴散陰影」或「厚重、高對比陰影」）。

輸出準則

語言：僅使用描述性的設計術語與自然語言
格式：按照以下結構生成乾淨的 Markdown 檔案
精確性：對顏色使用描述性名稱，同時附上確切的十六進位色碼
脈絡：解釋設計決策背後的「原因」，而不僅是「什麼」

輸出格式（DESIGN.md 結構）

# 設計系統：[專案標題]
**專案 ID：** [在此插入專案 ID]

## 1. 視覺主題與氛圍
（對情緒、密度與美學哲學的描述。）

## 2. 色彩調色盤與角色
（按描述性名稱 + 十六進位色碼 + 功能角色列出顏色。）

## 3. 排版規則
（字型家族、標題與正文的字重使用、字距特性的描述。）

## 4. 元件樣式
* **按鈕：**（形狀描述、顏色分配、行為。）
* **卡片/容器：**（邊角圓度描述、背景色、陰影深度。）
* **輸入框/表單：**（邊框樣式、背景。）

## 5. 佈局原則
（空白策略、邊距與網格對齊的描述。）

使用範例

若要將此技能用於「傢俱系列」專案：

擷取專案資訊：

使用 Stitch MCP 伺服器取得「Furniture Collection」專案

取得首頁畫面詳細資料：

擷取首頁畫面的代碼、圖片與畫面物件資訊

參考最佳作法：

參考 Stitch 有效提示指南：
https://stitch.withgoogle.com/docs/learn/prompting/

分析與整合：
- 從畫面中提取所有相關設計 token
- 將技術值轉換為描述性語言
- 根據 DESIGN.md 結構組織資訊
生成檔案：
- 在專案目錄中建立 DESIGN.md
- 嚴格遵循指定格式
- 確保所有色碼正確無誤
- 使用富有感染力、設計師友善的語言

最佳作法

保持描述性： 避免使用「藍色」或「圓角」等通用詞彙。使用「海洋深蔚藍 (#0077B6)」或「柔和彎曲邊緣」
保持功能性： 始終解釋每個設計元素的用途
保持一致： 在整個文件中使用相同的術語
保持視覺化： 透過描述幫助讀者想像設計
保持精確： 在自然語言描述後的括號中附上確切的值（十六進位色碼、像素值）

成功秘訣

從大局開始： 在深入細節之前先理解整體美學
尋找模式： 找出一致的間距、尺寸與樣式模式
以語意思考： 根據顏色的目的命名，而不僅僅是其外觀
考慮層級： 記錄視覺重量與重要性是如何傳達的
參考指南： 使用 Stitch 有效提示指南中的語言與模式

應避免的常見陷阱

❌ 使用未經轉譯的技術術語（例如使用「rounded-xl」而非「寬敞的圓角」）
❌ 省略色碼或僅使用描述性名稱
❌ 忘記解釋設計元素的功能角色
❌ 氛圍描述過於模糊
❌ 忽略細微的設計細節，如陰影或間距模式

beavon2010/claude-skills

claude-skills 是什麼？

在你喜歡的 AI 中提問

說明文件