AvançadoFrontendAberto

Arquitetura de componentes React com design system escalavel

Define a estrutura de componentes, tokens de design e convenções para um design system em React/Next.js.

design systemReactcomponentesarquiteturaTailwind

Objetivo do Prompt

Criar uma arquitetura de componentes reutilizáveis e consistentes que acelere o desenvolvimento frontend e garanta uniformidade visual em toda a aplicação.

Exemplo Real de Uso

A fintech carioca PagaRapido tem 12 devs frontend trabalhando em 4 squads diferentes. Cada squad criou seus próprios botões, modais e formulários, resultando em 47 variações de componentes duplicados e inconsistência visual que confunde os usuários.

Prompt

Projete uma arquitetura de design system completa para [NOME DO PROJETO], uma aplicação [TIPO: SaaS/e-commerce/marketplace] construída com React e [NEXT.JS/VITE/REMIX].

**Contexto:**
- Time: [NÚMERO] desenvolvedores frontend em [NÚMERO] squads
- Componentes existentes: [NÚMERO] (muitos duplicados)
- Biblioteca de estilos atual: [TAILWIND/STYLED-COMPONENTS/CSS MODULES]

**1) Estrutura de Tokens de Design:**
- Paleta de cores (primary, secondary, neutral, semantic)
- Tipografia (font families, scale de 8 tamanhos, line-heights)
- Espaçamento (scale de 4px: 4, 8, 12, 16, 24, 32, 48, 64)
- Bordas, sombras, breakpoints
- Como implementar com CSS variables + Tailwind config

**2) Hierarquia de Componentes:**
- Atoms: Button, Input, Badge, Avatar, Icon (variantes e props)
- Molecules: FormField, SearchBar, Card, Toast, Dropdown
- Organisms: Header, Sidebar, DataTable, Modal, Form
- Templates: DashboardLayout, AuthLayout, LandingLayout
- Para cada nível: interface TypeScript, variantes, estados, acessibilidade

**3) Convenções de Código:**
- Estrutura de pastas (feature-based vs. atomic)
- Naming conventions para props, arquivos, exports
- Pattern para composição (compound components vs. render props)
- Storybook: como documentar cada componente

**4) Estratégia de Migração:**
- Inventário dos componentes atuais
- Priorização (quais migrar primeiro)
- Coexistência durante transição
- Métricas de adoção do design system

Inclua exemplos de código TypeScript para os 3 componentes mais críticos.

Como usar este prompt

1Cole o prompt diretamente no ChatGPT, Claude, Gemini ou qualquer assistente de IA.
2Personalize os campos entre colchetes [assim] com suas informações específicas.
3Para melhores resultados, forneça contexto adicional sobre seu caso de uso.
4Combine múltiplos prompts em uma conversa para resultados mais completos.
5Salve os prompts que mais usa para acesso rápido no futuro.