design-to-code pages
- design-to-code
- design-to-code
design-to-code
A command-line tool that takes a Claude Design export toward a React component library, checked against the design page by page.
design-to-code reads a design export, the folder or zip of HTML pages that Claude Design produces, and works it toward a React component library. At each stage it writes a file you can read, and it checks the result against the design rather than trusting it.
Status
design-to-code is pre-release. It is not on npm: you run it from a clone of its repository, with Bun. The verbs, files and config keys on these pages can still change.
The verbs that exist today take an export from import to a checked list of components. The step that writes each component's code is not a verb yet: the tool's own help ends with "No extraction verb is implemented yet." Until then you write the components yourself, and the local gates check them; From pages to components says where they go.
The stages
Each stage reads what the stage before it wrote, so you can stop after any of them and look.
In short, the design session's own words: the demo is the spec, the baseline is the test. The export shows what the components must look like, and the baseline is the screenshot every later check compares against.
Who it is for
| Step | Your situation | Page |
|---|---|---|
| One person, one export | You have an export from Claude Design and want to see what is in it, and which pages to keep | Getting started |
| One person, ready to extract | You want a baseline to compare against, and a list of components in the order to build them | From pages to components |
| A project | You keep the extracted library and want its structure, stories, types and lint checked on every change | From pages to components |
| A project that uses rafa loops | You want each component built in its own session, and every UI task to name what it is checked against | With rafa (coming) |
How it connects to rafa
design-to-code stays its own repository. A planned rafa add-on, rafa-d2c, would make its verbs a rafa mode you run on request. rafa's add-ons are planned as modules rafa does not bundle, each published on its own. With rafa says what is planned.