What it does
Hand-translating a design into code takes two to six hours per component, and most of that time is not writing markup — it is working out which design token each raw value corresponds to and which library component already does this. Figma to Vue/React Component Agent does that matching part deterministically. You supply the Figma node's layers with their raw values, your repo's design-token table, and the names of the components you already have. It matches every value against your tokens **by exact equality**, detects which existing components the node can reuse, flags interactive layers missing accessibility attributes, and generates a Vue 3 SFC or React TSX component plus a CSF3 Storybook story and a Vitest snapshot test. Exact-equality matching is a deliberate constraint rather than a limitation. A fuzzy match that maps `#6d28d9` to a token that is merely close produces a component that looks right and quietly drifts from your design system. Here a value with no exact token match is not tokenized — it is emitted as the raw value and reported as a hardcoded-risk finding you can act on. `list_hardcoded_values` returns that list on its own. The generated code carries the same discipline: `var(--token)` where a token matched, the raw value where none did. Every value comes from the analyzer's real output; the language model writes only the PR description and never invents a token name, a prop or a line of component code. The agent is honest about where its value sits. Wired to a real design system it does the expensive part; without your token table and component list it produces generic markup, and the README says so rather than overselling. `match_tokens`, `detect_reused_components` and `list_findings` are each callable alone, so you can check the token coverage of a node before generating anything. No connectors and no credentials — nothing is fetched from Figma or GitHub. A host with the Figma and GitHub MCP servers connected can gather the node data and open the resulting PR, but those are your host's connections. Built for frontend developers and design engineers.
Example prompts
- Turn this Figma node into a Vue component using our design tokens
- Which values in this design have no matching token?
- Which of our existing components can this node reuse?
