Use with AI
Cole o DESIGN.md no contexto do agente de IA antes de gerar qualquer interface. Use o prompt base abaixo como template operacional para criar rascunhos alinhados ao Design System.
Copiar DESIGN.md completo
Inclua o arquivo inteiro no contexto do Claude, Cursor, v0 ou outra ferramenta de IA antes de criar ou revisar interfaces.
Prompt base
Template operacional — substitua os [placeholders] com as informações do seu projeto.
Use o DESIGN.md do Arquiteto de Bolso como fonte operacional escrita do Design System. Quero criar um rascunho/protótipo rápido para: [DESCREVA AQUI O QUE VOCÊ QUER CRIAR] Exemplo: uma landing page de vendas, uma seção de formulário, uma tela simples, um bloco de conteúdo, uma variação visual ou uma revisão de consistência. Contexto: [DESCREVA O CONTEXTO] Exemplo: marketing, landing page, interface de produto, formulário simples, revisão visual, componente isolado ou exploração inicial. Objetivo: [DESCREVA O OBJETIVO DA INTERFACE] Exemplo: explicar uma oferta, captar leads, organizar informações, orientar o usuário, revisar consistência visual ou testar uma composição. Conteúdo necessário: [LISTE OS ELEMENTOS QUE DEVEM APARECER] Exemplo: título, subtítulo, CTA principal, formulário, cards, aviso, lista de benefícios, texto de apoio. Antes de gerar a proposta, liste rapidamente: - quais regras do DESIGN.md serão aplicadas; - quais componentes oficiais serão usados; - se existe algum padrão, comportamento ou componente não documentado; - se a proposta pode ser tratada como protótipo rápido ou se precisa de validação da/do Product Designer; - se precisa de validação com usuários/testes de usabilidade. Depois, gere a proposta visual ou estrutural solicitada. Ao final, liste: - o que está aderente ao DESIGN.md; - o que precisa de revisão da/do Product Designer; - o que precisaria ser validado com usuários antes de ser considerado maduro.
O que a IA deve devolver
Ao usar este prompt, a resposta da IA não deve ser apenas uma tela bonita. Ela deve mostrar quais decisões estão alinhadas ao DESIGN.md, quais pontos precisam de revisão e o que ainda precisa ser validado antes de virar solução madura.
Regras aplicadas
Quais regras, tokens, tipografias e componentes oficiais do DESIGN.md foram considerados.
Componentes oficiais usados
Quais componentes documentados foram usados na proposta e por quê.
Needs Product Designer approval
Quais padrões, comportamentos, componentes ou decisões precisam de revisão da/do Product Designer.
Validação com usuários
Quais partes da proposta deveriam passar por testes de usabilidade ou validação com usuários antes de serem consideradas maduras.
Confirmação de rascunho
A IA deve deixar claro que a proposta é um rascunho/protótipo rápido, não uma solução final aprovada.
Importante
Se a IA não devolver riscos, dependências, itens pendentes ou pontos de validação, peça uma revisão antes de usar o resultado como referência.
Todo prompt deve reforçar
- ·Usar DESIGN.md como fonte operacional escrita
- ·Preferir tokens semânticos sobre primitivos
- ·Não criar componentes oficiais novos
- ·Marcar novos padrões como "Needs Product Designer approval"
- ·Priorizar clareza, consistência e responsividade
Nunca fazer
- ·Usar azul SaaS genérico como cor principal
- ·Criar componentes novos e tratar como oficiais
- ·Usar cores fora da paleta do DESIGN.md
- ·Misturar emphasis e intent em botões
- ·Usar cores semânticas apenas por estética