LEITURAS ADICIONAIS
Leituras Adicionais sobre o Kilo
Tutoriais, documentação e passo a passos para projetar com o Kilo, conforme listados 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 CAMINHOS PARA ESTE GUIA DO KILO
Escolha Por Onde Começar Com o Kilo
ESTE GUIA · DESIGN DE UI
Construa uma Interface de Produto Com o Kilo
Este guia: briefing, referências, regras de design e um resultado em HTML revisado.
Ler este guia CONFIGURAÇÃOConfigure o Kilo do Zero
Aqui está o caminho completo de uma máquina limpa até um Kilo Code capaz de construir e verificar UI.
Ir para a configuração COMPARAÇÃOCompare o Kilo Com Outros Agentes
Como o Kilo se diferencia do Codex, Claude Code, Cursor para trabalho de design, e quando escolher outro workflow.
Ver a comparaçãoNesta página Exemplo
Uma Tarefa Completa de Design Com o Kilo
Uma Tarefa de Design com o Kilo, do Briefing à Interface
Uma única tarefa, mostrada de ponta a ponta: o briefing e as restrições que você entrega, o artifact que retorna, e as verificações que você ainda faz antes de considerá-la concluída. A interface abaixo é um exemplo ilustrativo criado para esta página, não uma execução real do Kilo registrada.
1Briefing de Design e Restrições
BriefingProjete uma página de detalhes de produto para uma marca outdoor a partir da captura de tela anexada: galeria, preço, opções de tamanho e cor, adicionar à bolsa, e produtos relacionados. Desktop e celular.
- Sistema de designTela de papel da OpenDesign: Albert Sans, um destaque em verde
- Breakpoints1440px desktop e 390px mobile, sem rolagem horizontal
- InteraçõesMiniaturas da galeria, seleção de opções, adicionar à bolsa, rolagem de relacionados
- SaídaUm único arquivo HTML autocontido com pontos de referência estáveis
data-od-id
2Divisão de trabalho: você, Kilo e OpenDesign
- Você
Escreva o briefing, selecione o sistema de design e defina os critérios de aceitação.
- Kilo
Planeja o layout, escreve o HTML, CSS e JavaScript e revisa a pedido.
- OpenDesign
Fornece o sistema de design e o skill, renderiza a pré-visualização e armazena cada versão como um arquivo no projeto.
- Revisão
A hierarquia visual, o espaçamento na grade de 8px, ambos os breakpoints e cada interação são verificados antes da entrega.
3Artefato Kilo: A Página de Produto em 1440px e 390px
4Revisar Antes da Entrega
Layout
Grade e Espaçamento
Galeria e informações na grade de 8px; a coluna de informações nunca excede a altura da galeria em 1440.
Hierarquia
Hierarquia Visual
Nome, preço e depois opções; o destaque marca apenas o botão de adicionar à bolsa.
Responsivo
Layout Mobile
Galeria primeiro, depois nome e preço, opções, um botão de largura total; produtos relacionados rolam.
Interação
Verificações de Interação
Trocar uma miniatura, escolher um tamanho, adicionar à bolsa, rolar itens relacionados.
Adequação
Quando o Kilo se encaixa na tarefa, e quando não se encaixa
O Kilo se encaixa quando
- Screenshot → UI independente de modelo. Use-o com o modelo com capacidade visual que melhor transforma uma imagem de referência em markup responsivo, e compare o resultado com ela.
- BYOK entre provedores. Traga suas próprias chaves para Anthropic, OpenAI, Google, OpenRouter e outros — ou use o gateway do Kilo — para que custo e credenciais permaneçam seus.
- Modos + regras personalizadas + MCP. Planeje no modo Architect, construa no modo Code, carregue convenções em regras personalizadas e traga contexto real de design via o servidor Figma MCP.
- Código aberto. Inspecione cada prompt e payload de contexto; nada fica oculto, e o agente é executado no seu IDE ou CLI.
Escolha Outro Workflow Quando
- Você precisa de arquivos vetoriais editáveis. O artefato é HTML, não um documento de design editável. Verifique um workflow vetorial separado para o formato de arquivo necessário.
- Você não tem referência nem restrições. Sem um design system ou exemplos, o resultado tende a um visual genérico; escreva o briefing primeiro.
- Você não tem a credencial que este agente precisa. Necessário: sua própria chave de API do provedor (traga sua própria chave) ou o gateway do Kilo. A OpenDesign não fornece nem faz proxy de credenciais.
- Sua equipe trabalha no OpenCode ou no Aider. Esses agentes têm suas próprias páginas; o workspace é o mesmo, a configuração é diferente. Veja agentes relacionados.
Compatibilidade
Requisitos do Kilo antes de começar
Este guia aborda o Kilo conforme conectado através do aplicativo desktop OpenDesign. Referências publicadas verificadas em 6 de setembro de 2026.
Escopo da ferramentaKilo, por Kilo Code, Inc.
Kilo Code é um agente de código de IA de código aberto da Kilo Code, Inc. Ele é executado no VS Code, IDEs JetBrains e no terminal, lendo seu codebase, editando arquivos e executando comandos. Esta página trata de projetar interfaces com o Kilo através da OpenDesign, não da interface própria do Kilo. As notas de configuração da OpenDesign listam os agentes disponíveis.
Contas e autenticaçãoSua própria chave de API de provedor (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. Esta página não promete uma cota ou preço.
Sistema e VersõesApp de desktop ou código-fonte
Verifique a página de downloads para os builds de desktop. Os requisitos de Node.js e pnpm no quickstart de origem se aplicam à execução a partir do código-fonte, não à instalação de um pacote desktop. Versão mínima compatível do Kilo: não verificada aqui.
Verificação de ConexãoO sinal de sucesso
Siga as instruções de conexão exibidas pela sua versão instalada e depois execute uma pequena tarefa. Confirme que o Kilo lidou com ela e que o artifact abre. Apenas um download não estabelece uma conexão funcional.
Comece com o app de desktop
Configuração do Kilo em três etapas
Faça o download primeiro, conclua a configuração do Kilo para sua versão instalada e depois verifique um pequeno resultado. Você não precisa compilar a OpenDesign a partir do código-fonte para seguir este caminho.
- 1
Baixe o App de Desktop da OpenDesign
Escolha o pacote para seu computador, instale-o e abra o app.
Baixar o OpenDesignPONTO DE VERIFICAÇÃOO aplicativo desktop abre. Já instalado? Avance para a próxima etapa; não é necessário baixar novamente. - 2
Prepare sua Conexão com o Kilo
Siga as instruções do Kilo na sua versão instalada. Autentique-se com sua própria chave de provedor (BYOK) ou pelo gateway do Kilo — as credenciais permanecem 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 gatewayDas notas de configuração do Kilo no guia publicado; consulte a documentação do fornecedor para o comando atual.
PONTO DE VERIFICAÇÃOConfirme o agente e a conta pretendidos. Se não estiver disponível, verifique a compatibilidade antes de tentar uma tarefa maior. - 3
Execute Uma Pequena Tarefa no Kilo
Use um briefing pequeno para que você possa avaliar todo o ciclo, incluindo uma revisão.
Briefing inicialConstrua uma tela de configurações com um formulário de perfil e uma confirmação de salvamento. Use minhas regras de design. Verifique em larguras de desktop e mobile.
PONTO DE VERIFICAÇÃOAbra o resultado, teste o estado salvo e solicite uma alteração específica. Um arquivo gerado é o começo da revisão, não o fim.
Para executar o OpenDesign a partir do código-fonte, siga o guia técnico de início rápido.
O workflow de design do Kilo
O Workflow de Design do Kilo em Cinco Etapas
A mesma tarefa de página de produto, seguida do briefing até o arquivo verificado. Cada etapa lista o que você fornece, o que o Kilo faz, o que a OpenDesign contribui e o que você verifica.
- 1
Briefing de Design
Linguagem simples, de três a seis linhas. Indique o público, a função da tela e as plataformas.
- VocêEscreva o briefing; anexe uma captura de tela de referência, se tiver uma.
- KiloLê o briefing e o arquivo de instruções do projeto; pergunta quando algo é ambíguo.
- OpenDesignFornece o projeto, a superfície do prompt e a skill para o tipo de artefato.
- VerificarConfirme que o briefing define os critérios de aceitação. Adicioná-los agora é mais barato do que depois da geração.
- 2
Restrições de Design
Um design system e algumas regras rígidas. É isso que diferencia um resultado alinhado à marca de um visual genérico.
- VocêEscolha um design system; defina os breakpoints e quaisquer componentes de uso obrigatório.
- KiloCarrega os tokens do DESIGN.md e as regras de postura no contexto antes de escrever uma linha.
- OpenDesignDisponibiliza a biblioteca de design systems e vincula a escolhida ao template da skill.
- VerificarOs tokens correspondem à sua marca. Um único destaque, as fontes certas, o raio certo.
- 3
Gerar a Interface
O Kilo escreve um arquivo HTML autocontido: layout, estilos, interações e hooks estáveis.
- VocêAguarde ou responda a uma pergunta de esclarecimento. Nada a configurar.
- KiloPlaneja as seções, escreve o HTML, CSS e JavaScript, executa o arquivo e corrige o que falhar.
- OpenDesignSalva o artefato na pasta do projeto e o indexa para pré-visualização.
- VerificarNada ainda. Avalie o arquivo depois de renderizado, não a partir do código-fonte.
- 4
Pré-visualização
O arquivo é renderizado dentro do OpenDesign nas larguras que você solicitou. É aqui que o design é avaliado.
- VocêAlterna larguras, clica pelas interações, deixa comentários nos elementos.
- KiloLê seus comentários na pré-visualização e prepara a próxima revisão.
- OpenDesignRenderiza o preview, expõe alvos
data-od-idpara comentários e edições. - CheckHierarquia, contraste, overflow em 390px, estados de foco e se o destaque é usado com moderação.
- 5
Revisar e Verificar
Solicite alterações apontando para elementos no preview. Cada revisão é um novo arquivo; nada é sobrescrito silenciosamente.
- VocêTransforma comentários em solicitações; decide quando a tarefa está concluída.
- KiloAplica as alterações no local e executa o arquivo novamente.
- OpenDesignMantém as versões lado a lado; exporta uma imagem ou o HTML quando você terminar.
- CheckReverifica apenas a área que mudou, depois a página inteira uma vez em cada 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 no OpenDesign, uma skill por tipo.
Sistemas de Design
Tokens de marca e componentes a serem vinculados antes que o Kilo gere qualquer coisa.
Templates
Pontos de partida para apresentações, landing pages e telas de produto.
Limitações
Limitações do Kilo, Verificações Manuais e Alternativas
- EscopoÉ agnóstico em relação a modelos e BYOK em diversos provedores, com modos Architect/Code/Debug/Ask e suporte a MCP, para que você escolha o modelo e mantenha as credenciais sob seu controle. Esta página aborda o Kilo como um agente conectado ao OpenDesign, não todos os recursos do Kilo.
- Limites de UsoOs limites de uso e o custo seguem a credencial que você utiliza (sua própria chave de API do provedor ou o gateway do Kilo). Esta página não faz nenhuma afirmação sobre cotas gratuitas.
- RedeArquivos de projeto locais não significam inferência offline. Revise as configurações de provedor e as políticas de dados do seu agente antes de compartilhar dados sensíveis.
- A Saída É HTMLOs artefatos são arquivos HTML, não arquivos de design vetoriais.
- Revisão ManualAcessibilidade, conteúdo real, adequação à marca e correção das interações são revisados por você na pré-visualização. Trate qualquer autoverificação do agente como uma primeira passagem.
- AlternativaSe o agente estiver indisponível ou uma tarefa falhar, verifique as instruções de conexão e a autenticação da versão instalada. Preserve o erro e o último artefato funcional antes de alterar a configuração.
Perguntas Frequentes
Perguntas Frequentes Sobre o Kilo e o OpenDesign
O Kilo Code Realmente Consegue Fazer 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.
Preciso Pagar Para Fazer Design 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 Bom Para Design Especificamente?
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 Conectar o Kilo Code 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.
Inicie a Primeira Tarefa de Design Com o Kilo
Comece com uma tarefa pequena, avalie o ciclo completo e só então traga o briefing real. Escolha a opção que corresponde à sua configuração; a página não a detecta automaticamente.