Component from Figma

My prompt for design-to-code: hand the agent a Figma frame and get back a component that uses my tokens, covers the right variants, and is accessible from the start — not a pixel-pushed one-off.

When to use it

When I'm implementing a component from a Figma design and I want it to land on the Morpha base (shadcn primitive + Cupido tokens) rather than hardcoded values. Works best with the Figma MCP connected so the agent can read the frame and its variables directly.

Prompt

Implement the selected Figma frame as a React component for this project.

Source: <Figma frame URL or selection>
Component name: <ComponentName>

Requirements:
- Build on the existing shadcn (radix-nova) base; reuse our primitives where one fits.
- Use Morpha design tokens (the Cupido CSS variables) — never hardcode colors,
  spacing or radii. Map Figma variables to our tokens.
- Support light and dark themes via the token contract.
- Derive variants and sizes from the Figma variants; expose them as typed props.
- Accessibility: correct roles/ARIA, keyboard support, visible focus, AA contrast.
- Use the `cn` helper from `@/lib/utils` for class composition.

Return the component file and note any token gaps you had to approximate.

Variants

• Refactor an existing component: swap the first line for "Restyle <path> to match the selected Figma frame, keeping its API stable."
• No Figma MCP: replace the frame URL with a screenshot plus the variable names, and ask the agent to request anything it can't infer.
• Block, not component: for a marketing section, ask for a composed block assembled from existing primitives instead of a single reusable component.