Kimi can code from what it sees. Show it a screenshot of an app, a hand-drawn sketch or a picture of an error, and it can write matching code or work out what went wrong. Moonshot calls this "coding with vision". This page explains what it can do, where to use it, how to get good results, and where it falls short.
An illustration of the idea, not a real Kimi session.
Kimi writes or fixes code from images: designs, sketches, screenshots of bugs.
Kimi K3, K2.7 Code and K2.6 all read images. Kimi K3 also reads video.
In the Kimi app, in the Kimi Code tool, or through the API.
Describing a design in words is slow and easy to get wrong. "A blue button, a bit to the left, with rounded corners" leaves a lot of guessing. Showing it a picture removes most of that. Kimi's models were trained on images and text together, so they can read a layout, a chart or an error message on screen and turn it into code.
Spacing, colours, columns, buttons and text, from a screenshot or mockup.
Error messages, broken layouts and charts, so it can explain or fix them.
HTML and CSS, or the framework you ask for, ready to open and adjust.
Turning a finished design file into a front end is covered in detail in Design to Code. This page covers visual coding more broadly.
Recreate a page or app screen from a screenshot, as a starting point you then make your own.
Turn a photo of a hand-drawn wireframe into a working layout.
Send a screenshot of a broken layout and ask why it looks like that and how to fix it.
Screenshot an error message or console and ask what it means.
Show a chart and ask for code that draws the same chart from data.
Kimi's K3 launch post describes turning concepts, images and video into playable games.
Kimi's K3 launch post describes "vision in the loop": instead of writing code once and stopping, Kimi can look at what its code actually produces and keep improving it.
Kimi writes code for the screen you asked for.
The code runs and produces a real screen.
Kimi takes a screenshot and compares it with the goal.
It adjusts the code and checks again.
Our simplified description of the idea. Moonshot's post names the feature but does not detail how it works in each product. In agent and coding tools, this runs as part of longer tasks. More: Kimi K3 · Agent Mode
Attach an image in chat at kimi.com and ask for code. Use Kimi K3 for the best results.
In the terminal tool, press Ctrl+V to paste an image straight into your project session.
Send the image inside the message as base64, alongside your text.
Kimi Code's image paste shortcut and model note are from Kimi's help centre. API rules are from Moonshot's quickstarts.
Here is a screenshot of a page design. Build it as a responsive page in plain HTML and CSS. Match the layout, spacing and colours as closely as you can, use placeholder text and images, and list anything you had to guess.
This screenshot shows my page on a phone: the cards overlap and the menu is cut off. Here is my CSS. Explain what causes it and give me the smallest fix.
This is a photo of my hand-drawn sketch for a sign-up page. Turn it into a clean, accessible HTML page with labelled fields and a clear button. Keep it simple.
Choose your options and get a ready-to-paste request to send with your image.
Runs in your browser and does not send what you type to us. The box is marked to be hidden from the analytics tools this site uses. Attach your image in Kimi itself.
| Model | Images | Video | Best for |
|---|---|---|---|
| Kimi K3 | Yes | Yes | The strongest results, long visual tasks |
| Kimi K2.7 Code | Yes | Experimental | Coding work at a lower price |
| Kimi K2.6 | Yes | Experimental | Quick, low-cost questions about a picture |
| Kimi K2.5 | Introduced "coding with vision". Now retired from Moonshot's services | ||
On a small screen, swipe the table sideways to see every column.
From Moonshot's model cards and API quickstarts. Video for K2.7 Code and K2.6 is described as experimental and limited to Moonshot's own API. In the Kimi app, Kimi says files and slides need K3; K2.6 gives text only. More: choose a Kimi model