isumenuka/gerador-de-prompt-para-site

Gerador de Prompt de Site

Esta habilidade converte a ideia de um usuário — ou um conjunto de imagens de referência carregadas — em um prompt de construção abrangente e detalhado que pode ser alimentado em um assistente de codificação de IA (Cursor, Lovable, Bolt, v0, etc.) para construir o site.

---

⚡ Seleção de Modo: Leia Primeiro

Antes de fazer qualquer coisa, decida qual modo se aplica:

Situação	Modo
O usuário descreve uma ideia apenas em palavras	[Modo Texto] — gerar a partir da descrição
O usuário carrega 1+ imagens / capturas de tela / mockups	[Modo Blueprint de Imagem] — analisar imagens primeiro, depois gerar
O usuário carrega imagens E fornece descrição	[Modo Blueprint de Imagem] — imagens têm prioridade; usar descrição como contexto

Se imagens estiverem presentes, mas você não puder visualizá-las, peça ao usuário para recarregá-las ou colá-las antes de prosseguir. Não construa um blueprint a partir da imaginação quando as imagens foram fornecidas.

---

💬 Passo 0A: Questionário Pré-Geração (Sessões Interativas Apenas)

Em conversas ativas (sessões interativas), antes de executar o script UI/UX ou gerar o prompt/blueprint de construção, você DEVE apresentar um breve questionário de múltipla escolha amigável para esclarecer os requisitos do projeto. Isso ajuda a adaptar o sistema de design e a pilha tecnológica às necessidades exatas do usuário.

Peça ao usuário para responder às seguintes perguntas (por exemplo, respondendo com "1A, 2B, 3C, 4A, 5F, 6C"):

1. Que tipo de site você está construindo?

   • Opção A: Portfólio / Site Pessoal (mostrando projetos, currículo, habilidades e contato)
   • Opção B: Landing Page de SaaS / Produto (marketing de um produto de software, recursos, preços, depoimentos)
   • Opção C: Site Corporativo / Agência (serviços empresariais, equipe, logotipos de clientes, contato)
   • Opção D: E-commerce / Loja Online (listagens de produtos, carrinho de compras, experiência de checkout)
   • Opção E: Vitrine Criativa / Imersiva (altamente visual, elementos 3D, animações interativas ou exibições 3D)
   • Opção F: Outro (Por favor, especifique)

2. Qual é a sua pilha tecnológica alvo?

   • Opção A: HTML + CSS (Vanilla com Tailwind CSS, página única leve)
   • Opção B: React + Vite + Tailwind CSS + Framer Motion (SPA dinâmica moderna)
   • Opção C: Next.js (App Router) + Tailwind CSS + shadcn/ui (Template full-stack pronto)
   • Opção D: SvelteKit ou Vue / Nuxt + Tailwind CSS
   • Opção E: Outro (Por favor, especifique, ex.: Astro, framework mobile)

3. Qual é a preferência de layout e estrutura primária?

   • Opção A: Landing page de rolagem única (melhor para conversões rápidas/produtos simples)
   • Opção B: Site de múltiplas páginas (Home, Sobre, Serviços, Contato, Blog, etc.)
   • Opção C: Dashboard / Interface de Aplicativo Web (gráficos interativos, tabelas, navegação lateral, perfis)
   • Opção D: Centro de Documentação / Recursos (barra de pesquisa, menu lateral aninhado, grade de artigos, layout de docs)
   • Opção E: "Em Construção" minimalista / Link-in-bio (hero de tela única com CTA/links rápidos)

4. Qual estilo tipográfico se adapta melhor à marca?

   • Opção A: Sans-Serif Moderna (Inter, Roboto, Outfit - limpa, neutra, padrão tech/SaaS)
   • Opção B: Serif Elegante (Instrument Serif, Playfair Display - editorial, luxo, moda, boutique)
   • Opção C: Mono Técnica (JetBrains Mono, Fira Code - ferramentas de desenvolvedor, Web3, portais de banco de dados)
   • Opção D: Geométrica e Amigável (Lexend, Montserrat, Poppins - marketing, SaaS, startups, educação)
   • Opção E: Display / Estilizada (Syne, Clash Display - agência criativa, design de alto nível, artística, cabeçalhos ousados)

