Route 03 · 6 days
What you see is what ships.
Artboards are real DOM with the exact CSS you'll ship. No format to translate: designs read back as clean code.
Select a layer, get its code.
The Code tab shows the selection as React with Tailwind, or as plain HTML and CSS.
Card
280 × 288
<article className="flex w-70 flex-col gap-3 rounded-2xl border border-neutral-200 bg-white p-4">
<div className="h-36 rounded-xl bg-neutral-200" />
<p className="text-xs tracking-widest text-neutral-500 uppercase">
Route 03 · 6 days
</p>
<h3 className="font-serif text-2xl text-neutral-950">
Lisbon by tram
</h3>
<span className="text-sm font-medium underline">
Read the route
</span>
</article><article style="display: flex; flex-direction: column;
width: 280px; gap: 12px; padding: 16px;
border: 1px solid #e5e5e5; border-radius: 16px;
background: #ffffff;">
<div style="height: 144px; border-radius: 12px;
background: #e5e5e5;"></div>
<p style="font-size: 12px; letter-spacing: 0.1em;
text-transform: uppercase; color: #737373;">Route 03 · 6 days</p>
<h3 style="font: 24px 'Instrument Serif';">Lisbon by tram</h3>
</article>Four ways out of the canvas.
Copy as React
AltR
Copy as Tailwind
AltT
Copy as PNG
CtrlShiftC
Export files
PNG, JPG, WebP, SVG, PDF
Straight into your codebase.
Agents read designs back with the same tools you'd use, then write components in your project.
- get_jsxTailwind CSS v4's own canonicalizer, for idiomatic classes.
- get_computed_stylesExact values, with tokens kept as
var(--token). - get_fill_imageThe full-resolution source of any image fill.
Paste HTML from anywhere.
Copy HTML from any AI chat or web page and paste it onto the canvas. It becomes layers you can edit. Copying layers gives you clean HTML back.
Design it once.
Then ship the same HTML and CSS.