C✳CODEZ.WIN
🌐 繁體中文

Skill 多語言閱讀指南

frontend-design-review用途、用法與原始來源

審核並創建具有獨特性、生產級的前端介面,確保高設計品質和設計系統合規性。評估基於三大支柱:流暢的洞察到行動、精湛的工藝和值得信賴的構建。適用範圍:PR審核、設計審核、可訪問性審核、設計系統合規性檢查、創意前端設計、UI程式碼審核、元件審核、響應式設計檢查、主題測試以及創建令人印象深刻的UI。不適用於:後端API審核、資料庫模式審核、基礎架構或DevOps工作、不含UI的純業務邏輯或非前端程式碼。

原文擷取時間:

來源儲存庫
microsoft/skills
SKILL.md
.github/skills/frontend-design-review/SKILL.md
儲存庫 Star
3,157
儲存庫最近更新
2026-10-31
能力分類
開發
最近採集時間

授權:MIT

流程片段用來協助閱讀上游說明。本頁沒有執行第三方 Skill,不屬於實測評測。

下面的用途與操作片段來自上游文件,由本站整理並翻譯,和另行標示的 Codez 編輯分析分開呈現。

這個 Skill 能做什麼

審核並創建具有獨特性、生產級的前端介面,確保高設計品質和設計系統合規性。評估基於三大支柱:流暢的洞察到行動、精湛的工藝和值得信賴的構建。適用範圍:PR審核、設計審核、可訪問性審核、設計系統合規性檢查、創意前端設計、UI程式碼審核、元件審核、響應式設計檢查、主題測試以及創建令人印象深刻的UI。不適用於:後端API審核、資料庫模式審核、基礎架構或DevOps工作、不含UI的純業務邏輯或非前端程式碼。

如何使用:上游操作流程

設計系統工作流程

查看 Storybook/元件庫中的元件,以了解其 API 和用法。使用 Figma 開發模式取得精確的規格說明(間距、標記、屬性)。使用設計系統元件和設計標記進行實現。將實現與 Figma 設計進行比較。

原文片段 · L54 ↗

審核流程

確定使用者任務;檢查設計系統是否符合模式;評估美學方向;確定範圍(組件、功能或流程)。

原文片段 · L72 ↗

核心原則

任務完成:最少點擊次數。每個螢幕都回答「我能做什麼?」和「接下來會發生什麼?」操作層級:1-2每個視圖的主要操作。次要操作逐步展開。引導:介紹時解釋各項功能。智慧預設值優於配置。導航:清晰明了entry/exit積分。Back/cancel隨時可用。深入探索的線索。

原文片段 · L82 ↗

環境與相依需求

本次未從該檔案選出獨立的環境需求片段,不代表無須相依套件。請繼續核對儲存庫的安裝說明和引用檔案。

限制與結果檢查

2品質即工藝

設計系統合規性:符合 Figma 規範,使用設計標記;美學方向:獨特的字體、協調的色彩、精心設計的動態效果。

原文片段 · L99 ↗

開始使用前

  1. 先核對支援的 Agent 宿主和儲存庫安裝說明。保留完整 Skill 目錄及其引用的腳本、資源和文件,只複製 SKILL.md 可能遺漏相依需求。
  2. 向 Agent 提供實際輸入、預期輸出和驗收標準。呼叫方式與可用工具取決於宿主環境,本站不假定存在通用的安裝指令。
  3. 先在暫存專案或輸入副本上試用。涉及修改檔案、遠端服務或計費資源的操作,應逐項核對後再授權。
  4. 依照原文檢查項目和自己的需求驗證輸出。成功觸發或儲存庫 Star 較高,都不能證明結果正確。

Skill 檔案與目錄格式規範 ↗

繼續閱讀原始文件

翻譯與介紹範圍

本頁從固定版本的上游 SKILL.md 整理用途與操作片段,譯文使用輔助翻譯。它不是完整手冊,也不代表經過相容性實測;使用前請核對原文及其引用檔案。

介紹依據下方列出的固定版本;目前儲存庫動態和目錄擷取時間分開呈現。

固定版本來源
閱讀原文 ↗
原文擷取時間
來源提交版本
00d66a64919edca5bca2c673373444e36a4b5461
原文 SHA-256
639b68cdc6f9b4cdd66a111851555afee2eb82d4de37bf9cbad3be845bb00c2d
返回完整 Skill 目錄