diff --git a/web-interface/public/agents-panel.js b/web-interface/public/agents-panel.js
index 0e92e28..674ee07 100644
--- a/web-interface/public/agents-panel.js
+++ b/web-interface/public/agents-panel.js
@@ -248,7 +248,18 @@ async function applyUltraModernRedesign(cloneDir) {
         console.error("Erro na IA do Designer:", e);
     }
     
-    const previewUrl = `http://localhost:${window.location.port || 3000}/${cloneDir.split('/').pop()}/index.html`;
+    // Injetar o CSS de Redesign Ultra-Moderno gerado pela IA no site clonado
+    try {
+        await fetch('/api/ai/inject-redesign', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ cloneDir, appliedStyles, elementsRedesigned })
+        });
+    } catch (e) {
+        console.error("Erro ao injetar CSS de redesign:", e);
+    }
+
+    const previewUrl = `/api/preview/${cloneDir.split('/').pop()}`;
     
     return {
         success: true,
diff --git a/web-interface/server.js b/web-interface/server.js
index e5c2418..64b73fb 100644
--- a/web-interface/server.js
+++ b/web-interface/server.js
@@ -632,6 +632,153 @@ app.post('/api/ai/agent', async (req, res) => {
   }
 });
 
+// AI Inject Redesign Route (Pilar 1 - Agente Designer Real)
+app.post('/api/ai/inject-redesign', (req, res) => {
+  const { cloneDir, appliedStyles, elementsRedesigned } = req.body;
+  if (!cloneDir) return res.status(400).json({ error: 'cloneDir is required' });
+
+  const folderName = cloneDir.split('/').pop();
+  const folderPath = path.join(__dirname, '..', 'cloned-sites', folderName);
+
+  if (!fs.existsSync(folderPath)) {
+    return res.status(404).json({ error: 'Cloned site folder not found' });
+  }
+
+  try {
+    // 1. Criar o arquivo CSS de Redesign Ultra-Moderno (__ai_redesign.css)
+    const cssContent = `
+/* ==========================================================================
+   BRAINSTEEL WEB - AI ULTRA-MODERN REDESIGN (AGENTE DESIGNER)
+   ========================================================================== */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;800&display=swap');
+
+:root {
+  --ai-bg-dark: #0b0f19;
+  --ai-bg-card: rgba(18, 24, 38, 0.7);
+  --ai-border-glass: rgba(255, 255, 255, 0.08);
+  --ai-accent-glow: #3b82f6;
+  --ai-accent-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
+  --ai-text-main: #f3f4f6;
+  --ai-text-muted: #9ca3af;
+}
+
+/* Força Dark Mode elegante e tipografia moderna no body e containers principais */
+body, main, #root, #app, .app, .main, .container, .wrapper, header, footer, section {
+  background-color: var(--ai-bg-dark) !important;
+  color: var(--ai-text-main) !important;
+  font-family: 'Inter', sans-serif !important;
+}
+
+/* Glassmorphism e Glow em Cards, Painéis, Cabeçalhos e Rodapés */
+div[class*="card"], div[class*="panel"], div[class*="box"], div[class*="container"], div[class*="item"], header, footer, nav, .navbar, .header, .footer {
+  background: var(--ai-bg-card) !important;
+  backdrop-filter: blur(16px) !important;
+  -webkit-backdrop-filter: blur(16px) !important;
+  border: 1px solid var(--ai-border-glass) !important;
+  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.5) !important;
+  border-radius: 16px !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+div[class*="card"]:hover, div[class*="item"]:hover {
+  transform: translateY(-5px) !important;
+  border-color: rgba(59, 130, 246, 0.4) !important;
+  box-shadow: 0 20px 40px -15px rgba(59, 130, 246, 0.3) !important;
+}
+
+/* Títulos com Gradiente Vibrante (Outfit Font) */
+h1, h2, h3, h4, h5, .title, .heading, .header-title {
+  font-family: 'Outfit', sans-serif !important;
+  background: var(--ai-accent-gradient) !important;
+  -webkit-background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
+  background-clip: text !important;
+  font-weight: 700 !important;
+  letter-spacing: -0.03em !important;
+}
+
+/* Botões Ultra-Modernos com Gradiente e Animação de Pulso */
+button, .btn, a[class*="btn"], input[type="submit"], input[type="button"] {
+  background: var(--ai-accent-gradient) !important;
+  color: #ffffff !important;
+  border: none !important;
+  border-radius: 50px !important;
+  padding: 12px 28px !important;
+  font-family: 'Inter', sans-serif !important;
+  font-weight: 600 !important;
+  letter-spacing: 0.02em !important;
+  box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.5) !important;
+  cursor: pointer !important;
+  transition: all 0.3s ease !important;
+  text-transform: none !important;
+  -webkit-text-fill-color: #ffffff !important;
+}
+
+button:hover, .btn:hover, a[class*="btn"]:hover {
+  transform: scale(1.05) translateY(-2px) !important;
+  box-shadow: 0 15px 35px -5px rgba(236, 72, 153, 0.6) !important;
+}
+
+/* Inputs e Textareas com Efeito Glass */
+input, select, textarea, .input, .form-control {
+  background: rgba(255, 255, 255, 0.05) !important;
+  border: 1px solid var(--ai-border-glass) !important;
+  color: var(--ai-text-main) !important;
+  border-radius: 12px !important;
+  padding: 12px 16px !important;
+  font-family: 'Inter', sans-serif !important;
+}
+
+input:focus, select:focus, textarea:focus {
+  outline: none !important;
+  border-color: var(--ai-accent-glow) !important;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important;
+}
+
+/* Links e Textos Secundários */
+a {
+  color: var(--ai-accent-glow) !important;
+  text-decoration: none !important;
+  transition: color 0.2s !important;
+}
+
+a:hover {
+  color: #8b5cf6 !important;
+}
+
+p, span, li, label, td, th {
+  color: var(--ai-text-muted) !important;
+  line-height: 1.6 !important;
+}
+`;
+
+    const cssPath = path.join(folderPath, '__ai_redesign.css');
+    fs.writeFileSync(cssPath, cssContent, 'utf8');
+
+    // 2. Injetar a tag <link> no index.html do clone
+    const indexPath = path.join(folderPath, 'index.html');
+    if (fs.existsSync(indexPath)) {
+      let html = fs.readFileSync(indexPath, 'utf8');
+      const linkTag = `\n<link rel="stylesheet" href="/__ai_redesign.css" id="__AI_REDESIGN_LINK__">\n`;
+      
+      if (!html.includes('__ai_redesign.css')) {
+        if (html.includes('</head>')) {
+          html = html.replace('</head>', linkTag + '</head>');
+        } else {
+          html = linkTag + html;
+        }
+        fs.writeFileSync(indexPath, html, 'utf8');
+      }
+    }
+
+    res.json({ success: true, message: 'AI Redesign CSS injected successfully' });
+  } catch (err) {
+    console.error('Error injecting AI redesign:', err);
+    res.status(500).json({ error: err.message });
+  }
+});
+
 // Handle 404s
 app.use((req, res) => {
   res.status(404).json({