5. Há integrações de terceiros necessárias no blueprint?

   • Opção A: Captura de Leads Simples (Formulários de contato por e-mail, integrações de inscrição em newsletter via Resend/Mailchimp)
   • Opção B: E-commerce e Pagamentos (Checkout Stripe, pagamentos de produtos, redirecionamentos de nível de preço)
   • Opção C: Autenticação e Banco de Dados (Login Clerk / Supabase, perfis de usuário, armazenamento backend)
   • Opção D: CMS Headless (Sanity, Strapi, Contentful para postagens de blog/artigos/itens de portfólio)
   • Opção E: Dados / Análise Interativa (Gráficos Recharts/Chart.js, rastreamento Google Analytics)
   • Opção F: Nenhum / Apenas construção estática (componentes/layouts frontend puros)

6. Qual comportamento de tema/modo você deseja implementar?

   • Opção A: Apenas Modo Escuro forçado (elegante, focado em desenvolvedores, jogos, entretenimento, criativo)
   • Opção B: Apenas Modo Claro forçado (limpo, médico, corporativo, alta acessibilidade WCAG)
   • Opção C: Alternância de Modo Dinâmica (o usuário pode alternar entre Modo Claro e Escuro usando um botão/interruptor)
   • Opção D: Alternância Automática do Padrão do Sistema (adapta-se automaticamente com base na preferência de esquema de cores do SO do usuário)

---

🎨 Passo 0B: Recuperação e Aplicação de Inteligência de Design UI/UX (OBRIGATÓRIO)

Antes de escrever qualquer prompt de construção ou blueprint, execute o script de pesquisa incluído nesta habilidade para recuperar recomendações de layout, tipografia e cores. Confiar neste banco de dados curado garante que o sistema de design gerado seja testado pela indústria, compatível com acessibilidade e perfeitamente adequado ao domínio de negócios do produto, em vez de depender de escolhas de cores adivinhadas ou genéricas.

1. Extrair Atributos Chave

Da descrição do usuário ou imagens de referência, identifique:

• Tipo de Produto / Indústria: (ex.: SaaS, fintech, beleza/spa, educação, portfólio, médico, e-commerce)
• Palavras-chave Visuais / Vibração: (ex.: minimalista, glassmorphism, modo escuro, brutalismo, soft UI, luxo)
• Pilha Alvo: (ex.: html-tailwind (padrão), react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose, astro, nuxt-ui, nuxtjs)

2. Executar Comandos CLI do UI/UX Pro Max

Execute os seguintes comandos de terminal no workspace usando a ferramenta run_command para buscar parâmetros do sistema de design e diretrizes de pilha:

• Gerar Sistema de Design Completo:

  py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<tipo_produto> <industria> <palavras_chave_visuais>" --design-system -p "Nome do Projeto"
  

  Dica: Se for um aplicativo web de várias páginas ou exigir persistência, acrescente --persist para salvar o sistema de design globalmente em design-system/MASTER.md (Fonte Única da Verdade Global) e substituições específicas de página em design-system/pages/[slug-da-pagina].md. No prompt de construção gerado, instrua explicitamente a ferramenta de desenvolvedor a verificar e seguir esses arquivos markdown.

• Buscar Diretrizes de Pilha (execute se uma pilha tecnológica específica for solicitada ou escolhida):

  py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<palavras-chave de layout/componente/responsivo>" --stack <nome_da_pilha>
  

• Buscar Diretrizes de Domínio (se precisar de diretrizes específicas sobre ux, acessibilidade, animação, landing ou chart):

  py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<palavras-chave do tópico>" --domain <nome_do_dominio>
  

3. Analisar e Mesclar Resultados

Analise a saída do console desses scripts e aplique-os da seguinte forma:

• Paleta: Mapeie as cores exatas HEX/HSL primária, secundária, de fundo, de texto e CTA da saída do script diretamente para o template de variável CSS.
• Tipografia: Aplique os pares de Google Fonts recomendados (incluindo pesos específicos e links de importação CSS) para as fontes de cabeçalho e corpo.
• Efeitos Chave: Implemente efeitos específicos retornados pelo banco de dados (ex.: "vidro fosco", "sombras de profundidade sutis", "anéis de foco claros de 3px").
• Restrições / Antipadrões: Extraia os avisos "EVITAR" (ex.: "sem cores neon", "sem fluxos de reserva confusos", "sem transformações de escala que causem deslocamento de layout") e liste-os em uma seção Restrições.

4. Aplicar Diretrizes de Qualidade Visual

Seu prompt/blueprint de saída deve instruir explicitamente a ferramenta de desenvolvedor a aderir a estas regras principais da lista de verificação ui-ux-pro-max, que são críticas para alcançar um design visual premium:

