102.7K+Baixar
Claude Code OpenDesign

Projetar com
Claude Code no
OpenDesign.

Como desenhar interfaces com o Claude Code no OpenDesign: CLAUDE.md e a skill Frontend Design como restrições, uma tarefa de configurações de workspace do briefing ao arquivo revisado, e onde o ciclo com o Figma se encerra.

Baixar o OpenDesign Ir para a configuração

TRÊS PONTOS DE ENTRADA PARA O CLAUDE CODE

Escolha seu ponto de partida para o Claude Code

ESTE GUIA · DESIGN DE UI

Entregue uma interface de produto usando o Claude Code

Este passo a passo: um briefing, referências, regras de design e um artefato HTML que passa por revisão.

Ler este guia CONFIGURAÇÃO

Configure o Claude Code a partir de uma máquina limpa

O caminho completo de uma instalação nova até uma sessão do Claude Code capaz de gerar UI e verificá-la em um navegador.

Ir para a configuração COMPARAÇÃO

Compare o Claude Code com o Codex e o Cursor

Onde os pontos fortes de design do Claude Code se situam ao lado do Codex e do Cursor, e quando um agente diferente é a melhor escolha.

Ver a comparação
Nesta página Exemplo
  1. Exemplo
  2. Adequação
  3. Compatibilidade
  4. Configuração
  5. Workflow
  6. Recursos
  7. Limitações
  8. Perguntas frequentes

UM PASSO A PASSO DE DESIGN COM O CLAUDE CODE

Do briefing à interface: uma tarefa de design com o Claude Code

Este passo a passo acompanha um trabalho ao longo da entrega: o briefing e as restrições que você fornece ao Claude Code, o artefato que ele devolve e as verificações que continuam sendo suas antes da aprovação final. A interface abaixo é uma ilustração criada para esta página, não a captura de uma sessão real do Claude Code.

1Briefing de Design e Restrições

Briefing

Projete a área de configurações do workspace de uma pequena equipe SaaS: geral, membros, notificações e cobrança. Puxe os valores dos tokens em CLAUDE.md; nenhuma exceção ajustada à mão. Precisa funcionar bem no desktop e no celular.

  • Design systemTokens e primitivos do CLAUDE.md; Albert Sans; um único acento verde
  • Breakpoints1440px desktop e 390px mobile, sem rolagem horizontal
  • InteraçõesAlternador de seção, toggles, uma barra de alterações não salvas e uma ordem de foco por teclado
  • SaídaUm único arquivo HTML autocontido com hooks data-od-id estáveis

2Quem faz o quê: você, o Claude Code e o OpenDesign

  • Você

    Você escreve o briefing, escolhe o design system e define os critérios de aceite.

  • Claude Code

    O Claude Code planeja o layout, escreve o HTML, CSS e JavaScript e depois revisa sob demanda.

  • OpenDesign

    OpenDesign fornece o design system e a skill, renderiza a prévia e mantém cada versão como um arquivo de projeto.

  • Revisão

    Antes da entrega, verifique a hierarquia visual, o espaçamento na grade de 8px, ambos os breakpoints e todas as interações.

3Saída do Claude Code: tela de configurações em 1440px e 390px

Saída do Claude Code: tela de configurações em 1440px e 390px — Desktop
Exemplo ilustrativo

4Revisar Antes da Entrega

Layout

Grade e Espaçamento

Subnavegação, formulário e ações alinhados à grade de 8px; a barra de salvamento fixa nunca cobre um campo.

Hierarquia

Hierarquia Visual

Os títulos de grupo têm mais peso que os rótulos; o acento aparece apenas nos toggles ativados.

Responsivo

Layout Mobile

Na largura mobile, a subnavegação vira um seletor segmentado; os toggles mantêm uma área de toque de 44px; o botão de salvar ocupa a largura total.

Interação

Verificações de Interação

Percorra cada campo com Tab, alterne um controle e então cancele e confirme o aviso de alterações não salvas.

Adequação

Onde o Claude Code se encaixa — e onde não

