Kimi OpenDesign

Design With
Kimi in
OpenDesign.

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.

On This Page Example
  1. Example
  2. Fit
  3. Compatibility
  4. Setup
  5. Workflow
  6. Resources
  7. Limitations
  8. FAQ

One Complete Kimi Design Task

One Kimi Task: Brief In, Interface Out

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.

1Design Brief and Constraints

Brief

Design 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.

  • Design systemOpenDesign paper canvas — Albert Sans, a single green accent
  • Breakpoints1440px desktop and 390px phone, with no horizontal scroll
  • InteractionsToggles, time pickers for quiet hours, an expandable per-project row
  • OutputA self-contained HTML file whose data-od-id hooks stay stable

2Who Does What: You, Kimi, OpenDesign

  • You

    You write the brief, pick the design system and set the acceptance criteria.

  • Kimi

    Kimi plans the layout, writes the HTML, CSS and JavaScript, and revises on request.

  • OpenDesign

    OpenDesign supplies the design system and skill, renders the preview, and keeps every revision as a file in the project.

  • Review

    Visual hierarchy, 8px-grid spacing, both breakpoints and every interaction get checked before handoff.

3Kimi's Artifact: Notification Settings at 1440px and 390px

Kimi's Artifact: Notification Settings at 1440px and 390px — Desktop
Illustrative example

4Review Before Handoff

Layout

Grid and Spacing

Sections, rows and the save action land on the 8px grid; time pickers line up with toggles.

Hierarchy

Visual Hierarchy

Channel names outrank helper text, and the accent appears only on enabled toggles.

Responsive

Mobile Layout

Sections collapse to a segmented switch; each row keeps a single toggle on the right.

Interaction

Interaction Checks

Flip a channel, set quiet hours, expand one project override.

Fit

Where Kimi Fits — and Where It Doesn't

Kimi Fits When

  • Agentic reference → UI. Long-horizon Kimi K2 coding turns your references into responsive markup, then checks the rendered result against them in a real browser.
  • 256k-token context. Your design system, component library and reference set all fit at once, so output reuses the primitives you actually have.
  • AGENTS.md + MCP. Your conventions travel in the context file; the Figma MCP server pulls real design context into the code.
  • Open and BYOK. Apache-2.0, authenticated by an OAuth login or your own Moonshot API key, with OpenAI- and Anthropic-compatible endpoints alongside.

Choose Another Workflow When

  • You need editable vector files. What comes back is HTML, not an editable design document — look to a separate vector workflow for the asset format you need.
  • You have no reference and no constraints. Without a design system or examples, output drifts toward a generic look; write the brief before you generate.
  • You do not have the credential this agent needs. A Moonshot API key of your own is required. OpenDesign neither supplies nor proxies credentials.
  • Your team works in Qwen or DeepSeek. Those agents have their own pages; the workspace carries over, the setup does not. See related agents.

Compatibility

Kimi Requirements Before You Start

Everything here concerns Kimi connected through the OpenDesign desktop app. Published references checked 6 September 2026.

Tool ScopeKimi, by Moonshot

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.

Accounts and AuthenticationMoonshot API key (BYOK)

Moonshot API key (BYOK). Authenticate with it and the credential stays on your machine. No quota or price is promised on this page.

System and VersionsDesktop app or source

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.

Connection CheckThe success signal

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

Kimi Setup in Three Steps

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.

  1. 1

    Download the OpenDesign Desktop App

    Pick the package for your machine, install it, open the app.

    Download OpenDesign
    CHECKPOINT
    The desktop app opens. Installed already? Skip ahead — there is no need to download again.
  2. 2

    Prepare Your Kimi Connection

    Follow 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 key

    Taken from the Kimi setup notes in the published guide; confirm the current command in the vendor documentation.

    CHECKPOINT
    Confirm the intended agent and account. If it is unavailable, check compatibility before scaling up to a larger task.
  3. 3

    Run One Small Kimi Task

    Give it a brief you can hold in your head, so the whole loop — one revision included — stays judgeable.

    Starter brief

    Build a settings screen with a profile form and a save confirmation. Use my design rules. Check it at desktop and mobile widths.

    CHECKPOINT
    Open the result, exercise the save state and ask for one specific change. Generation opens the review; it does not close it.

