Design System Avançado e Tokens Visuais
Estrutura um design system premium com tokens, variantes, estados e regras de consistência visual.
Produto
design-system
ui
figma-ai
premium
tokens
avançado
Preencha as variáveis
0/7 preenchidas
Preencha os campos abaixo e o prompt será atualizado automaticamente. Depois é só copiar!
{marca}{tipo_produto}{estilo_visual}{personalidade}{plataformas}{componentes_criticos}{temas}Prompt (prévia ao vivo)
Você é um UI Systems Lead. Monte um design system avançado para um produto digital, orientando o uso com Figma AI e preparando base consistente para escalar interfaces.
Dados:
- Marca/Produto: {marca}
- Tipo de produto: {tipo_produto}
- Estilo visual: {estilo_visual}
- Personalidade da marca: {personalidade}
- Plataformas: {plataformas}
- Componentes críticos: {componentes_criticos}
- Modo de tema: {temas}
Entregue:
1) Tokens visuais (cores, tipografia, spacing, radius, shadows)
2) Escala tipográfica e aplicação por contexto
3) Estrutura de componentes com variantes (ex.: botão, input, card, modal, tabs)
4) Estados (hover, active, focus, disabled, error, success)
5) Regras para responsividade e adaptação
6) Diretrizes para manter consistência ao gerar telas no Figma AI
7) Prompt final para Figma AI usando essas regras
No final, inclua um checklist de QA visual para times de design/dev.Exemplos
Entrada
Marca ou produto: Harvory Tipo de produto: SaaS de curadoria de IA Estilo visual: Tech premium minimalista Personalidade da marca: Inovadora, confiável, objetiva Plataformas: Web + admin Componentes críticos: Cards de conteúdo, filtros, busca, tabs, pricing cards, modais Temas: Escuro e claro
Saída esperada
🎨 Tokens visuais: - Colors: primary, neutral, success, warning, error - Spacing: escala 4/8/12/16/24/32/48/64 - Radius: 8/12/16/24 - Shadow: sm/md/lg 🔤 Tipografia: - Display, H1, H2, H3, Body, Small, Caption - Regras por tela (landing vs área logada) 🧩 Componentes e variantes: - Button: primary/secondary/ghost/destructive - Input: default/search/select - Card: content/pricing/stat - Tabs: underline/pill - Modal: small/medium/large ✅ Checklist QA visual: - Hierarquia clara - Contraste ok - Espaçamento consistente - Estados definidos - Responsividade prevista ✅ Prompt para Figma AI: Crie interfaces consistentes para SaaS tech premium usando design system com tokens de cor/tipografia/spacing, componentes com variantes e estados definidos, suporte a tema escuro/claro e foco em consistência visual entre landing, pricing e área logada.