Assistente de Configuração do Design System

Quando Usar

Use esta habilidade quando precisar de um assistente interativo de configuração — ele guiará você passo a passo para configurar o design system do seu projeto.

Quando NÃO Usar

• Para projetos já configurados com StyleSeed → use /ss-update em vez disso
• Para apenas adicionar um componente a um projeto existente → use /ss-component
• Para alterar o skin da marca em um projeto já configurado — troque diretamente theme.css
• Para pilhas que não sejam React ou Tailwind-v4 — atualmente não suportado

Guie o usuário na configuração do StyleSeed para o seu projeto, passo a passo.

Instruções

Siga estes passos UM DE CADA VEZ. Após cada passo, espere a resposta do usuário antes de prosseguir. Mantenha um tom conversacional e amigável.

Passo 1: Tipo de App

Pergunte:

What type of app are you building?

1. SaaS Dashboard (analytics, metrics, charts)
2. E-commerce (products, orders, payments)
3. Fintech (transactions, portfolio, market data)
4. Social / Content (feeds, profiles, messaging)
5. Productivity / Internal tool
6. Other — describe it

Lembre-se da resposta — ela determina qual receita de composição de página usar (Seção 63 do DESIGN-LANGUAGE.md).

Passo 2: Cor da Marca

Pergunte:

What's your brand color?

1. Purple (#721FE5) — default style (toss skin)
2. Blue (#2563EB) — trust, corporate
3. Green (#059669) — growth, health, finance
4. Orange (#EA580C) — energy, creative
5. Red (#DC2626) — bold, urgent
6. Dark (#18181B) — minimal, premium
7. Custom — just type your hex code

Após a escolha, atualize css/theme.css:

• No bloco :root: mude --brand para o hex escolhido
• No bloco .dark: mude --brand para uma versão mais clara para fundos escuros

Mapeamento de cores para modo escuro:

Para hex customizado: clareie em ~30% (aumente a luminância em HSL).

Passo 3: Conceito de Design (de awesome-design-md)

Pergunte:

Want to apply an existing brand's visual style?

Popular options from awesome-design-md:
1. Stripe — clean, professional
2. Linear — minimal, dark-first
3. Vercel — black & white, geometric
4. Notion — warm, friendly
5. Spotify — bold, dark, green
6. Supabase — modern, green
7. Airbnb — warm, coral
8. No thanks — keep the default style
9. Other — name any brand or describe a vibe

Se escolherem uma marca (opções 1-7 ou 9):

1. Busque: https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/[brand]/DESIGN.md
   • Nomes das pastas de marca: stripe, linear.app, vercel, notion, spotify, supabase, airbnb
2. Leia o DESIGN.md e extraia: cor primária, cores secundárias, cores de texto, cores de fundo
3. Aplique as cores extraídas a css/theme.css (blocos :root e .dark)
4. Mantenha TODAS as regras de layout do StyleSeed, proporções de tipografia, espaçamento e padrões de componentes inalterados — apenas troque a paleta de cores

Se escolherem 8 (Não, obrigado): pule, mantenha a cor da marca atual do Passo 2.

Passo 4: Fonte

Pergunte:

What font do you prefer?

1. Inter (clean, universal — recommended)
2. Pretendard + Inter (Korean + English)
3. Geist (Vercel-style, modern)
4. DM Sans (friendly, rounded)
5. Custom — tell me the font name

Após a escolha:

• Atualize css/fonts.css: mude a URL do @import
• Atualize css/base.css: mude font-family na regra do body

Imports de fontes:

Passo 5: Nome do App e Primeira Página

Pergunte:

Last step! What's your app name and what should the main page show?

Example: "Acme — SaaS dashboard with revenue, users, and recent activity"

Em seguida:

1. Leia a Seção 63 do DESIGN-LANGUAGE.md para a receita correspondente (baseada no tipo de app do Passo 1)
2. Gere a primeira página usando a receita de composição de página:
   • SaaS → Hero + KPI Grid + Chart + Progress + Activity List
   • E-commerce → Hero + KPI Grid + Donut + Bar Chart + Orders List
   • Fintech → Hero + KPI Grid + Donut + Area Chart + Transactions
   • Social → Hero + Stats + Feed List + Trending Carousel
   • Productivity → Hero + KPI Grid + Progress + Task List

…