Further Reading for Kimi
Guides, documentation and walkthroughs for designing with Kimi, drawn from the published guide.
How to design interfaces with Kimi CLI in OpenDesign: a reference screenshot as the input, AGENTS.md as the rulebook, one notification-preferences task from brief to reviewed file, and the limits to know before you start.
THREE ROUTES THROUGH THIS KIMI PAGE
What follows: a brief, reference images, design rules and an HTML result you review in the preview.
Read this guide SETUPThe whole path, from a clean machine to a Kimi CLI that builds UI and verifies it in a real browser.
Go to setup COMPARISONWhere Kimi's agentic K2 turns and large context set it apart from Codex, Claude Code and Cursor on design work — and when a different agent is the better pick.
See the comparisonOne Complete Kimi Design Task
Walk the notification-preferences job through the full loop: the brief and constraints you hand over, the artifact that comes back, and the checks that still fall to you. The interface below was built as an illustration for this page, not captured from a Kimi session.
BriefDesign a notification preferences screen for a collaboration app: channels (email, push, in-app), quiet hours, per-project overrides. Take tone from the attached reference, not its layout. Desktop and phone.
data-od-id hooks stay stableYou write the brief, pick the design system and set the acceptance criteria.
Kimi plans the layout, writes the HTML, CSS and JavaScript, and revises on request.
OpenDesign supplies the design system and skill, renders the preview, and keeps every revision as a file in the project.
Visual hierarchy, 8px-grid spacing, both breakpoints and every interaction get checked before handoff.
Sections, rows and the save action land on the 8px grid; time pickers line up with toggles.
Channel names outrank helper text, and the accent appears only on enabled toggles.
Sections collapse to a segmented switch; each row keeps a single toggle on the right.
Flip a channel, set quiet hours, expand one project override.
Fit
Compatibility
Everything here concerns Kimi connected through the OpenDesign desktop app. Published references checked 6 September 2026.
Kimi CLI is Moonshot AI's open-source (Apache-2.0) terminal agent, running on the Kimi K2 model series: it reads your codebase, edits files, runs commands, searches files and fetches the web. This page is about designing interfaces with Kimi inside OpenDesign, not about Kimi's own interface. OpenDesign's setup notes list the available agents.
Moonshot API key (BYOK). Authenticate with it and the credential stays on your machine. No quota or price is promised on this page.
Desktop builds live on the download page. The Node.js and pnpm requirements in the source quickstart belong to running from source, not to installing a desktop package. Minimum compatible Kimi version: not verified here.
Work through the connection instructions your installed version shows, then run something small. Confirm Kimi handled it and that the artifact opens; a download by itself does not prove the connection works.
Start with the desktop app
Start with the download, finish Kimi's setup for the version you installed, then check something small. Building OpenDesign from source is not required for this path.
Pick the package for your machine, install it, open the app.
Download OpenDesignFollow the Kimi instructions that ship with your installed version. Authenticate with your Moonshot API key (BYOK) — the credential stays on your machine.
Kimi CLI documentation — Getting started# 1. Install Kimi CLI (uses uv; Python 3.12–3.14, 3.13 recommended)
curl -LsSf https://code.kimi.com/install.sh | bash
# or, if you already have uv:
uv tool install --python 3.13 kimi-cli
# 2. Start it in your project and authenticate on first run
cd your-project
kimi # then run /login: OAuth via Kimi Code, or paste a Moonshot API keyTaken from the Kimi setup notes in the published guide; confirm the current command in the vendor documentation.
Give it a brief you can hold in your head, so the whole loop — one revision included — stays judgeable.
Build a settings screen with a profile form and a save confirmation. Use my design rules. Check it at desktop and mobile widths.
Running OpenDesign from source instead? Follow the technical quickstart.
The Kimi design workflow
One notification-preferences screen, carried from your brief to a file you have verified. Each step separates your input, Kimi’s work, OpenDesign’s contribution and your own check.
Three to six lines of plain language. Say who the screen is for, what it must do, and which platforms matter.
A design system plus a few hard rules. That combination keeps output on-brand rather than generic.
Kimi produces one self-contained HTML file — layout, styles, interactions, stable hooks.
OpenDesign renders the file at the widths you specified. This is where you judge the design.
data-od-id targets for comments and edits.Ask for changes by pointing at elements in the preview. Each revision becomes a new file; nothing is overwritten without notice.
Resources
Guides, documentation and walkthroughs for designing with Kimi, drawn from the published guide.
Artifact types Kimi can generate in OpenDesign — a skill for each type.
Brand tokens and components to bind before any Kimi generation begins.
Starting points for decks, landing pages and product screens.
Limitations
FAQ
# 1. Install Kimi CLI (uses uv; Python 3.12–3.14, 3.13 recommended)
curl -LsSf https://code.kimi.com/install.sh | bash
# or, if you already have uv:
uv tool install --python 3.13 kimi-cli
# 2. Start it in your project and authenticate on first run
cd your-project
kimi # then run /login: OAuth via Kimi Code, or paste a Moonshot API key
# 3. Generate project context
/init # scaffolds an AGENTS.md for this project
# 4. Wire an MCP server (optional, e.g. Figma for design handoff)
/mcp-config # add, edit, and authenticate MCP servers conversationallykimi
# in the prompt:
> Implement the design in ./references (reference-desktop.png,
reference-mobile.png) using React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens from AGENTS.md.
Match spacing, layout, and hierarchy; make it responsive.
Run the dev server, render it in the browser, and iterate until it
matches the references across breakpoints.