菜单
Compare DTCG design token spec against Figma Library variables. Use when: compare/diff/check + tokens/spec/DTCG + Figma/variables/library, or when auditing token drift between code and Figma.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | spec-compare |
| description | Compare DTCG design token spec against Figma Library variables. Use when: compare/diff/check + tokens/spec/DTCG + Figma/variables/library, or when auditing token drift between code and Figma. |
Compare a DTCG (W3C Design Token Community Group) JSON spec against Figma Library variables. Categorizes differences and recommends sync actions. Pairs with token-sync for the actual sync step.
reverse_sync_tokens directly after load_toolset("tokens").ping → verify plugin connection
If ping fails (plugin not connected): STOP. Do not fall back to other MCP servers. Tell user: open Figma → Plugins → FigCraft → wait for connection, then retry.
Ask the user for the DTCG JSON file path (e.g., tokens/design-tokens.json).
load_toolset("tokens") → enable DTCG token tools
list_tokens(filePath: "...") → parse and preview DTCG tokens
Optional: filter by type (e.g., type: "color") to focus on specific token categories.
diff_tokens(filePath: "...", collectionName: "...") → compare DTCG vs Figma variables
Returns tokens categorized as:
Present a structured diff report:
📊 Token Comparison:
- In-sync: X tokens
- DTCG-ahead: Y tokens (DTCG has updates)
- Figma-ahead: Z tokens (Figma has updates)
- Missing in Figma: N tokens
- Missing in DTCG: M tokens
Recommend actions for each category:
sync_tokens to push DTCG values to Figmareverse_sync_tokens to export Figma values to DTCG, or update DTCG manuallysync_tokens to create new variablesAsk the user if they want to sync to resolve differences. If yes, hand off to the token-sync workflow.
spec-compare → token-sync
(audit) (sync)
Run spec-compare first to understand the gap, then token-sync to resolve it.
Import HTML or a web page into Figma using FigCraft's native import_html converter. Use when: html to figma, import html, import webpage, capture static page, convert HTML into editable Figma layers. For pixel-perfect live web capture, use official Figma MCP generate_figma_design as a visual reference when available.
Lint Figma designs for compliance and auto-fix violations. Use when: lint/fix/check compliance/clean up + design/page/screen, or when automated quality fixes are needed. Supports both quick one-step lint and granular multi-step workflows.
Android platform design rules — screen dimensions, Material Design 3, Roboto typography, navigation patterns. Use when: Android/Material + design/screen/app, or when creating Android-specific Figma designs.
iOS platform design rules — screen dimensions, safe areas, SF Pro typography, navigation patterns, HIG conventions. Use when: iOS/iPhone/iPad + design/screen/app, or when creating iOS-specific Figma designs.
Create UI in Figma using FigCraft declarative tools (create_frame, create_text, create_component). Use when: create/design/build/make + Figma/UI/screen/page/component/button/variant WITHOUT an existing design system. IMPORTANT: Use create_frame for screens, create_component for reusable components. Never use use_figma for UI creation. Do NOT use when assembling screens from existing design system (use figcraft-generate-design) or building a full design system (use figcraft-generate-library).
Generate documentation for Figma components — properties, variants, usage guidance, and structural health audit. Use when: document/describe/catalog + components/variants/library, or when auditing component quality for design system maintenance.