O Claude Code é Adequado Quando

  • Design system em primeiro lugar. Coloque um DESIGN.md / tokens / configuração do Tailwind no projeto para que o Claude Code corresponda a uma marca em vez de escorregar para o “AI slop”.
  • Skills estéticas. Skills como o frontend-design da Anthropic levam o Claude Code a escolher uma direção de tipografia/cor/movimento antes de escrever a marcação.
  • Figma → código. Conecte o servidor MCP do Figma, e o Claude Code transforma frames em componentes de produção com tokens reais.
  • Loop de capturas de tela. Deixe o Claude Code capturar a própria UI em tela, compará-la com uma referência e iterar — o loop agêntico de feedback de design.

Escolha Outro Workflow Quando

  • Você precisa de arquivos vetoriais editáveis. O Claude Code devolve HTML, não um documento de design editável. Use um fluxo vetorial separado para esse formato de arquivo.
  • Você não tem referência nem restrições. Sem design system ou exemplos, o Claude Code tende a um visual genérico; esboce o briefing primeiro.
  • Você não tem a credencial de que este agente precisa. Necessário: chave de API da Anthropic (traga sua própria chave) ou assinatura do Claude. OpenDesign não fornece nem faz proxy de credenciais.
  • Sua equipe trabalha no Codex ou no Cursor. Esses agentes têm páginas próprias; OpenDesign mantém um único workspace entre agentes, mas a configuração é diferente. Veja agentes relacionados.

Compatibilidade

Requisitos do Claude Code antes de começar

Esta página trata o Claude Code como conectado por meio do aplicativo de desktop OpenDesign. As referências publicadas foram verificadas em 6 de setembro de 2026.

Escopo da FerramentaClaude Code, da Anthropic

O Claude Code é a ferramenta agêntica de linha de comando da Anthropic: descreva uma tarefa em linguagem natural, e ele lê, escreve e executa código no seu projeto até que a tarefa esteja concluída. É separado do produto hospedado Claude Design da Anthropic; a comparação com o Claude Design cobre essa escolha. Esta página trata de projetar interfaces com o Claude Code por meio do OpenDesign, não da interface do próprio Claude Code. As notas de configuração do OpenDesign listam os agentes disponíveis.

Contas e AutenticaçãoChave de API da Anthropic (BYOK) ou Claude

Chave de API da Anthropic (BYOK) ou assinatura do Claude. Você se autentica com sua chave de API da Anthropic (BYOK) ou assinatura do Claude — nada passa por proxy nosso. Nenhuma cota ou preço é prometido nesta página.

Sistema e VersõesApp de desktop ou código-fonte

Disponível como CLI de terminal, extensões para VS Code / Cursor / JetBrains, aplicativo de desktop e web. Para builds de desktop, veja a página de download. Os requisitos de Node.js e pnpm no quickstart do código-fonte importam ao executar a partir do código-fonte, não ao instalar um pacote de desktop. Versão mínima compatível do Claude Code: não verificada aqui.

Verificação de ConexãoO sinal de sucesso

Use as instruções de conexão que a versão instalada exibe e então tente uma tarefa modesta. Confirme que o Claude Code a concluiu e que o artefato abre. Baixar o agente sozinho não comprova uma conexão funcional.

Comece com o app de desktop

Configuração do Claude Code em Três Etapas

Comece pelo download, conclua a configuração do Claude Code para a versão que você instalou e então verifique um resultado modesto. Seguir este caminho não exige compilar o OpenDesign a partir do código-fonte.

  1. 1

    Baixe o App de Desktop da OpenDesign

    Escolha o pacote para sua máquina, instale-o e abra o aplicativo de desktop.

    Baixar o OpenDesign
    PONTO DE VERIFICAÇÃO
    O aplicativo de desktop abre. Se já estiver instalado, vá para a próxima etapa; não é necessário um segundo download.
  2. 2

    Prepare Sua Conexão com o Claude Code

    Siga as instruções do Claude Code que acompanham a versão instalada. Autentique-se com sua chave de API da Anthropic (BYOK) ou assinatura do Claude — nada passa por proxy nosso.

    anthropics/skills — frontend-design skill 
    # 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex

