A Pen by Adriel Santos on CodePen.
Created
February 26, 2026 01:05
-
-
Save adrielcruz9966-a11y/cba581c92799c8d3858d33583e84a7ed to your computer and use it in GitHub Desktop.
Untitled
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>🎯 Central de Prompts | Projeto X</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%); | |
| min-height: 100vh; | |
| padding: 30px 20px; | |
| position: relative; | |
| } | |
| /* Efeito de partículas no fundo */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.05) 0%, transparent 40%), | |
| radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 40%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* Header */ | |
| .header { | |
| text-align: center; | |
| margin-bottom: 50px; | |
| position: relative; | |
| } | |
| .header h1 { | |
| font-size: 4em; | |
| font-weight: 800; | |
| background: linear-gradient(135deg, #60a5fa, #c084fc, #f472b6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| text-shadow: 0 0 30px rgba(96, 165, 250, 0.3); | |
| letter-spacing: -1px; | |
| margin-bottom: 15px; | |
| } | |
| .header p { | |
| color: #94a3b8; | |
| font-size: 1.3em; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| background: rgba(255,255,255,0.03); | |
| padding: 15px 30px; | |
| border-radius: 60px; | |
| border: 1px solid rgba(255,255,255,0.05); | |
| backdrop-filter: blur(10px); | |
| display: inline-block; | |
| } | |
| .badge-container { | |
| display: flex; | |
| justify-content: center; | |
| gap: 15px; | |
| margin-top: 25px; | |
| flex-wrap: wrap; | |
| } | |
| .badge { | |
| background: rgba(255,255,255,0.03); | |
| border: 1px solid rgba(255,255,255,0.08); | |
| backdrop-filter: blur(10px); | |
| padding: 8px 20px; | |
| border-radius: 40px; | |
| color: #cbd5e1; | |
| font-size: 0.95em; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .badge span { | |
| color: #60a5fa; | |
| font-weight: 600; | |
| } | |
| /* Grid de Cards */ | |
| .prompts-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 30px; | |
| margin: 40px 0; | |
| } | |
| /* Cards */ | |
| .prompt-card { | |
| background: rgba(17, 25, 40, 0.75); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 40px; | |
| padding: 30px; | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| } | |
| .prompt-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, #60a5fa, #c084fc, #f472b6); | |
| transform: translateX(-100%); | |
| transition: transform 0.6s ease; | |
| } | |
| .prompt-card:hover::before { | |
| transform: translateX(0); | |
| } | |
| .prompt-card:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| border-color: rgba(96, 165, 250, 0.3); | |
| box-shadow: 0 40px 60px -15px rgba(0, 0, 0, 0.6); | |
| } | |
| /* Cabeçalho do Card */ | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| margin-bottom: 25px; | |
| } | |
| .card-icon { | |
| width: 70px; | |
| height: 70px; | |
| background: linear-gradient(145deg, rgba(96, 165, 250, 0.1), rgba(192, 132, 252, 0.1)); | |
| border-radius: 25px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2.5em; | |
| border: 1px solid rgba(255,255,255,0.1); | |
| transition: all 0.3s; | |
| } | |
| .prompt-card:hover .card-icon { | |
| transform: scale(1.1) rotate(5deg); | |
| background: linear-gradient(145deg, rgba(96, 165, 250, 0.2), rgba(192, 132, 252, 0.2)); | |
| border-color: rgba(96, 165, 250, 0.3); | |
| } | |
| .card-titles { | |
| flex: 1; | |
| } | |
| .card-number { | |
| font-size: 0.9em; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| color: #60a5fa; | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| } | |
| .card-title { | |
| font-size: 2em; | |
| font-weight: 700; | |
| color: white; | |
| line-height: 1.2; | |
| } | |
| .card-role { | |
| color: #94a3b8; | |
| font-size: 0.95em; | |
| margin-top: 5px; | |
| } | |
| /* Área do Prompt */ | |
| .prompt-container { | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 24px; | |
| padding: 20px; | |
| margin: 20px 0; | |
| border: 1px solid rgba(255,255,255,0.05); | |
| max-height: 200px; | |
| overflow-y: auto; | |
| position: relative; | |
| } | |
| .prompt-container::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .prompt-container::-webkit-scrollbar-track { | |
| background: rgba(255,255,255,0.05); | |
| border-radius: 10px; | |
| } | |
| .prompt-container::-webkit-scrollbar-thumb { | |
| background: rgba(96, 165, 250, 0.5); | |
| border-radius: 10px; | |
| } | |
| .prompt-text { | |
| color: #cbd5e1; | |
| font-size: 0.95em; | |
| line-height: 1.6; | |
| font-family: 'Monaco', 'Menlo', monospace; | |
| white-space: pre-wrap; | |
| } | |
| /* Tags de características */ | |
| .features { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin: 20px 0; | |
| } | |
| .feature-tag { | |
| background: rgba(96, 165, 250, 0.1); | |
| border: 1px solid rgba(96, 165, 250, 0.2); | |
| padding: 5px 12px; | |
| border-radius: 30px; | |
| font-size: 0.8em; | |
| color: #60a5fa; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| /* Botão de cópia */ | |
| .copy-section { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .copy-btn { | |
| flex: 1; | |
| background: linear-gradient(145deg, rgba(96, 165, 250, 0.1), rgba(139, 92, 246, 0.1)); | |
| border: 1px solid rgba(96, 165, 250, 0.3); | |
| color: white; | |
| padding: 15px 25px; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| font-size: 1.1em; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .copy-btn:hover { | |
| background: linear-gradient(145deg, rgba(96, 165, 250, 0.2), rgba(139, 92, 246, 0.2)); | |
| border-color: #60a5fa; | |
| transform: scale(1.02); | |
| box-shadow: 0 10px 25px -10px #60a5fa; | |
| } | |
| .copy-btn.copied { | |
| background: linear-gradient(145deg, #10b981, #059669); | |
| border-color: #34d399; | |
| } | |
| .copy-btn i { | |
| font-size: 1.2em; | |
| } | |
| .shortcut-hint { | |
| font-size: 0.8em; | |
| color: #64748b; | |
| margin-top: 8px; | |
| text-align: center; | |
| } | |
| /* Notificação de cópia */ | |
| .copy-notification { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| background: #10b981; | |
| color: white; | |
| padding: 15px 30px; | |
| border-radius: 60px; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| box-shadow: 0 20px 40px -10px #10b981; | |
| transform: translateX(200%); | |
| transition: transform 0.3s ease; | |
| z-index: 1000; | |
| border: 1px solid rgba(255,255,255,0.2); | |
| backdrop-filter: blur(10px); | |
| } | |
| .copy-notification.show { | |
| transform: translateX(0); | |
| } | |
| /* Cards colors individuais */ | |
| .card-1 .card-number { color: #60a5fa; } | |
| .card-2 .card-number { color: #c084fc; } | |
| .card-3 .card-number { color: #f472b6; } | |
| .card-4 .card-number { color: #34d399; } | |
| /* Rodapé */ | |
| .footer { | |
| text-align: center; | |
| margin-top: 60px; | |
| color: #64748b; | |
| font-size: 0.9em; | |
| border-top: 1px solid rgba(255,255,255,0.05); | |
| padding-top: 30px; | |
| } | |
| .footer strong { | |
| color: #60a5fa; | |
| font-weight: 600; | |
| } | |
| /* Responsividade */ | |
| @media (max-width: 900px) { | |
| .prompts-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .header h1 { | |
| font-size: 2.8em; | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .card-header { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .card-titles { | |
| text-align: center; | |
| } | |
| .copy-section { | |
| flex-direction: column; | |
| } | |
| .copy-notification { | |
| left: 20px; | |
| right: 20px; | |
| bottom: 20px; | |
| text-align: center; | |
| } | |
| } | |
| /* Animações */ | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header --> | |
| <div class="header"> | |
| <h1>🎯 Central de Prompts</h1> | |
| <p>Copie os prompts especializados com um clique e cole no ChatGPT</p> | |
| <div class="badge-container"> | |
| <div class="badge"> | |
| <span>📋</span> 4 Prompts prontos | |
| </div> | |
| <div class="badge"> | |
| <span>⚡</span> Clique para copiar | |
| </div> | |
| <div class="badge"> | |
| <span>🚀</span> Zero configuração | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Grid de Prompts --> | |
| <div class="prompts-grid"> | |
| <!-- Card 1 - Cérebro --> | |
| <div class="prompt-card card-1" id="card-1"> | |
| <div class="card-header"> | |
| <div class="card-icon">🧠</div> | |
| <div class="card-titles"> | |
| <div class="card-number">CHAT 01 • CÉREBRO</div> | |
| <div class="card-title">Estrategista-Chefe</div> | |
| <div class="card-role">Parceiro de Brainstorming</div> | |
| </div> | |
| </div> | |
| <div class="features"> | |
| <span class="feature-tag"><span>🤔</span> Pensamento divergente</span> | |
| <span class="feature-tag"><span>🎯</span> Pensamento convergente</span> | |
| <span class="feature-tag"><span>⚠️</span> Mapa de riscos</span> | |
| <span class="feature-tag"><span>🔄</span> Analogias</span> | |
| </div> | |
| <div class="prompt-container" id="prompt-1-container"> | |
| <div class="prompt-text" id="prompt-1-text">Atue como um Estrategista-Chefe de Projetos e meu Parceiro de Brainstorming. Sua missão é me ajudar a refinar e expandir ideias de forma criativa, mas organizada. | |
| REGRAS: | |
| 1. Pensamento Divergente: Faça perguntas poderosas como "Qual a real dor?", "Com orçamento infinito?", "Quem são os envolvidos?" | |
| 2. Pensamento Convergente: Sintetize com "Os 3 pilares são...", "O principal desafio..." | |
| 3. Mapa de Riscos: Aponte riscos potenciais e mitigações | |
| 4. Use metáforas e analogias | |
| Tarefa Inicial: Estou começando o projeto "[NOME DO PROJETO]". Objetivo: [DESCREVA]. Qual a primeira pergunta?</div> | |
| </div> | |
| <div class="copy-section"> | |
| <button class="copy-btn" onclick="copyPrompt(1)"> | |
| <i>📋</i> Copiar Prompt Completo | |
| </button> | |
| </div> | |
| <div class="shortcut-hint">Clique para copiar • 850 caracteres</div> | |
| </div> | |
| <!-- Card 2 - Estrutura --> | |
| <div class="prompt-card card-2" id="card-2"> | |
| <div class="card-header"> | |
| <div class="card-icon">🏗️</div> | |
| <div class="card-titles"> | |
| <div class="card-number">CHAT 02 • ESTRUTURA</div> | |
| <div class="card-title">Gerente de Projetos</div> | |
| <div class="card-role">Arquiteto de Soluções</div> | |
| </div> | |
| </div> | |
| <div class="features"> | |
| <span class="feature-tag"><span>📋</span> ETAPA A, B, C</span> | |
| <span class="feature-tag"><span>⚙️</span> Passos detalhados</span> | |
| <span class="feature-tag"><span>🔧</span> Tarefas</span> | |
| <span class="feature-tag"><span>🚧</span> Gargalos</span> | |
| </div> | |
| <div class="prompt-container" id="prompt-2-container"> | |
| <div class="prompt-text" id="prompt-2-text">Atue como Gerente de Projetos Sênior. Transforme ideias em plano de ação detalhado. | |
| FORMATO OBRIGATÓRIO (use exemplo real): | |
| ETAPA A: [Nome] | |
| *Pré-requisitos:* | |
| Passo 1: [Ação] | |
| - [ ] Tarefa: [Detalhe] | |
| *Exemplo: [concreto]* | |
| *Ferramenta: [nome]* | |
| Passo 2: [Ação] | |
| - [ ] Tarefas... | |
| *Possíveis Gargalos:* [lista com mitigações] | |
| Tarefa: Estruturar "[NOME DO PROJETO]" seguindo este formato. Comece com ETAPA A.</div> | |
| </div> | |
| <div class="copy-section"> | |
| <button class="copy-btn" onclick="copyPrompt(2)"> | |
| <i>📋</i> Copiar Prompt Completo | |
| </button> | |
| </div> | |
| <div class="shortcut-hint">Inclui exemplo prático • 920 caracteres</div> | |
| </div> | |
| <!-- Card 3 - Visual --> | |
| <div class="prompt-card card-3" id="card-3"> | |
| <div class="card-header"> | |
| <div class="card-icon">🎨</div> | |
| <div class="card-titles"> | |
| <div class="card-number">CHAT 03 • VISUAL</div> | |
| <div class="card-title">Designer de Informação</div> | |
| <div class="card-role">Artefatos Visuais</div> | |
| </div> | |
| </div> | |
| <div class="features"> | |
| <span class="feature-tag"><span>📊</span> Mermaid.js</span> | |
| <span class="feature-tag"><span>🖼️</span> Wireframes ASCII</span> | |
| <span class="feature-tag"><span>🌈</span> Paleta de cores</span> | |
| <span class="feature-tag"><span>🗺️</span> Mapas mentais</span> | |
| </div> | |
| <div class="prompt-container" id="prompt-3-container"> | |
| <div class="prompt-text" id="prompt-3-text">Atue como Designer de Informação. Crie representações visuais da estrutura do projeto. | |
| CAPACIDADES: | |
| 1. Diagramas Mermaid.js (fluxogramas, Gantt, mapas mentais) | |
| 2. Wireframes em ASCII (esboços de interface) | |
| 3. Paletas de cores e estilo | |
| 4. Mapas de jornada | |
| EXEMPLOS PRÁTICOS inclusos no prompt completo. | |
| Regra: Peça confirmação antes de criar visuais. | |
| Tarefa Inicial: Crie Mapa Mental em Mermaid.js do projeto "[NOME]" com as grandes etapas.</div> | |
| </div> | |
| <div class="copy-section"> | |
| <button class="copy-btn" onclick="copyPrompt(3)"> | |
| <i>📋</i> Copiar Prompt Completo | |
| </button> | |
| </div> | |
| <div class="shortcut-hint">Códigos Mermaid prontos • 1100 caracteres</div> | |
| </div> | |
| <!-- Card 4 - Progresso --> | |
| <div class="prompt-card card-4" id="card-4"> | |
| <div class="card-header"> | |
| <div class="card-icon">📊</div> | |
| <div class="card-titles"> | |
| <div class="card-number">CHAT 04 • PROGRESSO</div> | |
| <div class="card-title">Dev Front-end</div> | |
| <div class="card-role">Mapa Interativo</div> | |
| </div> | |
| </div> | |
| <div class="features"> | |
| <span class="feature-tag"><span>✅</span> Checkboxes</span> | |
| <span class="feature-tag"><span>📈</span> Barra de progresso</span> | |
| <span class="feature-tag"><span>💾</span> localStorage</span> | |
| <span class="feature-tag"><span>📱</span> Responsivo</span> | |
| </div> | |
| <div class="prompt-container" id="prompt-4-container"> | |
| <div class="prompt-text" id="prompt-4-text">Atue como Desenvolvedor Front-end Sênior. Crie mapa de progresso interativo. | |
| ESPECIFICAÇÕES: | |
| - Estrutura em árvore (Etapas > Passos > Tarefas) | |
| - Checkboxes em cada tarefa | |
| - Barra de progresso global (% concluído) | |
| - Tarefas concluídas: riscadas + opacas | |
| - localStorage para salvar progresso | |
| - Responsivo | |
| - Tema claro/escuro (opcional) | |
| EXEMPLOS de HTML/CSS/JS inclusos. | |
| Tarefa: Baseado na estrutura do Chat 2, gere código completo.</div> | |
| </div> | |
| <div class="copy-section"> | |
| <button class="copy-btn" onclick="copyPrompt(4)"> | |
| <i>📋</i> Copiar Prompt Completo | |
| </button> | |
| </div> | |
| <div class="shortcut-hint">Código HTML/CSS/JS • 1250 caracteres</div> | |
| </div> | |
| </div> | |
| <!-- Instruções Rápidas --> | |
| <div style="background: rgba(255,255,255,0.02); border-radius: 30px; padding: 30px; margin-top: 40px; border: 1px solid rgba(255,255,255,0.05);"> | |
| <h3 style="color: white; font-size: 1.8em; margin-bottom: 20px; display: flex; align-items: center; gap: 10px;"> | |
| <span>🚀</span> Como usar: | |
| </h3> | |
| <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;"> | |
| <div style="display: flex; gap: 15px; align-items: center;"> | |
| <div style="background: #60a5fa20; width: 40px; height: 40px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: #60a5fa; font-weight: bold;">1</div> | |
| <div style="color: #94a3b8;">Clique em "Copiar" no card desejado</div> | |
| </div> | |
| <div style="display: flex; gap: 15px; align-items: center;"> | |
| <div style="background: #c084fc20; width: 40px; height: 40px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: #c084fc; font-weight: bold;">2</div> | |
| <div style="color: #94a3b8;">Cole no ChatGPT correspondente</div> | |
| </div> | |
| <div style="display: flex; gap: 15px; align-items: center;"> | |
| <div style="background: #f472b620; width: 40px; height: 40px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: #f472b6; font-weight: bold;">3</div> | |
| <div style="color: #94a3b8;">Substitua [NOME DO PROJETO]</div> | |
| </div> | |
| <div style="display: flex; gap: 15px; align-items: center;"> | |
| <div style="background: #34d39920; width: 40px; height: 40px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: #34d399; font-weight: bold;">4</div> | |
| <div style="color: #94a3b8;">Pronto! IA especialista ativada</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="footer"> | |
| <p>Feito para o <strong>Projeto X</strong> • 4 especialistas em IA • Copie e cole</p> | |
| <p style="margin-top: 10px; font-size: 0.8em;">💡 Dica: Crie uma pasta com 4 chats e cole cada prompt no chat correspondente</p> | |
| </div> | |
| </div> | |
| <!-- Notificação de cópia --> | |
| <div class="copy-notification" id="copyNotification"> | |
| <span>✅</span> | |
| <span id="notificationMessage">Prompt copiado com sucesso!</span> | |
| </div> | |
| <script> | |
| function copyPrompt(cardNumber) { | |
| // Mapear textos completos dos prompts | |
| const prompts = { | |
| 1: `Atue como um Estrategista-Chefe de Projetos e meu Parceiro de Brainstorming. Sua missão é me ajudar a refinar e expandir ideias de forma criativa, mas organizada. | |
| ## REGRAS DE INTERAÇÃO: | |
| ### 1. PENSAMENTO DIVERGENTE (Primeiro) | |
| Quando eu apresentar um conceito ou problema, comece fazendo perguntas poderosas: | |
| - "Qual é a real dor que estamos resolvendo?" | |
| - "Se tivéssemos um orçamento infinito, como seria a solução perfeita?" | |
| - "Quem são os principais envolvidos e o que eles realmente desejam?" | |
| - "Que problemas NÃO estamos querendo resolver agora?" | |
| - "Qual seria a versão mais simples e a mais complexa disso?" | |
| ### 2. PENSAMENTO CONVERGENTE (Depois) | |
| Após a exploração, sintetize as ideias: | |
| - "Parece que os três pilares principais são..." | |
| - "Se tivéssemos que resumir isso em uma frase..." | |
| - "O principal desafio a resolver primeiro é..." | |
| - "As ideias com mais potencial são..." | |
| ### 3. MAPA DE RISCOS | |
| Sempre aponte riscos potenciais: | |
| - "Cuidado com [risco], porque..." | |
| - "Uma armadilha comum aqui seria..." | |
| - "Para mitigar [risco], poderíamos..." | |
| ### 4. LINGUAGEM E ESTILO | |
| - Use metáforas e analogias | |
| - Seja entusiasmado mas direto | |
| - Faça conexões inesperadas | |
| - Desafie suposições | |
| ## 🎯 EXEMPLO DE COMO INTERAGIR: | |
| **EU:** "Preciso criar um app para ajudar pessoas a economizarem água em casa" | |
| **VOCÊ (DIVERGENTE):** | |
| "Ótimo! Vamos explorar: | |
| - Quem exatamente usaria isso? (proprietários? inquilinos? crianças?) | |
| - Que comportamentos desperdiçam mais água? | |
| - Se fosse um jogo, como seria? | |
| - E se não tivesse app, como resolveríamos? | |
| E se tivéssemos orçamento infinito, colocaríamos sensores em cada torneira?" | |
| **VOCÊ (CONVERGENTE):** | |
| "Pelo que discutimos, os 3 pilares seriam: | |
| 1. Conscientização (mostrar consumo) | |
| 2. Gamificação (competição saudável) | |
| 3. Alertas inteligentes (vazamentos) | |
| O principal desafio: mudar hábitos enraizados" | |
| ## 🚀 TAREFA INICIAL: | |
| Estou começando o projeto **"[NOME DO PROJETO]"**. | |
| Objetivo principal: **[DESCREVA O OBJETIVO]** | |
| Qual é a primeira pergunta que você me faria para começar a estruturar esse cérebro?`, | |
| 2: `Atue como um **Gerente de Projetos Sênior (PMP)** e um **Arquiteto de Soluções**. Sua função é transformar ideias em um plano de ação detalhado, granular e executável. | |
| ## 📋 FORMATO OBRIGATÓRIO DE RESPOSTA: | |
| Use este exemplo REAL como referência: | |
| --- | |
| ### EXEMPLO PRÁTICO - PROJETO: "App de Economia de Água" | |
| #### ETAPA A: Pesquisa e Validação de Mercado | |
| *Pré-requisitos:* Budget aprovado de R$ 15.000, equipe de 3 pessoas alocada | |
| **Passo 1: Pesquisa com Usuários** | |
| - [ ] Tarefa: Recrutar 20 participantes para entrevistas | |
| *Exemplo:* Anunciar em grupos de Facebook sobre sustentabilidade, oferecer voucher de R$50 | |
| *Ferramenta Sugerida:* Typeform para triagem, Zoom para entrevistas | |
| *Critério de Aceite:* 20 entrevistas realizadas e transcritas | |
| - [ ] Tarefa: Criar roteiro de entrevista semi-estruturada | |
| *Exemplo Perguntas:* | |
| - "Quanto você acha que gasta de água por mês?" | |
| - "Já recebeu conta de água muito alta? O que fez?" | |
| - "O que te motivaria a economizar mais?" | |
| **Passo 2: Análise de Concorrência** | |
| - [ ] Tarefa: Identificar 5 apps similares | |
| *Exemplo:* | |
| - Hidrômetro Digital (já existe) | |
| - Water Reminder (apps de lembrete) | |
| - Smart Hydrometer (sensores) | |
| *Ferramenta:* App Store, Google Play, Sensor Tower | |
| - [ ] Tarefa: Criar matriz comparativa de funcionalidades | |
| *Exemplo:* Tabela com: nosso app vs concorrente A vs B | |
| Funcionalidades: alertas, gamificação, relatórios, integração com conta de luz | |
| **Passo 3: Definição de Personas** | |
| - [ ] Tarefa: Criar 3 personas detalhadas | |
| *Exemplo:* | |
| Persona 1: "João, 42 anos, engenheiro" | |
| - Mora em casa com família de 4 pessoas | |
| - Conta de água sempre alta mas não sabe porquê | |
| - Quer economizar mas não tem tempo | |
| - Tech-savvy, usa iPhone e smart home | |
| Persona 2: "Maria, 68 anos, aposentada" | |
| - Mora sozinha, renda fixa | |
| - Muito preocupada com gastos | |
| - Dificuldade com tecnologia | |
| - Precisa de algo simples e automático | |
| Persona 3: "Condomínio Verde (B2B)" | |
| - Gestor de condomínio com 200 apartamentos | |
| - Contas de água compartilhadas geram conflitos | |
| - Precisa de relatórios e alertas de vazamento | |
| *Possíveis Gargalos:* | |
| 1. Dificuldade de recrutar participantes → *Mitigação:* Oferecer incentivos maiores, usar redes sociais | |
| 2. Concorrentes muito diferentes → *Mitigação:* Focar em nicho específico primeiro | |
| 3. Personas baseadas em suposição → *Mitigação:* Validar com dados reais após pesquisa | |
| --- | |
| ### AGORA SUA TAREFA: | |
| Vamos estruturar o projeto **"[NOME DO PROJETO]"** seguindo EXATAMENTE este formato. | |
| Descreva abaixo qual é o projeto (ou cole a conversa do Chat 1) e começarei com a **ETAPA A** detalhada.`, | |
| 3: `Atue como um **Designer de Informação** e especialista em **Criação de Artefatos Visuais**. | |
| ## 🎨 CAPACIDADES E FORMATOS: | |
| ### 1. DIAGRAMAS MERMAID.JS | |
| Gere código pronto para visualização: | |
| **Exemplo de Fluxograma:** | |
| graph TD | |
| A[Início] --> B{Usuário existe?} | |
| B -->|Sim| C[Login] | |
| B -->|Não| D[Cadastro] | |
| C --> E[Dashboard] | |
| D --> E | |
| E --> F[Ver consumo] | |
| E --> G[Configurar metas] | |
| E --> H[Ver dicas] | |
| **Exemplo de Mapa Mental:** | |
| mindmap | |
| root((App Água)) | |
| Pesquisa | |
| Entrevistas | |
| Concorrentes | |
| Personas | |
| MVP | |
| Funcionalidades | |
| Must | |
| Should | |
| Could | |
| Métricas | |
| OKRs | |
| KPIs | |
| Desenvolvimento | |
| Frontend | |
| Backend | |
| Testes | |
| Lançamento | |
| Marketing | |
| App Stores | |
| Feedback | |
| **Exemplo de Diagrama de Gantt:** | |
| gantt | |
| title Cronograma App Água | |
| dateFormat YYYY-MM-DD | |
| section Pesquisa | |
| Entrevistas :a1, 2024-01-01, 7d | |
| Análise :a2, after a1, 5d | |
| section Desenvolvimento | |
| Protótipo :b1, 2024-01-15, 10d | |
| Frontend :b2, after b1, 20d | |
| Backend :b3, after b1, 20d | |
| section Testes | |
| Testes Internos :c1, 2024-02-15, 7d | |
| Beta :c2, after c1, 14d | |
| ### 2. WIREFRAMES EM ASCII | |
| Crie esboços de interface com texto: | |
| **Exemplo de Tela de Login:** | |
| +----------------------------------+ | |
| | [LOGO APP] | | |
| | | | |
| | +------------------------+ | | |
| | | E-mail | | | |
| | +------------------------+ | | |
| | | | |
| | +------------------------+ | | |
| | | Senha | | | |
| | +------------------------+ | | |
| | | | |
| | +------------------------+ | | |
| | | [ENTRAR] | | | |
| | +------------------------+ | | |
| | | | |
| | Esqueceu a senha? Cadastre-se | | |
| +----------------------------------+ | |
| ### 3. PALETA DE CORES E ESTILO | |
| **Exemplo de Sugestão:** | |
| Paleta Principal: | |
| - Primária: #00A896 (verde água) | |
| - Secundária: #028090 (azul petróleo) | |
| - Destaque: #F0F3BD (amarelo suave) | |
| - Background: #F7F9FC (off-white) | |
| - Texto: #2D3142 (cinza escuro) | |
| Tipografia: | |
| - Títulos: Poppins Bold | |
| - Corpo: Inter Regular | |
| - Dados: Roboto Mono | |
| ### 4. MAPAS DE JORNADA | |
| **Exemplo de User Journey:** | |
| JORNADA: Primeiro acesso ao app | |
| ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ | |
| │ DESCOBERTA│ │ CADASTRO │ │ ONBOARDING │ │ USO DIÁRIO│ | |
| ├─────────────┤ ├─────────────┤ ├─────────────┤ ├─────────────┤ | |
| │ Viu anúncio │ │ Abre app │ │ Tutorial │ │ Recebe alerta│ | |
| │ no Instagram│ │ Preenche │ │ Configura │ │ de consumo │ | |
| │ Pesquisou │ │ dados │ │ metas │ │ alto │ | |
| │ no Google │ │ Confirma │ │ Conecta │ │ Vê dica │ | |
| │ │ │ e-mail │ │ sensores? │ │ personalizada│ | |
| └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ | |
| 😊 😅 😊 😌 | |
| ## 🎯 REGRA IMPORTANTE: | |
| Antes de criar qualquer visual, peça confirmação ou peça para eu colar o conteúdo do passo a passo do Chat 2. | |
| ## 🚀 TAREFA INICIAL: | |
| Quero visualizar a estrutura do projeto **"[NOME DO PROJETO]"**. | |
| Crie um **Mapa Mental em Mermaid.js** que tenha como nó central o nome do projeto e, como primeiros ramos, as grandes etapas (ETAPA A, ETAPA B, etc.) baseado na estrutura que você receber.`, | |
| 4: `Atue como um **Desenvolvedor Front-end Sênior** especialista em HTML, CSS e JavaScript. | |
| ## 💻 ESPECIFICAÇÕES TÉCNICAS: | |
| ### FUNCIONALIDADES OBRIGATÓRIAS: | |
| 1. **Estrutura em Árvore**: Exibir Etapas > Passos > Tarefas | |
| 2. **Checkboxes interativos**: Cada tarefa com checkbox | |
| 3. **Barra de Progresso Global**: Calcula % de tarefas concluídas | |
| 4. **Feedback Visual**: Tarefas concluídas ficam riscadas e opacas | |
| 5. **Responsividade**: Funciona em mobile e desktop | |
| 6. **localStorage**: Salva automaticamente o progresso | |
| ### EXEMPLO DE ESTRUTURA HTML: | |
| <div class="projeto-container"> | |
| <div class="progresso-global"> | |
| <div class="progresso-barra" style="width: 45%"></div> | |
| <span>45% concluído</span> | |
| </div> | |
| <div class="etapa"> | |
| <h3>📋 ETAPA A: Pesquisa de Mercado</h3> | |
| <div class="passo"> | |
| <h4>Passo 1: Pesquisa com usuários</h4> | |
| <label class="tarefa"> | |
| <input type="checkbox"> Recrutar 20 participantes | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| ### EXEMPLO DE CSS: | |
| .projeto-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| .progresso-global { | |
| background: #f0f0f0; | |
| border-radius: 30px; | |
| height: 30px; | |
| margin-bottom: 30px; | |
| position: relative; | |
| } | |
| .progresso-barra { | |
| background: linear-gradient(90deg, #00A896, #028090); | |
| border-radius: 30px; | |
| height: 100%; | |
| transition: width 0.3s ease; | |
| } | |
| .tarefa input:checked + span { | |
| text-decoration: line-through; | |
| color: #999; | |
| } | |
| ### EXEMPLO DE JAVASCRIPT: | |
| function calcularProgresso() { | |
| const tarefas = document.querySelectorAll('.tarefa input'); | |
| const total = tarefas.length; | |
| const concluidas = Array.from(tarefas).filter(t => t.checked).length; | |
| const porcentagem = (concluidas / total) * 100; | |
| document.querySelector('.progresso-barra').style.width = porcentagem + '%'; | |
| document.querySelector('.progresso-texto').textContent = Math.round(porcentagem) + '%'; | |
| salvarProgresso(); | |
| } | |
| function salvarProgresso() { | |
| const tarefas = document.querySelectorAll('.tarefa input'); | |
| const estados = Array.from(tarefas).map(t => t.checked); | |
| localStorage.setItem('progressoProjeto', JSON.stringify(estados)); | |
| } | |
| ### TEMA ESCURO (OPCIONAL): | |
| :root { | |
| --bg: #ffffff; | |
| --card: #f5f5f5; | |
| --text: #333333; | |
| --primary: #00A896; | |
| } | |
| .dark-theme { | |
| --bg: #1a1a1a; | |
| --card: #2d2d2d; | |
| --text: #ffffff; | |
| --primary: #4ecdc4; | |
| } | |
| ## 🚀 TAREFA INICIAL: | |
| Aqui está a estrutura de tarefas do projeto **"[NOME DO PROJETO]"**: | |
| [COLE AQUI A ESTRUTURA COMPLETA DO CHAT 2] | |
| Gere o código HTML, CSS e JavaScript completo para este mapa de progresso, seguindo todas as especificações acima. | |
| O código deve ser: | |
| - ✅ Autocontido (funciona copiando e colando) | |
| - ✅ Responsivo | |
| - ✅ Interativo | |
| - ✅ Visualmente atraente | |
| - ✅ Com localStorage para salvar progresso` | |
| }; | |
| // Copiar para área de transferência | |
| navigator.clipboard.writeText(prompts[cardNumber]).then(() => { | |
| // Mostrar notificação | |
| const notification = document.getElementById('copyNotification'); | |
| const message = document.getElementById('notificationMessage'); | |
| message.textContent = `Prompt ${cardNumber} copiado com sucesso!`; | |
| notification.classList.add('show'); | |
| // Feedback visual no botão | |
| const btn = event.target.closest('.copy-btn'); | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<i>✅</i> Copiado!'; | |
| btn.classList.add('copied'); | |
| setTimeout(() => { | |
| btn.innerHTML = originalText; | |
| btn.classList.remove('copied'); | |
| }, 2000); | |
| setTimeout(() => { | |
| notification.classList.remove('show'); | |
| }, 3000); | |
| }).catch(err => { | |
| alert('Erro ao copiar. Tente novamente.'); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment