Figma Workbench (Draft)

Plugin UI concept for design-to-code execution, parity review, and rule setup. In v0 this can be metadata-only.

figma-mcp • draft enablement model

Workflow Checklist

1
Get design context
Fetch exact node context before code generation.
done
2
Get screenshot
Use screenshot as source of truth for parity.
done
3
Implement using project tokens
Map Figma output to existing design system components.
in progress
4
Parity review
Run a screenshot-based comparison and list deltas.
pending

Plugin Commands

CommandIntentRoute
/implement-from-figmaDesign → codeimplementer
/create-design-system-rulesBootstrap rulesrules agent
/connect-figma-componentsCode Connect templatescode-connect agent
/review-design-parityParity QAreview agent

Design Targets (Example)

NodeTypeStatusNotes
42-15ButtonimplementedToken mapping complete
42-21InputpartialFocus ring differs
55-9CardblockedMissing local chart primitive

Generated Rules Snapshot

Components: use src/components/ui primitives first; add feature wrappers in src/features/*/components.

Styling: map Figma colors to CSS variables; avoid hardcoded values; preserve spacing scale.

Assets: prefer Figma MCP-provided SVG/image payloads over new icon packages.