Build a design in code
Build the design with the components you already have.
YouBuild the workshop card from this design in our codebase.
Card / Workshop 320 × 132
Research ops workshop 12 November · Online
Save a seatHover · shadow 0 8 24 / 12%
WorkshopCard.tsx
1<Card padding="lg" elevation={1}> 2 <Card.Media src={cover} /> 3 <Text variant="title-sm">{title}</Text> 4 <Button>Save a seat</Button> 5</Card>
1280 · light 390 · light 390 · dark · not rendered
YouBuild the workshop card from this design in our codebase.
Implementation · workshop card
- OBSERVEDCard supports padding="lg" and elevation (src/ui/Card).
- OBSERVEDThe design’s hover shadow has no token. Flagged, not hard-coded.
- UNVERIFIEDDark theme at 390px was not rendered. Listed for you to check.
Your callAdd a token, or accept the nearest one.
Illustrative example. The labels: OBSERVEDSeen in what you gave itUNVERIFIEDNot checked; says how to
Say it your way
- “Implement this Figma frame with our existing components.”
- “Turn this mockup into a React component.”
- “Rebuild this card so it matches the design and uses our tokens.”
It works through
- Inspect
- Map
- Implement
- Render
- Deviate
- You decide
You get back
- Component mapping
- Token mapping
- The implementation
- Rendered evidence
Install in one command.
It loads by itself when a request like these comes in. Free and open source, no account.
Claude Code
unzip splitfire-design-to-code.zip -d ~/.claude/skills/ Every project on this machine. Use .claude/skills/ inside a repository to share with your team.
Codex
unzip splitfire-design-to-code.zip -d ~/.agents/skills/ Every project. Use .agents/skills/ inside a repository instead, then restart Codex.
Claude apps
On claude.ai or the desktop app, upload the .zip in your skills settings. One zip is one skill.