DESIGN, AS AN API
Visual taste for
functional agents.
Your agent ships code that runs. We make it ship code that looks considered. Atelier is the design layer agents call - high-fidelity layouts and clean Tailwind components, returned as structured specs.
BUILT FOR DEVIN · CURSOR · CLAUDE CODE · ANY AGENT
agent.design({component: "pricing-table",brand: { tone: "premium", accent: "slate" },output: "tailwind"}) // → returns{spec: "figma://atelier/pr-9f3",tokens: 14,jsx: "<PricingTable … />",a11y: "AA"}HOW IT WORKS
An API-first design flow
Three calls stand between a working agent and an interface with a point of view.
- 01POST
Your agent sends the intent
A component name, the brand tone, the framework target. No design files, no back-and-forth. One typed request describing what the interface needs to do.
- 02RENDER
We resolve it to a design system
The request maps onto a curated token set - type scale, spacing rhythm, color, elevation. Layouts are composed against rules a human studio would defend, not averaged from the web.
- 03RETURN
Back comes a spec your agent can build
A high-fidelity Figma layout plus production Tailwind JSX, accessibility graded, tokens enumerated. Your agent writes the rest of the app around taste it did not have to invent.
COMPONENTS
Agent-ready blocks
Every block ships as a Figma layer and as copy-paste Tailwind. Here are three, rendered live - not screenshots.
Ship the considered version
Drop this block in and the empty state stops looking empty.
- pricing-tableRENDERED
- dashboard-shellRENDERED
- empty-stateRENDERED
- settings-formQUEUED
INTEGRATE
Give your agent taste it can call.
One package, one method. Wire it into your build loop and every interface your agent produces comes back designed - not decorated.
$ npm i @atelier/design// then, from your agent:await atelier.design({ component, brand, output: "tailwind" })