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