Describe the screen.
Get the design and the code.
A complete shadcn/ui system rebuilt natively in Penpot - components, tokens plus the agent skills that let your tooling read it. Not a screenshot sent to a model. The actual file.
Most design-to-code tools look at a picture. This one reads the file.
Every component in the kit exposes its variant properties and a token map over the Penpot MCP. The component call comes out of a lookup, not a hunch.
A frame is rendered to an image and handed to a model, which decides that this rectangle is probably a button, and probably the destructive one.
The instance is asked what it is. It answers with its own variant properties, and the call is emitted verbatim. The model only handles the layout around it.
Nine skills your agent loads directly.
Reads component identity and variant props off every instance, then writes the matching markup in your stack - React, Vue, Svelte or plain HTML - bound to your own token names.
Real instances, correct tokens, checked before it hands anything over.
Matching rules so the agent reaches for a kit part, not a rectangle.
Chains resolved, written as globals.css, not JSON.
One token set changes. All 1,839 components follow.
Skip the file when you already know the screen.
Penpot MCP on one side, your component library on the other.
Six sweeps for unbound colours, off-scale values, override drift and orphans.
Contrast, focus, target size and colour-only signalling, measured not guessed.
Every token has a class on the other side.
The design side and the code side use the same names, so a handoff is a lookup rather than a conversation. This table ships inside the kit's own documentation.
Open source tool.
Open system on top of it.
Penpot is free and self-hostable. No per-seat licence for the engineers who only need to look.