Have a design from Figma, Claude Design, ChatGPT or Claude? Drop a picture of it into Candu and the assistant turns it into an editable draft in the editor, matched to your design. Nothing goes live until you publish it yourself.
What you can import
Where it comes from | What to drop in |
Figma | Export the frame as PNG (or PDF) |
Claude Design, ChatGPT or Claude | A screenshot of the design (PNG or JPG) |
Anything else | A screenshot: PNG, JPG, WebP or PDF |
The assistant keeps every word and the layout exactly. Colors, fonts and spacing are read from the picture, so check them in the editor; it tells you what it couldn't match.
Import a design
On your Candu Home page, choose From a design, then pick where your design comes from.
Drop in your picture and choose Continue.
The assistant tells you what it will build (for example, "an Inline banner with a headline, one line of text and a button") and what it's leaving out, such as your app's navigation behind the design. It creates one unpublished draft.
Choose Open it in the editor. The draft opens with the assistant on the right.
Drop the same picture into the assistant there. It builds the design on the canvas, checks the result against your picture and fixes what it can. This takes a minute or two.
You get a short note: what matches, what's different, and anything you still need to set, such as where a button goes.
[[IMAGE: the "Bring your design into Candu" screen]]
[[IMAGE: the built draft in the editor, with the assistant's note beside it]]
Keep chatting with the assistant in the editor to change it: "make the headline bolder", "use our dark background".
Get better results
One piece per import. A single modal, banner, card or panel. Crop tight around it.
Set up your Styleguide first. Drafts use your Styleguide's fonts, colors and buttons, so they match your product from the start.
Use real copy. The assistant keeps your words exactly, so placeholder text ends up in the draft.
Add images yourself. Pictures and illustrations aren't copied out of a design. The assistant leaves a spot for each one; upload them in the editor.
Design for Candu with the Candu Kit
If your team designs in Claude Design, load the Candu Kit once. It teaches Claude Design to use only things Candu can build, so imports come out cleaner.
Download the Candu Kit (44 KB).
In tokens.json, change the colors and font to your brand, and put the same values in your Candu Styleguide.
In Claude Design, add the kit files to your project and paste candu-kit/README.md into the project instructions.
Ask for designs "for Candu", for example: "A welcome modal for Candu that asks new users what they want to do first."
Want a kit made from your own Styleguide? Ask the assistant or your Candu contact.
What Candu can't build from a design
Things Candu doesn't have
Candu builds with text, buttons, images, boxes, form fields, checklists and multi-step flows, as Inline content, Modals and Side panels. If your design has something else, the assistant builds everything it can and tells you what it left out. Common ones:
Charts, graphs and data tables with live numbers. It leaves a spot for them.
Custom widgets such as date pickers, sliders or drag and drop.
Gradients, animation, and overlapping or freely positioned layers. Candu lays things out in rows and columns, so it uses the closest solid color and layout.
Your product's own screens. Navigation, sidebars and headers from your app are left out, because Candu content sits inside your product.
Several screens or a whole flow
Unrelated pieces in one picture (for example a banner and a modal): the assistant asks which one to build. Import each one separately.
Steps of one flow (a three-step modal, an onboarding sequence): the assistant tells you which steps it can build in one draft. Add the rest in the editor.
Product tours and hotspots have to point at real parts of your product, which a design can't show, so they aren't built from a design. Record the tour on your product instead, and use your design as the guide for each step's copy and look.
Behavior a design can't show
A picture doesn't say where a button goes, who should see the content, or what finishes a checklist item. The assistant asks only about what's missing and never guesses. Anything left unset is listed in its note so you can finish it before publishing.
Questions
Will it look exactly like my design? Close, not pixel perfect. The assistant compares the draft with your design and tells you what's different.
Does it publish anything? No. You get an unpublished draft. You choose who sees it and publish it yourself.
Why do I drop the picture twice? The first drop creates your draft; the second builds it inside the editor, where you can see and change it.