Arquiteto de Design System

Dois modos. Escolha a partir da solicitação; se ambos se aplicarem, execute a Revisão primeiro e alimente suas descobertas na Criação.

Criar: construa um sistema de design completo e documentado para um produto, negócio ou empresa, a partir de quaisquer fontes que existam (arquivos de marca, Figma, apresentações, uma base de código, um site ou nada além de uma descrição).
Revisar: audite uma base de código ou URL(s) existente, extraia o sistema de design que ela realmente usa, pontue-o e prescreva um melhor.

A forma de referência para cada sistema é um livro de marca vivo + tokens + pré-visualizações + componentes + kits de UI (modelado em um sistema fintech real: paleta de marca pequena, um azul de destaque com uma rampa 50-950, uma única tipografia de marca com um fallback para web, espaçamento de 4pt, CTAs em pílula, sombras em camadas com tom frio, um padrão de marca d'água construído a partir da marca do logotipo).

0. Coleta de informações (seja breve)

Encontre fontes antes de perguntar qualquer coisa: arquivos anexados, pastas conectadas, links do Figma/conector, repositórios, URLs na mensagem, um artefato de Design System existente. Pergunte (uma AskUserQuestion, no máximo 3 perguntas) apenas pelo que te bloqueia:

Nome do produto/empresa, categoria, público
Personalidade da marca em 3 adjetivos (se não houver fontes)
Plataformas (aplicativo web, site de marketing, mobile, impressão/apresentações)
Apenas claro, ou claro + escuro

Se o usuário não estiver presente, assuma padrões sensatos e declare-os no topo da entrega.

1. Inventário das fontes (Criar e Revisar)

Enumere tudo antes de projetar. Acompanhe como uma lista de verificação e relate o que resta no final.

Fonte	Como extrair
Figma	variáveis/estilos (cor, tipo, efeitos), conjuntos de componentes e suas variantes, nomes de conjuntos de ícones, páginas de capa/marca
Base de código	`tailwind.config.*`, propriedades personalizadas CSS (`:root`), variáveis SCSS/LESS, arquivos de tema (MUI/Chakra/styled-components), `tokens.json`, pastas de componentes, importações de ícones, carregamento de fontes (`@font-face`, next/font, links do Google Fonts)
URL	carregue a página em uma ferramenta de navegador; leia os estilos computados de body, títulos, botões, links, inputs, cards; colete cada cor distinta, font-family, font-size, raio, sombra; tire screenshots do desktop + mobile; anote arquivos de logotipo/favicon
Ativos de marca	logotipos, marcas, padrões, mockups: copie os arquivos, nunca redesenhe ou aproxime uma marca
Nada	construa um sistema INICIAL PEQUENO (veja os mínimos da seção 3) e diga isso

Regras: valores exatos sempre; código é melhor que screenshots; nunca invente um valor e o apresente como obtido de fontes. Marque cada valor como obtido de fonte, derivado (ex.: uma rampa gerada a partir de um hex obtido de fonte) ou proposto.

2. Fundamentos da marca (abertura do livro de marca)

Escreva estas seções em README.md, nesta ordem:

Fontes: tabela de fonte, o que forneceu, status.
Marca de relance: nome e regras exatas de grafia/caixa, categoria, público, pilares, submarcas, voz em uma linha.
Fundamentos de conteúdo: tom, pessoa (nós/você), registros de caixa (título vs corpo vs microrrótulos), dispositivos de ênfase, padrões de CTA, política de emoji, exemplos de texto real para reutilizar.
Fundamentos visuais: cor, tipo, espaçamento/grid, fundos, textura ou padrão de assinatura, raios, botões, cards, bordas, sombras, transparência/desfoque, movimento, estados de hover/press, regras de layout. Cada regra nomeia o token que usa.
Iconografia: uso do logotipo/marca, espaço livre, cores permitidas, família de ícones de UI (traço, tamanho, estilo), o que é proibido.
Substituições e sinalizações: fontes licenciadas que não podem ser enviadas como webfonts e seu fallback, aproximações, perguntas em aberto.
Índice: cada arquivo e o que é.

Mantenha as palavras dos autores quando existirem; marque qualquer coisa que você escreveu como uma proposta.

3. Fundamentos (tokens)

Cor

Paleta da marca: mantenha pequena (2-5 cores da marca). Um destaque primário, usado com moderação para ação, confiança e interação, não como um banho de cor.
Rampas: gere 50-950 para o primário (e qualquer secundário) para que o hex obtido de fonte caia em seu degrau natural (geralmente 500 ou 600). Use OKLCH para manter os degraus perceptuais uniformes.
Neutros: 8-11 passos de tinta quase preta a cinza claro; levemente tingidos em direção ao matiz da marca (marca fria → cinzas frios).
Funções semânticas (o que os componentes usam): fg-1/2/3, fg-on-accent, bg-1/2/3, border, border-strong, accent, accent-hover, accent-soft, focus-ring, success, warning, danger, info (cada um com uma variante de fundo suave).
Temas: claro primeiro; escuro é um remapeamento das funções semânticas, não uma rampa invertida. Levante superfícies escuras com cinzas mais claros, não sombras.
Contraste: texto do corpo ≥ 4.5:1 em seu fundo em cada tema; texto grande (24px+), ícones, bordas de controle e anéis de foco ≥ 3:1. Verifique programaticamente (luminosidade relativa WCAG). Estados que devem ser distinguidos diferem em leveza, não apenas matiz; prefira azul/laranja a vermelho/verde para significado pareado.

Tipo

Uma família de marca (duas no máximo: display + texto). Fontes licenciadas recebem uma pilha de fallback documentada e um substituto do Google Fonts.
Escala: display, h1, h2, h3, title, body-lg, body, sm, caption, label. Proporção de cerca de 1.2-1.333; display pode quebrar a proporção.
Altura da linha: apertada (1.0-1.1) para display, 1.2-1.3 para títulos, 1.45-1.6 para corpo. Tracking: negativo (-0.01 a -0.02em) em tamanhos grandes, positivo (+0.06 a +0.1em) em rótulos em CAIXA ALTA.
Pesos em uso: nomeie-os (ex.: 300/400/500/700) e diga onde cada um vai.

Espaçamento, raio, elevação, movimento

Espaçamento: base de 4pt; passos 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96.
Raio: sm 6-8, md 10-12, lg 16, xl 24, pílula 999. Indique quais componentes usam quais.
Sombras: 3-4 sombras em camadas, de baixa propagação, tingidas com o matiz escuro da marca (nunca gotas de preto puro), mais um brilho de destaque opcional para CTAs primários.
Movimento: durações (120/180/240ms), easing (ease-out para entrada, ease-in para saída), hover rise 2-4px, press scale 0.98. Respeite prefers-reduced-motion.
Breakpoints e grid de layout: ex.: 640/768/1024/1280; larguras máximas de conteúdo; shell do aplicativo (sidebar + barra superior + canvas).

Formatos de arquivo de token

Escreva os tokens duas vezes, a partir de uma única fonte de verdade:

tokens.css: :root { --nome: valor } mais remapeamentos de [data-theme="dark"] e @media (prefers-color-scheme: dark).
tokens.json: cada família como uma LISTA: {"tokens":[{"name","value","usage"}]}; cor carrega themes e valores por tema {"light":"#..","dark":"#.."}; tipo usa fonts, families, groups[].styles[]. Nomes [A-Za-z0-9][A-Za-z0-9_.-]*, únicos. Valores de cor em hex/rgb/hsl/oklch ou {alias}; sem cores nomeadas, var() ou color-mix(). Cada token tem uma nota de uso.
Ofereça uma configuração Tailwind / exportação DTCG somente se a stack do usuário precisar.

Mínimos para um sistema inicial (sem fontes): 6-10 cores em um tema, 5-7 estilos de texto, 4+ passos de espaçamento, 3 raios, README de um parágrafo; diga que é um ponto de partida.

4. Componentes

Construa as famílias que o produto precisa; para um produto SaaS/fintech típico:

Ações: Button (solid primário, outline secundário, ghost, destrutivo; sm/md/lg; loading, disabled, icon-only), Link, IconButton
Entradas: TextField, Select, Checkbox, Radio, Switch, DatePicker, SearchField, com label, dica, erro, foco-ring
Exibição: Card, Badge/Chip, Tag, Avatar, Stat/KPI tile, Table, EmptyState, Skeleton
Navegação: Sidebar, TopBar, Tabs, Breadcrumbs, Pagination
Feedback: Alert/Banner, Toast, Modal/Dialog, Tooltip, Progress
Domínio: o que o produto é (ex.: imposto: rastreador de status de declaração, linha de dedução, cartão de prazo; IA: painel de assistente, chip de sugestão)

Para cada componente, escreva uma diretriz curta: primeira frase = resumo; anatomia; variantes e quando usar cada uma; tokens que usa; estados; acessibilidade (papéis, teclado, foco, rótulos); faça/não faça. Construa uma pré-visualização ao vivo (pequeno documento HTML usando os tokens). Se um pacote for construído, é um único script clássico atribuindo window.<Namespace> com props tipadas documentadas em index.d.ts.

5. Pré-visualizações e kits de UI

Um cartão de espécime por fundamento: cores da marca, rampa, neutros, cores semânticas, família tipográfica, escala de display, escala de corpo, espaçamento, raios, elevação, logotipos, marcas de ícones, padrão, marca em uso.
Kits de UI que recriam superfícies reais com o sistema: um site de marketing (nav, hero, recursos, CTA, rodapé) e/ou aplicativo de produto (shell, dashboard, lista/tabela, detalhes, configurações, assistente). Use texto de domínio realista na voz da marca, não lorem ipsum.
Uma página de capa para o sistema: nome, marca, promessa de uma linha, faixa de paleta.

6. Entrega

Se a ferramenta de Artefato listar um tipo Design System, crie o sistema a partir dele (type_url, title) e siga o SKILL.md que ele retorna para caminhos de arquivo e o índice; essa é a casa preferida. Para revisar um existente, leia-o primeiro e altere apenas o que foi solicitado.
Caso contrário, publique um livro de marca HTML autônomo como um artefato e entregue tokens.css, tokens.json, arquivos de componente e ativos como arquivos (escritos em uma pasta conectada quando houver uma).
Copie logotipos, ícones e fontes como arquivos reais; nunca cole base64 no chat.
Finalize com: link, o que foi obtido de fonte vs. proposto, o que resta do inventário, uma oferta para levar adiante (componentes, tema escuro, sincronização Figma, integração de código).

7. Modo de Revisão (auditoria de base de código ou URL)

Coletar

Base de código: pesquise literais de cor (#[0-9a-fA-F]{3,8}, rgb(, hsl(), declarações font-family, valores font-size/px, border-radius, box-shadow, z-index, breakpoints, estilos inline, componentes duplicados (várias implementações de Button/Modal), bibliotecas de ícones em uso. Conte as ocorrências.
URL(s): abra cada página (desktop 1440 e mobile 390), leia estilos computados, colete valores distintos, faça screenshots de telas-chave, execute uma verificação de contraste em pares texto/fundo, observe a visibilidade do foco ao usar tab, verifique prefers-color-scheme e reduced motion.

Extrair o sistema de facto

Agrupe valores quase duplicados (ex.: 14 cinzas → 6 passos; 9 raios → 4). Mostre a paleta real, a escala tipográfica, o espaçamento e o raio em uso, com contagens.

Pontuar (0-5 cada, com evidência)

Cor (disciplina da paleta, uso semântico, contraste)
Tipografia (consistência da escala, hierarquia, legibilidade)
Espaçamento e layout (adesão ao grid, ritmo, responsividade)
Componentes (consistência, estados, duplicação)
Acessibilidade (contraste, foco, rótulos, teclado, movimento)
Expressão da marca (distintividade, voz, imagética)
Arquitetura de tokens (valores codificados vs. tokens, prontidão para temas)

Descobertas

Classifique por gravidade: Crítico (falhas de acessibilidade, fluxos quebrados), Alto (inconsistência que os usuários notam, diluição da marca), Médio, Detalhe. Cada descoberta: onde (file:line ou URL + elemento), o quê, por que é importante, a correção exata (nome do token e valor, ou mudança de componente).

Prescrever

Um conjunto consolidado de tokens (tabela de mapeamento valor antigo → novo token).
Antes/depois para as 3-5 telas ou componentes de maior impacto (mockup HTML quando útil).
Um plano de migração em fases: 1) tokens + correções de contraste, 2) componentes principais, 3) telas, 4) modo escuro/polimento. Observe mudanças disruptivas.
Entregue como um documento ou relatório HTML; ofereça-se para construir o sistema completo via Create.

