Guia Completo: Build de Projetos UI/UX com IA — Edição 2026

[ANEXAR IMAGEM DO DESIGN — sempre antes do texto]
 
<contexto>
Imagem 1: screenshot da interface a analisar.
</contexto>
 
<tarefa>
Você é um designer UI/UX sênior. Analise esta interface e forneça feedback detalhado sobre:
1. Hierarquia visual
2. Espaçamento e grid system
3. Tipografia e legibilidade
4. Paleta de cores e contraste (WCAG AA — extraia cores em OKLCH)
5. Componentes reutilizáveis identificados
6. Sugestões de melhorias
</tarefa>
 
<output_format>
Estruture como:
## Análise Geral
[Resumo executivo]
 
## Pontos Fortes
- [Lista]
 
## Oportunidades de Melhoria
- [Lista com justificativa]
 
## Especificações Técnicas Detectadas
- Fonts: [...]
- Colors (OKLCH): [...]
- Spacing: [...]
 
## Recomendações Prioritárias
1. [Ação imediata]
2. [Ação secundária]
3. [Consideração futura]
</output_format>

[ANEXAR WIREFRAME — antes do texto]
 
<contexto>
Wireframe de uma landing page para SaaS B2B.
Público: CTOs e engenheiros de empresas tech.
Brand: Moderna, confiável, enterprise-grade.
</contexto>
 
<tarefa>
A partir deste wireframe, crie especificações completas para implementação:
 
1. **Typography Scale**
   - Heading styles (H1-H6)
   - Body text variants
   - UI text (buttons, labels)
 
2. **Color System**
   - Primary/Secondary/Accent em OKLCH
   - Semantic colors (success, warning, error)
   - Neutral scale (8 tons)
 
3. **Spacing System**
   - Base unit (4px, 8px, etc)
   - Component spacing
   - Layout spacing
 
4. **Component Library**
   - Buttons (primary, secondary, ghost)
   - Input fields
   - Cards
   - Navigation
 
5. **Responsive Breakpoints**
   - Mobile: 320-767px
   - Tablet: 768-1023px
   - Desktop: 1024px+
</tarefa>
 
<output_format>
Forneça em DOIS formatos:
1. Design tokens no formato W3C DTCG (.tokens.json) — padrão estável desde out/2025
2. Bloco @theme do Tailwind v4 (CSS variables nativas, sem tailwind.config.js)
+ descrição textual detalhada.
</output_format>

[ANEXAR IMAGEM DO DESIGN ATUAL — antes do texto]
 
<contexto>
Imagem 1: hero section atual.
Métricas atuais:
- CTR no CTA: 2.3%
- Bounce rate: 58%
- Time on page: 45s
</contexto>
 
<tarefa>
Você é um product designer sênior especializado em testes A/B e otimização de conversão.
Crie 3 variações deste hero section focando em:
 
**Variação A - Bold & Minimalista**
- CTA mais proeminente
- Menos elementos visuais
- Foco no texto principal
 
**Variação B - Visual-First**
- Imagem/ilustração maior
- CTA integrado à imagem
- Texto secundário
 
**Variação C - Social Proof Heavy**
- Logos de clientes em destaque
- Testemunhos integrados
- Trust badges
 
Para cada variação, forneça:
1. Descrição visual detalhada
2. Hierarquia de informações
3. Hipótese de por que pode performar melhor
4. Métricas para medir sucesso
5. Prompt pronto pro Nano Banana Pro gerar o mockup da variação
</tarefa>
 
<constraints>
- Manter identidade visual da marca
- Mobile-first approach
- Acessibilidade WCAG AA
</constraints>

[ANEXAR IMAGEM 1: Stripe Dashboard]
[ANEXAR IMAGEM 2: Linear App]
[ANEXAR IMAGEM 3: Notion]
 
<tarefa>
Analise estas 3 interfaces de referência e extraia:
 
1. **Padrões Comuns**
   - Layouts utilizados
   - Navegação patterns
   - Micro-interações
 
2. **Design System Components**
   - Quais componentes são consistentes?
   - Variações de cada componente
 
3. **Information Architecture**
   - Como organizam informação complexa?
   - Hierarquia visual
 
4. **Especificações para Replicação**
   - Medidas aproximadas
   - Paleta de cores extraída (OKLCH)
   - Tipografia identificada
