Kimi can look at a picture of a design and write the code for it. Give it a mock-up, a screenshot or even a screen recording, and it builds a web page to match. This guide shows the steps, the prompts that work, and how to close the gap between "close" and "right".
Kimi reads your design, writes the code and shows you a working page.
A clear image of the page: a mock-up, a screenshot or a sketch.
Say what to match and how the code should be written.
Put the result next to the design and ask for the differences to be fixed.
A designer draws how a page should look. A developer then writes code so a browser can show it. Design to code means letting Kimi do that second part. It works because Kimi K3 can see: it reads the layout, colours, text and spacing in your picture, then writes HTML and CSS to rebuild them.
Kimi K3 reads images directly. You do not have to describe the design in words.
It writes the code, and in Kimi Build it also creates images and icons and shows a live preview.
You point at what is wrong and it changes the code, round by round.
This is one part of what Kimi calls visual coding. See the Visual Coding guide for the wider picture.
An image exported from your design tool. The best starting point.
A picture of a page you want to rebuild or redesign.
A clear photo of a drawing on paper or a whiteboard.
A short video of a site in use. Kimi Build tries to rebuild the look and how it moves.
Kimi's help centre lists text, design mock-ups or screenshots, screen recordings and templates as ways to start a build.
| Feature | Kimi Build | Chat with Kimi K3 | Kimi Code |
|---|---|---|---|
| Best for | People who want a live site and do not code | Getting the code for one page or part | Developers adding a design to an existing project |
| You give it | An image, a recording or a template | An image and a prompt | An image pasted into the terminal tool |
| You get | A preview you can click, and a published link | Code in the chat to copy | Files changed in your own project |
| Fixing things | Click the part and leave a note | Describe the change in words | Describe the change. It asks before editing |
| Guide | Build a website | Kimi K3 | Kimi Code setup |
On a small screen, swipe the table sideways to see every column.
Not sure? Start with Kimi Build. Seeing a live preview next to your design makes the differences easy to spot.
Think of the first result as a strong draft. Knowing where it is usually good and where it usually slips saves you time.
This is our general guidance for image-to-code tools. For independent results on Kimi's front-end work, see the Kimi AI review.
A clear picture gives a better page. Five minutes here saves several rounds of fixes.
Kimi's help pages say each uploaded file can be up to 100 MB, so image size is rarely a problem.
Attach the image, then tell Kimi what you want. The picture shows the look. Your words fill in what a picture cannot show.
Make this.
Kimi has to guess the tools, the phone layout and what to do about photos.Build this design as a responsive web page in one HTML file with CSS. Match the layout, colours, spacing and fonts as closely as you can. On a phone, stack the columns. Use grey boxes where the photos go. The heading font is Poppins.
Kimi knows the goal, the limits and the details a picture cannot show.Put the preview and your design side by side. Go from top to bottom and write down each difference. A numbered list is easier to fix than "it looks a bit off".
Press Edit on the preview, click the part that is wrong and leave a short note. Add all your notes, then send them together.
Name the part and say exactly what to change:
A design is one picture. A real page has to work on every screen and for every visitor. Ask Kimi for these before you call it finished.
Switch the preview to mobile view. Nothing should overlap, shrink too small or need sideways scrolling.
Ask for image descriptions, enough colour contrast, and buttons and links that work with a keyboard.
Replace filler text and grey boxes with your own words and pictures. Check every link and form.
Open All Files and download the project to host it yourself or hand it to a developer.
If a developer will take over, ask Kimi first: "Tidy the code, use clear names, and add short comments." It makes the handover much easier.
Attach your image first. Replace anything in [square brackets] with your own details.
Build the attached design as a responsive web page in one HTML file with CSS. Match the layout, colours, spacing and fonts as closely as you can. Use grey boxes where the photos go.
Write the HTML and CSS for just the [pricing table] in the attached design. Make it reusable, and make it stack neatly on a phone.
This is a photo of my hand-drawn sketch for a [type of page]. Turn it into a clean, modern web page. Keep my layout, and choose a simple colour scheme and font.
This is a screenshot of my current page. Keep the same content, but redesign it to look cleaner and more modern, with more white space and a clearer main button.
Build the attached design using [React and Tailwind CSS]. Split it into sensible components and name them clearly.
The first image is my design. The second is a screenshot of what you built. List every visible difference, then fix them all.
Check this page at phone width. Fix anything that overlaps, is too small to tap, or needs sideways scrolling.
Add a description to every image, make sure text has enough contrast with its background, and check every button and link works with a keyboard.
Tidy the code for another developer: clear names, no repeated styles, and a short comment above each section.
Or ones you have clear permission to use.
Never copy another company's site, logo or name, or make a page that could be mistaken for theirs.
Use fonts and images you have the right to use on a website.
Use other sites for inspiration. Change the layout, words and look to make it yours.
Do not upload client work that is under a confidentiality agreement.
You are responsible for what goes live. Test it yourself.
More help: Kimi AI not working: common fixes.