• Ícones e Elementos Visuais: Use Lucide, Heroicons ou SVGs oficiais de marca do Simple Icons. Emojis não devem ser usados como ícones de UI, pois parecem não polidos e não profissionais em um design premium.
• Transições e Hover: Padronize as velocidades de transição entre 150ms e 300ms (ex.: transition-colors duration-200). Transições fora desse intervalo parecem lentas ou muito bruscas. Garanta que cada elemento hoverable ou clicável tenha cursor-pointer para sinalizar interatividade ao usuário. Efeitos de hover devem evitar transformações de escala que desloquem outros elementos no layout.
• Contraste Claro/Escuro: Garanta uma taxa de contraste mínima de 4,5:1 para texto corporal normal para garantir legibilidade. Para elementos de vidro no modo claro, use uma camada de alta opacidade (bg-white/80 ou superior) e uma borda cinza claro visível (border-gray-200) para evitar que o cartão se perca contra um fundo claro.
• Layout e Espaçamento: Navbars flutuantes devem ter margens de deslocamento (como top-4 left-4 right-4) para evitar que pareçam apertadas contra as bordas da janela. Evite sobreposição de elementos, a menos que intencionalmente empilhados com valores de z-index explícitos. Mantenha uma largura de contêiner consistente (ex.: max-w-6xl ou max-w-7xl).
• Acessibilidade: Garanta que os anéis de foco do teclado estejam visíveis para ajudar na navegação apenas pelo teclado. Todos os campos de formulário devem ter rótulos descritivos, todas as imagens devem ter texto alternativo e as transições devem respeitar as configurações de prefers-reduced-motion do usuário.
• Sem Wireframes Sci-Fi / Cyberpunk HUD: Não use gráficos decorativos de nós/constelações, linhas de conexão de wireframe poligonal tracejada ou diagramas futuristas estilo HUD. Esses elementos parecem não polidos e datados. Use hierarquias tipográficas limpas, gráficos estruturados, mockups reais de UI ou superfícies premium com gradiente/shimmer.
• Responsividade a Dispositivos: Cada layout, seção e componente DEVE ser totalmente responsivo e otimizado para parecer excepcional em todas as telas (mobile, tablet, desktop). O layout deve ser construído mobile-first, usando unidades relativas/fluidas (como clamp(), vw, %, dvh) em vez de larguras fixas em pixels, utilizando CSS Grid e Flexbox para dimensionamento adaptável e implementando consultas de contêiner (@container) para responsividade no nível do componente. Garanta que não haja transbordamento horizontal, os tamanhos de fonte dimensionem gradualmente e os alvos de toque tenham no mínimo 44x44px em dispositivos móveis.

5. Seleção e Pré-visualização Interativa (Sessões Interativas Apenas)

Em conversas ativas, apresente um breve resumo dos tokens de design (cores primárias/secundárias/CTA recuperadas, par tipográfico, padrão de layout e uma lista de verificação) ao usuário para aprovação ou ajustes antes de gerar o prompt/blueprint final completo. Isso garante alinhamento com o usuário.

---

📝 Modo Texto

Use quando nenhuma imagem for carregada.

Abordagem

Atue como um designer técnico de UI/UX e arquiteto frontend especialista. O prompt resultante não deve deixar nada para a imaginação — especifique a pilha tecnológica exata, cores, tipografia, layout, animações e estrutura de conteúdo. Incorpore todas as descobertas do Passo 0B: Recuperação de Inteligência de Design UI/UX.

PASSO CRÍTICO: Esta habilidade vem com uma biblioteca universal de prompts de componentes em references/core/animated-web-prompts.md. Antes de gerar, use grep_search ou view_file para encontrar 1–3 entradas que correspondam ao estilo ou domínio solicitado pelo usuário. Analise elas — estude sua estrutura, nível de especificidade técnica, a convenção de colchetes/placeholders e as técnicas de animação — então gere um prompt completamente novo com seus próprios componentes e animações. NÃO copie uma amostra literalmente ou devolva o texto da biblioteca como saída: as amostras definem o nível de qualidade e demonstram o formato, não são a entrega. Não pule esta etapa! Além disso, se Anime.js for solicitado ou for ideal para os requisitos de animação (como morphing/desenho SVG, grids de stagger complexos ou timelines personalizadas), carregue references/animations/animejs/animejs-api-reference.md e references/animations/animejs/animejs-examples.md para garantir sintaxe correta, imports tree-shakeable e estruturas de componentes React limpas (usando createScope para limpeza do ciclo de vida do componente). Da mesma forma, se GSAP ScrollTrigger for solicitado ou for ideal para ações avançadas orientadas por scroll (como pinning, timelines de scroll complexas, scroll scrubbing ou batching de callbacks), carregue references/animations/gsap/gsap-scrolltrigger-reference.md para garantir o registro correto do plugin e a limpeza adequada usando hooks @gsap/react / useGSAP().

