Kilo Code for design.

What Kilo Code actually is

Kilo Code is an open-source AI coding agent built by Kilo Code, Inc. It runs as a VS Code extension, in JetBrains IDEs, and as a command-line interface — reading your repository, editing files, running commands, and planning and verifying work from natural-language tasks rather than just completing lines. Its defining trait is that it is model-agnostic: you choose which model drives it, and you bring your own provider keys.

For design work, two properties stand out. Because it is model-agnostic, you can point it at whichever strong vision-capable model best reads a reference screenshot and reasons about layout. And because it is open-source and BYOK, you can inspect exactly what context is sent and keep credentials and cost under your own control.

• Agent modes: Kilo ships specialized modes — Architect for planning, Code for building, Debug for fixing, and Ask for questions — plus custom modes, so you can plan a design and then implement it in separate, focused passes.
• Custom rules + MCP: It reads project-level custom rules for persistent context and supports MCP servers (with an MCP marketplace), so you can add external context like a live Figma file or design tooling.
• Bring your own keys: Kilo is BYOK across many providers — Anthropic, OpenAI, Google, OpenRouter, and more — or you can use Kilo's own gateway, which exposes 500+ models at provider cost.

• Vendor: Kilo Code, Inc. (open source)
• Credential: your own provider API key (BYOK — Anthropic, OpenAI, Google, OpenRouter, and more) or Kilo's own gateway
• License: open source

Why an open, model-agnostic agent fits design

Kilo Code’s design edge comes from openness and model choice — but, as with every agent, taste still has to be supplied.

• Model-agnostic by design: Because you choose the model, you can drive Kilo with whichever vision-capable model reads reference screenshots best — and switch when a better one appears, without changing your workflow.
• Open and inspectable: Kilo is open-source, so you can see exactly what context and prompts are sent — useful when you want the agent to reuse your real design primitives rather than invent one-off styles.
• Conventions in custom rules: Project custom rules (plus an MCP server for Figma) point the agent at your tokens, components, and real specs, so it works against a brand instead of a default look.

The lesson is the same one every agent teaches: Kilo Code does not have taste by default. It produces good design when you give it constraints — a design system, an aesthetic skill, and concrete references. Open Design packages exactly those inputs, which is why the two fit together (more below).

Set up Kilo Code for design work, from zero

Here is the full path from a clean machine to a Kilo Code that can build and verify UI.

# 1. Install the Kilo Code extension from the VS Code
#    (or JetBrains) marketplace, or install the CLI.

# 2. Open your project and sign in / add a provider key
cd your-project
kilo              # connect your provider (BYOK) or Kilo's gateway

# 3. Add project context
#    create custom rules for this project's design conventions

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add it from the MCP marketplace / MCP settings

• Encode your design rules: Put your tokens, primitives, and conventions in Kilo's custom rules and point the agent at them, so output matches a brand instead of defaulting to a generic look.
• Add browser verification: Wire a Playwright or browser MCP so Kilo renders in a real browser and checks its output across breakpoints instead of only confirming the build passes.

The screenshot-to-UI workflow

The highest-leverage design loop with Kilo Code is turning a reference image into working, responsive UI and iterating until it matches — leaning on a vision-capable model to compare output back to the reference.

1. Start from the clearest visual references you have — and include multiple states (desktop and mobile, hover, empty, loading), not just one hero shot.
2. Be specific in the prompt; vague prompts produce generic UI even with a strong model.
3. Keep your design system and conventions in Kilo's custom rules, and tell the agent where the tokens and canonical primitives live.
4. Run a dev server and have Kilo render in a real browser, resizing to breakpoints to check the result.
5. Iterate by having Kilo compare its implementation back to the screenshots — not merely confirm it builds.

Use Architect mode to plan the build, then switch to Code mode and attach your references with concrete constraints:

# Plan in Architect mode, then build in Code mode:
> Implement this design from @reference-desktop.png and
  @reference-mobile.png in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens
  from the custom rules.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the
  references across breakpoints.

Keep prompts small and focused, commit good iterations and revert bad ones (telling Kilo when you revert), so each pass builds on a clean base.

Modes, custom rules, and MCP

Three extension points make Kilo Code practical for sustained design work, and all three map cleanly onto an open design workflow.

• Modes (Architect → Code): Plan the structure of a screen in Architect mode, then implement it in Code mode and fix issues in Debug mode — separating design intent from implementation. Custom modes let you encode a design-review pass of your own.
• Custom rules: Project custom rules are the durable home for your design conventions — tokens, primitives, and review checklists — read on every run so the agent works against your brand.
• MCP servers: Kilo supports MCP servers via its marketplace — the portable way to bring in design context and external tools, most relevantly a Figma MCP server, that work across agents, not just Kilo.

These are portable, multi-agent capabilities — exactly the kind of thing Open Design is built to orchestrate, rather than re-create per project.

Kilo Code 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:

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.

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 Kilo Code; 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: Use a vision-capable model to 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 custom rules: 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 Open Design removes.

Designing with Kilo Code inside Open Design

Open Design is the open-source design layer the workflow above keeps asking for. It treats Kilo Code 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 Kilo 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.

1. Install Open Design and select Kilo Code as your agent.
2. Authenticate with your own provider key (BYOK) or Kilo's gateway — credentials stay on your machine and are never proxied through us.
3. Pick a design system and a skill, then generate decks, prototypes, and landing pages with consistent taste.
4. Every artifact and DESIGN.md file lives in your own repo, not a hosted cloud.

Same Kilo Code agent, same keys — plus a real, portable, open-source design workflow around it. It is local-first and open-source, so nothing about your work or your credentials leaves your machine.

Frequently asked questions

1. 01 Can Kilo Code really do design work? +

   Yes — with an aesthetic skill, a design system, and real reference images in context, Kilo Code produces production-quality, responsive UI, and a vision-capable model verifies output against references. Without that context it tends to default to a generic look, which is the gap Open Design fills.

2. 02 Do I need to pay to design with Kilo Code? +

   Kilo Code is open-source and free to install. You bring your own provider API key (BYOK) and pay that provider directly, or use Kilo's own gateway at provider cost. Open Design never proxies your credentials either way.

3. 03 What makes Kilo Code good for design specifically? +

   It is model-agnostic and open-source, so you can drive it with whichever vision-capable model reads reference screenshots best, inspect exactly what context is sent, and keep cost and credentials under your control. Taste still comes from the design system, skill, and references you supply.

4. 04 Kilo Code or Claude Code for frontend design? +

   Both are strong. Claude Code is known for specific, codebase-aware design decisions; Kilo Code's edge is being open-source and model-agnostic with BYOK, so you choose the model. Many teams use both — Open Design lets you switch agents without changing your design workflow.

5. 05 How do I connect Kilo Code to Figma? +

   Add a Figma MCP server from Kilo's MCP marketplace or MCP settings. Kilo can then pull real design context — components, variables, layout data — so the generated code matches the source instead of approximating it.

6. 06 Is Open Design affiliated with Kilo Code? +

   No. Kilo Code is a product of Kilo Code, Inc.; Open Design is an independent open-source project that supports it as a first-party adapter. Both happen to be open-source, but they are separate projects.

7. 07 Are my files and credentials safe? +

   Yes — Open Design is local-first and open-source. Your files, artifacts, and DESIGN.md stay in your own repo, and your provider credentials are used directly by your agent, never routed through Open Design servers.