Turn a design into frontend code
You have a design you are happy with on a Canvas. Now you want to turn it into frontend code that fits the project you are already building.
In this walkthrough, you’ll use Kombai to convert a design into frontend code that follows your tech stack and review the result in Kombai Browser.
Before you begin
Make sure you have:
- Installed the Kombai desktop app or the IDE extension. See the Kombai Quickstart.
- A design stored in a Canvas. If you do not have a design, prompt Kombai to make one.
1. Open the project you want to work on
Open the project switcher by clicking the folder dropdown below the chat input and select a recent project. To use another local codebase, click Open folder… and select the folder.
This step gives Kombai access to the project's existing components, design tokens, conventions, and other reusable code before it begins generating files. If you are only experimenting, select Don't work in a project instead; Kombai will create a folder.
2. Open the Canvas that contains your design
Click Designs below the chat input to open the Canvas Gallery, then click the Canvas that contains the design you want to build.
If you’ve just generated the design and its Canvas is already open beside the chat, proceed to the next step.
3. Select the complete design
Click the design once on the Canvas. When it is selected, the top toolbar appears with actions including Open in browser, Add to context, Generate, and Code design.
Pause here and make sure you selected the complete design rather than an element inside it. If an element is selected, the toolbar shows Code element in place of Code design. If you see Code element, then press Esc on your keyboard and select the design again.
4. Click Code design
Click Code design in the top toolbar. Kombai attaches the selected design to the chat as context and creates the code-generation request.
Review the request in the chat input, add any implementation constraints that matter, and send it. For example, you might specify which route should render the page or ask Kombai to reuse a particular component that already exists in your project.
5. Confirm the tech stack when prompted
The first time you use Kombai in an existing repository, it detects the tech stack and asks you to confirm it. Choose Approve stack to continue with the detected configuration, or Configure to change it.
If no repository is set up, Kombai asks which tech stack you prefer, scaffolds the repository, and then codes the design.
6. Preview the result in Kombai Browser
Kombai runs the project when the code generation completes. Click the localhost link in the Kombai chat to open the running project in Kombai Browser. If the chat does not contain a localhost link, ask Kombai to run the project, then click the link it returns.
Compare the running page with the Canvas design. Check the content hierarchy, layout, typography, colors, and the responsive states relevant to your project.
If you spot a visual issue, the Browser extension can send an element, a text edit, a snipped area, or manually edited styles back to Kombai as context. After attaching the relevant context, click Send to agent so Kombai can update the code and refresh the preview. See Preview, debug, and refine UI in Kombai Browser.
Choose a narrower path when needed
Code one element
Use this when you want to implement only part of a design, such as a pricing card or navigation bar.
- Double-click the design and select the element you want to code.
- Click Code element in the top toolbar.
Kombai attaches that element to the chat as context and creates the code-generation request.
What sets Kombai apart
Many design-to-code agents focus primarily on reproducing a design’s visual appearance. Kombai also considers the repository the design must become part of. When you work in an existing repository, Kombai reads its tech stack and can reuse relevant components, design tokens, hooks, and established conventions. Instead of treating the design as an isolated output, it generates code intended to fit the repository.
Pro tip 1: If you are working on an existing repository, we recommend building your Context Graph first. This helps Kombai better understand and reuse the codebase items—including UI components, stateful primitives, design tokens, types, and constants.
Pro tip 2: For work that also involves business logic, state management, or coordinated changes across several parts of the application, start in Plan mode. Kombai can create an editable plan.md; review it and click Approve Plan before code generation begins.