Kilo Code para design.

O que o Kilo Code realmente é

O Kilo Code é um agente de programação de IA open source construído pela Kilo Code, Inc. Ele roda como uma extensão do VS Code, em IDEs JetBrains e como uma interface de linha de comando — lendo seu repositório, editando arquivos, executando comandos e planejando e verificando o trabalho a partir de tarefas em linguagem natural em vez de apenas completar linhas. Seu traço definidor é que ele é agnóstico de modelo: você escolhe qual modelo o conduz e traz suas próprias chaves de provedor.

Para trabalho de design, duas propriedades se destacam. Como é agnóstico de modelo, você pode apontá-lo para o modelo com capacidade de visão que melhor lê um screenshot de referência e raciocina sobre layout. E como é open source e BYOK, você pode inspecionar exatamente que contexto é enviado e manter credenciais e custo sob seu próprio controle.

• Modos de agente: O Kilo vem com modos especializados — Architect para planejar, Code para construir, Debug para corrigir e Ask para perguntas — além de modos personalizados, então você pode planejar um design e depois implementá-lo em passagens separadas e focadas.
• Regras personalizadas + MCP: Ele lê regras personalizadas no nível do projeto para contexto persistente e suporta servidores MCP (com um marketplace de MCP), então você pode adicionar contexto externo como um arquivo do Figma ao vivo ou ferramentas de design.
• Traga suas próprias chaves: O Kilo é BYOK em muitos provedores — Anthropic, OpenAI, Google, OpenRouter e mais — ou você pode usar o gateway próprio do Kilo, que expõe mais de 500 modelos ao custo do provedor.

• Fornecedor: Kilo Code, Inc. (open source)
• Credencial: sua própria chave de API de provedor (BYOK — Anthropic, OpenAI, Google, OpenRouter e mais) ou o gateway próprio do Kilo
• Licença: open source

Por que um agente aberto e agnóstico de modelo combina com design

A vantagem de design do Kilo Code vem da abertura e da escolha de modelo — mas, como acontece com todo agente, o bom gosto ainda precisa ser fornecido.

• Agnóstico de modelo por concepção: Como você escolhe o modelo, pode conduzir o Kilo com o modelo com capacidade de visão que melhor lê screenshots de referência — e trocá-lo quando surgir um melhor, sem mudar seu fluxo.
• Aberto e inspecionável: O Kilo é open source, então você pode ver exatamente que contexto e prompts são enviados — útil quando você quer que o agente reutilize seus primitivos de design reais em vez de inventar estilos pontuais.
• Convenções em regras personalizadas: As regras personalizadas de projeto (mais um servidor MCP para o Figma) apontam o agente para seus tokens, componentes e specs reais, para que ele trabalhe em função de uma marca em vez de um visual padrão.

A lição é a mesma que todo agente ensina: o Kilo Code não tem bom gosto por padrão. Ele produz bom design quando você lhe dá restrições — um design system, uma skill estética e referências concretas. O Open Design empacota exatamente esses insumos, e é por isso que os dois se encaixam (mais sobre isso abaixo).

Configure o Kilo Code para trabalho de design, do zero

Aqui está o caminho completo de uma máquina limpa até um Kilo Code capaz de construir e verificar 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

• Codifique suas regras de design: Coloque seus tokens, primitivos e convenções nas regras personalizadas do Kilo e aponte o agente para elas, para que a saída combine com uma marca em vez de recorrer a um visual genérico.
• Adicione verificação no navegador: Conecte um MCP de Playwright ou de navegador para que o Kilo renderize em um navegador real e confira a saída em diferentes breakpoints em vez de apenas confirmar que o build passou.

O fluxo de screenshot para UI

O laço de design de maior alavancagem com o Kilo Code é transformar uma imagem de referência em UI responsiva e funcional e iterar até que ela corresponda — apoiando-se em um modelo com capacidade de visão para comparar a saída de volta com a referência.

1. Comece pelas referências visuais mais claras que você tiver — e inclua múltiplos estados (desktop e mobile, hover, vazio, carregando), não apenas uma única imagem de destaque.
2. Seja específico no prompt; prompts vagos produzem UI genérica mesmo com um modelo forte.
3. Mantenha seu design system e suas convenções nas regras personalizadas do Kilo e diga ao agente onde ficam os tokens e os primitivos canônicos.
4. Rode um servidor de desenvolvimento e faça o Kilo renderizar em um navegador real, redimensionando para os breakpoints para conferir o resultado.
5. Itere fazendo o Kilo comparar sua implementação de volta com os screenshots — não apenas confirmar que ela faz o build.

Use o modo Architect para planejar o build, depois troque para o modo Code e anexe suas referências com restrições concretas:

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

Mantenha os prompts pequenos e focados, faça commit das boas iterações e reverta as ruins (avisando o Kilo quando reverter), para que cada passagem parta de uma base limpa.

Modos, regras personalizadas e MCP

Três pontos de extensão tornam o Kilo Code prático para trabalho de design contínuo, e os três se encaixam perfeitamente em um fluxo de design aberto.

• Modos (Architect → Code): Planeje a estrutura de uma tela no modo Architect, depois implemente-a no modo Code e corrija problemas no modo Debug — separando a intenção de design da implementação. Os modos personalizados permitem codificar uma passagem de revisão de design própria.
• Regras personalizadas: As regras personalizadas de projeto são o lar durável das suas convenções de design — tokens, primitivos e checklists de revisão — lidas a cada execução para que o agente trabalhe em função da sua marca.
• Servidores MCP: O Kilo suporta servidores MCP por meio do seu marketplace — a forma portátil de trazer contexto de design e ferramentas externas, mais relevante um servidor MCP do Figma, que funcionam entre agentes, não apenas no Kilo.