# 2. Start it in your project and sign in on first run
cd your-project
claude            # sign in with your Claude subscription or API key

    Extraído das notas de configuração do Claude Code no guia publicado; verifique o comando atual na documentação do fornecedor.

    PONTO DE VERIFICAÇÃO
    Confirme o agente e a conta que você pretendia usar. Se o Claude Code estiver indisponível, revise a compatibilidade antes de passar para uma tarefa maior.
  3. 3

    Execute uma primeira tarefa pequena com o Claude Code

    Mantenha o primeiro briefing modesto, para que você possa avaliar o loop completo, incluindo uma revisão.

    Briefing inicial

    Construa uma tela de configurações com um formulário de perfil e uma confirmação de salvamento. Siga minhas regras de design. Verifique-a nas larguras desktop e mobile.

    PONTO DE VERIFICAÇÃO
    Abra o artefato, exercite o estado de salvamento e peça uma mudança específica. A geração inicia a revisão; não a conclui.

Para executar o OpenDesign a partir do código-fonte, use o quickstart técnico em vez disso.

O workflow de design do Claude Code

Fluxo de design com o Claude Code: cinco etapas do briefing ao arquivo revisado

Uma tarefa de configurações de workspace acompanhada do briefing ao arquivo verificado. Cada etapa mostra o que você entrega, o que o Claude Code faz, o que o OpenDesign contribui e o que você verifica.

  1. 1

    Briefing de Design

    Linguagem simples, de três a seis linhas. Declare o público, a função da tela e as plataformas.

    • VocêEscreva o briefing; anexe uma captura de tela de referência quando tiver uma.
    • Claude CodeLê o briefing e o CLAUDE.md; pergunta quando algo é ambíguo.
    • OpenDesignFornece o projeto, a superfície de prompt e a skill correspondente ao tipo de artefato.
    • VerificarConfirme que o briefing inclui critérios de aceite. Adicioná-los agora custa menos do que após a geração.
  2. 2

    Restrições de Design

    Um design system e algumas regras rígidas. Essa combinação é o que separa uma saída fiel à marca de um visual genérico.

    • VocêEscolha um design system; defina os breakpoints e quaisquer componentes de uso obrigatório.
    • Claude CodeCarrega os tokens do DESIGN.md e as regras de postura no contexto antes de escrever qualquer marcação.
    • 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. 3

    Gerar a Interface

    O Claude Code produz um arquivo HTML autocontido: layout, estilos, interações e hooks estáveis.

    • VocêAguarde ou responda a uma pergunta de esclarecimento. Nada a configurar.
    • Claude CodePlaneja 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. 4

    Pré-visualização

    O arquivo é renderizado dentro do OpenDesign nas larguras que você especificou. É aqui que o design é avaliado.

    • VocêAlterna larguras, clica pelas interações, deixa comentários nos elementos.
    • Claude CodeLê seus comentários na pré-visualização e prepara a próxima revisão.
    • OpenDesignRenderiza a prévia e expõe alvos data-od-id para comentários e edições.
    • CheckHierarquia, contraste, overflow em 390px, estados de foco e se o destaque é usado com moderação.
  5. 5

    Revisar e Verificar

    Solicite alterações apontando para elementos na pré-visualização. Cada revisão se torna um novo arquivo; nada é sobrescrito silenciosamente.

    • VocêTransforma comentários em solicitações; decide quando a tarefa está concluída.
    • Claude CodeAplica as alterações diretamente 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 Claude Code

LEITURAS ADICIONAIS

Leituras Adicionais sobre Claude Code

Tutoriais, documentação e demonstrações passo a passo para projetar com Claude Code, extraídos do guia publicado.

Skills

Skills de Design

Os tipos de artefato que o Claude Code pode produzir no OpenDesign, um skill por tipo.

Explore skills Sistemas de design

Sistemas de Design

Tokens de marca e componentes a vincular antes que o Claude Code gere qualquer coisa.

Explore sistemas Templates

Templates

Pontos de partida para apresentações, landing pages e telas de produto.

Explorar modelos

Limitações

Limitações do Claude Code, Verificações Manuais e Alternativas

  • EscopoÉ um agente de codificação, não uma ferramenta de design — ainda assim, o design é um de seus usos emergentes mais fortes. Com as habilidades certas e um sistema de design em contexto, ele gera HTML/CSS/React de produção, itera em capturas de tela e mantém tokens de design. Esta página aborda o Claude Code como um agente conectado ao OpenDesign, não todos os recursos do Claude Code.
  • Limites de UsoOs limites de uso e o custo seguem a credencial que você usa (chave de API da Anthropic ou assinatura Claude). Nenhuma afirmação sobre cotas gratuitas é feita aqui.
  • 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 vetorial. Os ciclos de ida e volta com o Figma passam pela própria integração do Claude Code com o Figma.
  • Revisão ManualVocê revisa acessibilidade, conteúdo real, adequação à marca e correção de interação na pré-visualização. Trate qualquer autoavaliação do agente como uma primeira passada.
  • 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 Claude Code e OpenDesign

