Design System Base para Figma AI
Define uma base de componentes e regras visuais para layouts consistentes.
Design
design-system
componentes
ui
figma-ai
intermediario
Preencha as variáveis
0/6 preenchidas
Preencha os campos abaixo e o prompt será atualizado automaticamente. Depois é só copiar!
{marca}{tipo_produto}{personalidade}{paleta}{estilo}{plataformas}Prompt (prévia ao vivo)
Você é um UI Systems Designer. Monte uma base de design system para orientar layouts no Figma AI.
Contexto:
- Marca/Produto: {marca}
- Tipo de produto: {tipo_produto}
- Personalidade da marca: {personalidade}
- Paleta base: {paleta}
- Estilo visual desejado: {estilo}
- Plataformas: {plataformas}
Entregue:
1) Regras de tipografia (hierarquia sugerida)
2) Regras de espaçamento e grid
3) Componentes base (botão, input, card, badge, modal, tabela, navbar)
4) Estados de componentes (hover, active, disabled, error)
5) Regras de consistência para Figma AI
6) Prompt final para gerar layouts mantendo consistência visual
Se possível, inclua uma versão compacta para UI clara e outra para UI mais premium/sofisticada.Exemplos
Entrada
Marca ou produto: Harvory Tipo de produto: Plataforma web de prompts e playbooks Personalidade da marca: Inovadora, confiável, objetiva Paleta de cores: Roxo escuro, preto, branco, cinza neutro Estilo visual: Tech premium minimalista Plataformas: Web e admin
Saída esperada
🎨 Tipografia sugerida: - H1: 40/48 semibold - H2: 28/36 semibold - H3: 20/28 medium - Body: 16/24 regular - Caption: 14/20 regular 📐 Grid e espaçamento: - Grid desktop: 12 colunas - Espaçamento base: 8pt system - Seções: 64-96px vertical 🧩 Componentes base: - Botão (primary, secondary, ghost) - Input + label + helper/error - Card de conteúdo - Badge/tag - Modal - Navbar / sidebar 🔁 Estados: - Hover com leve contraste - Disabled opaco e sem sombra - Error com borda + helper text ✅ Prompt para Figma AI: Crie layouts consistentes para plataforma web tech premium usando design system com grid 12 colunas, spacing 8pt, tipografia hierárquica clara, componentes padrão (botões, inputs, cards, badges, modais, navbar) e estados visuais definidos. Visual minimalista e sofisticado.