Running OpenDesign from source instead? Follow the technical quickstart.

The Kimi design workflow

Five Steps From Brief to Reviewed Kimi File

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.

  1. 1

    Design Brief

    Three to six lines of plain language. Say who the screen is for, what it must do, and which platforms matter.

    • YouYou write the brief and attach a reference screenshot when one exists.
    • KimiKimi reads the brief plus the project’s AGENTS.md instruction file, and asks a question when the request is ambiguous.
    • OpenDesignOpenDesign supplies the project, the prompt surface and the matching skill for the artifact type.
    • CheckCheck that the brief names its acceptance criteria. Writing them before generation costs less than retrofitting them afterward.
  2. 2

    Design Constraints

    A design system plus a few hard rules. That combination keeps output on-brand rather than generic.

    • YouSelect a design system, then state breakpoints and any components that must appear.
    • KimiKimi loads the DESIGN.md tokens and posture rules into context before writing any code.
    • OpenDesignOpenDesign ships the design-system library and binds your choice into the skill template.
    • CheckYour check: tokens match the brand — one accent, correct fonts, correct radius.
  3. 3

    Generate the Interface

    Kimi produces one self-contained HTML file — layout, styles, interactions, stable hooks.

    • YouYour part is to wait, or answer a clarifying question. No configuration needed.
    • KimiKimi plans sections, writes HTML, CSS and JavaScript, runs the file and repairs failures.
    • OpenDesignOpenDesign stores the artifact in the project folder and indexes it for preview.
    • CheckNothing yet — assess the file once it renders, not from reading source.
  4. 4

    Preview

    OpenDesign renders the file at the widths you specified. This is where you judge the design.

    • YouYou switch breakpoints, exercise the interactions and comment on individual elements.
    • KimiKimi reads your preview comments and prepares the next revision.
    • OpenDesignOpenDesign renders the preview and exposes data-od-id targets for comments and edits.
    • CheckCheck hierarchy, contrast, overflow at 390px, focus states, and whether the accent stays sparing.
  5. 5

    Revise and Verify

    Ask for changes by pointing at elements in the preview. Each revision becomes a new file; nothing is overwritten without notice.

    • YouYou turn comments into requests and decide when the work is done.
    • KimiKimi applies changes in place and re-runs the file.
    • OpenDesignOpenDesign keeps versions side by side and exports an image or the HTML when you finish.
    • CheckRe-check only the changed area, then the full page once at each breakpoint.

Resources

Kimi Design Resources

Limitations

Kimi Limits, Manual Checks and Fallbacks

  • ScopeKimi K2 models are tuned for agentic, long-horizon coding; the context window reaches up to 256k tokens, enough to hold an entire design system at once. Scope note: this page covers Kimi as an agent wired into OpenDesign, not every Kimi feature.
  • Usage LimitsUsage limits and cost track the credential you bring (Moonshot API key). No free-quota claim is made here.
  • NetworkYour project files are local, but inference is not offline. Check provider settings and data policies before sending sensitive inputs.
  • Output Is HTMLWhat comes back is an HTML file, not a vector design document.
  • Manual ReviewYou review accessibility, real content, brand fit and interaction correctness in the preview. Any self-check the agent runs is a first pass only.
  • FallbackWhen the agent is unavailable or a task fails, consult your installed version’s connection instructions and authentication. Save the error and the last working artifact before you alter configuration.

FAQ

Common Questions About Kimi and OpenDesign

