Brainstorming de Projetos Web

Visão Geral

Esta habilidade oferece um framework estruturado, de nível de masterclass, para brainstorming de projetos web, aplicações web ou designs de páginas individuais em sua concepção. Ela guia desenvolvedores e designers através do escopo do conceito principal do produto, mapeamento de fluxos de usuários, definição de estéticas de estilo visual, seleção da pilha técnica e planejamento para otimização para mecanismos de busca (SEO) e desempenho.

Quando Usar Esta Habilidade

• Use no início de qualquer novo projeto de desenvolvimento web ou redesign de página.
• Use ao definir conjuntos de funcionalidades, papéis de usuário e padrões de interação para aplicações web.
• Use ao estabelecer sistemas de design, tokens de cores e diretrizes de layout.
• Use ao avaliar pilhas tecnológicas (por exemplo, Next.js vs. Vanilla JS, CSS Grid vs. Tailwind).

Como Funciona

Execute o brainstorming de projetos web sequencialmente em seis fases estruturadas. Faça perguntas ao usuário uma fase de cada vez para manter o foco e garantir um alinhamento completo.

Fase 1: Conceito Principal e Escopo

Defina a proposta de valor primária e o escopo do produto:

• Público-Alvo: Quem está usando o site ou aplicação?
• Valor Principal: Que problema ele resolve para os usuários?
• Funcionalidades Principais: Quais são as 3 a 5 funcionalidades obrigatórias?

Fase 2: Experiência do Usuário (UX) e Arquitetura da Informação

Mapeie como os usuários navegam e interagem:

• Hierarquia de Páginas: Qual é o sitemap e a estrutura das páginas?
• Jornadas do Usuário: Quais fluxos passo a passo os usuários seguem para completar objetivos chave?
• Layout Responsivo: A interface é mobile-first, desktop-first ou equilibrada?

Fase 3: Estilo Visual e Sistema de Design

Estabeleça as diretrizes visuais e os parâmetros estéticos:

• Estética do Design: Moderno, minimalista, brutalista, glassmorphism ou luxuoso?
• Paleta de Cores: Quais são as cores primárias, secundárias e de destaque? (Prefira modelos HSL/RGB adaptáveis em vez de palavras-chave de cores estáticas).
• Tipografia: Quais fontes do Google ou fontes do sistema se encaixam no tema? (por exemplo, Inter, Outfit, Syne).
• Estados Interativos: Como se comportam os estados de hover, clique, transição e carregamento?

Fase 4: Pilha Técnica e Arquitetura

Selecione as tecnologias e sistemas de integração:

• Framework Frontend: React, Next.js, Vite, Astro, Svelte ou Vanilla HTML/JS?
• Método de Estilização: Vanilla CSS, Tailwind CSS ou CSS Modules?
• Dados e Backend: REST API, GraphQL, tRPC, Firebase, Supabase ou SQLite?
• Gerenciamento de Estado: Zustand, Context API, Redux ou estado local do React?

Fase 5: SEO, Acessibilidade (A11y) e Desempenho

Planeje a descoberta e tempos de carregamento rápidos:

• Elementos de SEO: Estrutura da tag de título, meta descrições e hierarquia de tags HTML semânticas.
• Acessibilidade: Rótulos ARIA, tags semânticas, navegação por teclado e contraste de cores.
• Desempenho: Pré-carregamento de assets, carregamento preguiçoso de imagens, renderização do lado do servidor (SSR) e entrega via CDN.

Fase 6: Escopo do MVP e Fases do Projeto

Divida o trabalho em incrementos gerenciáveis:

• Fase 1 (MVP): O produto mínimo viável absoluto necessário para implantação.
• Fase 2 (Melhorias): Funcionalidades "nice-to-have", microanimações e integrações avançadas.

Exemplos

Modelo de Prompt de Questionário Interativo

Use este layout de prompt ao iniciar uma sessão de brainstorming com um cliente ou membro da equipe:

👋 Let's brainstorm your new web project! We will walk through 6 quick phases.

---
### Phase 1: Core Concept & Scoping
1. What is the main title or working name of this project?
2. Who are the primary target users (e.g., tech-savvy professionals, shoppers, children)?
3. What are the 3 core tasks a user must be able to perform?
---

Modelo de Documento de Saída de Brainstorming

Após a conclusão de todas as fases, gere um blueprint de markdown para o projeto usando este modelo:

# Blueprint do Projeto: [Nome do Projeto]

## 1. Conceito do Produto
- **Proposta de Valor**: [Resumo]
- **Funcionalidades Principais**:
  1. [Funcionalidade 1]
  2. [Funcionalidade 2]

## 2. Arquitetura da Informação e UX
- **Páginas**: `/index.html`, `/dashboard.html`
- **Fluxo Primário do Usuário**: Usuário se cadastra -> completa o onboarding -> visualiza o painel.

## 3. Estilização e Estética
- **Estética**: Dark Mode Glassmorphism Elegante
- **Tokens de Cores**:
  - Fundo: `hsl(222, 47%, 11%)`
  - Destaque/Primária: `hsl(217, 91%, 60%)`
- **Tipografia**: Inter (Corpo), Outfit (Títulos)

## 4. Arquitetura Técnica
- **Framework**: Next.js (App Router)
- **Estilização**: Tailwind CSS
- **Banco de Dados**: PostgreSQL com Prisma ORM

## 5. SEO e Desempenho

…