</tarefa>
 
<output_format>
Crie um documento de especificação técnica que um desenvolvedor possa implementar diretamente, incluindo:
- CSS Variables (via @theme do Tailwind v4)
- Component structure (shadcn/ui sobre Base UI)
- Responsive behavior
</output_format>

[ANEXAR SCREENSHOT DA INTERFACE — antes do texto]
 
<contexto>
Imagem 1: interface a implementar.
 
Stack 2026:
- React 19 (functional components + hooks; o React Compiler faz a memoização — NÃO use useMemo/useCallback manual)
- Next.js 15 App Router (RSC por padrão)
- TypeScript (strict mode)
- Tailwind CSS v4 (tokens via @theme, sem tailwind.config.js)
- Shadcn/ui sobre Base UI
</contexto>
 
<tarefa>
Converta este design em código funcional seguindo este processo:
 
**ETAPA 1 - ANÁLISE**
Antes de gerar código, descreva:
1. Componentes identificados na UI
2. O que pode ser Server Component vs Client Component
3. Estado necessário (useState, useReducer — apenas em Client Components)
4. Props de cada componente
5. Interações/eventos
 
**ETAPA 2 - ESTRUTURA**
Defina a arquitetura:
/components
  /ui (shadcn)
  /features
  /layouts
 
**ETAPA 3 - IMPLEMENTAÇÃO**
Gere o código completo com:
- TypeScript interfaces
- RSC onde possível, "use client" só onde necessário
- Tailwind classes apenas (sem CSS custom)
- Tokens semânticos do @theme, nunca valores hardcoded
- Acessibilidade (ARIA labels, foco visível, navegação por teclado)
 
**ETAPA 4 - RESPONSIVIDADE**
Breakpoints Tailwind:
- sm: 640px | md: 768px | lg: 1024px | xl: 1280px
Mobile-first.
</tarefa>
 
<constraints>
- ZERO CSS custom - apenas Tailwind utilities
- TypeScript strict
- Componentes reutilizáveis
- Performance: lazy loading para imagens (next/image)
</constraints>
 
<output_format>
Forneça:
1. Estrutura de arquivos
2. Código de cada componente
3. Uso exemplo (como importar e usar)
4. Instruções de instalação de dependências
</output_format>

[ANEXAR MÚLTIPLAS TELAS DO DESIGN SYSTEM — antes do texto]
 
<contexto>
Preciso implementar este design system completo em:
- React 19 + TypeScript
- Storybook para documentação
- Tailwind CSS v4 (tokens em @theme)
- Testes com Testing Library
</contexto>
 
<tarefa>
Crie a estrutura completa do design system incluindo:
 
**1. Design Tokens (3 camadas)**
- Camada base (primitivos: cores OKLCH, escala de spacing)
- Camada semântica (--color-primary, --surface-elevated...)
- Camada de componente (--button-bg, --card-radius...)
Tudo em @theme (CSS variables nativas) + export no formato W3C DTCG (.tokens.json)
 
**2. Componentes Base (ordem de prioridade)**
- Button (primary, secondary, ghost, danger)
- Input (text, email, password, search)
- Select / Dropdown
- Checkbox / Radio / Switch
- Modal / Dialog
- Sonner (toast — o antigo toast do shadcn foi depreciado)
- Card
- Badge / Chip
 
**3. Para CADA Componente, forneça:**
// Component.tsx - Implementação (shadcn sobre Base UI)
// Component.stories.tsx - Storybook
// Component.test.tsx - Testes
// Component.types.ts - TypeScript types
 
**4. Composite Patterns**
Como componentes se combinam (ex: Modal + Form + Button)
 
**5. Documentação**
README com: instalação, uso básico, Props API, customização, acessibilidade
</tarefa>
 
<output_format>
Gere um sistema modular onde eu possa:
1. Instalar componentes individuais (CLI do shadcn)
2. Customizar via props e via tokens
3. Dark mode e theming multi-tenant sem rebuild (trocando CSS variables)
4. Tree-shaking automático
</output_format>

[ANEXAR MOCKUPS DO PROJETO — antes do texto]
 
<contexto>
Projeto: Dashboard Analytics SaaS
Features necessárias:
- Autenticação (mock por enquanto)
- Dashboard com gráficos (Recharts)
- Tabela de dados com filtros
- Sidebar navigation
- Dark mode toggle
- Responsive
</contexto>
 