Does Kimi CLI Actually Handle Design Work?
Yes — with an aesthetic skill, a design system, and real reference images in context, Kimi CLI produces production-quality, responsive UI, and its agentic Kimi K2 models can render and verify output against references. Without that context it tends to default to a generic look, which is the gap OpenDesign fills.
Do I Have to Pay to Design With Kimi CLI?
You bring your own credentials: authorize via the Kimi Code OAuth login or paste a Moonshot API key (BYOK), billed by Moonshot’s platform. OpenDesign never proxies your credentials either way.
What Makes Kimi CLI Suited to Design?
Two things: the Kimi K2 models are tuned for agentic, long-horizon coding and tool use, so the agent can build and refine through to a working result, and the context window reaches up to 256k tokens, enough to hold a whole design system and reference set at once. Both help — but taste still comes from the design system, skill, and references you supply.
Kimi CLI or Claude Code for Frontend Design?
Both are strong. Claude Code is known for specific, codebase-aware design decisions; Kimi CLI’s edge is its agentic Kimi K2 models and a large context with BYOK economics. Many teams use both — OpenDesign lets you switch agents without changing your design workflow.
How Do I Wire Kimi CLI to Figma?
Run /mcp-config inside Kimi CLI to add and authenticate the Figma MCP server. Kimi can then pull real design context — components, variables, layout data — so the generated code matches the source instead of approximating it.
What Kimi CLI actually is
Kimi CLI is an open-source (Apache-2.0) AI agent that Moonshot AI ships for the terminal. It reads your repository, edits files, runs shell commands, searches files, fetches web pages, and chooses its next step from the feedback it gets — planning and verifying work from natural-language tasks rather than just completing lines. It is a Python tool, installed with uv, and it drives the Kimi K2 model family behind the scenes.

For design work, two properties stand out. The Kimi K2 models are explicitly tuned for agentic, long-horizon coding and tool use, so the agent can carry a multi-step build through to a working result. And the context window reaches up to 256k tokens on recent K2 releases, large enough to hold your whole design system, component library, and reference set at once instead of summarizing them away.

Context files: Kimi CLI reads an AGENTS.md file for persistent project context — the natural place to encode your design conventions, tokens, and review checklists. Run /init to scaffold one for a project that does not have it.

MCP, ACP + subagents: It manages MCP servers conversationally with /mcp-config, exposes a session over the Agent Client Protocol (kimi acp) to Zed and JetBrains, and can dispatch built-in coder, explore, and plan subagents in isolated contexts.

Login or BYOK: On first launch, /login lets you authorize via OAuth (Kimi Code) or enter your own Moonshot API key; Kimi’s platform also exposes OpenAI- and Anthropic-compatible endpoints.

Credential: Moonshot API key (BYOK), or OAuth login via Kimi Code

Vendor: Moonshot AI

License: Apache-2.0, open source
Why agentic K2 models and a large context fit design
Kimi CLI’s design edge comes from two model properties — but, as with every agent, taste still has to be supplied.

Agentic, long-horizon coding: The Kimi K2 models are optimized for tool use and multi-step work, so the agent can take a reference and a brief and actually build, run, and refine the UI rather than stopping at a first draft.

A large context window: Up to 256k tokens on recent K2 releases means the whole design system, tokens, and many reference states fit at once, so the agent reuses your real primitives rather than inventing one-off styles.

Conventions in AGENTS.md: An AGENTS.md (plus an MCP server like Figma) points the agent at your tokens, components, and real specs, so it works against a brand instead of a default look.

Taste comes from three inputs you provide: a design system, a skill, and real reference images.

The lesson is the same one every agent teaches: Kimi CLI does not have taste by default. It produces good design when you give it constraints — a design system, an aesthetic skill, and concrete references. OpenDesign packages exactly those inputs, which is why the two fit together (more below).
Setting Up Kimi CLI for Design From Zero
The setup sequence: install → authenticate → configure AGENTS.md → add a skill → enable browser verification.

Encode your design rules: Put your tokens, primitives, and conventions in AGENTS.md and point Kimi at them, so output matches a brand instead of defaulting to a generic look.

Add browser verification: Wire a Playwright or browser MCP so Kimi renders in a real browser and checks its output across breakpoints instead of only confirming the build passes.

Use the current setup section for commands and version-specific details, which may change.

# 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 conversationally
Historical command example from the previous guide; verify current syntax in the linked vendor documentation.
The Reference-to-UI Loop
The highest-leverage design loop with Kimi CLI is turning reference material into working, responsive UI and iterating until it matches — feeding the agent your references and having it compare its rendered output back to them in a real browser.

Start from the clearest references you have — and include multiple states (desktop and mobile, hover, empty, loading), not just one hero shot.

Be specific in the prompt; vague prompts produce generic UI even with a strong agent.

Keep your design system and conventions in AGENTS.md, and tell Kimi where the tokens and canonical primitives live.

Run a dev server and have Kimi render in a real browser, resizing to breakpoints to check the result.

