القائمة
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 المهني
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.
| 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.