name: design-compliance-check description: | 設計走查：將生成的 HTML/CSS 頁面對照設計規範文件逐項審查，輸出結構化合規報告。 當用戶說"設計走查"、"走查頁面"、"檢查是否符合設計規範"、"審查設計合規"時觸發。 生成任何 HTML/CSS 頁面後也可主動觸發，確保輸出符合設計規範。 使用者可指定任意設計規範文件路徑，skill 會自動讀取並逐項對照檢查。 agent_created: true

設計走查

將生成的 HTML/CSS 頁面，逐項對照使用者提供的設計規範文件（Markdown）進行系統性審查，輸出結構化合規報告。

觸發條件

以下任意情況時主動觸發： - 使用者說「設計走查」 - 使用者說「走查這個頁面」 - 使用者說「檢查這個頁面是否符合設計規範」 - 頁面生成完成後，主動詢問是否需要設計走查

檢查流程

階段 0：確定規範文件與目標頁面

1. 確認設計規範文件路徑：詢問使用者他們的設計規範 Markdown 檔案路徑。如果使用者未指定，檢查當前專案中是否存在名為 設計規範.md 或 design-spec.md 的檔案。
2. 讀取設計規範文件：完整讀取規範內容。規範應為 Markdown 格式，包含色彩系統、字型、按鈕、表單控制元件、間距、圓角、表格等章節。
3. 確認目標頁面：詢問要檢查的 HTML 檔案路徑，或使用最近生成的頁面。
4. 讀取目標頁面：完整讀取 HTML 檔案及關聯的 CSS 檔案（內聯 style 標籤、外部 .css 檔案）。

階段 1-9：逐項規範對照

根據設計規範文件中的實際內容，按以下維度逐一提取規則並檢查目標頁面：

1. 色彩系統

從規範中提取所有顏色定義（主色、功能色、文字色、中性色、狀態標籤色），逐一檢查頁面中是否使用了正確的色值。

2. 字型規範

從規範中提取字型族、字號層級、字重要求，檢查頁面中的 font-family、font-size、font-weight。

3. 按鈕規範

從規範中提取按鈕尺寸（高度/最小寬度/圓角/內邊距）、各狀態樣式（預設/Hover/Active/停用），檢查頁面中所有按鈕元素。

4. 表單控制元件

從規範中提取輸入框、下拉框、單選/多選框、搜尋框等控制元件的尺寸和狀態樣式，逐一檢查。

5. 間距與圓角

從規範中提取間距階梯、各類元件的圓角值，檢查頁面中的 margin、padding、border-radius。

6. 表格規範

從規範中提取表頭/表體樣式、行高、分割線、操作列顏色，檢查頁面中的 table 相關樣式。

7. 分頁器

檢查頁面中的分頁元件是否符合規範中的按鈕尺寸和各狀態樣式。

8. 側邊欄/導航

如頁面包含側邊欄，檢查選單項高度、文字顏色、縮排層級、選中態等。

9. CSS 變數

檢查頁面是否使用了規範中定義的 CSS 變數（推薦做法），而非硬編碼色值。

重要：以上各階段的"規範要求"均從使用者提供的設計規範文件中動態提取，而非使用預設值。如果規範中缺少某類元件定義，跳過對應檢查。

7w4.net小蔥技能站收錄全網優質技能，值得收藏。

檢查技巧

• 提取實際值：從頁面 CSS 中用 Grep 或直接閱讀提取所有顏色值、字號、間距等
• 逐一比對：將提取的值與規範文件中的要求逐一對照
• 容差範圍：色值需精確匹配（大小寫不敏感）；尺寸值允許 2px 誤差；間距值允許 4px 誤差
• 適用性判斷：頁面不包含的元件型別直接跳過，不做無意義的檢查
• 元件識別：通過 CSS 選擇器或 HTML 結構推斷元件型別
• .btn-primary / button[type="submit"] → 主按鈕
• input[type="text"] → 輸入框
• select / .dropdown → 下拉選擇器
• table / .table → 表格
• aside / .sidebar / .menu → 側邊欄

檢查策略

優先順序

報告格式

每次檢查完畢後，輸出以下格式的結構化報告：

## 🔍 設計走查報告

**檢查頁面**：<檔案路徑>
**規範文件**：<規範文件路徑>
**檢查時間**：<YYYY-MM-DD HH:MM>

### 📊 總覽
| 指標 | 數值 |
|------|------|
| 檢查項總數 | <N> |
| ✅ 通過 | <N> |
| ⚠️ 警告 | <N> |
| ❌ 錯誤 | <N> |
| ➖ 不適用 | <N> |
| **合規率** | **<百分比>%** |

### ❌ 錯誤（P0 - 必須修復）
| # | 規範章節 | 頁面位置 | 當前值 | 規範值 | 說明 |
|---|----------|----------|--------|--------|------|

### ⚠️ 警告（P1 - 建議修復）
| # | 規範章節 | 頁面位置 | 當前值 | 規範值 | 說明 |
|---|----------|----------|--------|--------|------|

### ℹ️ 建議（P2 - 可選最佳化）
| # | 規範章節 | 頁面位置 | 說明 |
|---|----------|----------|------|

### ✅ 通過項
（精簡列出所有通過檢查的專案，按規範章節分組）

完成後的行動

1. 按優先順序排序違規項，標註最需要修復的 TOP 3
2. 對每個 P0 Error 提供具體的修復程式碼（CSS 程式碼塊）
3. 合規率低於 80% 時：建議重新生成頁面而非逐項修復，同時附上生成時需遵循的關鍵規範要點
4. 修復後重新檢查以驗證通過

注意事項

• 完整讀取目標頁面的 HTML + 內聯 CSS + 外部 CSS 檔案
• 如果頁面使用第三方 UI 庫（Element Plus、Ant Design 等），重點檢查自定義覆蓋樣式
• 檢查基於 CSS 原始碼為主（render 環境不可用時）
• 設計規範的格式可能不同（表格、列表、程式碼塊），需靈活解析提取規則
• 如果使用者有多種規範（如移動端+PC端），請使用者明確指定使用哪個

示例對話

使用者：「檢查 result.html 是否符合我的設計規範」

Skill 響應： 1. 詢問設計規範文件路徑 2. 讀取規範和頁面 3. 逐項對比 4. 輸出合規報告 5. 提供修復建議

這個 Skill 整體質量良好，功能專注於設計規範審查，檢查維度覆蓋全面，報告格式清晰易讀。它能幫助使用者發現頁面與設計規範之間的偏差，並按嚴重程度排序問題，提供具體修復建議。優點是流程規範、輸出結構化、考慮實際容差；不足之處是使用門檻略高，新手需要一定時間理解如何準備規範文件和執行檢查。總體而言，是一個實用且經過思考設計的質量檢查工具。