O Claude Code É Bom Para Trabalhos de Design?
Sim — ele é amplamente considerado o agente de código com o melhor senso estético para frontend, tomando decisões específicas e conscientes da base de código sobre valores hexadecimais, espaçamento e escalas tipográficas. Com a skill Frontend Design, um design system e imagens de referência reais no contexto, ele produz UI responsiva com qualidade de produção e consegue verificá-la em um navegador. Sem esse contexto, ele tende a recorrer a uma aparência genérica, que é a lacuna que a OpenDesign preenche.
Preciso de uma Assinatura da Claude Para Projetar Com o Claude Code?
Você pode usar uma chave de API da Anthropic (BYOK, via Console) ou uma assinatura da Claude (Pro / Max). De qualquer forma, a OpenDesign nunca faz proxy das suas credenciais — elas são usadas diretamente pelo seu agente na sua máquina.
Claude Code ou Codex Para Design de Frontend?
Ambos são fortes. O Claude Code é conhecido por decisões de design específicas e conscientes da base de código e por raciocínio de frontend; o Codex tem forte acabamento visual e se destaca em builds delegados e isolados (sandboxed). Muitas equipes usam os dois — a OpenDesign permite trocar de agente sem mudar seu workflow de design.
Como Conecto o Claude Code ao Figma?
Instale o plugin oficial do Figma com claude plugin install figma@claude-plugins-official. Você pode então implementar frames do Figma em código usando o contexto de design, e enviar uma UI em execução de volta para frames editáveis do Figma com “Send this to Figma.” O Dev Mode MCP requer um plano pago do Figma.
O Que São Skills e o CLAUDE.md?
O CLAUDE.md é um arquivo markdown na raiz do seu projeto que o Claude Code lê no início de cada sessão — o lugar para codificar suas convenções de design. As skills empacotam instruções e recursos repetíveis que o Claude carrega sob demanda, incluindo a skill oficial Frontend Design da Anthropic. A OpenDesign traz uma biblioteca selecionada de ambos para você pular a configuração por projeto.
O que o Claude Code realmente é
Claude Code é a ferramenta de codificação agêntica da Anthropic. Ele lê sua base de código, edita arquivos, executa comandos e integra-se com suas ferramentas de desenvolvimento — planejando, escrevendo e verificando o trabalho a partir de tarefas em linguagem natural, em vez de apenas autocompletar linhas.

Ele é distribuído em várias superfícies que compartilham o mesmo motor: um CLI de terminal, extensões de IDE para VS Code, Cursor e JetBrains, um aplicativo de desktop com revisão visual de diff e uma experiência web para tarefas de longa duração. Seus arquivos CLAUDE.md, configurações e servidores MCP são mantidos em todas elas.

Arquivo de instruções: O Claude Code lê um arquivo CLAUDE.md na raiz do seu projeto no início de cada sessão — o lugar natural para codificar suas convenções de design, tokens e listas de verificação de revisão.

Skills: As Agent Skills empacotam instruções repetíveis, scripts e recursos que o Claude carrega sob demanda, incluindo a skill oficial Frontend Design da Anthropic para bom gosto.

Plano e subagentes: Ele pode planejar antes de agir e gerar subagentes que trabalham em diferentes partes de uma tarefa em paralelo, o que mantém grandes refatorações de UI coerentes.

Credencial: Chave de API da Anthropic (BYOK, via Console) ou uma assinatura do Claude (Pro / Max)

Fornecedor: Anthropic
Por que o Claude Code é bom em design
Entre os agentes de codificação, o Claude Code tem reputação de bom gosto no trabalho de frontend. Algumas coisas explicam isso.

Decisões específicas, não vagas: O Claude Code tende a se comprometer com escolhas concretas — valores hexadecimais exatos, escalas de espaçamento, rampas de tipo e hierarquia de componentes — em vez de enrolar, o que é o que separa uma interface real de um placeholder.