<tarefa>
Crie um protótipo funcional completo:
 
**ARQUITETURA**
/app
  /layout.tsx
  /page.tsx
  /dashboard
    /page.tsx
    /components
      /charts
      /tables
      /stats
  /login
    /page.tsx
 
/components
  /ui (shadcn)
  /layout
    /Sidebar.tsx
    /Header.tsx
 
/lib
  /data.ts (mock data)
  /utils.ts
  /hooks
    /useAuth.ts
    /useTheme.ts
 
/types
  /index.ts
 
**FEATURES IMPLEMENTADAS**
1. Autenticação mock
2. Dark mode persistente (via CSS variables do @theme)
3. Gráficos interativos (Recharts)
4. Tabela com: sorting, filtering, pagination, search
5. Sidebar colapsável
6. Responsive completo
 
**STACK**
- Next.js 15 App Router
- React 19
- TypeScript
- Tailwind CSS v4
- Shadcn/ui (Base UI)
- Recharts
- Tanstack Table
- Zustand (state global apenas onde RSC não resolve)
</tarefa>
 
<output_format>
Forneça:
1. Código completo de todos os arquivos
2. package.json com todas dependências
3. Comandos para rodar
4. Mock data estruturado
5. TODO list com próximos passos
</output_format>

FASE 1: ANÁLISE DO DESIGN
Modelo: Gemini 3.1 Pro (multimodal)
<contexto>[ANEXAR DESIGNS — antes do texto]</contexto>
<tarefa>
Analise estes designs e extraia:
1. Componentes únicos identificados
2. Padrões repetidos
3. Estados dos componentes (hover, active, disabled)
4. Especificações técnicas (tokens em OKLCH)
</tarefa>
 
---
 
FASE 2: ESTRUTURAÇÃO
Modelo: Claude Opus 4.8, effort: high
<contexto>Componentes identificados: [COPIAR OUTPUT DA FASE 1]</contexto>
<tarefa>
Crie a arquitetura de pastas e defina:
1. Estrutura de componentes (Server vs Client Components)
2. Hierarquia de imports
3. Shared vs. Feature components
4. TypeScript interfaces
</tarefa>
 
---
 
FASE 3: IMPLEMENTAÇÃO INCREMENTAL
Modelo: Claude Sonnet 5, effort: xhigh
Prompt para cada componente:
<tarefa>
Implemente o componente [NOME] com:
- Props interface
- Variantes (se houver)
- Estados interativos
- Acessibilidade
- Testes básicos
</tarefa>
 
---
 
FASE 4: INTEGRAÇÃO
<tarefa>
Integre todos os componentes em uma página funcional:
1. Layout principal
2. State management (mínimo necessário — RSC primeiro)
3. Interações entre componentes
4. Validações
</tarefa>
 
---
 
FASE 5: REFINAMENTO
<tarefa>
Otimize o código:
1. Performance (lazy loading, code splitting — SEM memoization manual, o React Compiler cuida disso)
2. Acessibilidade (ARIA, keyboard nav)
3. SEO (se aplicável)
4. Revisão de segurança (XSS, sanitização de inputs)
</tarefa>

PASSO 1: AUDITORIA
<contexto>[ANEXAR SCREENSHOTS DA APP ATUAL — antes do texto]</contexto>
<tarefa>
Faça uma auditoria completa:
1. Problemas de UX identificados
2. Inconsistências visuais
3. Oportunidades de melhoria
4. Análise de acessibilidade
5. Performance issues visuais
</tarefa>
 
---
 
PASSO 2: PROPOSTA DE REDESIGN
<contexto>
Problemas identificados: [OUTPUT PASSO 1]
Referências de design: [ANEXAR 3-5 REFERÊNCIAS]
</contexto>
<tarefa>
Proponha um redesign abordando:
1. Nova hierarquia visual
2. Simplificação da navegação
3. Novo design system (tokens em 3 camadas)
4. Componentes modernizados
5. Dark mode native (via CSS variables)
+ Para cada tela principal, gere um prompt pro Nano Banana Pro
  visualizar o redesign antes de codar.
</tarefa>
 
---
 
PASSO 3: IMPLEMENTAÇÃO POR PRIORIDADE
<tarefa>
Divida o redesign em 3 fases:
 
