[IMPORTANT] Use TaskCreate to break ALL work into small tasks BEFORE starting.
Quick Summary
Goal: Extract structured design context from Figma designs for downstream use by design-spec and planning skills.
Workflow:
- Detect Input — Parse Figma URL, extract file key + node ID
- Select Extraction Method — 4-level fallback chain
- Extract Context — Design tokens, components, layout, typography
- Output Artifact — Structured markdown for design-spec consumption
Key Rules:
Frontend/UI Context (if applicable)
When this task involves frontend or UI changes, MUST READ .claude/skills/shared/ui-system-context.md and the following docs:
Component patterns: docs/project-reference/frontend-patterns-reference.md
Styling/BEM guide: docs/project-reference/scss-styling-guide.md
Design system tokens: docs/project-reference/design-system/README.md
Always try highest-fidelity method first, fallback gracefully
Output must be consumable by design-spec and ui-wireframe-protocol
Keep extraction under 5K tokens per design
Extraction Fallback Chain
Level 1: Official Figma MCP (Best Fidelity)
Check if MCP tools available: look for get_design_context in tool list.
If available:
get_design_context — structured layout, components, tokens, constraintsget_screenshot — visual reference imageget_code_connect_map — map Figma components to code components
Level 2: GLips Figma-Context-MCP (Good Fidelity)
Check if GLips MCP tools available (look for figma-context tools).
If available:
- Extract file metadata, frame structure, component list
- Limited to read-only operations
Level 3: Figma REST API (Manual)
If FIGMA_ACCESS_TOKEN environment variable exists:
- Call
GET /v1/files/{file_key}/nodes?ids={node_id} via bash script
- Parse response for: component names, styles, layout properties
- Limited — no screenshot, no Code Connect
Level 4: Screenshot + ai-multimodal (Always Available)
If no MCP and no API token:
- Ask user via
AskUserQuestion: "Please screenshot the Figma frame and paste here"
- Analyze via
ai-multimodal skill with design extraction prompts
- Extract: approximate colors, fonts, spacing, layout, components
Output Format
Save to team-artifacts/design-specs/{YYMMDD}-figma-extract-{slug}.md:
# Figma Design Extract: {Name}
**Source:** {Figma URL}
**Method:** {MCP Level 1 | MCP Level 2 | REST API | Screenshot}
**Date:** {YYMMDD}
## Design Tokens
| Category | Token | Value |
| ---------- | --------- | -------------------- |
| Color | Primary | {hex} |
| Color | Secondary | {hex} |
| Typography | Heading | {font, size, weight} |
| Spacing | Base | {px} |
## Component Inventory
- **{ComponentName}** — {description}, variants: {list}
## Layout
{ASCII wireframe per ui-wireframe-protocol}
## Responsive
{Breakpoint behavior if detectable}
When to Use
- Figma URL detected in PBI, design-spec, or user prompt
- Called by
design-spec when Figma URL is present
- Called by
planning skill during Design Context Extraction step
When NOT to Use
- No Figma URL present — skip, proceed to
design-spec directly
- Hand-drawn wireframe — use
wireframe-to-spec instead
- Screenshot of existing app — use
design-screenshot instead
See Also
references/figma-mcp-setup.md — MCP server setup guide (created in Phase 09).claude/skills/planning/references/figma-integration.md — integration protocol.claude/hooks/figma-context-extractor.cjs — URL detection hook
1---2name: figma-design-43description: [Frontend] Extract design context from Figma URLs via MCP, REST API, or screenshot fallback. Produces structured design tokens, component inventory, and layout specs for design-spec consumption. Triggers on figma url, figma design, extract figma, figma to code.4---5
6> **[IMPORTANT]** Use `TaskCreate` to break ALL work into small tasks BEFORE starting.
7
8## Quick Summary
9
10**Goal:** Extract structured design context from Figma designs for downstream use by `design-spec` and planning skills.
11
12**Workflow:**
13
141. **Detect Input** — Parse Figma URL, extract file key + node ID
152. **Select Extraction Method** — 4-level fallback chain
163. **Extract Context** — Design tokens, components, layout, typography
174. **Output Artifact** — Structured markdown for design-spec consumption
18
19**Key Rules:**
20
21### Frontend/UI Context (if applicable)
22
23When this task involves frontend or UI changes, **MUST READ** `.claude/skills/shared/ui-system-context.md` and the following docs:
24
25- Component patterns: `docs/project-reference/frontend-patterns-reference.md`
26- Styling/BEM guide: `docs/project-reference/scss-styling-guide.md`
27- Design system tokens: `docs/project-reference/design-system/README.md`
28
29- Always try highest-fidelity method first, fallback gracefully
30- Output must be consumable by `design-spec` and `ui-wireframe-protocol`
31- Keep extraction under 5K tokens per design
32
33## Extraction Fallback Chain
34
35### Level 1: Official Figma MCP (Best Fidelity)
36
37Check if MCP tools available: look for `get_design_context` in tool list.
38
39If available:
40
411. `get_design_context` — structured layout, components, tokens, constraints
422. `get_screenshot` — visual reference image
433. `get_code_connect_map` — map Figma components to code components
44
45### Level 2: GLips Figma-Context-MCP (Good Fidelity)
46
47Check if GLips MCP tools available (look for figma-context tools).
48
49If available:
50
511. Extract file metadata, frame structure, component list
522. Limited to read-only operations
53
54### Level 3: Figma REST API (Manual)
55
56If `FIGMA_ACCESS_TOKEN` environment variable exists:
57
581. Call `GET /v1/files/{file_key}/nodes?ids={node_id}` via bash script
592. Parse response for: component names, styles, layout properties
603. Limited — no screenshot, no Code Connect
61
62### Level 4: Screenshot + ai-multimodal (Always Available)
63
64If no MCP and no API token:
65
661. Ask user via `AskUserQuestion`: "Please screenshot the Figma frame and paste here"
672. Analyze via `ai-multimodal` skill with design extraction prompts
683. Extract: approximate colors, fonts, spacing, layout, components
69
70## Output Format
71
72Save to `team-artifacts/design-specs/{YYMMDD}-figma-extract-{slug}.md`:
73
74```markdown
75# Figma Design Extract: {Name}
76
77**Source:** {Figma URL}
78**Method:** {MCP Level 1 | MCP Level 2 | REST API | Screenshot}
79**Date:** {YYMMDD}
80
81## Design Tokens
82
83| Category | Token | Value |
84| ---------- | --------- | -------------------- |
85| Color | Primary | {hex} |
86| Color | Secondary | {hex} |
87| Typography | Heading | {font, size, weight} |
88| Spacing | Base | {px} |
89
90## Component Inventory
91
92- **{ComponentName}** — {description}, variants: {list}
93
94## Layout
95
96{ASCII wireframe per ui-wireframe-protocol}
97
98## Responsive
99
100{Breakpoint behavior if detectable}
101```
102
103## When to Use
104
105- Figma URL detected in PBI, design-spec, or user prompt
106- Called by `design-spec` when Figma URL is present
107- Called by `planning` skill during Design Context Extraction step
108
109## When NOT to Use
110
111- No Figma URL present — skip, proceed to `design-spec` directly
112- Hand-drawn wireframe — use `wireframe-to-spec` instead
113- Screenshot of existing app — use `design-screenshot` instead
114
115## See Also
116
117- `references/figma-mcp-setup.md` — MCP server setup guide (created in Phase 09)
118- `.claude/skills/planning/references/figma-integration.md` — integration protocol
119- `.claude/hooks/figma-context-extractor.cjs` — URL detection hook
majiayu000