Raciocínio consciente da base de código: Com um contexto de trabalho amplo, ele refatora a UI em muitos arquivos de uma vez, reutilizando seus componentes e tokens existentes em vez de reinventar estilos pontuais.

Uma skill oficial de frontend: A Anthropic disponibiliza uma skill Frontend Design que faz o Claude escrever primeiro uma direção de design e deliberadamente evita fontes de sistema genéricas e gradientes roxos previsíveis.

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 a Anthropic faz sobre seus próprios modelos: o Claude não tem bom gosto por padrão — deixado sozinho, ele converge para o centro estatístico do design web (Inter, gradientes roxos, sombras suaves). Ele produz um bom design quando você lhe dá restrições. O OpenDesign empacota exatamente essas entradas, e é por isso que os dois se encaixam (mais abaixo).
Configurar o Claude Code para trabalho de design, do zero
A sequência de configuração: instalar → autenticar → configurar o CLAUDE.md → adicionar a skill Frontend Design → habilitar a verificação no navegador.

Codifique suas regras de design: Coloque seus tokens, primitivos e convenções no CLAUDE.md e aponte o Claude para eles, para que a saída corresponda a uma marca em vez de assumir um visual genérico.

Adicione verificação no navegador: Conecte um MCP do Playwright ou Chrome para que o Claude renderize em um navegador real e verifique sua saída em diferentes breakpoints, em vez de apenas confirmar que a compilação passou.

Use a seção de configuração atual para comandos e detalhes específicos da versão, que podem mudar.

# 1. Instale o Claude Code (instalação nativa, recomendada) curl -fsSL https://claude.ai/install.sh | bash # ou: brew install --cask claude-code # Windows PowerShell: irm https://claude.ai/install.ps1 | iex # 2. Inicie-o no seu projeto e faça login na primeira execução cd your-project claude # faça login com sua assinatura Claude ou chave de API # 3. Gere o contexto do projeto /init # cria um CLAUDE.md para este projeto # 4. Adicione a skill oficial Frontend Design claude plugin install frontend-design@claude-plugins-official # 5. Conecte o servidor MCP do Figma (opcional, para entrega de design) claude plugin install figma@claude-plugins-official
Exemplo de comando histórico do guia anterior; verifique a sintaxe atual na documentação do fornecedor vinculada.
O fluxo de trabalho com CLAUDE.md e Skills
O loop de design de maior alavancagem com o Claude Code é alimentá-lo com referências reais mais seu contexto de design, e então iterar até que a UI corresponda — com CLAUDE.md e Skills carregando as restrições para que você não precise reexplicá-las a cada prompt.

Comece a partir das referências visuais mais claras que você tem — e inclua múltiplos estados (desktop e mobile, hover, vazio, carregando), não apenas uma imagem hero.

Seja específico no prompt; prompts vagos produzem UI genérica mesmo com um agente forte.

Mantenha seu sistema de design e convenções no CLAUDE.md, e diga ao Claude onde os tokens e primitivos canônicos vivem.

Adicione a skill Frontend Design para que o Claude se comprometa com uma direção estética real antes de escrever código.

Conecte a verificação no navegador para que o Claude renderize, redimensione para os breakpoints e compare de volta com as referências — não apenas confirme que compila.

Solte uma imagem de referência na sessão e faça o prompt com restrições concretas:

Execute um servidor de desenvolvimento em paralelo, mantenha os prompts pequenos e focados, e faça commit das boas iterações / reverta as ruins (dizendo ao Claude quando você reverte) para que cada passada construa sobre uma base limpa. Use o modo plano para refatorações maiores para que você possa revisar a abordagem antes de qualquer alteração de arquivo.

claude "Implement reference-desktop.png and reference-mobile.png in React + Vite + Tailwind + TypeScript. Reuse the design-system components and tokens described in CLAUDE.md. Match spacing, layout, and hierarchy; make it responsive. Render it in the browser, verify it matches the references across breakpoints, and iterate until it does."
Exemplo de comando histórico do guia anterior; verifique a sintaxe atual na documentação do fornecedor vinculada.
Claude Code + Figma: ida e volta design ↔ código
Em fevereiro de 2026, Anthropic e Figma lançaram uma integração bidirecional de primeira classe por meio do servidor Figma MCP. Ela funciona nas duas direções.