Essas são capacidades portáteis e multi-agente — exatamente o tipo de coisa que o Open Design foi feito para orquestrar, em vez de recriar a cada projeto.

Kilo Code vs Codex vs Claude Code vs Cursor vs Gemini CLI para design

Não há um único vencedor para o trabalho de design — cada agente tem um ponto forte diferente, e equipes experientes os combinam. Um resumo justo:

O veredito recorrente da comunidade é que o bom gosto vem das pessoas: todos eles recorrem a uma estética genérica sem skills, referências e restrições. É esse o problema real a resolver — e ele tem formato de ferramenta de design, não de modelo.

Armadilhas, e como evitar o visual de “lixo de IA”

A queixa mais comum sobre design gerado por IA é que ele parece genérico — gradientes suaves, painéis flutuantes, cantos arredondados exagerados, sombras dramáticas, aquela vibe de Inter-com-roxo que “grita que uma IA fez isto”. Outros problemas relatados incluem layouts mobile quebrados e instruções vazando para o texto da UI. Nenhum desses é exclusivo do Kilo Code; é o que acontece quando qualquer agente roda sem um contexto de design curado.

• Adicione uma skill estética: Uma skill de design curada força o agente a se comprometer com uma direção real em vez do visual padrão.
• Verifique em um navegador real: Use um modelo com capacidade de visão para renderizar e autoverificar em diferentes breakpoints, para que os layouts não quebrem silenciosamente no mobile.
• Forneça tokens e referências: Tokens de design reais e screenshots de referência são a maior alavanca isolada sobre a qualidade da saída.
• Codifique regras nas regras personalizadas: Coloque regras de estilo como “sem hero cards, no máximo duas famílias tipográficas, hierarquia que prioriza a marca” onde o agente as lê a cada execução.

Note que toda mitigação consiste em dar ao agente um contexto de design curado. Manter esse contexto à mão, a cada projeto, é o trabalho braçal que o Open Design elimina.

Projetando com o Kilo Code dentro do Open Design

O Open Design é a camada de design open source que o fluxo acima fica pedindo o tempo todo. Ele trata o Kilo Code como um adaptador de primeira linha e o envolve em uma biblioteca curada de skill e design system, um pipeline de renderização estruturado e uma UI desktop local — para que o contexto de design que torna o Kilo bom esteja presente desde a primeira execução, e não montado à mão a cada vez. Ambos são open source e local-first, o que torna a dupla uma combinação natural.

1. Instale o Open Design e selecione o Kilo Code como seu agente.
2. Autentique-se com sua própria chave de provedor (BYOK) ou o gateway do Kilo — as credenciais ficam na sua máquina e nunca passam por nós como intermediários.
3. Escolha um design system e uma skill e, em seguida, gere decks, protótipos e landing pages com bom gosto consistente.
4. Cada artefato e arquivo DESIGN.md vive no seu próprio repositório, não em uma nuvem hospedada.

O mesmo agente Kilo Code, as mesmas chaves — além de um fluxo de design real, portátil e open source ao redor dele. É local-first e open source, então nada sobre seu trabalho ou suas credenciais sai da sua máquina.

Perguntas frequentes

1. 01 O Kilo Code consegue mesmo fazer trabalho de design? +

   Sim — com uma skill estética, um design system e imagens de referência reais em contexto, o Kilo Code produz UI responsiva e de qualidade de produção, e um modelo com capacidade de visão verifica a saída em relação às referências. Sem esse contexto, ele tende a recorrer a um visual genérico, que é a lacuna que o Open Design preenche.

2. 02 Preciso pagar para projetar com o Kilo Code? +

   O Kilo Code é open source e gratuito para instalar. Você traz sua própria chave de API de provedor (BYOK) e paga a esse provedor diretamente, ou usa o gateway próprio do Kilo ao custo do provedor. O Open Design também nunca atua como intermediário das suas credenciais.

3. 03 O que torna o Kilo Code bom especificamente para design? +

   Ele é agnóstico de modelo e open source, então você pode conduzi-lo com o modelo com capacidade de visão que melhor lê screenshots de referência, inspecionar exatamente que contexto é enviado e manter custo e credenciais sob seu controle. O bom gosto ainda vem do design system, da skill e das referências que você fornece.

4. 04 Kilo Code ou Claude Code para design de frontend? +

   Ambos são fortes. O Claude Code é conhecido por decisões de design específicas e conscientes do código; a vantagem do Kilo Code é ser open source e agnóstico de modelo com BYOK, então você escolhe o modelo. Muitas equipes usam os dois — o Open Design permite trocar de agente sem mudar seu fluxo de design.

5. 05 Como conecto o Kilo Code ao Figma? +

   Adicione um servidor MCP do Figma a partir do marketplace de MCP do Kilo ou das configurações de MCP. O Kilo pode então puxar contexto de design real — componentes, variáveis, dados de layout — para que o código gerado corresponda à fonte em vez de aproximá-la.

6. 06 O Open Design tem vínculo com o Kilo Code? +

   Não. O Kilo Code é um produto da Kilo Code, Inc.; o Open Design é um projeto open source independente que o suporta como adaptador de primeira linha. Ambos por acaso são open source, mas são projetos separados.

7. 07 Meus arquivos e credenciais estão seguros? +

   Sim — o Open Design é local-first e open source. Seus arquivos, artefatos e o DESIGN.md permanecem no seu próprio repositório, e suas credenciais de provedor são usadas diretamente pelo seu agente, nunca roteadas pelos servidores do Open Design.