LEITURAS ADICIONAIS
Leituras Adicionais sobre o Kilo
Guias, documentação e tutoriais passo a passo para trabalho de design com Kilo, conforme listado no guia publicado.
Kilo 
OpenDesign Projetar com
Kilo no
OpenDesign.
Como projetar interfaces com o Kilo Code no OpenDesign: o modelo que você escolhe, suas próprias regras e modos, uma tarefa de página de produto do screenshot ao arquivo revisado, e os limites que você precisa conhecer antes de começar.
Do briefing à interface01 / Kilo
VOCÊ TRAZ A IDEIA↗
“Uma página de produto a partir de um screenshot,
com qualquer modelo que eu escolher.”
TRÊS ROTAS PARA O GUIA DO KILO
Decida Seu Ponto de Partida para o Kilo
ESTE GUIA · DESIGN DE UI
Leve uma Interface de Produto do Brief ao HTML no Kilo
Esta página cobre o brief, as referências, as regras de design e um resultado HTML revisado.
Ler este guia CONFIGURAÇÃOConfigure o Kilo do Zero
A rota completa de uma máquina limpa até o Kilo Code construir e verificar UI.
Ir para a configuração COMPARAÇÃOCompare o Kilo Com Outros Agentes
Onde o Kilo diverge do Codex, Claude Code e Cursor no trabalho de design, e quando outro fluxo de trabalho é a melhor escolha.
Ver a comparaçãoNesta página Exemplo
Uma Tarefa Completa de Design Com o Kilo
Uma Tarefa de Design no Kilo: Do Brief à Interface
A tarefa vai do brief e das restrições que você entrega, passando pelo artefato que o Kilo retorna, até as verificações que você ainda executa antes de considerá-la concluída. A interface abaixo é um exemplo ilustrativo feito para esta página, não uma execução do Kilo registrada.
1Briefing de Design e Restrições
BriefingUsando a captura de tela anexada, projete uma página de detalhes de produto de uma marca outdoor: galeria, preço, escolhas de tamanho e cor, adicionar à sacola, produtos relacionados. Desktop e celular.
- Sistema de designAlbert Sans e um único destaque verde na tela de papel do OpenDesign
- Breakpoints1440px desktop e 390px mobile, sem rolagem horizontal
- InteraçõesMiniaturas da galeria, seleção de opções, adicionar à sacola, rolagem de produtos relacionados
- SaídaUm único arquivo HTML autocontido com ganchos estáveis
data-od-id
2Quem Faz o Quê: Você, Kilo, OpenDesign
- Você
Você escreve o brief, escolhe o sistema de design e define os critérios de aceitação.
- Kilo
O Kilo planeja o layout, escreve HTML, CSS e JavaScript, depois revisa mediante solicitação.
- OpenDesign
OpenDesign fornece o sistema de design e a skill, renderiza a prévia e mantém cada versão como um arquivo de projeto.
- Revisão
Antes da entrega, você verifica a hierarquia visual, o espaçamento na grade de 8px, ambos os breakpoints e cada interação.
3O Artefato do Kilo: Página de Produto em 1440px e 390px
4Revisar Antes da Entrega
Layout
Grade e Espaçamento
Galeria e informações alinham-se à grade de 8px; em 1440, a coluna de informações permanece dentro da altura da galeria.
Hierarquia
Hierarquia Visual
Nome e preço vêm primeiro, depois as opções; o destaque é reservado para o botão de adicionar à sacola.
Responsivo
Layout Mobile
Ordem no mobile: galeria, nome e preço, opções, um botão de largura total; produtos relacionados com rolagem.
Interação
Verificações de Interação
Interações a testar: trocar miniatura, escolher tamanho, adicionar à sacola, rolar itens relacionados.
Adequação
Onde o Kilo se Encaixa — e Onde Não
O Kilo se encaixa quando
- Escolha de modelo para captura de tela → UI. Aponte o Kilo para o modelo com capacidade de visão que melhor converte uma imagem de referência em marcação responsiva, depois compare o resultado com essa imagem.
- BYOK entre provedores. Use suas próprias chaves para Anthropic, OpenAI, Google, OpenRouter e outros, ou o gateway do Kilo, mantendo custo e credenciais em suas mãos.
- Modos, regras personalizadas, MCP. Modo Architect para planejamento, modo Code para construção, regras personalizadas para convenções e o servidor Figma MCP para contexto de design real.
- Código aberto. Prompts e cargas de contexto são inspecionáveis, nada fica oculto, e o Kilo roda na sua IDE ou CLI.
Escolha Outro Workflow Quando
- Você precisa de arquivos vetoriais editáveis. O que retorna é HTML, não um documento de design editável. Procure um fluxo de trabalho vetorial separado para o formato de asset que você precisa.
- Não há referência nem restrição. Sem sistema de design ou exemplos, a saída tende ao genérico; escreva o brief primeiro.
- A credencial necessária está faltando. O Kilo precisa da sua própria chave de API do provedor (BYOK) ou do gateway do Kilo. OpenDesign não fornece nem faz proxy de credenciais.
- Sua equipe trabalha com OpenCode ou Aider. Esses agentes têm suas próprias páginas; o workspace é transportado enquanto a configuração difere. Veja agentes relacionados.
Compatibilidade
Requisitos do Kilo antes de começar
Esta página cobre o Kilo conectado através do aplicativo desktop OpenDesign. As referências foram verificadas em 6 de setembro de 2026.
Escopo da ferramentaKilo, por Kilo Code, Inc.
O Kilo Code, da Kilo Code, Inc., é um agente de codificação por IA de código aberto. Ele funciona no VS Code, IDEs JetBrains e no terminal: lendo sua base de código, editando arquivos e executando comandos. O assunto aqui é projetar interfaces com o Kilo através do OpenDesign, não a interface do próprio Kilo. As notas de configuração do OpenDesign listam os agentes disponíveis.
Contas e autenticaçãoUma chave de API de provedor que você fornece (BYOK), ou a do Kilo
Sua própria chave de API de provedor (BYOK) ou o gateway do Kilo. Autentique-se com sua própria chave de provedor (BYOK) ou o gateway do Kilo; as credenciais permanecem na sua máquina. Nenhuma cota ou preço é prometido aqui.
Sistema e VersõesApp de desktop ou código-fonte
As builds para desktop estão na página de download. Os requisitos de Node.js e pnpm no quickstart do código-fonte se aplicam ao executar a partir do código-fonte, não ao instalar um pacote desktop. Versão mínima compatível do Kilo: não verificada nesta página.
Verificação de ConexãoO sinal de sucesso
Use as instruções de conexão exibidas pela sua versão instalada, depois tente uma tarefa pequena. Verifique se o Kilo a concluiu e se o artefato abre. Baixar sozinho não prova uma conexão funcional.
Comece com o app de desktop
Configuração do Kilo em três etapas
Comece com o download, conclua a configuração do Kilo para sua versão instalada, depois teste um pequeno resultado. Seguir este caminho não exige compilar o OpenDesign a partir do código-fonte.
- 1
Baixe o App de Desktop da OpenDesign
Escolha o pacote para sua máquina, instale-o e inicie o aplicativo.
Baixar o OpenDesignPONTO DE VERIFICAÇÃOO aplicativo desktop abre. Se você já o tem, continue para o próximo passo; nenhum segundo download é necessário. - 2
Prepare sua Conexão com o Kilo
Use as instruções do Kilo que correspondem à sua versão instalada. Faça login com sua própria chave de provedor (BYOK) ou o gateway do Kilo; as credenciais permanecem locais na sua máquina.
Documentação do Kilo Code# 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 gatewayRetirado das notas de configuração do Kilo no guia publicado; para o comando atual, consulte a documentação do fornecedor.
PONTO DE VERIFICAÇÃOCertifique-se de que o agente e a conta são os que você pretendia. Se indisponíveis, revise a compatibilidade antes de tentar uma tarefa maior. - 3
Execute Uma Pequena Tarefa no Kilo
Comece com um brief pequeno o suficiente para julgar todo o ciclo, incluindo uma revisão.
Briefing inicialConstrua uma tela de configurações com um formulário de perfil e confirmação de salvamento. Siga minhas regras de design. Verifique em larguras desktop e mobile.
PONTO DE VERIFICAÇÃOAbra o resultado, teste o estado de salvamento, depois peça uma alteração específica. O arquivo gerado inicia a revisão; ele não a conclui.
Para executar o OpenDesign a partir do código-fonte, consulte o quickstart técnico.
O workflow de design do Kilo
Cinco Passos em uma Tarefa de Design no Kilo
Uma página de produto, acompanhada do brief inicial a um arquivo que você realmente verificou. Cada passo nomeia sua entrada, o que o Kilo faz, o que o OpenDesign contribui e a verificação que o encerra.
- 1
Briefing de Design
Mantenha simples e curto — três a seis linhas. Diga para quem é a tela, o que ela deve fazer e quais plataformas importam.
- VocêVocê escreve o brief e anexa uma captura de tela de referência quando houver uma.
- KiloLê seu brief e o arquivo de instruções do projeto, e pergunta em vez de adivinhar quando um detalhe é ambíguo.
- OpenDesignFornece o projeto, a superfície de prompt e a skill correspondente ao tipo de artefato.
- VerificarVerifique se o brief detalha os critérios de aceitação. Escrevê-los agora custa menos do que corrigir o arquivo depois.
- 2
Restrições de Design
Um sistema de design mais um punhado de regras firmes — a diferença entre uma saída que carrega sua marca e uma saída que poderia pertencer a qualquer um.
- VocêEscolha um sistema de design, depois nomeie seus breakpoints e quaisquer componentes que devem aparecer.
- KiloCarrega os tokens e regras de postura do DESIGN.md no contexto antes de escrever qualquer marcação.
- OpenDesignFornece a biblioteca do sistema de design e vincula o sistema escolhido ao template da skill.
- VerificarVerifique se os tokens correspondem à sua marca: um destaque, fontes corretas, raio correto.
- 3
Gerar a Interface
O Kilo escreve um único arquivo HTML autocontido — layout, estilos, interações, ganchos estáveis.
- VocêSua tarefa aqui é esperar ou responder a uma pergunta de esclarecimento. Não há nada para configurar.
- KiloPlaneja as seções, escreve o HTML, CSS e JavaScript, executa o arquivo e conserta o que falha.
- OpenDesignSalva o artefato na pasta do projeto e o indexa para que possa ser pré-visualizado.
- VerificarNada ainda — julgue-o renderizado, não pela leitura do código-fonte.
- 4
Pré-visualização
OpenDesign renderiza o arquivo nas larguras que você especificou. O julgamento acontece aqui, na pré-visualização.
- VocêAltere larguras, exercite as interações e comente sobre elementos específicos.
- KiloLê os comentários que você deixou na pré-visualização e prepara a próxima revisão.
- OpenDesignRenderiza a pré-visualização e expõe alvos
data-od-idpara que comentários e edições possam se vincular a eles. - CheckVerifique hierarquia, contraste, transbordamento em 390px e estados de foco, e pergunte se o acento continua comedido.
- 5
Revisar e Verificar
Peça mudanças apontando para elementos na pré-visualização. Cada revisão chega como um novo arquivo; nada é sobrescrito silenciosamente.
- VocêConverte comentários em solicitações e decide quando a tarefa termina.
- KiloAplica alterações no local e executa o arquivo novamente.
- OpenDesignMantém versões lado a lado e, no final, exporta uma imagem ou o HTML.
- CheckVerifique novamente apenas a área alterada, depois a página inteira uma vez por breakpoint.
Recursos
Recursos de Design do Kilo
Skills Explore skills Sistemas de design Explore sistemas Templates Explorar modelos
Skills de Design
Os tipos de artefato que o Kilo pode produzir dentro do OpenDesign — uma skill por tipo.
Sistemas de Design
Tokens de marca e componentes para vincular antes de o Kilo gerar qualquer coisa.
Templates
Pontos de partida para decks, landing pages e telas de produto.
Limitações
Onde o Kilo Para: Limites, Verificações Manuais, Alternativas
- EscopoO Kilo é agnóstico em relação a modelos e BYOK em muitos provedores, com modos Architect/Code/Debug/Ask e suporte a MCP, então a escolha do modelo e as credenciais continuam suas. Esta página trata do Kilo como um agente conectado ao OpenDesign, não de todos os recursos do Kilo.
- Limites de UsoLimites de custo e uso acompanham a credencial com que você se autentica — sua própria chave de API do provedor ou o gateway do Kilo. Nenhuma alegação de cota gratuita é feita aqui.
- RedeArquivos que estão no seu projeto não tornam a inferência offline. Antes de compartilhar entradas sensíveis, revise as configurações de provedor e as políticas de dados do agente.
- A Saída É HTMLO artefato é um arquivo HTML; não é um arquivo de design vetorial.
- Revisão ManualVocê revisa acessibilidade, conteúdo real, adequação à marca e correção de interação na pré-visualização. Qualquer autoverificação que o agente faça é uma primeira passada, não uma aprovação final.
- AlternativaQuando o agente estiver indisponível ou uma tarefa falhar, consulte as instruções de conexão e autenticação para a versão instalada. Antes de alterar a configuração, guarde o erro e o último artefato que funcionou.
Perguntas Frequentes
Perguntas Frequentes Sobre o Kilo e o OpenDesign
O Kilo Code realmente faz trabalho de design?
Sim — com um skill estético, um design system e imagens de referência reais no contexto, o Kilo Code produz UI responsiva com qualidade de produção, e um modelo com visão computacional verifica o resultado em relação às referências. Sem esse contexto, ele tende a assumir uma aparência genérica, que é a lacuna que a OpenDesign preenche.
Existe algum custo para projetar com o Kilo Code?
O Kilo Code é de código aberto e gratuito para instalar. Você usa sua própria chave de API de provedor (BYOK) e paga esse provedor diretamente, ou usa o gateway próprio do Kilo pelo custo do provedor. A OpenDesign nunca faz proxy das suas credenciais, em nenhum dos casos.
O que torna o Kilo Code adequado para design?
Ele é agnóstico em relação a modelos e de código aberto, então você pode conduzi-lo com o modelo com visão computacional que melhor interpreta capturas de tela de referência, inspecionar exatamente qual contexto é enviado e manter o custo e as credenciais sob seu controle. O bom gosto ainda vem do design system, do skill e das referências que você fornece.
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 cientes do código-base; o diferencial do Kilo Code é ser de código aberto e agnóstico em relação a modelos, com BYOK, então você escolhe o modelo. Muitas equipes usam ambos — a OpenDesign permite trocar de agente sem alterar seu workflow de design.
Como o Kilo Code se conecta ao Figma?
Adicione um servidor Figma MCP a partir do MCP marketplace do Kilo ou das configurações de MCP. O Kilo pode então obter o contexto de design real — componentes, variáveis, dados de layout — de modo que o código gerado corresponda à origem em vez de apenas aproximá-la.
O que é o Kilo Code
O Kilo Code é um agente de codificação com IA de código aberto criado pela Kilo Code, Inc. Ele roda como extensão do VS Code, em IDEs JetBrains e como 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. Sua característica definidora é ser agnóstico em relação ao modelo: você escolhe qual modelo o conduz e traz suas próprias chaves de provedor.
Para trabalho de design, duas propriedades se destacam. Por ser agnóstico em relação ao modelo, você pode apontá-lo para qualquer modelo forte com capacidade de visão que melhor leia uma captura de tela de referência e raciocine sobre layout. E, por ser de código aberto e BYOK, você pode inspecionar exatamente qual contexto é enviado e manter credenciais e custo sob seu próprio controle.
Modos de agente: o Kilo inclui modos especializados — Architect para planejamento, Code para construção, Debug para correção e Ask para perguntas — além de modos personalizados, para que você possa planejar um design e então implementá-lo em passagens separadas e focadas.
Regras personalizadas + MCP: Ele lê regras personalizadas no nível do projeto para contexto persistente e oferece suporte a servidores MCP (com um marketplace de MCP), para que você possa adicionar contexto externo, como um arquivo 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 da Kilo, que expõe 500+ modelos pelo custo do provedor.
Credencial: sua própria chave de API do provedor (BYOK — Anthropic, OpenAI, Google, OpenRouter e mais) ou o gateway próprio da Kilo
Fornecedor: Kilo Code, Inc. (código aberto)
Licença: código aberto
Para trabalho de design, duas propriedades se destacam. Por ser agnóstico em relação ao modelo, você pode apontá-lo para qualquer modelo forte com capacidade de visão que melhor leia uma captura de tela de referência e raciocine sobre layout. E, por ser de código aberto e BYOK, você pode inspecionar exatamente qual contexto é enviado e manter credenciais e custo sob seu próprio controle.
Modos de agente: o Kilo inclui modos especializados — Architect para planejamento, Code para construção, Debug para correção e Ask para perguntas — além de modos personalizados, para que você possa planejar um design e então implementá-lo em passagens separadas e focadas.
Regras personalizadas + MCP: Ele lê regras personalizadas no nível do projeto para contexto persistente e oferece suporte a servidores MCP (com um marketplace de MCP), para que você possa adicionar contexto externo, como um arquivo 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 da Kilo, que expõe 500+ modelos pelo custo do provedor.
Credencial: sua própria chave de API do provedor (BYOK — Anthropic, OpenAI, Google, OpenRouter e mais) ou o gateway próprio da Kilo
Fornecedor: Kilo Code, Inc. (código aberto)
Licença: código aberto
Por que um agente aberto e agnóstico em relação a modelos é adequado para design
A vantagem do Kilo Code em design vem da abertura e da escolha de modelo — mas, como acontece com todo agente, o bom gosto ainda precisa ser fornecido.
Agnóstico em relação ao modelo por design: como você escolhe o modelo, pode conduzir o Kilo com qualquer modelo com capacidade de visão que melhor leia capturas de tela de referência — e trocar quando um melhor surgir, sem mudar seu fluxo de trabalho.
Aberto e inspecionável: o Kilo é de código aberto, então você pode ver exatamente qual contexto e quais prompts são enviados — útil quando você quer que o agente reutilize seus primitivos reais de design em vez de inventar estilos avulsos.
Convenções em regras personalizadas: regras personalizadas do projeto (além de um servidor MCP para Figma) apontam o agente para seus tokens, componentes e especificações reais, para que ele trabalhe em função de uma marca em vez de uma aparência padrão.
O bom gosto vem de três entradas que você fornece: um sistema de design, uma skill e imagens de referência reais.
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 sistema de design, uma skill estética e referências concretas. OpenDesign empacota exatamente essas entradas, e é por isso que os dois se encaixam (mais abaixo).
Agnóstico em relação ao modelo por design: como você escolhe o modelo, pode conduzir o Kilo com qualquer modelo com capacidade de visão que melhor leia capturas de tela de referência — e trocar quando um melhor surgir, sem mudar seu fluxo de trabalho.
Aberto e inspecionável: o Kilo é de código aberto, então você pode ver exatamente qual contexto e quais prompts são enviados — útil quando você quer que o agente reutilize seus primitivos reais de design em vez de inventar estilos avulsos.
Convenções em regras personalizadas: regras personalizadas do projeto (além de um servidor MCP para Figma) apontam o agente para seus tokens, componentes e especificações reais, para que ele trabalhe em função de uma marca em vez de uma aparência padrão.
O bom gosto vem de três entradas que você fornece: um sistema de design, uma skill e imagens de referência reais.
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 sistema de design, uma skill estética e referências concretas. OpenDesign empacota exatamente essas entradas, e é por isso que os dois se encaixam (mais abaixo).
Configurando o Kilo Code para design, do zero
A sequência de configuração: instalar → conectar um provedor → adicionar regras personalizadas → adicionar uma skill → habilitar a verificação no navegador.
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 corresponda a uma marca em vez de usar por padrão uma aparência genérica.
Adicione verificação no navegador: conecte um Playwright ou MCP de navegador para que o Kilo renderize em um navegador real e verifique sua saída em breakpoints, em vez de apenas confirmar que a compilação passa.
Use a seção de configuração atual para comandos e detalhes específicos da versão, que podem mudar.
Exemplo de comando histórico do guia anterior; verifique a sintaxe atual na documentação do fornecedor vinculada.
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 corresponda a uma marca em vez de usar por padrão uma aparência genérica.
Adicione verificação no navegador: conecte um Playwright ou MCP de navegador para que o Kilo renderize em um navegador real e verifique sua saída em breakpoints, em vez de apenas confirmar que a compilação passa.
Use a seção de configuração atual para comandos e detalhes específicos da versão, que podem mudar.
# 1. Instale a extensão Kilo Code do marketplace do VS Code
# (ou JetBrains), ou instale a CLI.
# 2. Abra seu projeto e faça login / adicione uma chave de provedor
cd your-project
kilo # conecte seu provedor (BYOK) ou o gateway do Kilo
# 3. Adicione contexto do projeto
# crie regras personalizadas para as convenções de design deste projeto
# 4. Conecte o servidor Figma MCP (opcional, para handoff de design)
# adicione-o pelo marketplace MCP / configurações MCPExemplo de comando histórico do guia anterior; verifique a sintaxe atual na documentação do fornecedor vinculada.
O ciclo de captura de tela para UI
O ciclo de design de maior alavancagem com o Kilo Code é transformar uma imagem de referência em UI funcional e responsiva e iterar até que ela corresponda — apoiando-se em um modelo com capacidade de visão para comparar a saída com a referência.
Comece pelas referências visuais mais claras que você tiver — e inclua vários estados (desktop e mobile, hover, vazio, carregando), não apenas uma imagem principal.
Seja específico no prompt; prompts vagos produzem UI genérica mesmo com um modelo forte.
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.
Execute um servidor de desenvolvimento e faça o Kilo renderizar em um navegador real, redimensionando para breakpoints para conferir o resultado.
Itere fazendo o Kilo comparar sua implementação com as capturas de tela — não apenas confirmar que ela compila.
Use o modo Architect para planejar a construção, depois mude para o modo Code e anexe suas referências com restrições concretas:
Mantenha os prompts pequenos e focados, faça commit de boas iterações e reverta as ruins (avisando ao Kilo quando você reverter), para que cada passada parta de uma base limpa.
Exemplo de comando histórico do guia anterior; verifique a sintaxe atual na documentação do fornecedor vinculada.
Comece pelas referências visuais mais claras que você tiver — e inclua vários estados (desktop e mobile, hover, vazio, carregando), não apenas uma imagem principal.
Seja específico no prompt; prompts vagos produzem UI genérica mesmo com um modelo forte.
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.
Execute um servidor de desenvolvimento e faça o Kilo renderizar em um navegador real, redimensionando para breakpoints para conferir o resultado.
Itere fazendo o Kilo comparar sua implementação com as capturas de tela — não apenas confirmar que ela compila.
Use o modo Architect para planejar a construção, depois mude para o modo Code e anexe suas referências com restrições concretas:
Mantenha os prompts pequenos e focados, faça commit de boas iterações e reverta as ruins (avisando ao Kilo quando você reverter), para que cada passada parta de uma base limpa.
# Planeje no modo Architect, depois construa no modo Code:
> Implemente este design a partir de @reference-desktop.png e
@reference-mobile.png em React + Vite + Tailwind + TypeScript.
Reutilize meus componentes e tokens existentes do design system
das regras personalizadas.
Corresponda ao espaçamento, ao layout e à hierarquia; torne-o responsivo.
Renderize no navegador e itere até que corresponda às
referências em todos os breakpoints.Exemplo de comando histórico do guia anterior; verifique a sintaxe atual na documentação do fornecedor vinculada.
Modos, regras personalizadas e MCP
Três pontos de extensão tornam o Kilo Code prático para trabalho de design sustentado, e todos 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. Modos personalizados permitem que você codifique uma revisão de design sua.
Regras personalizadas: Regras personalizadas de projeto são o local duradouro para suas convenções de design — tokens, primitivos e checklists de revisão — lidas em cada execução para que o agente trabalhe de acordo com sua marca.
Servidores MCP: O Kilo oferece suporte a servidores MCP por meio de seu marketplace — a forma portável de trazer contexto de design e ferramentas externas, mais relevantemente um servidor MCP do Figma, que funcionam entre agentes, não apenas no Kilo.
Essas são capacidades portáveis e multiagente — exatamente o tipo de coisa que o OpenDesign foi criado para orquestrar, em vez de recriar por projeto.
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. Modos personalizados permitem que você codifique uma revisão de design sua.
Regras personalizadas: Regras personalizadas de projeto são o local duradouro para suas convenções de design — tokens, primitivos e checklists de revisão — lidas em cada execução para que o agente trabalhe de acordo com sua marca.
Servidores MCP: O Kilo oferece suporte a servidores MCP por meio de seu marketplace — a forma portável de trazer contexto de design e ferramentas externas, mais relevantemente um servidor MCP do Figma, que funcionam entre agentes, não apenas no Kilo.
Essas são capacidades portáveis e multiagente — exatamente o tipo de coisa que o OpenDesign foi criado para orquestrar, em vez de recriar por projeto.
Kilo Code versus Codex, Claude Code, Cursor e Gemini CLI para design
Não há um único vencedor para o trabalho de design — cada agente tem uma força diferente, e equipes experientes os combinam. Um resumo justo:
Kilo Code — Código aberto e agnóstico de modelo com BYOK em muitos provedores; modos Architect/Code e MCP — Escolher seu próprio modelo por tarefa e manter custo e credenciais sob seu controle
Codex — Forte polimento visual com uma skill de frontend; builds assíncronos em sandbox — Builds assíncronos delegados e regras portáveis do AGENTS.md
Claude Code — Decisões de design específicas (hex, espaçamento, tipografia) e UX ciente da base de código — Raciocínio de frontend e refatorações de grande contexto
Cursor — Loop visual de construir e ver com visualização ao vivo e edições inline — Trabalho de UI iterativo e observável dentro de uma IDE
Gemini CLI — Forte compreensão multimodal de imagens e um contexto de 1M de tokens — Trabalho com muitas capturas de tela e manter um sistema de design inteiro no contexto
O veredito recorrente da comunidade é que o bom gosto vem dos humanos: todos eles usam uma estética genérica por padrão sem skills, referências e restrições. Esse é o verdadeiro problema a resolver — e ele tem forma de ferramenta de design, não de modelo.
Agente — Força em design — Melhor para
Kilo Code — Código aberto e agnóstico de modelo com BYOK em muitos provedores; modos Architect/Code e MCP — Escolher seu próprio modelo por tarefa e manter custo e credenciais sob seu controle
Codex — Forte polimento visual com uma skill de frontend; builds assíncronos em sandbox — Builds assíncronos delegados e regras portáveis do AGENTS.md
Claude Code — Decisões de design específicas (hex, espaçamento, tipografia) e UX ciente da base de código — Raciocínio de frontend e refatorações de grande contexto
Cursor — Loop visual de construir e ver com visualização ao vivo e edições inline — Trabalho de UI iterativo e observável dentro de uma IDE
Gemini CLI — Forte compreensão multimodal de imagens e um contexto de 1M de tokens — Trabalho com muitas capturas de tela e manter um sistema de design inteiro no contexto
O veredito recorrente da comunidade é que o bom gosto vem dos humanos: todos eles usam uma estética genérica por padrão sem skills, referências e restrições. Esse é o verdadeiro problema a resolver — e ele tem forma de ferramenta de design, não de modelo.
Agente — Força em design — Melhor para
Armadilhas e como escapar da aparência de “AI slop”
A reclamação mais comum sobre design gerado por IA é que ele parece genérico — gradientes suaves, painéis flutuantes, cantos arredondados enormes, sombras dramáticas, uma vibe de Inter e roxo que “grita que uma IA fez isso”. Outros problemas relatados incluem layouts mobile quebrados e instruções vazando para textos da interface. Nada disso é 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 assumir 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 breakpoints, para que os layouts não quebrem silenciosamente no mobile.
Forneça tokens e referências: tokens de design reais e capturas de tela de referência são a maior alavanca isolada sobre a qualidade do resultado.
Codifique regras em regras personalizadas: coloque regras do tipo “sem hero cards, no máximo duas fontes, hierarquia com a marca em primeiro lugar” onde o agente as leia a cada execução.
Observe que toda mitigação é sobre dar ao agente um contexto de design curado. Manter esse contexto manualmente, por projeto, é o trabalho penoso que o OpenDesign elimina.
Adicione uma skill estética: uma skill de design curada força o agente a assumir 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 breakpoints, para que os layouts não quebrem silenciosamente no mobile.
Forneça tokens e referências: tokens de design reais e capturas de tela de referência são a maior alavanca isolada sobre a qualidade do resultado.
Codifique regras em regras personalizadas: coloque regras do tipo “sem hero cards, no máximo duas fontes, hierarquia com a marca em primeiro lugar” onde o agente as leia a cada execução.
Observe que toda mitigação é sobre dar ao agente um contexto de design curado. Manter esse contexto manualmente, por projeto, é o trabalho penoso que o OpenDesign elimina.
Projetando com o Kilo Code no OpenDesign
O OpenDesign é a camada de design de código aberto que o fluxo de trabalho acima continua pedindo. Ele trata o Kilo Code como um adaptador de primeira parte e o envolve em uma skill curada e uma biblioteca de sistema de design, um pipeline de renderização estruturado e uma interface desktop local — para que o contexto de design que faz o Kilo ser bom esteja lá desde a primeira execução, e não montado manualmente a cada vez. Ambos são de código aberto e local-first, o que torna a combinação uma escolha natural.
Autentique-se com sua própria chave de provedor (BYOK) ou com o gateway do Kilo — as credenciais ficam na sua máquina e nunca são intermediadas por nós.
Escolha um sistema de design e uma skill, depois gere apresentações, protótipos e landing pages com gosto consistente.
Todo artefato e arquivo DESIGN.md ficam no seu próprio repositório, não em uma nuvem hospedada.
Mesmo agente Kilo Code, mesmas chaves — além de um fluxo de trabalho de design real, portátil e de código aberto ao redor dele. Ele é local-first e de código aberto, então nada sobre seu trabalho ou suas credenciais sai da sua máquina.
Instale o OpenDesign e selecione o Kilo Code como seu agente.
Autentique-se com sua própria chave de provedor (BYOK) ou com o gateway do Kilo — as credenciais ficam na sua máquina e nunca são intermediadas por nós.
Escolha um sistema de design e uma skill, depois gere apresentações, protótipos e landing pages com gosto consistente.
Todo artefato e arquivo DESIGN.md ficam no seu próprio repositório, não em uma nuvem hospedada.
Mesmo agente Kilo Code, mesmas chaves — além de um fluxo de trabalho de design real, portátil e de código aberto ao redor dele. Ele é local-first e de código aberto, então nada sobre seu trabalho ou suas credenciais sai da sua máquina.
Instale o OpenDesign e selecione o Kilo Code como seu agente.
O OpenDesign é afiliado ao Kilo Code?
Não. OpenDesign é um projeto independente; ambos são de código aberto, mas são separados.
Comece uma primeira tarefa de design com o Kilo
Comece com algo pequeno, avalie o ciclo completo, depois traga o briefing real. Escolha a opção que se encaixa na sua configuração — nada nesta página detecta isso para você.