Design → Código: Selecione um frame no Figma ou cole um link no Claude Code, extraia o contexto de design e peça para implementar o design usando sua biblioteca de componentes existente. O Code Connect mantém o resultado alinhado com seus componentes reais.

Código → Design: Construa e visualize um recurso no navegador e depois diga “Envie isto para o Figma” para capturar a interface em execução como camadas editáveis do Figma — a tela inteira ou um elemento selecionado.

Instale uma vez com claude plugin install figma@claude-plugins-official (o Dev Mode MCP requer um plano Figma pago). O mesmo Figma MCP está disponível para Claude Code, Codex, Cursor e VS Code — exatamente o tipo de capacidade portátil e multiagente que o OpenDesign foi criado para orquestrar.
Claude Code vs Codex vs Cursor para design
Não há um único vencedor para trabalhos de design — cada agente tem um ponto forte diferente, e equipes experientes os combinam. Um resumo justo:

Claude Code — Decisões específicas de design (hex, espaçamento, tipografia) e raciocínio de UX ciente da base de código — Raciocínio de frontend e refatorações de grande contexto

Codex — Forte aprimoramento visual e compreensão de imagens; builds assíncronos em sandbox — Builds assíncronos delegados e regras AGENTS.md portáteis

Cursor — Loop visual de construir e ver com pré-visualização ao vivo e edições inline — Trabalho de UI iterativo e observável dentro de um IDE

O veredito recorrente da comunidade é que o bom gosto vem de humanos: os três tendem a um visual genérico sem habilidades, referências e restrições. Esse é o verdadeiro problema a resolver — e ele tem a forma de uma ferramenta de design, não de um modelo.

Agente — Ponto forte de design — Melhor para
Armadilhas e como evitar o visual “AI slop”
Mesmo com a reputação de bom gosto do Claude Code, a reclamação mais comum sobre design gerado por IA é que ele parece genérico — fontes Inter, gradientes roxos sobre branco, sombras suaves, cantos arredondados exagerados, uma estética que “grita que uma IA fez isso”. A própria Anthropic atribui isso à convergência distribucional: escolhas seguras dominam os dados de treinamento da web. Outros problemas relatados incluem layouts móveis quebrados e instruções vazando para o texto da interface.

Instale a skill Frontend Design: ela força o Claude a se comprometer com uma direção real e evita explicitamente fontes e gradientes superutilizados por IAs.

Ative a verificação no navegador: faça o Claude renderizar e se autoavaliar em diferentes breakpoints 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 para a qualidade do resultado.

Codifique regras no CLAUDE.md: coloque regras do tipo “sem hero cards, no máximo duas fontes, hierarquia com a marca em primeiro lugar” onde o agente as lê a cada execução.

Observe que toda mitigação consiste em dar ao agente um contexto de design curado. Manter esse contexto manualmente, projeto a projeto, é o trabalho árduo que o OpenDesign elimina.
Projetando com o Claude Code dentro do OpenDesign
O OpenDesign é a camada de design open-source que o fluxo de trabalho acima continua pedindo. Ele trata o Claude Code como um adaptador de primeira parte e o envolve em uma biblioteca curada de skills e sistemas de design, um pipeline de renderização estruturado e uma interface de desktop local — para que o contexto de design que torna o Claude Code bom esteja presente desde a primeira execução, e não montado manualmente a cada vez.

Instale o OpenDesign e selecione o Claude Code como seu agente.

Autentique-se com sua chave de API da Anthropic (BYOK) ou assinatura do Claude — as credenciais permanecem na sua máquina e nunca passam por nossos servidores.

Escolha um sistema de design e uma skill, e depois gere decks, protótipos e landing pages com bom gosto consistente.

Cada artefato e arquivo DESIGN.md fica no seu próprio repositório, não em uma nuvem hospedada.

O mesmo agente Claude Code, a mesma chave — além de um fluxo de trabalho de design real, portátil e open-source ao redor. É local-first e Apache-2.0, então nada do seu trabalho ou das suas credenciais sai da sua máquina.
Este é um produto oficial da Anthropic?
Não. O OpenDesign é um projeto open-source independente. Claude Code é uma marca registrada da Anthropic; nós o integramos como um adaptador de primeira parte.