Melhora seus prompts do Lovable com IA para economizar créditos e obter melhores resultados
Size
14.1 KB
Version
1.0.1
Created
Mar 12, 2026
Updated
about 1 month ago
1// ==UserScript==
2// @name Lovable Prompt Enhancer
3// @description Melhora seus prompts do Lovable com IA para economizar créditos e obter melhores resultados
4// @version 1.0.1
5// @match https://*.lovable.dev/*
6// @match https://lovable.dev/*
7// @icon https://www.lovazero.shop/favicon.png
8// @grant GM.getValue
9// @grant GM.setValue
10// @grant GM.xmlhttpRequest
11// ==/UserScript==
12(function() {
13 'use strict';
14
15 console.log('✨ Lovable Prompt Enhancer - Iniciado');
16
17 let enhancerPanel = null;
18 let isProcessing = false;
19
20 // Função para criar o painel de melhoria de prompts
21 function createEnhancerPanel() {
22 const panel = document.createElement('div');
23 panel.id = 'prompt-enhancer-panel';
24 panel.style.cssText = `
25 position: fixed;
26 bottom: 20px;
27 right: 20px;
28 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
29 color: white;
30 padding: 20px;
31 border-radius: 16px;
32 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
33 z-index: 999999;
34 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
35 width: 400px;
36 max-height: 600px;
37 overflow-y: auto;
38 backdrop-filter: blur(10px);
39 display: none;
40 `;
41
42 panel.innerHTML = `
43 <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
44 <div style="display: flex; align-items: center; gap: 10px;">
45 <span style="font-size: 24px;">✨</span>
46 <strong style="font-size: 16px;">Prompt Enhancer</strong>
47 </div>
48 <button id="close-enhancer" style="
49 background: rgba(255, 255, 255, 0.2);
50 border: none;
51 color: white;
52 width: 28px;
53 height: 28px;
54 border-radius: 50%;
55 cursor: pointer;
56 font-size: 18px;
57 display: flex;
58 align-items: center;
59 justify-content: center;
60 transition: all 0.3s;
61 ">×</button>
62 </div>
63
64 <div style="background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px; margin-bottom: 16px;">
65 <label style="display: block; font-size: 13px; margin-bottom: 8px; opacity: 0.9;">
66 Seu prompt original:
67 </label>
68 <textarea id="original-prompt" style="
69 width: 100%;
70 min-height: 100px;
71 padding: 12px;
72 border: 1px solid rgba(255, 255, 255, 0.3);
73 border-radius: 8px;
74 background: rgba(255, 255, 255, 0.15);
75 color: white;
76 font-size: 14px;
77 font-family: inherit;
78 resize: vertical;
79 box-sizing: border-box;
80 " placeholder="Cole seu prompt aqui..."></textarea>
81 </div>
82
83 <div style="display: flex; gap: 8px; margin-bottom: 16px;">
84 <button id="enhance-btn" style="
85 flex: 1;
86 background: rgba(34, 197, 94, 0.3);
87 border: 1px solid rgba(34, 197, 94, 0.5);
88 color: white;
89 padding: 12px 20px;
90 border-radius: 8px;
91 cursor: pointer;
92 font-size: 14px;
93 font-weight: 600;
94 transition: all 0.3s;
95 display: flex;
96 align-items: center;
97 justify-content: center;
98 gap: 8px;
99 ">
100 <span>🚀</span> Melhorar Prompt
101 </button>
102 </div>
103
104 <div id="enhanced-result" style="display: none;">
105 <div style="background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px; margin-bottom: 16px;">
106 <label style="display: block; font-size: 13px; margin-bottom: 8px; opacity: 0.9;">
107 Prompt melhorado:
108 </label>
109 <div id="enhanced-prompt" style="
110 padding: 12px;
111 background: rgba(255, 255, 255, 0.15);
112 border-radius: 8px;
113 font-size: 14px;
114 line-height: 1.6;
115 max-height: 300px;
116 overflow-y: auto;
117 white-space: pre-wrap;
118 word-wrap: break-word;
119 "></div>
120 </div>
121
122 <div style="display: flex; gap: 8px;">
123 <button id="copy-enhanced" style="
124 flex: 1;
125 background: rgba(59, 130, 246, 0.3);
126 border: 1px solid rgba(59, 130, 246, 0.5);
127 color: white;
128 padding: 10px 16px;
129 border-radius: 8px;
130 cursor: pointer;
131 font-size: 13px;
132 font-weight: 600;
133 transition: all 0.3s;
134 ">
135 📋 Copiar
136 </button>
137 <button id="use-enhanced" style="
138 flex: 1;
139 background: rgba(168, 85, 247, 0.3);
140 border: 1px solid rgba(168, 85, 247, 0.5);
141 color: white;
142 padding: 10px 16px;
143 border-radius: 8px;
144 cursor: pointer;
145 font-size: 13px;
146 font-weight: 600;
147 transition: all 0.3s;
148 ">
149 ✅ Usar no Lovable
150 </button>
151 </div>
152 </div>
153
154 <div id="loading-indicator" style="display: none; text-align: center; padding: 20px;">
155 <div style="font-size: 32px; margin-bottom: 12px;">⏳</div>
156 <div style="font-size: 14px; opacity: 0.9;">Melhorando seu prompt...</div>
157 </div>
158
159 <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.2);">
160 <div style="font-size: 12px; opacity: 0.8; line-height: 1.5;">
161 💡 <strong>Dica:</strong> Prompts melhores = menos créditos gastos + resultados superiores
162 </div>
163 </div>
164 `;
165
166 document.body.appendChild(panel);
167 enhancerPanel = panel;
168
169 // Event listeners
170 document.getElementById('close-enhancer').addEventListener('click', () => {
171 panel.style.display = 'none';
172 });
173
174 document.getElementById('enhance-btn').addEventListener('click', enhancePrompt);
175 document.getElementById('copy-enhanced').addEventListener('click', copyEnhancedPrompt);
176 document.getElementById('use-enhanced').addEventListener('click', useEnhancedPrompt);
177
178 return panel;
179 }
180
181 // Função para criar o botão flutuante
182 function createFloatingButton() {
183 const button = document.createElement('button');
184 button.id = 'enhancer-float-btn';
185 button.innerHTML = '✨';
186 button.style.cssText = `
187 position: fixed;
188 bottom: 20px;
189 right: 20px;
190 width: 60px;
191 height: 60px;
192 border-radius: 50%;
193 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
194 color: white;
195 border: none;
196 font-size: 28px;
197 cursor: pointer;
198 box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
199 z-index: 999998;
200 transition: all 0.3s;
201 display: flex;
202 align-items: center;
203 justify-content: center;
204 `;
205
206 button.addEventListener('mouseenter', () => {
207 button.style.transform = 'scale(1.1)';
208 button.style.boxShadow = '0 6px 30px rgba(102, 126, 234, 0.6)';
209 });
210
211 button.addEventListener('mouseleave', () => {
212 button.style.transform = 'scale(1)';
213 button.style.boxShadow = '0 4px 20px rgba(102, 126, 234, 0.4)';
214 });
215
216 button.addEventListener('click', () => {
217 if (enhancerPanel.style.display === 'none') {
218 enhancerPanel.style.display = 'block';
219 button.style.display = 'none';
220 }
221 });
222
223 document.body.appendChild(button);
224 }
225
226 // Função para melhorar o prompt usando IA
227 async function enhancePrompt() {
228 if (isProcessing) return;
229
230 const originalPrompt = document.getElementById('original-prompt').value.trim();
231
232 if (!originalPrompt) {
233 alert('Por favor, insira um prompt primeiro!');
234 return;
235 }
236
237 isProcessing = true;
238 const enhanceBtn = document.getElementById('enhance-btn');
239 const loadingIndicator = document.getElementById('loading-indicator');
240 const enhancedResult = document.getElementById('enhanced-result');
241
242 // Mostrar loading
243 enhanceBtn.disabled = true;
244 enhanceBtn.style.opacity = '0.5';
245 loadingIndicator.style.display = 'block';
246 enhancedResult.style.display = 'none';
247
248 try {
249 // Usar a API RM.aiCall para melhorar o prompt
250 const improvedPrompt = await RM.aiCall(`
251Você é um especialista em criar prompts otimizados para o Lovable.dev (plataforma de desenvolvimento de aplicações web com IA).
252
253Analise o prompt abaixo e melhore-o seguindo estas diretrizes:
254
2551. **Seja específico e detalhado**: Adicione detalhes técnicos importantes
2562. **Estruture bem**: Use seções claras (O que fazer, Como fazer, Requisitos)
2573. **Inclua contexto**: Explique o objetivo final
2584. **Especifique tecnologias**: Mencione frameworks, bibliotecas se relevante
2595. **Defina o que NÃO mudar**: Evite alterações desnecessárias
2606. **Critérios de sucesso**: Como saber que funcionou
261
262Prompt original:
263"""
264${originalPrompt}
265"""
266
267Retorne APENAS o prompt melhorado, sem explicações adicionais. O prompt deve estar pronto para ser copiado e colado diretamente no Lovable.
268 `);
269
270 // Mostrar resultado
271 document.getElementById('enhanced-prompt').textContent = improvedPrompt;
272 loadingIndicator.style.display = 'none';
273 enhancedResult.style.display = 'block';
274
275 console.log('✅ Prompt melhorado com sucesso!');
276
277 } catch (error) {
278 console.error('❌ Erro ao melhorar prompt:', error);
279 alert('Erro ao melhorar o prompt. Tente novamente.');
280 loadingIndicator.style.display = 'none';
281 } finally {
282 isProcessing = false;
283 enhanceBtn.disabled = false;
284 enhanceBtn.style.opacity = '1';
285 }
286 }
287
288 // Função para copiar o prompt melhorado
289 async function copyEnhancedPrompt() {
290 const enhancedText = document.getElementById('enhanced-prompt').textContent;
291
292 try {
293 await GM.setClipboard(enhancedText);
294
295 const copyBtn = document.getElementById('copy-enhanced');
296 const originalText = copyBtn.textContent;
297 copyBtn.textContent = '✅ Copiado!';
298
299 setTimeout(() => {
300 copyBtn.textContent = originalText;
301 }, 2000);
302
303 console.log('✅ Prompt copiado para a área de transferência');
304 } catch (error) {
305 console.error('❌ Erro ao copiar:', error);
306 alert('Erro ao copiar. Tente selecionar e copiar manualmente.');
307 }
308 }
309
310 // Função para usar o prompt melhorado no Lovable
311 function useEnhancedPrompt() {
312 const enhancedText = document.getElementById('enhanced-prompt').textContent;
313
314 // Procurar pelo campo de input do Lovable
315 const inputSelectors = [
316 'textarea[placeholder*="message"]',
317 'textarea[placeholder*="prompt"]',
318 'textarea[placeholder*="Tell"]',
319 'textarea[placeholder*="describe"]',
320 '[contenteditable="true"]',
321 'textarea',
322 'input[type="text"]'
323 ];
324
325 let inputField = null;
326 for (const selector of inputSelectors) {
327 inputField = document.querySelector(selector);
328 if (inputField) break;
329 }
330
331 if (inputField) {
332 // Inserir o texto
333 if (inputField.tagName === 'TEXTAREA' || inputField.tagName === 'INPUT') {
334 inputField.value = enhancedText;
335 inputField.dispatchEvent(new Event('input', { bubbles: true }));
336 inputField.dispatchEvent(new Event('change', { bubbles: true }));
337 } else if (inputField.contentEditable === 'true') {
338 inputField.textContent = enhancedText;
339 inputField.dispatchEvent(new Event('input', { bubbles: true }));
340 }
341
342 // Fechar o painel
343 enhancerPanel.style.display = 'none';
344 document.getElementById('enhancer-float-btn').style.display = 'block';
345
346 // Focar no campo
347 inputField.focus();
348
349 console.log('✅ Prompt inserido no Lovable');
350 } else {
351 alert('Não foi possível encontrar o campo de input do Lovable. Copie manualmente.');
352 }
353 }
354
355 // Inicializar a extensão
356 async function init() {
357 console.log('✨ Inicializando Prompt Enhancer...');
358
359 // Aguardar o DOM estar pronto
360 if (document.readyState === 'loading') {
361 document.addEventListener('DOMContentLoaded', () => {
362 createEnhancerPanel();
363 createFloatingButton();
364 });
365 } else {
366 createEnhancerPanel();
367 createFloatingButton();
368 }
369
370 console.log('✅ Prompt Enhancer pronto!');
371 }
372
373 // Iniciar
374 init();
375
376})();