figma-design

Quick Summary

Goal: Extract structured design context from Figma designs for downstream use by design-spec and planning skills.

Workflow:

1. Detect Input — Parse Figma URL, extract file key + node ID
2. Select Extraction Method — 4-level fallback chain
3. Extract Context — Design tokens, components, layout, typography
4. Output Artifact — Structured markdown for design-spec consumption

Key Rules:

Frontend/UI Context (if applicable)

When this task involves frontend or UI changes,

• Component patterns: docs/project-reference/frontend-patterns-reference.md (read directly when relevant; do not rely on hook-injected conversation text)

• 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:

1. get_design_context — structured layout, components, tokens, constraints
2. get_screenshot — visual reference image
3. get_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:

1. Extract file metadata, frame structure, component list
2. Limited to read-only operations

Level 3: Figma REST API (Manual)

If FIGMA_ACCESS_TOKEN environment variable exists:

1. Call GET /v1/files/{file_key}/nodes?ids={node_id} via bash script
2. Parse response for: component names, styles, layout properties
3. Limited — no screenshot, no Code Connect

Level 4: Screenshot + ai-multimodal (Always Available)

If no MCP and no API token:

1. Ask user via AskUserQuestion: "Please screenshot the Figma frame and paste here"
2. Analyze via ai-multimodal skill with design extraction prompts
3. 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

---

[IMPORTANT] Use TaskCreate to break ALL work into small tasks BEFORE starting.

UI System Context — For ANY task touching .ts, .html, .scss, or .css files:

MUST ATTENTION READ before implementing:

1. docs/project-reference/frontend-patterns-reference.md — component base classes, stores, forms
2. docs/project-reference/scss-styling-guide.md — BEM methodology, SCSS variables, mixins, responsive
3. docs/project-reference/design-system/README.md — design tokens, component inventory, icons

Reference docs/project-config.json for project-specific paths.

Critical Thinking Mindset — Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence >80% to act. Anti-hallucination: Never present guess as fact — cite sources for every claim, admit uncertainty freely, self-check output for errors, cross-reference independently, stay skeptical of own confidence — certainty without evidence root of all hallucination.

AI Mistake Prevention — Failure modes to avoid on every task: Check downstream references before deleting. Deleting components causes documentation and code staleness cascades. Map all referencing files before removal. Verify AI-generated content against actual code. AI hallucinates APIs, class names, and method signatures. Always grep to confirm existence before documenting or referencing. Trace full dependency chain after edits. Changing a definition misses downstream variables and consumers derived from it. Always trace the full chain. Trace ALL code paths when verifying correctness. Confirming code exists is not confirming it executes. Always trace early exits, error branches, and conditional skips — not just happy path. When debugging, ask "whose responsibility?" before fixing. Trace whether bug is in caller (wrong data) or callee (wrong handling). Fix at responsible layer — never patch symptom site. Assume existing values are intentional — ask WHY before changing. Before changing any constant, limit, flag, or pattern: read comments, check git blame, examine surrounding code. Verify ALL affected outputs, not just the first. Changes touching multiple stacks require verifying EVERY output. One green check is not all green checks. Holistic-first debugging — resist nearest-attention trap. When investigating any failure, list EVERY precondition first (config, env vars, DB names, endpoints, DI registrations, data preconditions), then verify each against evidence before forming any code-layer hypothesis. Surgical changes — apply the diff test. Bug fix: every changed line must trace directly to the bug. Don't restyle or improve adjacent code. Enhancement task: implement improvements AND announce them explicitly. Surface ambiguity before coding — don't pick silently. If request has multiple interpretations, present each with effort estimate and ask. Never assume all-records, file-based, or more complex path.

IMPORTANT MUST ATTENTION read frontend-patterns-reference, scss-styling-guide, design-system/README before any UI change.

MUST ATTENTION apply critical thinking — every claim needs traced proof, confidence >80% to act. Anti-hallucination: never present guess as fact.

MUST ATTENTION apply AI mistake prevention — holistic-first debugging, fix at responsible layer, surface ambiguity before coding, re-read files after compaction.

Closing Reminders

IMPORTANT MUST ATTENTION break work into small todo tasks using TaskCreate BEFORE starting IMPORTANT MUST ATTENTION search codebase for 3+ similar patterns before creating new code IMPORTANT MUST ATTENTION cite file:line evidence for every claim (confidence >80% to act) IMPORTANT MUST ATTENTION add a final review todo task to verify work quality MANDATORY IMPORTANT MUST ATTENTION READ the following files before starting:

[TASK-PLANNING] Before acting, analyze task scope and systematically break it into small todo tasks and sub-tasks using TaskCreate.