Formato de Saída (Modo Texto)

Envolva toda a sua saída em um único bloco ```markdown para facilitar a cópia e colagem:

Prompt de Construção: [Título Atraente do Site]
Construa um [tipo de site] com [principais recursos visuais].

## Referência do Sistema de Design Global
- Nota: Se persistido, a ferramenta de desenvolvedor deve inspecionar `design-system/MASTER.md` e as substituições de página em `design-system/pages/` como a fonte única da verdade para tokens de design.

## Justificativa de Design UI/UX e Acessibilidade
- Explique a lógica cognitiva por trás da paleta de cores selecionada (ex.: "Azul escuro comunica segurança fintech; contraste WCAG é 5.2:1").
- Detalhe por que o par tipográfico se adequa ao domínio do produto (ex.: "Instrument Serif adiciona sensação editorial de luxo, equilibrado pelo texto corporal limpo Barlow").
- Explique o ritmo de espaçamento e a escolha de transições interativas (ex.: "200ms ease-out em cartões para manter as respostas rápidas, mas suaves").

## Pilha Tecnológica
- React + Vite + TypeScript
- Tailwind CSS
- Framer Motion / Motion, Anime.js (v4), GSAP + ScrollTrigger, Spline 3D / React Three Fiber / 3D WebGL e React Spring. Nota: O prompt gerado deve incluir todas essas tecnologias de animação e 3D, com pelo menos 2 ou mais componentes, seções ou sequências de animação para cada tecnologia.
- Lucide React

## Fontes
- Especifique as Google Fonts exatas (ex.: Instrument Serif + Barlow:300;400;500;600). Inclua o uso de pesos.

## Sistema de Cores / Tema
- Defina variáveis CSS ou tokens Tailwind com valores HEX/HSL precisos para bg, fg, accent, muted.

...

[truncado para tradução]

---

🖼️ Modo Blueprint de Imagem

Use quando 1+ imagens forem carregadas.

Abordagem

1. Analisar Imagens: Use analyze_image, read_image ou multimodalidade para extrair detalhes técnicos de cada imagem de referência (layout, tipografia, paleta de cores, padrões de componentes, direção de arte, hierarquia visual).
2. Executar Recuperação de Design UI/UX: Execute os scripts CLI do Passo 0B para aumentar sua análise com recomendações do banco de dados.
3. Gerar Blueprint Técnico: Produza uma especificação detalhada de frontend.

Formato de Saída (Modo Blueprint de Imagem)

Blueprint de Construção: [Título do Projeto]

## Análise de Imagens de Referência
- Imagem 1 ([nome do arquivo]): Padrão de layout=[tipo], Paleta dominante=[cores], Tipografia=[fontes], Componentes chave=[lista].
- Imagem 2 ([nome do arquivo]): ...

## Sistema de Design Extraído
- Paleta: ...
- Tipografia: ...
- Layout: ...
- Efeitos: ...

## Especificações Técnicas
- Pilha: ...
- Árvore de Componentes: ...
- Roteiro de Animação: ...
- Estrutura de Conteúdo: ...

## Instruções de Construção
[instruções detalhadas passo a passo para a ferramenta de IA]

---

🎨 Modo Blueprint de Imagem com Descrição

Use quando imagens E descrição textual forem fornecidas.

Abordagem

As imagens têm prioridade. Use a descrição textual como contexto adicional para refinar sua análise e saída.

---

Integração com Estrutura de Projeto UI/UX Pro Max

Se a ferramenta --persist foi usada e o arquivo design-system/MASTER.md existe, seu prompt DEVE incluir:

Antes de construir, carregue design-system/MASTER.md e quaisquer substituições de página em design-system/pages/[page-name].md. Estes arquivos são a fonte única da verdade para tokens de design (cores, tipografia, espaçamento). Aplique esses tokens por meio de variáveis CSS ou configuração do Tailwind.