**FASE 1 (Quick Wins) - 1 semana**
- Migrar tokens pra @theme (Tailwind v4)
- Atualizar cores/tipografia
- Botões e inputs
 
**FASE 2 (Core Features) - 2 semanas**
- Redesenhar componentes principais
- Nova navegação
- Dashboard
 
**FASE 3 (Polish) - 1 semana**
- Animações e micro-interações
- Dark mode
- Responsividade final
</tarefa>

<contexto>
Produto: [NOME DO PRODUTO]
Proposta de valor: [DESCREVER EM 1 FRASE]
Target: [PERSONA]
Referências visuais: [ANEXAR 2-3 SCREENSHOTS — antes do texto]
</contexto>
 
<tarefa>
Crie uma landing page moderna com:
 
**ESTRUTURA**
1. Hero Section
   - Headline impactante
   - Subheadline
   - CTA primary + secondary
   - Hero image/illustration
 
2. Social Proof
   - Logos de clientes
   - Estatísticas chave
 
3. Features (3-4 principais)
   - Icon + Title + Description
   - Screenshot/mockup
 
4. How It Works (3 passos)
 
5. Pricing (3 tiers)
 
6. Testimonials (slider)
 
7. FAQ (accordion)
 
8. Final CTA
 
**TECH STACK**
- Next.js 15 + React 19
- TypeScript
- Tailwind CSS v4
- Motion (ex-Framer Motion) para animações
- Shadcn/ui (Base UI)
 
**REQUIREMENTS**
- Lighthouse score 95+
- Mobile-first
- Animações suaves ao scroll
- Dark mode
- SEO optimized (metadata API do Next 15)
</tarefa>
 
<output_format>
Forneça código completo + instruções de deploy (Vercel)
</output_format>

<contexto>
Dashboard para: [TIPO DE USUÁRIO]
Dados principais: [LISTAR MÉTRICAS]
Referência visual: [ANEXAR DESIGN OU REFERÊNCIAS — antes do texto]
</contexto>
 
<tarefa>
Crie um dashboard completo com:
 
**LAYOUT**
- Sidebar collapsible
- Top navbar (user menu, notifications)
- Main content area
- Breadcrumbs
 
**COMPONENTES PRINCIPAIS**
1. Stats Cards (4x)
   - Valor principal
   - Trend (up/down)
   - Sparkline
 
2. Charts
   - Line chart (receita ao longo do tempo)
   - Bar chart (comparativo)
   - Pie chart (distribuição)
 
3. Data Table
   - Sorting, filtering, pagination, search
   - Export CSV
 
4. Activity Feed
   - Timeline de eventos
 
**FEATURES**
- Filtros globais (date range)
- Dark mode (CSS variables)
- Responsive (tablet sidebar overlay)
- Loading states / Empty states / Error handling
 
**TECH**
- Next.js 15 + React 19
- TypeScript
- Tailwind v4
- Shadcn/ui (Base UI)
- Recharts
- Tanstack Table
- Zustand (só pro que RSC não resolve)
</tarefa>

<contexto>
Empresa: [NOME/SETOR]
Produtos: [WEB/MOBILE/AMBOS]
Inspirações: [ANEXAR PRINTS DE DESIGN SYSTEMS QUE GOSTA — antes do texto]
</contexto>
 
<tarefa>
Crie um design system completo partindo do zero:
 
**1. FOUNDATION (Design Tokens em 3 camadas)**
 
Camada Base (primitivos):
- Primary (5 shades em OKLCH: 100, 300, 500, 700, 900)
- Secondary, Accent
- Neutral (10 shades)
- Semantic (success, warning, error, info)
- Typography: font families, type scale (14-48px), line heights, weights
- Spacing: base 4px, escala 4, 8, 12, 16, 24, 32, 48, 64, 96
- Shadows: sm, md, lg, xl
- Border Radius: sm, md, lg, full
 
Camada Semântica:
- --color-surface, --color-surface-elevated, --color-text-primary...
 
Camada de Componente:
- --button-bg, --input-border, --card-radius...
 
**2. COMPONENTES (Atomic Design)**
 
Atoms: Button (8 variants), Input (5 types), Label, Badge, Avatar, Icon, Spinner
Molecules: InputGroup, Select, Checkbox Group, Radio Group, Search Bar
Organisms: Card, Modal, Dropdown Menu, Navigation Bar, Sidebar, Table
 
