name: design-spec-personal description: >- 生成並驗證 UI 設計交付物：可互動 preview.html、annotated.html、tokens.css、spec.json 與 assumptions.log。支援文字、截圖、Sketch、Figma 輸入，以及 mobile-h5/web-pc 平臺；按需載入 universal、內建或使用者匯入的 design profile，執行元件路由、場景模板、token 約束、靜態 QA 和 真實瀏覽器驗收。支援 W3C/Style Dictionary Token 匯入。使用者要求設計稿、原型、UI、頁面設計、視覺稿、互動稿、design、prototype、 mockup、wireframe、hi-fi、設計還原、design token、annotated spec、d2c、Ant Design、antd、 antd-mobile、Arco Design、Arco、中後臺或移動端 H5 時使用。 metadata: release.version: "v0.6.1" release.phase: "icon-quality-gate" release.profile_schema: "2" tags: "design,ui,spec,d2c,prototype,token,figma,sketch,ant-design,arco-design,mobile-h5,web-pc"

design

A unified design skill that produces hi-fi interactive prototypes and implementation-ready specs in a single run. Every output is simultaneously a visual artifact and a precise engineering specification.

What it produces

From any input, always generates the design deliverables plus browser evidence:

How to use this skill

1. Detect your harness. Read the matching reference doc once: - Claude Code (AskUserQuestion, SendUserFile, Claude Preview MCP) → read references/claude.md - Cursor (AskQuestion, cursor-ide-browser MCP) → read references/cursor.md - Codex Agent (functions.*, Codex Browser) → read references/codex.md

2. Load the core methodology. Read system-prompt.md — the L1→L4 pipeline, quality rules, and output generation guidelines.

3. Identify input type. Read the matching handler: - Text description → input-handlers/text.md - Screenshot / image → input-handlers/screenshot.md - Sketch file (.sketch) → input-handlers/sketch.md - Figma URL → input-handlers/figma.md

4. Load the design system. Three-layer stack: universal → standard → brand. Load in order, later layers override earlier ones.

Layer 1 — Universal (progressive load):

Core: - Copy tokens.css and component-tokens.css to the output without preloading their full contents; query only selected token definitions when needed. - Read component-routing.md once as the fallback binding gate.

Load only when the current decision needs it: - Universal component is selected → components.md - Token semantics are unresolved → usage-guidelines.md - Page skeleton is unresolved → layout-patterns.md - A concrete interaction pattern is used → interaction-patterns.md - apple-hig only → macos-patterns.md - Hardcoded platform/SVG/preview constants appear → token-exceptions.md - Functional icons or simulated platform chrome appear → icon-policy.md - Relevant failure pattern only → anti-examples.md - Before visual delivery → critic-checklist.md and visual-critic.md

Layer 2 — Design Standard Profile (load when user specifies a standard, or when platform implies one): - 先讀 design-system/profiles/registry.json，把使用者指定標準按忽略大小寫、合併空白的規則匹配唯一 profile_id 或 alias；未知或衝突時阻斷，不猜測。 - 命中後先讀 profile.json 和 <profile.entry>，按 tier/capabilities 載入，不通過目錄猜能力。禁止在根入口硬編碼新增 profile 的檔案清單。 - Tier 1：讀 semantic/token-map.json、semantic/unmapped-tokens.json 與 tokens.css；元件和佈局使用 universal，未對映語義必須阻斷確認。 - Tier 2：在 Tier 1 基礎上讀取 routing/component-routing.md 和當前平臺 registry；Profile 元件路由是權威來源。 - Tier 3：再讀取 <profile.guide>、深元件規格、templates 和 runtime；Ant Design、Arco Design 屬於 Tier 3。 - 請求的平臺必須存在於 profile.platforms。只有 Profile 宣告對應 capability 時，才要求 component registry、templates 或 runtime。 - Ant Design 舊路徑 design-system/standards/ant-design 僅作相容入口；新增規範只進入 design-system/profiles/<profile_id>/。

When the user supplies W3C Design Tokens or Style Dictionary JSON, create a Tier 1 profile with:

node scripts/create-profile.mjs --profile <profile-id> --name "<name>" \
  --tokens <tokens.json> --register

Review semantic/unmapped-tokens.json before generation. Do not promote a partial profile to stable or infer unresolved semantic roles without user input.

Layer 3 — Brand (load when user specifies a brand): - Read design-system/brand/index.md, then check design-system/brand/<name>/ for matching brand tokens and override standard defaults.

5. Run the pipeline. Follow system-prompt.md through L1 → Scene Engine → design-system load → binding gate → L2 → L3 → L4 → output.

6. Verify and deliver. Run agents/run-pipeline.mjs <project-dir> --strict-measure with Node >= 22. A P0/P1 measurement, including icon provenance/rendering/alignment failure, blocks acceptance. Per your harness reference: serve over HTTP, inspect the measured screenshot, fix errors, rerun, then send file + URL.

Output location

All files go to designs/<project-name>/:

designs/<project-name>/
├── preview.html
├── annotated.html
├── tokens.css
├── spec.json
├── assumptions.log
├── preview.measure-report.json
├── preview.measured.png
└── acceptance.spec.mjs

Invocation examples

7w4.net有更好的技能外掛。

設計一個商品詳情頁，移動端，有加購欄和圖文詳情

從這張截圖還原規格，輸出給 AI coding 工具用

用 Example Brand 設計系統，設計一個入職申請表單頁面

用 Ant Design，設計一個移動端 H5 商品列表頁，支援篩選和排序

用 Ant Design，設計一個 PC 後臺資料包表頁面，含圖表和資料表格

這個技能質量較高，能從文字描述、截圖、設計稿等多種輸入生成高保真互動原型和工程級設計規範，輸出包括 HTML 原型、設計令牌、規格文件和驗收測試。優點是架構嚴謹、質量控制到位，生成的規範可直接用於 AI 開發；不足是設計系統覆蓋以基礎元件為主，複雜場景支援可能有限，且文件分散在多個檔案中，完整理解需要一定時間。整體屬於中上水平的專業設計工具。