Iterate by having Kimi compare its implementation back to the references — not merely confirm it builds.

Point Kimi at your references and the dev server, then give concrete constraints:

Keep prompts small and focused, commit good iterations and revert bad ones (telling Kimi when you revert), so each pass builds on a clean base. Kimi CLI can also take a short screen recording or demo clip when a flow is hard to describe in words.

kimi # 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.
Historical command example from the previous guide; verify current syntax in the linked vendor documentation.
AGENTS.md, MCP, and subagents
Three extension points make Kimi CLI practical for sustained design work, and all three map cleanly onto an open design workflow.

AGENTS.md context: Project rules live in an AGENTS.md at the repo root. It is the durable home for your design conventions, read on every run — and it is the same portable format other agents use.

MCP servers: Add MCP servers conversationally with /mcp-config — the portable way to bring in design context and external tools, most relevantly the Figma MCP server, that work across agents, not just Kimi.

Subagents and the plugin marketplace: Dispatch built-in coder, explore, and plan subagents in isolated contexts, and install skills, MCP servers, and data sources from the marketplace or any GitHub repo to gather references and run the verification loop.

These are portable, multi-agent capabilities — exactly the kind of thing OpenDesign is built to orchestrate, rather than re-create per project.
Kimi CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI for design
There is no single winner for design work — each agent has a different strength, and experienced teams stack them. A fair summary:

Kimi CLI — Agentic Kimi K2 models tuned for long-horizon coding and tool use, with a large context; open-source and BYOK — Multi-step builds and holding a whole design system in context affordably

Codex — Strong visual polish with a frontend skill; sandboxed async builds — Delegated async builds and portable AGENTS.md rules

Claude Code — Specific design decisions (hex, spacing, type) and codebase-aware UX — Frontend reasoning and large-context refactors

Cursor — Visual build-and-see loop with live preview and inline edits — Tight iterate-and-watch UI work inside an IDE

Gemini CLI — Strong multimodal image understanding and a 1M-token context; free tier — Screenshot-heavy work and very large context

The recurring community verdict is that taste comes from humans: all of them default to a generic aesthetic without skills, references, and constraints. That is the real problem to solve — and it is design-tool-shaped, not model-shaped.

Agent — Design strength — Best for
Pitfalls, and how to avoid the “AI slop” look
The most common complaint about AI-generated design is that it looks generic — soft gradients, floating panels, oversized rounded corners, dramatic shadows, an Inter-and-purple vibe that “screams an AI made this.” Other reported issues include broken mobile layouts and instructions leaking into UI copy. None of these are unique to Kimi CLI; they are what happens when any agent runs without a curated design context.

Add an aesthetic skill: A curated design skill forces the agent to commit to a real direction instead of the default look.

Verify in a real browser: Have Kimi render and self-check across breakpoints so layouts do not silently break on mobile.

Supply tokens and references: Real design tokens and reference screenshots are the single biggest lever on output quality.

Encode rules in AGENTS.md: Put “no hero cards, max two typefaces, brand-first hierarchy” style rules where the agent reads them every run.

Notice that every mitigation is about giving the agent a curated design context. Maintaining that context by hand, per project, is the toil OpenDesign removes.
Designing with Kimi CLI inside OpenDesign
OpenDesign is the open-source design layer the workflow above keeps asking for. It treats Kimi CLI as a first-party adapter and wraps it in a curated skill and design-system library, a structured render pipeline, and a local desktop UI — so the design context that makes Kimi good is there from the first run, not assembled by hand each time. Both are open-source and local-first, which makes the pairing a natural fit.

Authenticate with your Moonshot API key (BYOK) — credentials stay on your machine and are never proxied through us.

Pick a design system and a skill, then generate decks, prototypes, and landing pages with consistent taste.

Every artifact and DESIGN.md file lives in your own repo, not a hosted cloud.

Same Kimi CLI agent, same key — plus a real, portable, open-source design workflow around it. It is local-first and Apache-2.0, so nothing about your work or your credentials leaves your machine.

Install OpenDesign and select Kimi CLI as your agent.
Is OpenDesign affiliated with Moonshot AI?
No. OpenDesign is independent; Kimi is a trademark of Moonshot AI.