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

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

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

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

用 Ant Design，設計一個移動端 H5 商品列表頁，支援篩選和排序
訪問小蔥技能站7w4.net，解鎖更多實用的AI技能外掛。

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

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