Design System Components Prompts

Prompts for generating components from Figma with MCP and documenting implementation.

All Prompts

Component workflow prompt

Component workflow with Figma MCP:
1. Parse Figma URL and node ID.
2. Extract visual specs (sizes, spacing, typography, colors, radius, shadows).
3. Extract behavior (states, interactions, responsive rules, accessibility).
4. Build reusable component with variants and TypeScript types.
5. Generate docs and usage examples.
6. Add tests for behavior and accessibility.

Build from Figma prompt

Build a reusable React input component from this Figma link.
Include states: default, focus, disabled, read-only, error, success.
Support optional left/right icons, helper/error text, and size variants.
Deliver component + demo page + concise docs.

Minimal implementation prompt

Figma link: [paste]
Task: Build an interactive component matching the design.
Tech: Tailwind + TypeScript.
Files: component, styles, usage example.
Done when: visual match + keyboard accessibility + responsive behavior.