--- title: Como criar e aplicar um arquivo DESIGN.md em projetos de IA date: 2026-05-09T19:57:41Z modified: 2026-07-29T01:42:30Z permalink: "https://camaraux.com.br/como-criar-aplicar-design-md-ia/" type: post status: publish excerpt: Aprenda a criar um DESIGN.md para guiar IAs, manter interfaces consistentes e transformar regras visuais em design system reutilizável. wpid: 7299 categories: - Design Systems tags: - Design Systems - claude code - cursor - Design System - design.md - google stitch - IA - UX Design - Vibe Coding rank_math_title: "Guia DESIGN.md para IA: crie e aplique em projetos" rank_math_description: Aprenda como criar um arquivo DESIGN.md para padronizar interfaces, orientar agentes de IA e manter consistência visual em produtos digitais. rank_math_focus_keyword: DESIGN.md featured_image: /wp-content/uploads/2026/05/ilustracao-Como-criar-um-arquivo-design-md-voltado-para-ux-vibecoding.webp featured_image_alt: Pessoa observando maquete arquitetônica minimalista com pontes, torres e formas geomométricas em tons pastéis author: Lucas Camara timestamp: 2026-07-29T01:42:30Z --- Criar interfaces com IA ficou mais rápido. O problema é que velocidade sem direção visual gera telas inconsistentes, componentes desalinhados e decisões de design que mudam a cada prompt. É aqui que entra o **DESIGN.md**. O arquivo DESIGN.md funciona como uma documentação visual para agentes de IA. Ele reúne cores, tipografia, espaçamentos, componentes, padrões de layout e regras de interface em um formato que ferramentas como Cursor, Claude Code, Lovable, Google Stitch e outras IAs conseguem interpretar. > Para o fluxo específico no Google Stitch, há um guia dedicado: [como usar design.md com Google Stitch](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/design-md-google-stitch.md). Na prática, ele transforma o seu design system em uma referência reutilizável para criação de telas, componentes e produtos digitais. Se você quer explorar exemplos prontos, veja a [biblioteca Design.md da CamaraUX](https://camaraux.com.br/design-md/), com templates inspirados em marcas reais. ## O que é DESIGN.md? DESIGN.md é um arquivo em Markdown criado para documentar a identidade visual de um produto de forma clara, estruturada e reutilizável. Ele pode incluir: - Paleta de cores - Tipografia - Escalas de espaçamento - Raios de borda - Tokens visuais - Componentes - Regras de acessibilidade - Estilo de botões, cards, inputs e navegação - Diretrizes de layout - Tom visual da interface - Exemplos de uso para agentes de IA Diferente de uma documentação tradicional, o DESIGN.md é pensado para ser lido por pessoas e também por ferramentas de IA. Ou seja, ele precisa ser claro para designers, desenvolvedores e modelos de linguagem. Se quiser entender o conceito em mais profundidade, leia também o artigo [DESIGN.md: contexto visual para agentes de IA](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/design-md-agentes-ia-ux.md). > Para uma visão geral de como o arquivo funciona e por que ele surgiu, leia primeiro: [DESIGN.md: o arquivo que ensina identidade visual para agentes de IA](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/design-md-agentes-ia-ux.md). ## Para que serve um arquivo DESIGN.md? O DESIGN.md serve para dar contexto visual persistente para ferramentas de IA. Sem ele, cada prompt precisa explicar novamente como a interface deve parecer: > Use azul escuro, botão arredondado, tipografia moderna, layout limpo, cards com sombra leve… Com o DESIGN.md, essas regras ficam documentadas em um arquivo central. A IA consulta esse contexto e gera interfaces mais consistentes. Ele ajuda em tarefas como: - Criar telas com o mesmo padrão visual - Gerar componentes reutilizáveis - Manter consistência entre páginas - Reduzir retrabalho de UI - Padronizar entregas de design e desenvolvimento - Acelerar fluxos de vibe coding - Aproximar design system e agentes de IA Isso é especialmente útil em projetos com muitas telas, múltiplas ferramentas e times que precisam manter uma linguagem visual consistente. Para entender melhor a base de UX por trás disso, veja também [Fundamentos de UX Design](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/category/fundamentos-de-ux.md). ## Por que o DESIGN.md é importante para projetos com IA? Ferramentas de IA são boas em gerar código rápido. Mas elas nem sempre entendem o contexto visual completo de um produto. Sem uma referência clara, é comum que a IA: - Altere cores sem necessidade - Crie botões inconsistentes - Use espaçamentos diferentes em cada tela - Misture estilos visuais - Ignore padrões de acessibilidade - Crie componentes que não combinam com o produto - Gere interfaces bonitas, mas pouco coerentes O DESIGN.md reduz esse problema porque funciona como uma camada de memória visual. Ele explica para a IA como o produto deve se comportar visualmente antes de qualquer componente ser criado. Isso aproxima a geração de interface de uma lógica de design system. Se o seu objetivo é criar produtos digitais mais consistentes, veja também o conteúdo sobre [UX orientado a conversão](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/ux-conversao-design-resultados-negocio.md). ## Quando usar DESIGN.md? Use um arquivo DESIGN.md quando você precisar transformar regras visuais em contexto reutilizável para IA. Ele é útil em cenários como: - Criação de landing pages com IA - Prototipagem rápida de interfaces - Desenvolvimento com Cursor, Claude Code ou Lovable - Criação de componentes React - Projetos com design system em evolução - Redesign de produtos digitais - Documentação de UI para times de produto - Handoff entre design e desenvolvimento - Criação de bibliotecas visuais por marca - Geração de interfaces com consistência Se você trabalha com produto, UX ou UI, o DESIGN.md pode funcionar como uma ponte entre estratégia visual e execução com IA. ## Como criar um arquivo DESIGN.md Um bom DESIGN.md precisa ser claro, específico e organizado. A estrutura pode variar conforme o projeto, mas uma base recomendada inclui: 1. Visão geral do estilo visual 2. Princípios de design 3. Tokens de cor 4. Tipografia 5. Espaçamentos 6. Raios e bordas 7. Sombras 8. Layout e grid 9. Componentes 10. Estados de interação 11. Acessibilidade 12. Regras para IA 13. Exemplos de aplicação A seguir, veja como construir cada parte. ## 1. Comece pela visão geral A visão geral explica a personalidade visual do produto. Ela deve responder: - Qual é a sensação visual da interface? - O produto deve parecer moderno, técnico, editorial, premium ou acessível? - Quais marcas, estilos ou referências influenciam o visual? - Que tipo de experiência o usuário deve sentir? Exemplo: ``` ## Visão geral Este design system possui uma estética minimalista, técnica e editorial. A interface deve transmitir clareza, precisão e confiança. O uso de espaços amplos, tipografia limpa e contraste controlado deve orientar a experiência. ``` Evite descrições vagas como “interface bonita” ou “visual moderno”. Prefira descrever decisões visuais concretas. ## 2. Defina os princípios de design Os princípios ajudam a IA a tomar decisões quando o prompt não for específico. Exemplo: ``` ## Princípios de design - Clareza antes de decoração. - Cada componente deve ter função evidente. - Espaçamentos devem facilitar leitura e escaneabilidade. - A hierarquia visual deve orientar a ação principal. - A interface deve evitar ruído visual. - Acessibilidade deve ser preservada em todos os estados. ``` Esses princípios funcionam como regras de comportamento para a interface. Eles também ajudam a alinhar o DESIGN.md com decisões reais de UX. Para aprofundar esse raciocínio, veja o conteúdo sobre [UX Research e métodos de pesquisa](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/category/ux-research-metodos.md). ## 3. Documente a paleta de cores A paleta de cores precisa ser objetiva. Inclua: - Cor primária - Cor secundária - Cores de fundo - Cores de texto - Cores de borda - Cores de estados - Cores de feedback - Regras de contraste Exemplo: ``` ## Cores ### Primárias - Primary: #6A70FF - Primary dark: #4F55D9 - Primary light: #E1E1FB ### Neutras - Background: #FAFAFA - Surface: #FFFFFF - Text primary: #171821 - Text secondary: #5F6270 - Border: #E5E7EB ### Estados - Success: #16A34A - Warning: #F59E0B - Error: #DC2626 - Info: #2563EB ``` Também inclua regras de uso: ``` ### Regras de uso - Use Primary apenas em ações principais. - Use Surface para cards e áreas elevadas. - Use Text secondary para descrições e textos auxiliares. - Evite usar mais de uma cor vibrante na mesma seção. ``` ## 4. Documente a tipografia A tipografia precisa indicar família, pesos, tamanhos e hierarquia. Exemplo: ``` ## Tipografia ### Fonte principal - Font family: Inter, system-ui, sans-serif - Uso: interface, botões, formulários e navegação ### Escala tipográfica - Display: 56px, line-height 1.05, weight 700 - H1: 44px, line-height 1.1, weight 700 - H2: 32px, line-height 1.2, weight 600 - H3: 24px, line-height 1.25, weight 600 - Body: 16px, line-height 1.6, weight 400 - Small: 14px, line-height 1.5, weight 400 - Caption: 12px, line-height 1.4, weight 500 ``` Inclua também regras: ``` ### Regras de tipografia - Use títulos curtos e diretos. - Evite parágrafos longos em cards. - Use peso 600 ou 700 apenas para hierarquia. - Não use texto menor que 14px em áreas principais. ``` ## 5. Defina espaçamentos A escala de espaçamento evita que a IA invente medidas aleatórias. Exemplo: ``` ## Espaçamento - 4px: micro espaçamentos - 8px: distância entre ícones e textos - 12px: espaçamento interno compacto - 16px: padding padrão em cards pequenos - 24px: espaçamento entre grupos - 32px: espaçamento entre seções internas - 48px: separação entre blocos principais - 80px: espaçamento vertical de seções ``` Regra recomendada: ``` ### Regras de espaçamento - Use múltiplos de 4px. - Preserve respiro visual entre seções. - Não compacte cards com muito conteúdo. - Em mobile, mantenha no mínimo 16px de padding lateral. ``` ## 6. Defina bordas, raios e sombras Esses detalhes dão unidade à interface. Exemplo: ``` ## Bordas e raios - Radius small: 6px - Radius medium: 12px - Radius large: 20px - Radius pill: 999px ### Regras - Use radius medium em cards. - Use radius pill em botões e chips. - Evite misturar muitos raios diferentes na mesma tela. ``` Sombras: ``` ## Sombras - Shadow soft: 0 8px 24px rgba(0, 0, 0, 0.08) - Shadow medium: 0 16px 40px rgba(0, 0, 0, 0.12) ### Regras - Use sombras apenas para indicar elevação. - Evite sombras pesadas em interfaces minimalistas. - Cards secundários podem usar apenas borda. ``` ## 7. Documente o layout A IA precisa entender como organizar a tela. Exemplo: ``` ## Layout ### Containers - Max width desktop: 1200px - Padding desktop: 32px - Padding tablet: 24px - Padding mobile: 16px ### Grid - Desktop: 12 colunas - Tablet: 8 colunas - Mobile: 4 colunas ### Regras - Use layouts em grid para listas de cards. - Em mobile, empilhe os elementos verticalmente. - Evite largura de texto superior a 720px. ``` Essa parte ajuda bastante em páginas responsivas. ## 8. Documente componentes Componentes são uma das partes mais importantes do DESIGN.md. Inclua regras para: - Botões - Inputs - Cards - Modais - Tabs - Chips - Menus - Alertas - Tabelas - Banners - Headers - Footers Exemplo para botões: ``` ## Componente: Botão ### Botão primário - Background: Primary - Text: White - Radius: Pill - Padding: 12px 20px - Font weight: 600 ### Estados - Hover: escurecer Primary em 8% - Focus: adicionar outline visível - Disabled: reduzir opacidade para 50% ### Regras - Use apenas um botão primário por bloco de decisão. - Botões devem ter texto claro e orientado à ação. - Evite rótulos genéricos como "Clique aqui". ``` Exemplo para cards: ``` ## Componente: Card - Background: Surface - Border: 1px solid Border - Radius: Large - Padding: 24px - Shadow: Soft quando houver destaque ### Regras - Cards devem ter título, descrição e ação quando necessário. - Evite excesso de texto. - Mantenha hierarquia clara entre título e conteúdo. ``` Para melhorar microinterações, veja também [Microinterações em UX: o que são e como aplicar](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/microinteracoes-ux-detalhes-experiencia-usuario.md). ## 9. Inclua regras de acessibilidade Acessibilidade não deve ser tratada como detalhe. Inclua regras como: ``` ## Acessibilidade - Todo texto deve ter contraste adequado. - Botões precisam ter estados de foco visíveis. - Ícones interativos devem ter rótulo acessível. - Imagens informativas precisam de alt text. - Não use apenas cor para indicar erro ou sucesso. - Áreas clicáveis devem ter tamanho mínimo confortável. - Componentes devem funcionar por teclado. ``` Essa parte ajuda a IA a gerar interfaces mais inclusivas. Também melhora a qualidade geral da experiência. ## 10. Escreva regras específicas para IA Essa seção orienta diretamente o comportamento da ferramenta. Exemplo: ``` ## Regras para agentes de IA - Siga sempre os tokens definidos neste arquivo. - Não invente novas cores, fontes ou estilos sem necessidade. - Priorize clareza, consistência e acessibilidade. - Use os componentes descritos antes de criar novos. - Em caso de dúvida, escolha a solução mais simples. - Preserve a hierarquia visual em todas as telas. - Não use efeitos visuais que prejudiquem leitura. ``` Essas instruções reduzem variações inesperadas. ## 11. Adicione exemplos de prompts Uma boa prática é incluir prompts prontos para uso. Exemplo: ``` ## Exemplos de prompts Crie uma landing page SaaS usando este DESIGN.md como referência visual. Siga os tokens de cor, tipografia, espaçamento e componentes definidos no arquivo. Crie um modal de confirmação responsivo usando os padrões de botão, card, radius e acessibilidade deste DESIGN.md. Crie uma tela de dashboard com cards, filtros e tabela. Preserve a hierarquia visual e os espaçamentos definidos neste arquivo. ``` Isso ajuda designers e desenvolvedores a usar o arquivo com mais facilidade. ## Como usar um template DESIGN.md pronto A forma mais simples de começar é usando um template pronto. Na [biblioteca Design.md da CamaraUX](https://camaraux.com.br/design-md/), você encontra templates inspirados em marcas como Apple, Google, Airbnb, Figma, Claude, Coinbase, Binance, BMW, Brastemp, Consul e outras. O processo é simples: 1. Acesse a biblioteca. 2. Escolha o template mais próximo da estética do seu projeto. 3. Copie ou baixe o arquivo DESIGN.md. 4. Ajuste cores, textos e componentes conforme a sua marca. 5. Adicione o arquivo ao projeto. 6. Instrua a IA a seguir o DESIGN.md como referência visual. 7. Gere telas, componentes ou fluxos com base nesse contexto. ## Como usar DESIGN.md no Cursor No Cursor, você pode usar o DESIGN.md como contexto do projeto. Fluxo recomendado: 1. Coloque o arquivo `DESIGN.md` na raiz do projeto. 2. Crie ou atualize suas regras do Cursor. 3. Informe que a IA deve seguir o arquivo como fonte visual principal. 4. Peça componentes, telas ou ajustes respeitando o design system. Prompt exemplo: ``` Use o arquivo DESIGN.md como fonte visual principal. Crie uma seção hero responsiva com título, descrição, CTA primário e CTA secundário. Preserve cores, tipografia, espaçamentos, raios e regras de acessibilidade. ``` ## Como usar DESIGN.md no Claude Code No Claude Code, o arquivo pode ser usado como documentação de contexto. Fluxo recomendado: 1. Adicione o `DESIGN.md` ao projeto. 2. Referencie o arquivo no prompt. 3. Peça para o Claude seguir os tokens e componentes. 4. Solicite revisão de consistência visual após gerar a interface. Prompt exemplo: ``` Leia o arquivo DESIGN.md e use-o como referência para criar um componente de card de produto. Não crie estilos fora do design system. ``` ## Como usar DESIGN.md no Google Stitch O Google Stitch trabalha muito bem com referências estruturadas. Você pode usar o DESIGN.md para orientar: - Estilo visual - Paleta - Tipografia - Componentes - Layouts - Estados da interface Prompt exemplo: ``` Use este DESIGN.md como referência para criar uma tela de onboarding. Mantenha a estética, os tokens visuais e os componentes definidos. ``` ## Como usar DESIGN.md no Lovable No Lovable, o DESIGN.md pode ajudar a manter a consistência visual durante a criação de aplicações. Fluxo recomendado: 1. Cole o conteúdo do DESIGN.md no contexto do projeto. 2. Explique que ele deve ser seguido como design system. 3. Solicite a criação da interface. 4. Revise se a IA respeitou cores, componentes e espaçamentos. Prompt exemplo: ``` Crie uma aplicação web usando este DESIGN.md como referência visual. A interface deve seguir os tokens, componentes e regras de acessibilidade descritos. ``` ## Erros comuns ao criar um DESIGN.md ### 1. Ser genérico demais Evite instruções como: ``` Crie uma interface moderna e bonita. ``` Prefira: ``` Use layout limpo, fundo #FAFAFA, cards brancos com borda #E5E7EB, tipografia Inter e botões primários com radius 999px. ``` Quanto mais específica for a documentação, melhor será o resultado. ### 2. Não definir estados Muitos arquivos documentam apenas o estado padrão dos componentes. Inclua também: - Hover - Focus - Active - Disabled - Loading - Error - Success Isso melhora a experiência e evita componentes incompletos. ### 3. Misturar estilos diferentes Um DESIGN.md precisa ter coerência. Evite combinar, no mesmo sistema: - Minimalismo extremo - Neobrutalismo - Glassmorphism - Estética corporativa - Visual gamer Escolha uma direção principal. ### 4. Ignorar mobile A IA precisa saber como adaptar a interface. Inclua regras para: - Padding mobile - Quebra de colunas - Tamanho mínimo de toque - Menu responsivo - Cards empilhados - Tabelas com scroll horizontal quando necessário ### 5. Esquecer acessibilidade Um design system sem acessibilidade gera interfaces frágeis. Inclua contraste, foco visível, alt text, navegação por teclado e tamanhos mínimos. ## Exemplo de estrutura completa de DESIGN.md ``` # DESIGN.md ## Visão geral Interface minimalista, clara e focada em produtividade. O sistema deve transmitir confiança, velocidade e precisão. ## Princípios - Clareza antes de decoração. - Consistência em todos os componentes. - Acessibilidade como padrão. - Hierarquia visual objetiva. - Espaçamento generoso para leitura. ## Cores - Primary: #6A70FF - Background: #FAFAFA - Surface: #FFFFFF - Text primary: #171821 - Text secondary: #5F6270 - Border: #E5E7EB ## Tipografia - Font family: Inter, system-ui, sans-serif - H1: 44px, 700, line-height 1.1 - H2: 32px, 600, line-height 1.2 - Body: 16px, 400, line-height 1.6 - Small: 14px, 400, line-height 1.5 ## Espaçamento - 8px: elementos próximos - 16px: padding base - 24px: cards - 32px: blocos internos - 48px: seções - 80px: grandes separações ## Componentes ### Botão primário - Background: Primary - Text: White - Radius: 999px - Padding: 12px 20px - Font weight: 600 ### Card - Background: Surface - Border: 1px solid Border - Radius: 20px - Padding: 24px ## Acessibilidade - Usar contraste adequado. - Manter foco visível. - Não depender apenas de cor. - Garantir navegação por teclado. ## Regras para IA - Não inventar estilos fora deste arquivo. - Priorizar os componentes definidos. - Preservar tokens, tipografia e espaçamentos. - Adaptar responsivamente para mobile. ``` ## Como o DESIGN.md ajuda UX, UI e desenvolvimento O DESIGN.md não substitui o trabalho de UX. Ele organiza decisões visuais para que a IA consiga executar melhor. A estratégia de UX continua sendo essencial para entender: - Quem é o usuário - Qual problema precisa ser resolvido - Quais fluxos são prioritários - Como medir sucesso - Onde estão os pontos de fricção - Como melhorar conversão Por isso, o ideal é usar o DESIGN.md junto com pesquisa, estratégia e validação. Se o objetivo do produto for melhorar resultado de negócio, recomendo ler também [Como a UX impacta nas taxas de conversão](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/experiencia-usuario-ux-impacta-taxas-conversao.md). ## DESIGN.md é só para designers? Não. O DESIGN.md pode ser usado por: - UX Designers - UI Designers - Product Designers - Desenvolvedores front-end - Product Managers - Founders - Times de marketing - Times de inovação - Profissionais que usam IA para criar interfaces Designers usam para documentar intenção visual. Desenvolvedores usam para gerar componentes mais consistentes. Times de produto usam para acelerar experimentos. Empresas usam para manter identidade visual em múltiplas entregas. ## DESIGN.md substitui um design system? Não exatamente. O DESIGN.md pode documentar partes de um design system, mas não substitui toda a governança de design. Um design system completo pode incluir: - Biblioteca Figma - Tokens - Componentes codificados - Documentação - Regras de acessibilidade - Processo de contribuição - Versionamento - Guidelines de produto O DESIGN.md funciona como uma camada textual e interpretável por IA. Ele é especialmente útil quando você precisa transformar o design system em contexto para agentes de código. ## Como escolher um template DESIGN.md Antes de escolher um template, observe o tipo de produto que você está criando. Use perguntas como: - O produto precisa parecer premium? - A interface precisa ser técnica? - A marca deve parecer acessível? - O foco está em conversão? - O produto é SaaS, marketplace, app, fintech ou plataforma de IA? - O usuário espera simplicidade ou alta densidade de informação? Exemplos: - Para estética minimalista e premium, use referências como Apple. - Para interface clara e acessível, use referências como Google. - Para SaaS e produtividade, use referências como Linear, Notion ou Cal.com. - Para IA e tecnologia, use referências como Claude, OpenAI ou Cursor. - Para varejo e e-commerce, use referências como Amazon, Brastemp ou Consul. Veja os modelos disponíveis na [biblioteca Design.md da CamaraUX](https://camaraux.com.br/design-md/). ## Checklist para revisar seu DESIGN.md Antes de usar o arquivo em um projeto, revise: - O objetivo visual está claro? - As cores possuem nomes e usos definidos? - A tipografia possui escala completa? - Os espaçamentos seguem uma lógica? - Os componentes têm estados? - Existem regras para mobile? - As regras de acessibilidade estão documentadas? - A IA sabe o que não deve fazer? - Existem exemplos de prompts? - O arquivo está fácil de ler por humanos? Se a resposta for sim, o arquivo já está pronto para orientar a criação de interfaces com IA. ## Conclusão O DESIGN.md é uma forma prática de transformar decisões de design em contexto para IA. Ele ajuda a reduzir inconsistências, acelerar a criação de interfaces e aproximar design system, UX e desenvolvimento. Em vez de depender de prompts longos e repetitivos, você cria um arquivo central com as regras visuais do produto. A partir disso, ferramentas como Cursor, Claude Code, Google Stitch e Lovable conseguem gerar telas e componentes mais alinhados com a identidade visual desejada. Para começar mais rápido, acesse a [biblioteca Design.md da CamaraUX](https://camaraux.com.br/design-md/) e escolha um template inspirado em marcas reais. > Quer entender como o `design.md` se encaixa no processo de UX mais amplo com IA? Leia o [guia completo de inteligência artificial para designers](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/inteligencia-artificial-para-designers.md). > > E se precisar de um arquivo pronto como ponto de partida, acesse a [Biblioteca de Templates Design.md](https://camaraux.com.br/design-md/) com mais de 25 marcas documentadas. Se quiser entender como isso se conecta com estratégia de produto, pesquisa e experiência, continue pelos conteúdos de [Fundamentos de UX Design](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/category/fundamentos-de-ux.md), [UX Research e métodos de pesquisa](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/category/ux-research-metodos.md) e [UX orientado a conversão](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/ux-conversao-design-resultados-negocio.md). ## Topics **Categorias:** [Design Systems](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/category/design-systems.md) **Tags:** [claude code](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/claude-code.md), [cursor](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/cursor.md), [Design System](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/design-system.md), [design.md](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/design-md.md), [google stitch](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/google-stitch.md), [IA](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/ia.md), [UX Design](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/ux-design.md), [Vibe Coding](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/vibe-coding.md)