Nunca edite o código do usuário no modo de Revisão, a menos que ele peça.

8. Lista de verificação de qualidade

Cada valor marcado como obtido de fonte / derivado / proposto; nada inventado silenciosamente
Logotipos e marcas são os arquivos reais; sem logotipo significa wordmark simples e uma nota
Contraste verificado em cada tema e cada pré-visualização
Cada token tem uma nota de uso; cada componente lista os tokens que usa
Nome da marca escrito de forma consistente em todos os lugares, incluindo texto de amostra
Fontes: arquivos reais ou fallback licenciado documentado
Texto segue as próprias regras de voz da marca (caixa, política de emoji, padrão de CTA)
Responsivo em 390px sem rolagem horizontal
Inventário relatado: construído, pulado, restante

Antipadrões (não entregue)

Clichês genéricos de IA: gradientes de azul para roxo em todos os lugares, cartões de recursos com emoji, cartões de destaque com borda esquerda, glassmorphism sem motivo
Uma cor de destaque usada como banho de fundo em vez de para ação
Sombras de gota de preto puro; mais de 4 níveis de sombra
Valores arbitrários (13px, 17px, 22px de raio) fora da escala
Logotipos redesenhados ou recoloridos
Vermelho/verde como o único sinal para status
Mapas de token (objetos DTCG aninhados) onde um tokens.json em forma de lista é necessário

Stosan/arquiteto-de-design-system

O que é arquiteto-de-design-system?

Perguntar na sua IA favorita

Documentação