**3. IMPLEMENTAÇÃO**
 
Gere código para:
- @theme completo (Tailwind v4, CSS variables nativas)
- Export W3C DTCG (.tokens.json) pra multi-plataforma via Style Dictionary
- React components com variants (CVA)
- Storybook stories
- TypeScript types
- Preset do shadcn (design system inteiro distribuível via CLI)
 
**4. GUIDELINES**
 
Documente:
- Quando usar cada componente
- Combinações recomendadas
- Do's and Don'ts
- Acessibilidade
- Responsividade
</tarefa>

[ANEXAR SCREENSHOT DE REFERÊNCIA: Apple/Nike product page — antes do texto]
 
<contexto>
Produto: Tênis esportivo premium
Requisitos:
- Gallery de imagens (zoom, thumbnails)
- Seletor de tamanho e cor
- Add to cart com animação
- Descrição detalhada (tabs)
- Reviews com rating
- Related products
- Sticky buy box em mobile
</contexto>
 
<tarefa>
Implemente uma product page otimizada para conversão:
 
**PRIORIDADES**
1. Performance (LCP < 2.5s — use RSC e next/image)
2. Mobile-first
3. Acessibilidade (keyboard navigation)
4. SEO (structured data)
 
**COMPONENTES ESPECIAIS**
- Image Gallery (Embla Carousel)
- Size guide modal
- Share button
- Wishlist toggle
- Quantity selector
- Stock indicator
 
**INTERAÇÕES**
- Adicionar ao carrinho → feedback via sonner
- Trocar variante → atualizar URL (searchParams)
- Zoom de imagem → modal overlay
- Review form → validação inline (Zod)
</tarefa>
 
<output>
Código Next.js 15 completo + instruções de integração com Shopify/WooCommerce
</output>

[ANEXAR WIREFRAMES DO FLUXO — antes do texto]
 
<contexto>
Onboarding em 4 etapas:
1. Criar conta (email/senha)
2. Personalização (objetivo, role)
3. Convidar time (opcional)
4. Setup inicial (integrations)
 
Referências: Linear, Notion, Stripe onboarding
</contexto>
 
<tarefa>
Crie um onboarding delightful:
 
**FEATURES**
- Progress indicator (steps)
- Auto-save (draft state)
- Skip para completar depois
- Animações entre steps
- Validação inline
- Success confetti (final)
 
**UX CONSIDERATIONS**
- Cada step em 1 tela
- Maximum 3 inputs por step
- Botão "Back" sempre visível
- Tempo estimado por step
- Exit warning (se inacabado)
 
**TECH**
- React Hook Form
- Zod validation
- Motion (animações)
- canvas-confetti
- Draft state em memória/servidor
</tarefa>

[ANEXAR ARQUIVO FIGMA EXPORTADO COMO IMAGENS — antes do texto]
(Melhor ainda: conecte via Figma MCP e passe o link do arquivo)
 
<contexto>
Design completo de 15 telas de um app mobile
Preciso fazer handoff para os devs
</contexto>
 
<tarefa>
Crie um pacote de handoff completo:
 
**DOCUMENTAÇÃO**
1. Design System Spec
   - Todos os tokens extraídos (formato DTCG)
   - Componentes documentados
   - Grids e spacing
 
2. Screens Specification
   Para cada tela:
   - Annotations de interações
   - Estados (loading, error, empty)
   - Responsive behavior
   - Animations descritas
 
3. Component Library
   - Props de cada componente
   - Variants e estados
   - Exemplos de uso
 
4. Developer Guide
   - Stack recomendado
   - Estrutura de pastas
   - Ordem de implementação
   - Complexidade estimada por tela
 
5. Assets Package
   - Icons em SVG
   - Images otimizadas
   - Fonts incluídas
 
**OUTPUT FORMAT**
- Markdown document
- Storybook com specs
- Figma dev mode annotations + Code Connect mapeado
</tarefa>

<examples>
Imagem 1 - Bom exemplo: [ANEXAR]
Gosto de: [aspectos específicos]
 
Imagem 2 - Outro bom exemplo: [ANEXAR]
Gosto de: [aspectos específicos]
 
Imagem 3 - Evitar: [ANEXAR]
Não gosto de: [aspectos específicos]
</examples>