Spaces:
Running
Running
Adicione ao projetos essas novas características: Gerador de Prompts Lovable.dev Crie prompts perfeitos para o Lovable.dev em segundos Configurar Prompt Tipo de Projeto Aplicação Web Funcionalidades Autenticação Banco de Dados API REST Pagamento Tempo Real Integração AI Comandos de Voz Blockchain Web3 Metaverso IoT Estilo de Design Moderno e Clean Efeitos Modernos Microinterações Scroll Interativo Tipografia Dinâmica Cards Interativos Lottie Animations Iluminação 3D Gamificação Gradientes Animados Modo Escuro Cursor Interativo UI com IA Mobile-Friendly Realidade Aumentada Tecnologias React 19 Astro Nuxt 4 SvelteKit SolidStart Tailwind CSS 4 Material UI 8 Next.js Supabase Prisma Stripe Framer Motion Three.js Ethers.js Hardhat Web3.js Rust/WASM Deno Bun Descrição do Projeto Descreva brevemente o que você quer construir... Gerar Prompt Prompt Gerado Selecione as opções e clique em "Gerar Prompt" para começar... Copiar Resetar Dica do Dia Inclua exemplos de design que você gosta para referência visual Exemplos de Prompts E-commerce Completo Marketplace com carrinho, pagamento e gestão de produtos Dashboard Analytics Painel de controle com gráficos e dados em tempo real Portfólio Criativo Site pessoal com animações e interações modernas Made with DeepSite LogoDeepSite - 🧬 Remix - Initial Deployment
799f3b9 verified | <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gerador de Prompt Mestre - Lovable.dev</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| } | |
| .glass-morphism { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .prompt-box { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| border-left: 4px solid #667eea; | |
| transition: all 0.3s ease; | |
| } | |
| .prompt-box:hover { | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); | |
| transform: translateY(-2px); | |
| } | |
| .tag { | |
| transition: all 0.2s ease; | |
| } | |
| .tag:hover { | |
| transform: scale(1.05); | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); | |
| } | |
| .feature-card.selected { | |
| border-color: #667eea; | |
| background: rgba(102, 126, 234, 0.1); | |
| } | |
| .checkbox-custom { | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid #d1d5db; | |
| border-radius: 4px; | |
| position: relative; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .checkbox-custom:checked { | |
| background: #667eea; | |
| border-color: #667eea; | |
| } | |
| .checkbox-custom:checked::after { | |
| content: '✓'; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| color: white; | |
| font-size: 12px; | |
| font-weight: bold; | |
| } | |
| .section-divider { | |
| background: linear-gradient(90deg, transparent, #667eea, transparent); | |
| height: 1px; | |
| margin: 2rem 0; | |
| } | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip:hover::after { | |
| content: attr(data-tooltip); | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: #1f2937; | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 0.375rem; | |
| font-size: 0.875rem; | |
| white-space: nowrap; | |
| z-index: 10; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-5xl font-bold text-white mb-4"> | |
| <span class="inline-block animate-bounce">🎯</span> | |
| Gerador de Prompt Mestre | |
| <span class="text-3xl font-normal text-gray-200">para Lovable.dev</span> | |
| </h1> | |
| <p class="text-xl text-gray-200 max-w-2xl mx-auto"> | |
| Crie prompts perfeitos para suas aplicações com inteligência artificial | |
| </p> | |
| </header> | |
| <!-- Main Container --> | |
| <div class="max-w-6xl mx-auto"> | |
| <!-- Project Type Section --> | |
| <section class="glass-morphism rounded-2xl p-6 mb-8"> | |
| <h2 class="text-2xl font-bold text-white mb-4 flex items-center"> | |
| <i data-lucide="layout-template" class="mr-2"></i> | |
| Tipo de Aplicação | |
| </h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"> | |
| <div class="feature-card bg-white rounded-xl p-4 border-2 border-transparent" data-type="dashboard"> | |
| <i data-lucide="bar-chart-3" class="w-8 h-8 text-blue-500 mx-auto mb-2"></i> | |
| <p class="text-center font-medium">Dashboard</p> | |
| </div> | |
| <div class="feature-card bg-white rounded-xl p-4 border-2 border-transparent" data-type="ecommerce"> | |
| <i data-lucide="shopping-cart" class="w-8 h-8 text-green-500 mx-auto mb-2"></i> | |
| <p class="text-center font-medium">E-commerce</p> | |
| </div> | |
| <div class="feature-card bg-white rounded-xl p-4 border-2 border-transparent" data-type="blog"> | |
| <i data-lucide="newspaper" class="w-8 h-8 text-purple-500 mx-auto mb-2"></i> | |
| <p class="text-center font-medium">Blog</p> | |
| </div> | |
| <div class="feature-card bg-white rounded-xl p-4 border-2 border-transparent" data-type="mobile"> | |
| <i data-lucide="smartphone" class="w-8 h-8 text-red-500 mx-auto mb-2"></i> | |
| <p class="text-center font-medium">App Móvel</p> | |
| </div> | |
| <div class="feature-card bg-white rounded-xl p-4 border-2 border-transparent" data-type="landing"> | |
| <i data-lucide="rocket" class="w-8 h-8 text-orange-500 mx-auto mb-2"></i> | |
| <p class="text-center font-medium">Landing Page</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Audience Section --> | |
| <section class="glass-morphism rounded-2xl p-6 mb-8"> | |
| <h2 class="text-2xl font-bold text-white mb-4 flex items-center"> | |
| <i data-lucide="users" class="mr-2"></i> | |
| Público-Alvo | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <label class="flex items-center space-x-3 text-white cursor-pointer"> | |
| <input type="checkbox" class="checkbox-custom" data-audience="empresas"> | |
| <span>Empresas</span> | |
| </label> | |
| <label class="flex items-center space-x-3 text-white cursor-pointer"> | |
| <input type="checkbox" class="checkbox-custom" data-audience="usuarios"> | |
| <span>Usuários Finais</span> | |
| </label> | |
| <label class="flex items-center space-x-3 text-white cursor-pointer"> | |
| <input type="checkbox" class="checkbox-custom" data-audience="desenvolvedores"> | |
| <span>Desenvolvedores</span> | |
| </label> | |
| </div> | |
| </section> | |
| <!-- Style Section --> | |
| <section class="glass-morphism rounded-2xl p-6 mb-8"> | |
| <h2 class="text-2xl font-bold text-white mb-4 flex items-center"> | |
| <i data-lucide="palette" class="mr-2"></i> | |
| Estilo Visual | |
| </h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"> | |
| <label class="block"> | |
| <input type="radio" name="style" value="moderno" class="hidden peer"> | |
| <div class="bg-white rounded-xl p-4 cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50 border-2 border-transparent"> | |
| <i data-lucide="sparkles" class="w-6 h-6 mx-auto mb-2 text-blue-500"></i> | |
| <p class="text-center text-sm">Moderno</p> | |
| </div> | |
| </label> | |
| <label class="block"> | |
| <input type="radio" name="style" value="minimalista" class="hidden peer"> | |
| <div class="bg-white rounded-xl p-4 cursor-pointer peer-checked:border-green-500 peer-checked:bg-green-50 border-2 border-transparent"> | |
| <i data-lucide="minimize-2" class="w-6 h-6 mx-auto mb-2 text-green-500"></i> | |
| <p class="text-center text-sm">Minimalista</p> | |
| </div> | |
| </label> | |
| <label class="block"> | |
| <input type="radio" name="style" value="colorido" class="hidden peer"> | |
| <div class="bg-white rounded-xl p-4 cursor-pointer peer-checked:border-purple-500 peer-checked:bg-purple-50 border-2 border-transparent"> | |
| <i data-lucide="palette" class="w-6 h-6 mx-auto mb-2 text-purple-500"></i> | |
| <p class="text-center text-sm">Colorido</p> | |
| </div> | |
| </label> | |
| <label class="block"> | |
| <input type="radio" name="style" value="profissional" class="hidden peer"> | |
| <div class="bg-white rounded-xl p-4 cursor-pointer peer-checked:border-gray-500 peer-checked:bg-gray-50 border-2 border-transparent"> | |
| <i data-lucide="briefcase" class="w-6 h-6 mx-auto mb-2 text-gray-500"></i> | |
| <p class="text-center text-sm">Profissional</p> | |
| </div> | |
| </label> | |
| <label class="block"> | |
| <input type="radio" name="style" value="dark" class="hidden peer"> | |
| <div class="bg-white rounded-xl p-4 cursor-pointer peer-checked:border-gray-700 peer-checked:bg-gray-100 border-2 border-transparent"> | |
| <i data-lucide="moon" class="w-6 h-6 mx-auto mb-2 text-gray-700"></i> | |
| <p class="text-center text-sm">Dark</p> | |
| </div> | |
| </label> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="glass-morphism rounded-2xl p-6 mb-8"> | |
| <h2 class="text-2xl font-bold text-white mb-4 flex items-center"> | |
| <i data-lucide="check-square" class="mr-2"></i> | |
| Funcionalidades | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <label class="flex items-center space-x-3 text-white cursor-pointer"> | |
| <input type="checkbox" class="checkbox-custom" data-feature="responsive"> | |
| <span>Design Responsivo</span> | |
| </label> | |
| <label class="flex items-center space-x-3 text-white cursor-pointer"> | |
| <input type="checkbox" class="checkbox-custom" data-feature="animations"> | |
| <span>Animações Suaves</span> | |
| </label> | |
| <label class="flex items-center space-x-3 text-white cursor-pointer"> | |
| <input type="checkbox" class="checkbox-custom" data-feature="dark-mode"> | |
| <span>Modo Escuro</span> | |
| </label> | |
| <label class="flex items-center space-x-3 text-white cursor-pointer"> | |
| <input type="checkbox" class="checkbox-custom" data-feature="seo"> | |
| <span>Otimizado para SEO</span> | |
| </label> | |
| <label class="flex items-center space-x-3 text-white cursor-pointer"> | |
| <input type="checkbox" class="checkbox-custom" data-feature="accessibility"> | |
| <span>Acessibilidade WCAG</span> | |
| </label> | |
| <label class="flex items-center space-x-3 text-white cursor-pointer"> | |
| <input type="checkbox" class="checkbox-custom" data-feature="performance"> | |
| <span>Alta Performance</span> | |
| </label> | |
| </div> | |
| </section> | |
| <!-- Additional Details --> | |
| <section class="glass-morphism rounded-2xl p-6 mb-8"> | |
| <h2 class="text-2xl font-bold text-white mb-4 flex items-center"> | |
| <i data-lucide="edit-3" class="mr-2"></i> | |
| Detalhes Adicionais | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-white mb-2">Nome do Projeto</label> | |
| <input type="text" id="projectName" placeholder="Ex: Plataforma de Gestão" | |
| class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-white mb-2">Cor Principal</label> | |
| <input type="color" id="primaryColor" value="#667eea" | |
| class="w-full h-10 rounded-lg border border-gray-300 cursor-pointer"> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-white mb-2">Descrição Detalhada</label> | |
| <textarea id="description" rows="4" placeholder="Descreva as funcionalidades principais, comportamentos e interações desejadas..." | |
| class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| </section> | |
| <!-- Generate Button --> | |
| <div class="text-center mb-8"> | |
| <button onclick="generatePrompt()" | |
| class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:from-blue-600 hover:to-purple-700 transform hover:scale-105 transition-all duration-300 shadow-lg"> | |
| <i data-lucide="magic-wand" class="inline-block mr-2"></i> | |
| Gerar Prompt Mestre | |
| </button> | |
| </div> | |
| <!-- Generated Prompt --> | |
| <div id="generatedPrompt" class="hidden"> | |
| <div class="section-divider"></div> | |
| <div class="prompt-box rounded-2xl p-8"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-2xl font-bold gradient-text">Prompt Gerado</h3> | |
| <button onclick="copyPrompt()" | |
| class="bg-blue-500 text-white px-4 py-2 rounded-lg flex items-center hover:bg-blue-600 transition-colors"> | |
| <i data-lucide="copy" class="w-4 h-4 mr-2"></i> | |
| Copiar | |
| </button> | |
| </div> | |
| <pre id="promptText" class="whitespace-pre-wrap text-gray-700 font-mono text-sm leading-relaxed"></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let selectedType = ''; | |
| let selectedAudiences = []; | |
| let selectedStyle = ''; | |
| let selectedFeatures = []; | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| // Event listeners | |
| document.querySelectorAll('.feature-card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| document.querySelectorAll('.feature-card').forEach(c => { | |
| c.classList.remove('selected'); | |
| c.classList.add('border-transparent'); | |
| }); | |
| this.classList.add('selected'); | |
| this.classList.remove('border-transparent'); | |
| selectedType = this.dataset.type; | |
| }); | |
| }); | |
| document.querySelectorAll('input[name="style"]').forEach(radio => { | |
| radio.addEventListener('change', function() { | |
| selectedStyle = this.value; | |
| }); | |
| }); | |
| document.querySelectorAll('input[data-audience]').forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| const audience = this.dataset.audience; | |
| if (this.checked) { | |
| selectedAudiences.push(audience); | |
| } else { | |
| selectedAudiences = selectedAudiences.filter(a => a !== audience); | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('input[data-feature]').forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| const feature = this.dataset.feature; | |
| if (this.checked) { | |
| selectedFeatures.push(feature); | |
| } else { | |
| selectedFeatures = selectedFeatures.filter(f => f !== feature); | |
| } | |
| }); | |
| }); | |
| function generatePrompt() { | |
| const projectName = document.getElementById('projectName').value || 'Meu Projeto'; | |
| const primaryColor = document.getElementById('primaryColor').value; | |
| const description = document.getElementById('description').value; | |
| const audienceText = selectedAudiences.map(a => { | |
| const map = { | |
| 'empresas': 'Empresas', | |
| 'usuarios': 'Usuários Finais', | |
| 'desenvolvedores': 'Desenvolvedores' | |
| }; | |
| return map[a]; | |
| }).join(', '); | |
| const featuresText = selectedFeatures.map(f => { | |
| const map = { | |
| 'responsive': 'Design responsivo', | |
| 'animations': 'Animações suaves', | |
| 'dark-mode': 'Modo escuro', | |
| 'seo': 'Otimizado para SEO', | |
| 'accessibility': 'Acessibilidade WCAG', | |
| 'performance': 'Alta performance' | |
| }; | |
| return map[f]; | |
| }).join(', '); | |
| const prompt = `Crie uma aplicação do tipo ${selectedType || 'web moderna'} chamada "${projectName}". | |
| TIPO DE APLICAÇÃO: | |
| - ${selectedType || 'Web application'} | |
| PÚBLICO-ALVO: | |
| - ${audienceText || 'Usuários diversos'} | |
| ESTILO VISUAL: | |
| - Estilo ${selectedStyle || 'moderno'} | |
| - Cor principal: ${primaryColor} | |
| - Design clean e profissional | |
| FUNCIONALIDADES INCLUÍDAS: | |
| ${featuresText ? `- ${featuresText}` : '- Funcionalidades essenciais'} | |
| ESPECIFICAÇÕES TÉCNICAS: | |
| - Desenvolvido com tecnologias modernas | |
| - Interface intuitiva e fácil de usar | |
| - Performance otimizada | |
| - Segurança implementada | |
| DETALHES ADICIONAIS: | |
| ${description || 'Criar uma aplicação funcional e agradável visualmente.'} | |
| REQUISITOS: | |
| - Responsividade total | |
| - Compatibilidade cross-browser | |
| - Código limpo e documentado | |
| - Melhores práticas de UX/UI implementadas`; | |
| document.getElementById('promptText').textContent = prompt; | |
| document.getElementById('generatedPrompt').classList.remove('hidden'); | |
| document.getElementById('generatedPrompt').classList.add('animate-fade-in'); | |
| // Scroll to generated prompt | |
| document.getElementById('generatedPrompt').scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| function copyPrompt() { | |
| const promptText = document.getElementById('promptText').textContent; | |
| navigator.clipboard.writeText(promptText).then(() => { | |
| const button = event.target; | |
| const originalText = button.innerHTML; | |
| button.innerHTML = '<i data-lucide="check" class="w-4 h-4 mr-2"></i>Copiado!'; | |
| lucide.createIcons(); | |
| setTimeout(() => { | |
| button.innerHTML = originalText; | |
| lucide.createIcons(); | |
| }, 2000); | |
| }); | |
| } | |
| // Add some initial animations | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const cards = document.querySelectorAll('.feature-card'); | |
| cards.forEach((card, index) => { | |
| card.style.animationDelay = `${index * 0.1}s`; | |
| card.classList.add('animate-fade-in'); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Ntecdeve/3-0-prompt-lovable" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |