Design to code
ProA screenshot-to-code card. You drop a UI screenshot or import a Figma frame, a scan line finds its layout regions, then React and Tailwind stream in beside it, linked region by region, with a working live preview one tab away.
Live · keyboard ready
pricing-card.png1440 × 1080
Claude Sonnet 5.5
Generate to write PricingCard.tsx.
Ready to generateReact + Tailwind
- A design to code feature: upload a screenshot or pick a Figma frame and get a component back.
- Showing an AI vision step where detected regions matter, such as layout parsing before generation.
- Marketing or onboarding demos that explain what a code generation product does in one glance.
- Plain file uploads with no generation step: use file-upload.
- Showing finished code without the source design: use code-block.
- A full editor with files, tabs and a terminal: build a workspace layout instead of stretching this card.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { DesignToCode } from "@/components/arc/design-to-code/design-to-code"; // The self-playing demo<DesignToCode /> // Wired to your model<DesignToCode model={{ name: "Claude Opus 5.5" }} onGenerate={async (source, { signal, addRegion, write }) => { const response = await fetch("/api/design-to-code", { method: "POST", body: source.file, signal }); for await (const event of readEvents(response.body!)) { if (event.type === "region") addRegion(event.region); // { id, label, x, y, width, height } in percent if (event.type === "code") write(event.text, event.regionId); } }} renderPreview={code => <SandboxFrame code={code} />} onComplete={code => saveDraft(code)}/>DesignToCode
Screenshot to code in one card. A dropped screenshot or imported Figma frame is scanned for regions, then React and Tailwind stream in beside it, linked region by region, with a live preview one tab away. With no props it plays a simulated run on a Pro pricing card.
PropTypeDefaultDescription
onGenerate(source: DesignToCodeSource, context: { signal: AbortSignal; addRegion(region): void; write(chunk: string, regionId?: string): void }) => Promise<void>–Turns a source into code. Call addRegion as parts are detected, then write code chunks as they stream; pass a region id to link a chunk to its box. Resolve when done, reject to show the error, stop when signal aborts. Without it a local simulation writes the sample PricingCard.onImportFigma(signal: AbortSignal) => Promise<DesignToCodeSource | null | undefined>–Runs your Figma picker or link flow. Resolve with the frame (with a rendered src) or null when cancelled. Simulated when omitted.onComplete(code: string, source: DesignToCodeSource) => void–Called with the finished code.renderPreview(code: string, source: DesignToCodeSource) => ReactNode–Renders the generated code in the Preview tab, for example in a sandboxed iframe. The simulation previews the sample card, working.defaultSourceDesignToCodeSource | nullsample, or null with onGenerateThe design shown first. A source without src draws the built in pricing card sample. Pass null to open on the drop zone.filenamestring"PricingCard.tsx"File name shown while writing and in the copy label.model{ name: string; mark?: ReactNode }{ name: "Claude Sonnet 5.5" }The model credited in the code header. Names starting with Claude get the Claude mark automatically.defaultView"code" | "preview""code"The tab open first. Each new run returns to Code so the stream is visible.autoPlaybooleantrue without onGeneratePlays the sample on a loop while on screen: generate, hold on the code, show the preview, start again. Stops at the first pointer or key press inside the card.acceptstring"image/png,image/jpeg,image/webp"Accepted file types, as in an input's accept attribute. Other files show an error instead of a source.maxFileSizenumber10485760Largest file accepted, in bytes.classNamestring–Class on the root section.- Tab
- Moves through the remove button, region tags, view toggle, copy, Import from Figma and the main action.
- EnterorSpace
- Activates the focused control. On the drop zone, Choose file opens the file picker.
- Arrow keys
- Switch between Code and Preview on the view toggle.
- Escape
- Stops a run that is analyzing or writing. The partial code is kept.
- Focus a region tag
- Highlights that region's box and its lines of code, scrolling them into view.
- The card is a labelled section with two groups, Design and Output. A polite live region announces each step: analyzing, regions found, writing, done with line count and time, stopped, and errors. The simulation says that nothing was uploaded or opened.
- Status is never color alone: each state pairs an icon with a short label, and errors name the problem and the fix.
- Region tags are real buttons with labels like "Price: show its code". The code view is a focusable, labelled region marked busy while streaming, and is not a live region, so screen readers are not flooded with tokens.
- The hidden layer of the Code and Preview pair is inert and hidden from assistive tech. The screenshot mock is decorative; uploaded images carry alt text with the file name.
- Drop works anywhere on the design side, and every drop path has a button: Choose file, Use sample and Import from Figma.
- Analyzing: a 1px scan line crosses the screenshot in one second and each region's box and tag fade in as the line reaches it (160ms opacity, no scale).
- Writing: code streams in 3 to 8 word chunks every 34ms; each chunk only fades in over 140ms. The region being written is highlighted on the screenshot and its lines carry a quiet tint.
- Status, placeholders and the Code and Preview layers crossfade (old out 100ms, new in 160ms). The main button morphs its width without bounce. The preview's billing thumb uses a 0.24s spring with no bounce, and the price swaps with a 2px crossfade on tabular numerals.
- Reduced motion: no scan line or chunk fades, regions appear at once, the code arrives a part at a time, and the demo plays once instead of looping. The loop also waits while the card is off screen.
- Two panes side by side from 640px of card width (design 344px, code the rest); below that they stack, each 352px tall.
- Under 520px the footer drops the file name from the status and Import from Figma becomes an icon button with its label kept for assistive tech. Under 440px meta text and the model name hide; the mark stays.
- Long code lines wrap with a hanging indent, so nothing scrolls sideways at 360px.
- The code view tokenizes the current text on each chunk (a few kilobytes, well under a millisecond) and keys spans by offset, so earlier chunks never re-render their fade.
- Code and Preview stay mounted and crossfade, so switching tabs costs nothing and keeps the scroll position.
- Object URLs for dropped files are revoked on replace and unmount. The demo loop pauses off screen through an IntersectionObserver.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for screenshot to code, Figma to code or any image to UI generation flow where people should see what the model detected and the code it wrote.
- Stream from your backend: emit region events first (percent boxes on the source image), then code text tagged with the region id it implements so the box and the lines link up.
- Render the preview yourself with renderPreview, ideally in a sandboxed iframe. Never eval generated code in the host page.
- Keep it one card in a page or dialog, 360 to 760px wide. It stacks below 640px.
The full library index for assistants is at /llms.txt.