LEITURAS ADICIONAIS
Leituras Complementares sobre o Copilot
Tutoriais, documentação e passo a passos para trabalho de design com o Copilot, conforme listado no guia publicado.
Copilot 
OpenDesign Projetar com
Copilot no
OpenDesign.
Como projetar interfaces com o GitHub Copilot CLI no OpenDesign: uma captura de tela como entrada, os componentes do seu repositório reutilizados, uma tarefa de página de lançamento do briefing ao arquivo revisado e os limites que você precisa conhecer antes de começar.
TRÊS PONTOS DE PARTIDA PARA DESIGN COM COPILOT
Escolha um ponto de partida para o Copilot
ESTE GUIA · DESIGN DE UI
Crie uma Interface de Produto Com o Copilot
Neste guia: um briefing, imagens de referência, regras de design e um artefato HTML que você revisa.
Ler este guia CONFIGURAÇÃOConfigure o Copilot do Zero
O caminho completo de uma máquina limpa até o Copilot CLI criar e verificar a UI.
Ir para a configuração COMPARAÇÃOCompare o Copilot Com Outros Agentes
Onde o Copilot se diferencia de Codex, Claude Code e Cursor no trabalho de design — e quando outro fluxo de trabalho se encaixa melhor.
Ver a comparaçãoNesta página Exemplo
Uma Tarefa de Design Completa Com o Copilot
Uma tarefa de design com Copilot: do briefing à interface
Uma tarefa acompanhada em todo o seu percurso: o briefing e as restrições que você fornece ao Copilot, o artefato que ele retorna e as verificações que você ainda faz antes de considerá-la concluída. A interface abaixo é um exemplo ilustrativo feito para esta página — não uma execução do Copilot registrada.
1Briefing de Design e Restrições
BriefingUsando a captura de tela do concorrente em anexo, crie a landing page de lançamento de um produto de CLI: hero com comando de instalação, três blocos de recursos e pontos de prova. Reutilize os componentes do repositório. Desktop e celular.
- Sistema de designComponentes e tokens do repositório; Albert Sans, um destaque verde
- Breakpoints1440px desktop e 390px mobile, sem rolagem horizontal
- InteraçõesTexto do comando de instalação, CTA primário e secundário, navegação por âncoras
- SaídaUm único arquivo HTML autocontido com pontos de referência estáveis
data-od-id
2Quem faz o quê: você, Copilot e OpenDesign
- Você
Escreva o briefing, escolha o sistema de design e defina os critérios de aceite.
- Copilot
O Copilot planeja o layout, escreve HTML, CSS e JavaScript e revisa sob demanda.
- OpenDesign
OpenDesign fornece o sistema de design e a skill, renderiza a prévia e armazena cada versão como um arquivo no projeto.
- Revisão
Antes da entrega, verifique a hierarquia visual, o espaçamento na grade de 8px, ambos os breakpoints e cada interação.
3Artefato do Copilot: página de lançamento em 1440px e 390px
4Revisar Antes da Entrega
Layout
Grade e Espaçamento
Hero, recursos e prova compartilham a grade de 8px; a coluna de arte nunca empurra o texto para baixo da dobra.
Hierarquia
Hierarquia Visual
Título, comando de instalação, depois recursos; o destaque marca apenas o botão de instalação.
Responsivo
Layout Mobile
Texto primeiro, arte em segundo, recursos empilhados; o comando de instalação permanece copiável.
Interação
Verificações de Interação
Copie o comando, siga ambos os CTAs, vá até uma âncora de recurso.
Adequação
Quando o Copilot é adequado — e quando não é
O Copilot Serve Quando
- Captura de tela → UI. Escolha um modelo multimodal forte, transforme uma imagem de referência em marcação responsiva e compare o resultado com essa imagem.
- Escolha multimodelo. Use /model para alternar entre modelos de ponta da Anthropic, OpenAI e Google por tarefa, tudo na sua assinatura do Copilot.
- Instruções + MCP. Instruções personalizadas, como .github/copilot-instructions.md e AGENTS.md, carregam suas convenções; o servidor MCP do Figma traz contexto real de design para o código.
- Integração profunda com o GitHub. Servidor MCP do GitHub integrado e acesso aos seus repositórios, issues e PRs, autenticado com sua conta existente do GitHub.
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: assinatura do GitHub Copilot. A OpenDesign não fornece nem faz proxy de credenciais.
- Sua equipe trabalha no Codex ou no Claude Code. Esses agentes têm suas próprias páginas; o workspace não muda, mas a configuração sim. Veja agentes relacionados.
Compatibilidade
Requisitos do Copilot Antes de Começar
Esta página aborda o Copilot conectado por meio do aplicativo desktop do OpenDesign. Referências publicadas verificadas em 6 de setembro de 2026.
Escopo da FerramentaCopilot, da GitHub
O GitHub Copilot CLI é o agente de programação nativo de terminal do GitHub, alimentado pelo mesmo harness agêntico que o agente de programação do Copilot. Ele lê sua base de código, edita arquivos, executa comandos e trabalha com suas issues, PRs e repositórios do GitHub. Esta página trata do design de interfaces com o Copilot por meio do OpenDesign, não da interface do próprio Copilot. As notas de configuração do OpenDesign listam os agentes disponíveis.
Contas e AutenticaçãoAssinatura do GitHub Copilot
Assinatura do GitHub Copilot. Autentique-se com sua assinatura do GitHub Copilot — 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 download para 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 Copilot: 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, depois execute uma tarefa pequena. Confirme que o Copilot a processou e que o artifact abre. Um download isolado não estabelece uma conexão funcional.
Comece com o app de desktop
Configuração do Copilot em Três Passos
Baixe primeiro, complete a configuração do Copilot para sua versão instalada, depois verifique um resultado pequeno. 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 Copilot
Siga as instruções do Copilot na sua versão instalada. Autentique-se com sua assinatura do GitHub Copilot — as credenciais permanecem na sua máquina.
Usando o GitHub Copilot CLI# 1. Install Copilot CLI (Node.js required) npm install -g @github/copilot # 2. Start it in your project and authenticate on first run cd your-project copilot # run /login and follow the prompts to sign inDas notas de configuração do Copilot no guia publicado; verifique 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 Tarefa Pequena do Copilot
Comece com um briefing pequeno o suficiente para 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 de salvamento e solicite uma alteração específica. Um arquivo gerado abre a revisão; ele não a encerra.
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 Copilot
Cinco etapas em uma tarefa de design com o Copilot CLI
Uma página de lançamento, acompanhada do primeiro briefing até um arquivo que você revisou. Cada etapa apresenta sua entrada, o trabalho do Copilot CLI, a parte do OpenDesign e a verificação que você ainda deve fazer.
- 1
Briefing de Design
Escreva o briefing em linguagem simples, de três a seis linhas. Diga para quem é, o que a tela deve fazer e quais plataformas importam.
- VocêVocê escreve o briefing e anexa uma captura de tela de referência quando houver uma.
- CopilotO Copilot CLI lê o briefing e os arquivos de instruções do repositório — instruções personalizadas e AGENTS.md — e pergunta quando algo é ambíguo.
- OpenDesignOpenDesign fornece o projeto, a superfície de prompt e a skill para o tipo de artefato.
- VerificarVocê confirma que o briefing nomeia os critérios de aceite. Defini-los antes da geração custa menos do que adicioná-los depois.
- 2
Restrições de Design
Um sistema de design e regras firmes são o que impede o Copilot CLI de recair em uma aparência padrão.
- VocêVocê escolhe um sistema de design, nomeia os breakpoints e sinaliza qualquer componente que precise aparecer.
- CopilotO Copilot CLI puxa os tokens e as regras de postura do DESIGN.md para o contexto antes de escrever uma linha.
- OpenDesignOpenDesign fornece a biblioteca do sistema de design e vincula o sistema escolhido ao template de skill.
- VerificarVerifique se os tokens correspondem à sua marca: um destaque, as fontes pretendidas, o raio pretendido.
- 3
Gerar a Interface
O Copilot CLI escreve um artefato HTML autocontido: layout, estilos, interações e hooks estáveis.
- VocêVocê espera ou responde a uma pergunta de esclarecimento. Não há nada para configurar aqui.
- CopilotO Copilot CLI planeja as seções, escreve o HTML, CSS e JavaScript, executa o arquivo e corrige o que falha.
- OpenDesignOpenDesign armazena o artefato na pasta do projeto e o indexa para prévia.
- VerificarNada ainda. Avalie o arquivo depois que ele renderizar, não a partir do código-fonte.
- 4
Pré-visualização
O arquivo é renderizado no OpenDesign nas larguras que você solicitou. É aqui que o design é avaliado.
- VocêVocê alterna as larguras, exercita as interações e deixa comentários nos elementos.
- CopilotO Copilot CLI lê seus comentários na prévia e prepara a próxima revisão.
- OpenDesignOpenDesign renderiza a prévia e expõe
data-od-idcomo alvos para comentários e edições. - CheckVocê verifica hierarquia, contraste, overflow em 390px, estados de foco e se o destaque é usado com parcimônia.
- 5
Revisar e Verificar
Peça alterações apontando para elementos na prévia. Cada revisão chega como um novo arquivo; nada é sobrescrito sem aviso.
- VocêVocê transforma comentários em solicitações e decide quando a tarefa está concluída.
- CopilotO Copilot CLI aplica as alterações no próprio local e executa o arquivo novamente.
- OpenDesignOpenDesign mantém as versões lado a lado e exporta uma imagem ou o HTML quando você termina.
- CheckVocê verifica novamente apenas a área alterada e depois a página inteira uma vez em cada breakpoint.
Recursos
Recursos de Design do Copilot
Skills Explore skills Sistemas de design Explore sistemas Templates Explorar modelos
Skills de Design
Os tipos de artefato que o Copilot produz no OpenDesign, com uma skill para cada tipo.
Sistemas de Design
Tokens de marca e componentes para vincular antes de o Copilot gerar um arquivo.
Templates
Templates para iniciar apresentações, landing pages e telas de produto.
Limitações
Limites do Copilot, as verificações que você faz e alternativas
- EscopoO Copilot CLI lê arquivos de instruções personalizadas e o AGENTS.md automaticamente, e você pode alternar entre modelos de ponta da Anthropic, OpenAI e Google por tarefa. Esta página trata do Copilot como um agente conectado ao OpenDesign, não de todos os recursos do Copilot.
- Limites de UsoOs limites de uso e o custo seguem a credencial que você usa — uma assinatura do GitHub Copilot. Esta página não faz nenhuma afirmação sobre cotas gratuitas.
- RedeArquivos de projeto locais não significam inferência offline. Verifique as configurações de provedor e as políticas de dados do seu agente antes de compartilhar entradas sensíveis.
- A Saída É HTMLOs artefatos chegam como arquivos HTML, não como arquivos de design vetorial.
- Revisão ManualVocê revisa acessibilidade, conteúdo real, adequação à marca e correção da interação na pré-visualização. Trate a autoverificação do agente apenas 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 para a versão instalada. Preserve o erro e o último artefato funcional antes de alterar a configuração.
Perguntas Frequentes
Perguntas Comuns Sobre o Copilot e a OpenDesign
O GitHub Copilot CLI Realmente Consegue Fazer Trabalho de Design?
Sim — com um skill estético, um design system e imagens de referência reais no contexto, o Copilot CLI produz UI responsiva com qualidade de produção, e você pode escolher o modelo que melhor verifica o resultado em relação às referências. Sem esse contexto, ele tende a adotar uma aparência genérica, que é a lacuna que a OpenDesign preenche.
Preciso de uma Assinatura para Projetar com o Copilot CLI?
Sim — o Copilot CLI funciona com uma assinatura ativa do GitHub Copilot (Pro, Pro+, Business ou Enterprise); não é bring-your-own-key. Você se autentica com sua conta do GitHub. A OpenDesign nunca faz proxy das suas credenciais — sua assinatura é usada diretamente pelo seu agente.
O que torna o Copilot CLI adequado para design?
Duas coisas: ele lê instruções do repositório e o AGENTS.md automaticamente, então suas convenções de design viajam junto com o repositório; e permite alternar entre modelos de ponta da Anthropic, OpenAI e Google por tarefa. Ambas ajudam — mas o bom gosto ainda vem do design system, do skill e das referências que você fornece.
Para design frontend: Copilot CLI ou Claude Code?
Ambos são fortes. Claude Code é conhecido por decisões de design específicas e com conhecimento do codebase; o diferencial do Copilot CLI é a escolha de modelo entre provedores e a integração profunda com o GitHub em uma assinatura que você já pode ter. Muitas equipes usam ambos — o OpenDesign permite alternar entre agentes sem mudar seu workflow de design.
Conectando o Copilot CLI ao Figma
Adicione o servidor Figma MCP com o comando /mcp add; as configurações são armazenadas em mcp-config.json em ~/.copilot. O Copilot pode então obter o contexto de design real — componentes, variáveis, dados de layout — para que o código gerado corresponda à fonte em vez de apenas aproximá-la.
O que o GitHub Copilot CLI realmente é
O GitHub Copilot CLI é o agente de codificação nativo de terminal do GitHub. Ele lê seu repositório, edita arquivos, executa comandos de shell e trabalha diretamente com seu contexto do GitHub — issues, pull requests e repositórios — autenticado com sua conta existente do GitHub. Ele é alimentado pela mesma estrutura agêntica que o agente de codificação Copilot do GitHub, por isso planeja tarefas complexas e itera em vez de apenas completar linhas. Ele atingiu disponibilidade geral em fevereiro de 2026, após uma prévia pública aberta em setembro de 2025.
Para o trabalho de design, duas propriedades se destacam. Ele lê arquivos de instrução personalizados — regras para todo o repositório em .github/copilot-instructions.md e AGENTS.md — de modo que suas convenções de design sejam incluídas automaticamente em cada execução. E ele oferece suporte a vários provedores de modelos de base, então você pode trocar o modelo por tarefa com o comando /model para aquele que raciocina melhor sobre uma determinada UI.
Arquivos de instrução: o Copilot CLI lê instruções do repositório em .github/copilot-instructions.md, arquivos específicos por caminho em .github/instructions e AGENTS.md — o lugar natural para codificar suas convenções de design, tokens e checklists de revisão.
Ferramentas integradas + MCP: ele vem com o servidor MCP do GitHub integrado e executa ferramentas de arquivo e shell, e você pode adicionar servidores MCP personalizados com /mcp add (armazenados em mcp-config.json em ~/.copilot) para contexto externo, como um arquivo do Figma ao vivo.
Escolha de modelo: use o comando /model para escolher entre modelos de ponta da Anthropic, OpenAI e Google — trocando por tarefa, tudo na sua assinatura existente do Copilot.
Credencial: uma assinatura ativa do GitHub Copilot (Pro, Pro+, Business ou Enterprise)
Instalação: npm install -g @github/copilot, depois execute copilot
Fornecedor: GitHub
Para o trabalho de design, duas propriedades se destacam. Ele lê arquivos de instrução personalizados — regras para todo o repositório em .github/copilot-instructions.md e AGENTS.md — de modo que suas convenções de design sejam incluídas automaticamente em cada execução. E ele oferece suporte a vários provedores de modelos de base, então você pode trocar o modelo por tarefa com o comando /model para aquele que raciocina melhor sobre uma determinada UI.
Arquivos de instrução: o Copilot CLI lê instruções do repositório em .github/copilot-instructions.md, arquivos específicos por caminho em .github/instructions e AGENTS.md — o lugar natural para codificar suas convenções de design, tokens e checklists de revisão.
Ferramentas integradas + MCP: ele vem com o servidor MCP do GitHub integrado e executa ferramentas de arquivo e shell, e você pode adicionar servidores MCP personalizados com /mcp add (armazenados em mcp-config.json em ~/.copilot) para contexto externo, como um arquivo do Figma ao vivo.
Escolha de modelo: use o comando /model para escolher entre modelos de ponta da Anthropic, OpenAI e Google — trocando por tarefa, tudo na sua assinatura existente do Copilot.
Credencial: uma assinatura ativa do GitHub Copilot (Pro, Pro+, Business ou Enterprise)
Instalação: npm install -g @github/copilot, depois execute copilot
Fornecedor: GitHub
Por que instruções do repositório e escolha de modelo se encaixam no design
A vantagem do Copilot CLI para design vem de duas propriedades — mas, como acontece com todo agente, o bom gosto ainda precisa ser fornecido.
Convenções que acompanham o repositório: Já que o Copilot CLI lê .github/copilot-instructions.md e AGENTS.md automaticamente, seus tokens, primitivos e regras de revisão ficam no contexto em cada execução — o agente trabalha em função de uma marca em vez de uma aparência padrão.
Escolha o modelo certo por tarefa: a escolha de modelo entre Anthropic, OpenAI e Google significa que você pode recorrer ao modelo que raciocina melhor sobre um determinado layout e depois trocar para a próxima tarefa — sem mudar seu fluxo de trabalho.
Especificações reais via MCP: o servidor MCP do GitHub integrado, além de um servidor MCP do Figma, direcionam o agente para seus tokens, componentes e especificações reais, para que ele construa a partir da fonte em vez de fazer aproximações.
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 Copilot CLI 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).
Convenções que acompanham o repositório: Já que o Copilot CLI lê .github/copilot-instructions.md e AGENTS.md automaticamente, seus tokens, primitivos e regras de revisão ficam no contexto em cada execução — o agente trabalha em função de uma marca em vez de uma aparência padrão.
Escolha o modelo certo por tarefa: a escolha de modelo entre Anthropic, OpenAI e Google significa que você pode recorrer ao modelo que raciocina melhor sobre um determinado layout e depois trocar para a próxima tarefa — sem mudar seu fluxo de trabalho.
Especificações reais via MCP: o servidor MCP do GitHub integrado, além de um servidor MCP do Figma, direcionam o agente para seus tokens, componentes e especificações reais, para que ele construa a partir da fonte em vez de fazer aproximações.
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 Copilot CLI 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 Copilot CLI para trabalho de design do zero
A sequência de configuração: instalar → autenticar → escolher um modelo → escrever instruções → habilitar a verificação no navegador.
Codifique suas regras de design: coloque seus tokens, primitivas e convenções em .github/copilot-instructions.md ou AGENTS.md, para que a saída corresponda a uma marca em vez de recorrer a um visual genérico.
Adicione verificação no navegador: conecte um Playwright ou um MCP de navegador para que o Copilot renderize em um navegador real e verifique sua saída em diferentes breakpoints, em vez de apenas confirmar que o build passa.
Use a seção de configuração atual para comandos e detalhes específicos de 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, primitivas e convenções em .github/copilot-instructions.md ou AGENTS.md, para que a saída corresponda a uma marca em vez de recorrer a um visual genérico.
Adicione verificação no navegador: conecte um Playwright ou um MCP de navegador para que o Copilot renderize em um navegador real e verifique sua saída em diferentes breakpoints, em vez de apenas confirmar que o build passa.
Use a seção de configuração atual para comandos e detalhes específicos de versão, que podem mudar.
# 1. Install Copilot CLI (Node.js required)
npm install -g @github/copilot
# 2. Start it in your project and authenticate on first run
cd your-project
copilot # run /login and follow the prompts to sign in
# 3. Choose a model for the task
# inside the session:
/model # pick a frontier model from Anthropic, OpenAI, or Google
# 4. Add custom instructions and the Figma MCP server (optional)
# write .github/copilot-instructions.md or AGENTS.md
/mcp add # add the Figma MCP server for design handoffExemplo de comando histórico do guia anterior; verifique a sintaxe atual na documentação do fornecedor vinculada.
O fluxo de trabalho de captura de tela para UI
O ciclo de design de maior alavancagem com o Copilot CLI é transformar uma imagem de referência em uma UI responsiva e funcional e iterar até que ela corresponda — apoiando-se em um modelo multimodal forte 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 em .github/copilot-instructions.md ou AGENTS.md, e diga ao Copilot onde ficam os tokens e as primitivas canônicas.
Execute um servidor de desenvolvimento e faça o Copilot renderizar em um navegador real, redimensionando para os breakpoints para conferir o resultado.
Itere fazendo o Copilot comparar sua implementação com as capturas de tela — não apenas confirmar que ela compila.
Aponte o Copilot para suas imagens de referência e dê restrições concretas; ele pré-visualiza cada edição de arquivo ou comando para sua aprovação antes de executar:
Mantenha os prompts pequenos e focados, faça commit das boas iterações e reverta as ruins (avisando o Copilot quando você reverter), para que cada passada se baseie em 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 em .github/copilot-instructions.md ou AGENTS.md, e diga ao Copilot onde ficam os tokens e as primitivas canônicas.
Execute um servidor de desenvolvimento e faça o Copilot renderizar em um navegador real, redimensionando para os breakpoints para conferir o resultado.
Itere fazendo o Copilot comparar sua implementação com as capturas de tela — não apenas confirmar que ela compila.
Aponte o Copilot para suas imagens de referência e dê restrições concretas; ele pré-visualiza cada edição de arquivo ou comando para sua aprovação antes de executar:
Mantenha os prompts pequenos e focados, faça commit das boas iterações e reverta as ruins (avisando o Copilot quando você reverter), para que cada passada se baseie em uma base limpa.
copilot
# in the prompt:
> Implement the design in reference-desktop.png and reference-mobile.png
in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens described in
.github/copilot-instructions.md.
Match spacing, layout, and hierarchy; make it responsive.
Render it in the browser and iterate until it matches the references
across breakpoints.Exemplo de comando histórico do guia anterior; verifique a sintaxe atual na documentação do fornecedor vinculada.
Instruções personalizadas, MCP e extensões
Três pontos de extensão tornam o Copilot CLI prático para trabalho de design sustentado, e todos os três se encaixam perfeitamente em um fluxo de design aberto.
Instruções personalizadas: As regras do repositório ficam em .github/copilot-instructions.md (com arquivos específicos de caminho em .github/instructions e AGENTS.md). Elas são o lar durável para suas convenções de design, incluídas automaticamente em cada execução.
Servidores MCP: O Copilot CLI vem com o servidor MCP do GitHub integrado e permite adicionar servidores personalizados via /mcp add (armazenados em mcp-config.json sob ~/.copilot) — a maneira portátil de trazer contexto de design, de forma mais relevante o servidor MCP do Figma, que funciona entre agentes, não apenas no Copilot.
Agentes especializados e ferramentas integradas: Os modos especializados do Copilot CLI — para exploração de base de código, execução de builds e testes, revisão de mudanças e planejamento — além de suas ferramentas de arquivo e shell, permitem que ele reúna referências e execute o ciclo de verificação sem sair do terminal.
Essas são capacidades portáteis e multiagente — exatamente o tipo de coisa que o OpenDesign foi criado para orquestrar, em vez de recriar por projeto.
Instruções personalizadas: As regras do repositório ficam em .github/copilot-instructions.md (com arquivos específicos de caminho em .github/instructions e AGENTS.md). Elas são o lar durável para suas convenções de design, incluídas automaticamente em cada execução.
Servidores MCP: O Copilot CLI vem com o servidor MCP do GitHub integrado e permite adicionar servidores personalizados via /mcp add (armazenados em mcp-config.json sob ~/.copilot) — a maneira portátil de trazer contexto de design, de forma mais relevante o servidor MCP do Figma, que funciona entre agentes, não apenas no Copilot.
Agentes especializados e ferramentas integradas: Os modos especializados do Copilot CLI — para exploração de base de código, execução de builds e testes, revisão de mudanças e planejamento — além de suas ferramentas de arquivo e shell, permitem que ele reúna referências e execute o ciclo de verificação sem sair do terminal.
Essas são capacidades portáteis e multiagente — exatamente o tipo de coisa que o OpenDesign foi criado para orquestrar, em vez de recriar por projeto.
Copilot CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI para design
Não há um único vencedor para trabalho de design — cada agente tem um ponto forte diferente, e equipes experientes os combinam. Um resumo justo:
Copilot CLI — Escolha multimodelo (Anthropic, OpenAI, Google) e integração profunda com o GitHub na sua assinatura do Copilot — Escolher o melhor modelo por tarefa e trabalho guiado por instruções vinculado ao seu repositório GitHub
Codex — Forte polimento visual com uma skill de frontend; builds assíncronos em sandbox — Builds assíncronos delegados e regras portáteis 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 — Ciclo visual de construir e ver com pré-visualização ao vivo e edições inline — Trabalho de UI de iterar e observar de perto dentro de uma IDE
Gemini CLI — Forte compreensão multimodal de imagens e um contexto de 1M de tokens; código aberto com um nível gratuito — Trabalho com muitos screenshots e manter um sistema de design inteiro em contexto
O veredito recorrente da comunidade é que o bom gosto vem dos humanos: todos eles usam por padrão uma estética genérica sem skills, referências e restrições. Esse é o verdadeiro problema a resolver — e ele tem formato de ferramenta de design, não de modelo.
Agente — Força de design — Melhor para
Copilot CLI — Escolha multimodelo (Anthropic, OpenAI, Google) e integração profunda com o GitHub na sua assinatura do Copilot — Escolher o melhor modelo por tarefa e trabalho guiado por instruções vinculado ao seu repositório GitHub
Codex — Forte polimento visual com uma skill de frontend; builds assíncronos em sandbox — Builds assíncronos delegados e regras portáteis 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 — Ciclo visual de construir e ver com pré-visualização ao vivo e edições inline — Trabalho de UI de iterar e observar de perto dentro de uma IDE
Gemini CLI — Forte compreensão multimodal de imagens e um contexto de 1M de tokens; código aberto com um nível gratuito — Trabalho com muitos screenshots e manter um sistema de design inteiro em contexto
O veredito recorrente da comunidade é que o bom gosto vem dos humanos: todos eles usam por padrão uma estética genérica sem skills, referências e restrições. Esse é o verdadeiro problema a resolver — e ele tem formato de ferramenta de design, não de modelo.
Agente — Força de design — Melhor para
Armadilhas, e como evitar o visual de 'lixo de IA'
A reclamação mais comum sobre design gerado por IA é que ele parece genérico — gradientes suaves, painéis flutuantes, cantos arredondados exagerados, sombras dramáticas, uma vibe de Inter e roxo que “grita que uma IA fez isso”. Outros problemas relatados incluem layouts móveis quebrados e instruções vazando para o texto da interface. Nenhum destes é exclusivo do Copilot CLI; eles são o que acontece quando qualquer agente é executado sem um contexto de design curado.
Adicione uma habilidade estética: Uma habilidade 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: Renderize e faça auto-verificação em breakpoints com um MCP de navegador para que os layouts não quebrem silenciosamente no celular.
Forneça tokens e referências: Tokens de design reais e capturas de tela de referência são a maior alavanca na qualidade do resultado.
Codifique regras em instruções personalizadas: Coloque regras de estilo como “sem cartões hero, no máximo duas fontes tipográficas, hierarquia com a marca em primeiro lugar” em .github/copilot-instructions.md ou AGENTS.md, onde o agente as lê 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 remove.
Adicione uma habilidade estética: Uma habilidade 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: Renderize e faça auto-verificação em breakpoints com um MCP de navegador para que os layouts não quebrem silenciosamente no celular.
Forneça tokens e referências: Tokens de design reais e capturas de tela de referência são a maior alavanca na qualidade do resultado.
Codifique regras em instruções personalizadas: Coloque regras de estilo como “sem cartões hero, no máximo duas fontes tipográficas, hierarquia com a marca em primeiro lugar” em .github/copilot-instructions.md ou AGENTS.md, onde o agente as lê 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 remove.
Projetando com o Copilot CLI dentro do OpenDesign
O OpenDesign é a camada de design de código aberto que o fluxo de trabalho acima continua pedindo. Ele trata o GitHub Copilot CLI como um adaptador de primeira linha e o envolve em uma habilidade curada e biblioteca de design system, um pipeline de renderização estruturado e uma interface desktop local — para que o contexto de design que torna o Copilot bom esteja lá desde a primeira execução, não montado manualmente a cada vez. O OpenDesign é independente, de código aberto (Apache-2.0) e local-first, e é por isso que a combinação funciona: o agente faz o trabalho, seus arquivos e credenciais permanecem seus.
Instale o OpenDesign e selecione o GitHub Copilot CLI como seu agente.
Autentique-se com sua assinatura do GitHub Copilot — as credenciais ficam na sua máquina e nunca são intermediadas por nós.
Escolha um design system e uma habilidade, depois gere apresentações, protótipos e landing pages com um gosto consistente.
Cada artefato e arquivo DESIGN.md fica no seu próprio repositório, não em uma nuvem hospedada.
O mesmo agente Copilot CLI, a mesma assinatura — mais um fluxo de trabalho de design real, portátil e de código aberto ao redor dele. O OpenDesign é local-first e Apache-2.0, então nada sobre seu trabalho ou suas credenciais sai da sua máquina.
Instale o OpenDesign e selecione o GitHub Copilot CLI como seu agente.
Autentique-se com sua assinatura do GitHub Copilot — as credenciais ficam na sua máquina e nunca são intermediadas por nós.
Escolha um design system e uma habilidade, depois gere apresentações, protótipos e landing pages com um gosto consistente.
Cada artefato e arquivo DESIGN.md fica no seu próprio repositório, não em uma nuvem hospedada.
O mesmo agente Copilot CLI, a mesma assinatura — mais um fluxo de trabalho de design real, portátil e de código aberto ao redor dele. O OpenDesign é local-first e Apache-2.0, então nada sobre seu trabalho ou suas credenciais sai da sua máquina.
A OpenDesign é afiliada ao GitHub ou à Microsoft?
Não. OpenDesign é independente; GitHub Copilot é uma marca registrada da GitHub, Inc. e da Microsoft.