vibetachyon 1.8.0 → 2.0.0

package/dist/mcp-server.js

@@ -47,12 +47,150 @@ async function checkSanity() {
         throw new Error(`[VIBETACHYON SANITY TRAP] Execution blocked. Agent exceeded ${CALL_LIMIT_PER_SESSION} tool calls in a single session. This prevents infinite loops or excessive API usage. Please restart the CLI if this was intentional.`);
     }
 }
+// --- Style Palettes — real CSS values per preset ─────────────────────────
+const STYLE_PALETTES = {
+    linear: {
+        '--background': '#0a0a0f',
+        '--foreground': '#f4f4f5',
+        '--primary': '#6366f1',
+        '--primary-fg': '#ffffff',
+        '--muted': '#1c1c28',
+        '--muted-fg': '#8585a8',
+        '--border': 'rgba(255,255,255,0.08)',
+        '--card': '#111120',
+        '--radius': '8px',
+        '--font': "'Inter', system-ui, sans-serif",
+        '--gradient': 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
+        '--shadow': '0 1px 3px rgba(0,0,0,0.4)',
+    },
+    vercel: {
+        '--background': '#000000',
+        '--foreground': '#ffffff',
+        '--primary': '#ffffff',
+        '--primary-fg': '#000000',
+        '--muted': '#111111',
+        '--muted-fg': '#888888',
+        '--border': '#333333',
+        '--card': '#0a0a0a',
+        '--radius': '4px',
+        '--font': "'Geist', 'Inter', system-ui, sans-serif",
+        '--gradient': 'none',
+        '--shadow': '0 0 0 1px #333',
+    },
+    stripe: {
+        '--background': '#ffffff',
+        '--foreground': '#0a2540',
+        '--primary': '#635bff',
+        '--primary-fg': '#ffffff',
+        '--muted': '#f6f9fc',
+        '--muted-fg': '#425466',
+        '--border': '#e3e8ee',
+        '--card': '#ffffff',
+        '--radius': '6px',
+        '--font': "'Sohne', 'Inter', system-ui, sans-serif",
+        '--gradient': 'linear-gradient(135deg, #635bff 0%, #0a2540 100%)',
+        '--shadow': '0 2px 8px rgba(0,0,0,0.08)',
+    },
+    notion: {
+        '--background': '#ffffff',
+        '--foreground': '#37352f',
+        '--primary': '#2eaadc',
+        '--primary-fg': '#ffffff',
+        '--muted': '#f7f6f3',
+        '--muted-fg': '#9b9a97',
+        '--border': '#e9e9e7',
+        '--card': '#ffffff',
+        '--radius': '3px',
+        '--font': "'ui-sans-serif', 'Inter', system-ui, sans-serif",
+        '--gradient': 'none',
+        '--shadow': '0 1px 3px rgba(0,0,0,0.07)',
+    },
+    apple: {
+        '--background': '#f5f5f7',
+        '--foreground': '#1d1d1f',
+        '--primary': '#0066cc',
+        '--primary-fg': '#ffffff',
+        '--muted': '#e8e8ed',
+        '--muted-fg': '#6e6e73',
+        '--border': 'rgba(0,0,0,0.1)',
+        '--card': '#ffffff',
+        '--radius': '12px',
+        '--font': "'-apple-system', 'SF Pro Display', 'Inter', sans-serif",
+        '--gradient': 'linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 100%)',
+        '--shadow': '0 4px 20px rgba(0,0,0,0.08)',
+    },
+    'bold-dark': {
+        '--background': '#060b18',
+        '--foreground': '#e2e8f0',
+        '--primary': '#06b6d4',
+        '--primary-fg': '#000000',
+        '--muted': '#0f1d2e',
+        '--muted-fg': '#94a3b8',
+        '--border': 'rgba(6,182,212,0.15)',
+        '--card': '#0d1a2e',
+        '--radius': '10px',
+        '--font': "'Inter', system-ui, sans-serif",
+        '--gradient': 'linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%)',
+        '--shadow': '0 4px 24px rgba(6,182,212,0.15)',
+    },
+    agency: {
+        '--background': '#0f0f0f',
+        '--foreground': '#ffffff',
+        '--primary': '#ff6b35',
+        '--primary-fg': '#ffffff',
+        '--muted': '#1a1a1a',
+        '--muted-fg': '#999999',
+        '--border': 'rgba(255,107,53,0.2)',
+        '--card': '#1a1a1a',
+        '--radius': '2px',
+        '--font': "'Space Grotesk', 'Inter', system-ui, sans-serif",
+        '--gradient': 'linear-gradient(135deg, #ff6b35 0%, #f7c59f 100%)',
+        '--shadow': '0 4px 20px rgba(255,107,53,0.2)',
+    },
+    aceternity: {
+        '--background': '#000000',
+        '--foreground': '#ffffff',
+        '--primary': '#a855f7',
+        '--primary-fg': '#ffffff',
+        '--muted': '#0a0a0a',
+        '--muted-fg': '#71717a',
+        '--border': 'rgba(168,85,247,0.2)',
+        '--card': '#0a0a0a',
+        '--radius': '16px',
+        '--font': "'Inter', system-ui, sans-serif",
+        '--gradient': 'linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #ec4899 100%)',
+        '--shadow': '0 0 40px rgba(168,85,247,0.25)',
+    },
+    custom: {
+        '--background': 'var(--background, #ffffff)',
+        '--foreground': 'var(--foreground, #000000)',
+        '--primary': 'var(--primary, #3b82f6)',
+        '--primary-fg': 'var(--primary-fg, #ffffff)',
+        '--muted': 'var(--muted, #f4f4f5)',
+        '--muted-fg': 'var(--muted-fg, #71717a)',
+        '--border': 'var(--border, #e4e4e7)',
+        '--card': 'var(--card, #ffffff)',
+        '--radius': 'var(--radius, 8px)',
+        '--font': "var(--font-sans, 'Inter', sans-serif)",
+        '--gradient': 'none',
+        '--shadow': '0 1px 3px rgba(0,0,0,0.1)',
+    },
+};
 // --- Changelog (per version) ---
 const CHANGELOG = {
+    '2.0.0': [
+        '8 presets visuais reais: linear, vercel, stripe, bold-dark, agency...',
+        'Paletas CSS aplicadas automaticamente — sem mais neon hardcoded',
+        'vibe_compose_landing_page lê o brief e injeta cores corretas',
+    ],
+    '1.9.0': [
+        'vibe_clone_design — clone design system de qualquer URL',
+        'Detecta cores, tipografia, radius e sombras automaticamente',
+        'Gera globals.css pronto para usar no projeto',
+    ],
     '1.8.0': [
         'vibe_session_recap — resumo completo da sessão',
         'Update check automático no startup com changelog',
-        'vibe_clone_design — clone de design system por URL',
     ],
     '1.7.0': [
         'vibe_launchpad — MISSION BRIEFING automático antes de qualquer código',
@@ -199,7 +337,7 @@ async function validateTokenAtStartup() {
     }
     // --- Update Check ---
     try {
-        const CURRENT_VERSION = '1.8.0'; // keep in sync with package.json
+        const CURRENT_VERSION = '2.0.0'; // keep in sync with package.json
         const npmRes = await fetch('https://registry.npmjs.org/vibetachyon/latest', {
             signal: AbortSignal.timeout(4000)
         });
@@ -228,7 +366,7 @@ async function startMcpServer() {
     await validateTokenAtStartup();
     const server = new mcp_js_1.McpServer({
         name: "VibeTachyon MCP — Animmaster Engine",
-        version: "1.8.0"
+        version: "2.0.0"
     });
     /**
      * VIBETACHYON FRONTEND PERSONA — Senior Frontend Designer (Animmaster Engine)
@@ -977,7 +1115,7 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
         niche: zod_1.z.string().describe("What is the product niche? e.g. 'B2B SaaS fintech', 'developer tool', 'e-commerce fashion'"),
         targetAudience: zod_1.z.string().describe("Who is the target user? e.g. 'CTO of early-stage startup', 'solo developer', 'non-technical founder'"),
         styleWords: zod_1.z.array(zod_1.z.string()).describe("3 adjectives that describe the desired visual style. e.g. ['clean', 'modern', 'trustworthy'] or ['bold', 'dark', 'animated']"),
-        referenceStyle: zod_1.z.enum(['linear', 'vercel', 'stripe', 'aceternity', 'apple', 'notion', 'custom']).describe("Which product's visual style to reference as inspiration."),
+        referenceStyle: zod_1.z.enum(['linear', 'vercel', 'stripe', 'aceternity', 'apple', 'notion', 'bold-dark', 'agency', 'custom']).describe("Visual preset: 'linear'=dark minimal indigo, 'vercel'=black/white terminal, 'stripe'=light professional, 'notion'=clean editorial, 'apple'=light cinematic, 'bold-dark'=dark navy cyan, 'agency'=dark orange dramatic, 'aceternity'=dark glowing purple, 'custom'=use project CSS vars"),
         sectionsNeeded: zod_1.z.array(zod_1.z.string()).describe("Which page sections are needed in order. e.g. ['hero', 'features', 'social-proof', 'pricing', 'faq', 'cta']")
     }, async ({ projectDir, pageGoal, niche, targetAudience, styleWords, referenceStyle, sectionsNeeded }) => {
         await checkSanity();
@@ -1060,6 +1198,10 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
         if (sectionsNeeded.includes('pricing') && !sectionsNeeded.includes('social-proof') && !sectionsNeeded.includes('testimonials')) {
             sectionWarnings.push('⚠️ Pricing without social proof reduces trust — consider adding testimonials before pricing.');
         }
+        const palette = STYLE_PALETTES[referenceStyle] || STYLE_PALETTES.custom;
+        const paletteCSS = Object.entries(palette)
+            .map(([k, v]) => `  ${k}: ${v};`)
+            .join('\n');
         const brief = {
             createdAt: new Date().toISOString(),
             pageGoal,
@@ -1068,6 +1210,8 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
             styleWords,
             referenceStyle,
             sectionsNeeded,
+            palette,
+            paletteCSS: `:root {\n${paletteCSS}\n}`,
             styleProfile: profile,
             rules: {
                 maxAnimationTypes: profile.animationLevel === 'heavy' ? 3 : profile.animationLevel === 'subtle' ? 2 : 0,
@@ -1113,14 +1257,17 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
                         `DESIGN RULES:\n${rulesText}\n\n` +
                         `SECTION SEQUENCE:\n${sectionsText}` +
                         `${warningsText}\n\n` +
+                        `COLOR PALETTE (USE THESE EXACT VALUES — NO EXCEPTIONS):\n` +
+                        `\`\`\`css\n${brief.paletteCSS}\n\`\`\`\n\n` +
                         `INSTRUCTION FOR AI — CRITICAL RULES FOR THIS SESSION:\n` +
-                        `1. Every component you choose MUST match the "${referenceStyle}" reference style\n` +
-                        `2. Visual tone is "${profile.tone}" — ${profile.tone === 'dark' ? 'use dark backgrounds, light text' : profile.tone === 'light' ? 'use light backgrounds, dark text' : 'adapt to project'}\n` +
-                        `3. MAXIMUM ${brief.rules.maxAnimationTypes} different animation styles on the entire page\n` +
-                        `4. NEVER mix styles from the avoid list: ${profile.avoid.join(', ')}\n` +
-                        `5. Build sections in this EXACT order: ${sectionsNeeded.join(' → ')}\n` +
-                        `6. Before searching each section, re-read this brief to ensure coherence\n` +
-                        `7. If a component from vibe_search_snippets does NOT match this brief, REJECT it and search again`
+                        `1. ALWAYS inject the CSS palette above as the FIRST thing inside <style> when generating HTML\n` +
+                        `2. NEVER hardcode colors like #7c3aed, #a855f7, #ec4899 — use ONLY the CSS vars above\n` +
+                        `3. Every component you choose MUST match the "${referenceStyle}" reference style\n` +
+                        `4. Visual tone is "${profile.tone}" — ${profile.tone === 'dark' ? 'dark backgrounds, light text' : profile.tone === 'light' ? 'light backgrounds, dark text' : 'adapt to project'}\n` +
+                        `5. MAXIMUM ${brief.rules.maxAnimationTypes} different animation styles on the entire page\n` +
+                        `6. NEVER use these: ${profile.avoid.join(', ')}\n` +
+                        `7. Build sections in this EXACT order: ${sectionsNeeded.join(' → ')}\n` +
+                        `8. If a component does NOT match this brief, REJECT it and search again`
                 }]
         };
     });
@@ -1188,6 +1335,221 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
         }
     });
     // Tool: Enforce Vibe Style (Consistency Guard)
+    // ── Tool: Clone Design ───────────────────────────────────────────────────
+    server.tool("vibe_clone_design", "🎨 Give a URL (e.g. linear.app, stripe.com, vercel.com) and get its complete design system cloned: colors, typography, border radius, spacing, shadows — all mapped to standard CSS variables and saved as globals.css. Use when the user says 'I want my site to look like X'.", {
+        url: zod_1.z.string().describe("Full URL of the site to clone the design system from (e.g. 'https://linear.app')"),
+        outputPath: zod_1.z.string().optional().describe("Absolute path where globals.css should be saved. If omitted, returns the CSS as text only."),
+        mode: zod_1.z.enum(['full', 'colors-only', 'typography-only']).optional().describe("What to extract. Default: 'full'")
+    }, async ({ url, outputPath, mode = 'full' }) => {
+        await checkSanity();
+        const lines = [];
+        const sep = '═'.repeat(50);
+        lines.push(`╔${sep}╗`);
+        lines.push(`║  🎨 DESIGN CLONE: ${new URL(url).hostname.padEnd(31)}║`);
+        lines.push(`╠${sep}╣`);
+        try {
+            // Fetch HTML
+            const htmlRes = await fetch(url, {
+                headers: { 'User-Agent': 'Mozilla/5.0 (compatible; VibeTachyon/1.0)' },
+                signal: AbortSignal.timeout(10000)
+            });
+            const html = await htmlRes.text();
+            const baseUrl = new URL(url).origin;
+            // Collect CSS sources: <style> tags + <link rel="stylesheet">
+            let allCss = '';
+            // Inline styles
+            const styleMatches = html.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi);
+            for (const m of styleMatches)
+                allCss += m[1] + '\n';
+            // External stylesheets (fetch first 3 to stay fast)
+            const linkMatches = [...html.matchAll(/<link[^>]+rel=["']stylesheet["'][^>]*href=["']([^"']+)["']/gi)];
+            const cssUrls = linkMatches.map(m => {
+                const href = m[1];
+                if (href.startsWith('http'))
+                    return href;
+                if (href.startsWith('//'))
+                    return 'https:' + href;
+                return baseUrl + (href.startsWith('/') ? href : '/' + href);
+            }).slice(0, 4);
+            await Promise.allSettled(cssUrls.map(async (cssUrl) => {
+                try {
+                    const r = await fetch(cssUrl, { signal: AbortSignal.timeout(5000) });
+                    allCss += await r.text() + '\n';
+                }
+                catch { /* skip failed CSS */ }
+            }));
+            // ── Extract design tokens ──────────────────────────────────
+            // 1. CSS Custom Properties from :root
+            const rootVars = {};
+            const rootBlocks = allCss.matchAll(/:root\s*\{([^}]+)\}/g);
+            for (const block of rootBlocks) {
+                const varMatches = block[1].matchAll(/--([\w-]+)\s*:\s*([^;]+);/g);
+                for (const v of varMatches)
+                    rootVars[v[1]] = v[2].trim();
+            }
+            // 2. Font families
+            const fontMatches = allCss.matchAll(/font-family\s*:\s*([^;}{]+)/g);
+            const fonts = [];
+            for (const m of fontMatches) {
+                const f = m[1].trim().split(',')[0].replace(/['"]/g, '').trim();
+                if (f && !fonts.includes(f) && f !== 'inherit' && f !== 'sans-serif')
+                    fonts.push(f);
+            }
+            // Also check Google Fonts links
+            const gFontMatch = html.match(/fonts\.googleapis\.com[^"']*family=([^&"']+)/);
+            if (gFontMatch) {
+                const gFont = decodeURIComponent(gFontMatch[1]).split(':')[0].replace(/\+/g, ' ');
+                if (!fonts.includes(gFont))
+                    fonts.unshift(gFont);
+            }
+            // 3. Border radius (from buttons/cards)
+            const radiusMatches = allCss.matchAll(/border-radius\s*:\s*([\d.]+(?:px|rem|em))/g);
+            const radii = [];
+            for (const m of radiusMatches) {
+                const val = parseFloat(m[1]);
+                if (val > 0 && val <= 32)
+                    radii.push(val);
+            }
+            const medianRadius = radii.length > 0
+                ? radii.sort((a, b) => a - b)[Math.floor(radii.length / 2)]
+                : 6;
+            const radiusUnit = allCss.includes('rem') ? 'rem' : 'px';
+            const radiusVal = radiusUnit === 'rem' ? `${(medianRadius / 16).toFixed(3)}rem` : `${medianRadius}px`;
+            // 4. Colors — find dominant non-white/black hex colors
+            const hexColors = [...new Set([...allCss.matchAll(/#([0-9a-fA-F]{6})\b/g)].map(m => '#' + m[1].toLowerCase()))];
+            const isNeutral = (hex) => {
+                const r = parseInt(hex.slice(1, 3), 16);
+                const g = parseInt(hex.slice(3, 5), 16);
+                const b = parseInt(hex.slice(5, 7), 16);
+                const max = Math.max(r, g, b), min = Math.min(r, g, b);
+                return (max - min) < 30; // low saturation = neutral
+            };
+            const brandColors = hexColors.filter(h => !isNeutral(h)).slice(0, 5);
+            const darkColors = hexColors.filter(h => {
+                const r = parseInt(h.slice(1, 3), 16);
+                return r < 30 && isNeutral(h);
+            });
+            const lightColors = hexColors.filter(h => {
+                const r = parseInt(h.slice(1, 3), 16);
+                return r > 225 && isNeutral(h);
+            });
+            // 5. Detect dark/light theme from background
+            const bgColorMatch = allCss.match(/body\s*\{[^}]*background(?:-color)?\s*:\s*(#[0-9a-fA-F]{6}|[a-z]+)/);
+            const bgHex = bgColorMatch?.[1] || (darkColors[0] ?? '#ffffff');
+            const isDark = bgHex.startsWith('#') ? parseInt(bgHex.slice(1, 3), 16) < 100 : bgHex === 'black';
+            // 6. Detect shadow style
+            const hasShadow = allCss.includes('box-shadow');
+            const shadowVal = hasShadow
+                ? (isDark ? '0 1px 3px rgba(0,0,0,0.4)' : '0 1px 3px rgba(0,0,0,0.1)')
+                : 'none';
+            // ── Map to standard tokens ─────────────────────────────────
+            const primary = brandColors[0] || (isDark ? '#6366f1' : '#3b82f6');
+            const primaryFg = '#ffffff';
+            const background = isDark ? (darkColors[0] || '#0a0a0a') : (lightColors[0] || '#ffffff');
+            const foreground = isDark ? '#f4f4f5' : '#09090b';
+            const muted = isDark ? '#27272a' : '#f4f4f5';
+            const mutedFg = isDark ? '#a1a1aa' : '#71717a';
+            const border = isDark ? '#3f3f46' : '#e4e4e7';
+            const card = isDark ? (darkColors[1] || '#18181b') : '#ffffff';
+            const primaryFont = fonts[0] || (isDark ? 'Inter' : 'Inter');
+            const monoFont = fonts.find(f => f.toLowerCase().includes('mono') || f.toLowerCase().includes('code')) || 'JetBrains Mono';
+            // ── Detect visual style for Animmaster brief ──────────────
+            const hasGradients = allCss.includes('linear-gradient') || allCss.includes('radial-gradient');
+            const hasBlur = allCss.includes('backdrop-filter') || allCss.includes('blur(');
+            const visualTone = isDark && hasBlur ? 'glassmorphism' :
+                isDark && hasGradients ? 'dark-gradient' :
+                    isDark ? 'dark-minimal' :
+                        hasGradients ? 'light-gradient' : 'light-minimal';
+            // ── Use existing root vars if abundant ────────────────────
+            const hasRichVars = Object.keys(rootVars).length > 8;
+            // ── Generate globals.css ───────────────────────────────────
+            const cssOutput = [
+                `/* ─────────────────────────────────────────────────────`,
+                ` * Design System cloned from: ${new URL(url).hostname}`,
+                ` * Generated by VibeTachyon vibe_clone_design`,
+                ` * Visual tone: ${visualTone}`,
+                ` * ──────────────────────────────────────────────────── */`,
+                '',
+                hasRichVars
+                    ? `/* Original CSS variables preserved from source */\n:root {\n${Object.entries(rootVars).slice(0, 30).map(([k, v]) => `  --${k}: ${v};`).join('\n')}\n}`
+                    : '',
+                '',
+                `/* VibeTachyon Standard Tokens */`,
+                `:root {`,
+                `  /* Colors */`,
+                `  --background:    ${background};`,
+                `  --foreground:    ${foreground};`,
+                `  --card:          ${card};`,
+                `  --card-fg:       ${foreground};`,
+                `  --primary:       ${primary};`,
+                `  --primary-fg:    ${primaryFg};`,
+                `  --muted:         ${muted};`,
+                `  --muted-fg:      ${mutedFg};`,
+                `  --border:        ${border};`,
+                `  --input:         ${border};`,
+                `  --ring:          ${primary};`,
+                ...(brandColors.slice(1).map((c, i) => `  --accent-${i + 1}:     ${c};`)),
+                '',
+                `  /* Typography */`,
+                `  --font-sans:     '${primaryFont}', system-ui, sans-serif;`,
+                `  --font-mono:     '${monoFont}', monospace;`,
+                '',
+                `  /* Shape */`,
+                `  --radius:        ${radiusVal};`,
+                `  --radius-sm:     calc(var(--radius) * 0.5);`,
+                `  --radius-lg:     calc(var(--radius) * 1.5);`,
+                '',
+                `  /* Shadows */`,
+                `  --shadow-sm:     ${shadowVal};`,
+                `  --shadow:        ${shadowVal.replace('3px', '8px').replace('0.1', '0.12').replace('0.4', '0.5')};`,
+                `}`,
+                '',
+                isDark ? [
+                    `.dark {`,
+                    `  color-scheme: dark;`,
+                    `}`,
+                ].join('\n') : '',
+            ].filter(Boolean).join('\n');
+            // Save to file if requested
+            if (outputPath) {
+                await fs_extra_1.default.ensureDir(path_1.default.dirname(outputPath));
+                await fs_extra_1.default.writeFile(outputPath, cssOutput, 'utf-8');
+            }
+            // Build briefing output
+            lines.push(`  Theme    : ${isDark ? '🌑 Dark' : '☀️  Light'} (${visualTone})`);
+            lines.push(`  Primary  : ${primary}`);
+            lines.push(`  BG       : ${background}`);
+            lines.push(`  FG       : ${foreground}`);
+            lines.push(`  Border   : ${border}`);
+            lines.push(`  Radius   : ${radiusVal}`);
+            lines.push(`  Font     : ${primaryFont}`);
+            if (fonts[1])
+                lines.push(`  Font 2   : ${fonts[1]}`);
+            if (brandColors.length > 1)
+                lines.push(`  Accents  : ${brandColors.slice(1, 4).join(', ')}`);
+            lines.push(`  Vars src : ${hasRichVars ? `✅ ${Object.keys(rootVars).length} CSS vars found` : '⚙️  Generated from computed styles'}`);
+            lines.push(`╠${sep}╣`);
+            lines.push(`  Animmaster tone: ${visualTone}`);
+            lines.push(`  Use in brief  : visualTone: "${visualTone}"`);
+            lines.push(`╠${sep}╣`);
+            if (outputPath) {
+                lines.push(`  ✅ globals.css saved to:`);
+                lines.push(`     ${outputPath}`);
+            }
+            else {
+                lines.push(`  💡 Pass outputPath to save globals.css automatically`);
+            }
+            lines.push(`╚${sep}╝`);
+            const fullOutput = lines.join('\n') + '\n\n' + '```css\n' + cssOutput + '\n```';
+            return { content: [{ type: "text", text: fullOutput }] };
+        }
+        catch (err) {
+            lines.push(`  ❌ Erro: ${err.message}`);
+            lines.push(`  Verifique se a URL está acessível e tente novamente.`);
+            lines.push(`╚${sep}╝`);
+            return { content: [{ type: "text", text: lines.join('\n') }] };
+        }
+    });
     server.tool("vibe_enforce_style", "Passive audit tool that scan a code snippet and automatically patches 'off-theme' Tailwind classes (like bg-blue-500) with project-specific design tokens (--primary, --background) extracted from the CSS.", {
         code: zod_1.z.string().describe("The TSX/JSX code snippet to audit and fix."),
         cssFilePath: zod_1.z.string().describe("Absolute path to the user's globals.css.")
@@ -1347,11 +1709,39 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
         }
     });
     // Tool: Compose Landing Page
-    server.tool("vibe_compose_landing_page", "Macro-composer that autonomously queries the VibeCodes RAG database for a full Landing Page structure (Navbar, Hero, Features, Pricing, Footer).", {
-        themeOrIndustry: zod_1.z.string().describe("The theme, industry, or style of the page (e.g., 'SaaS Finance Dark Mode', 'Dental Clinic Clean')")
-    }, async ({ themeOrIndustry }) => {
+    server.tool("vibe_compose_landing_page", "Macro-composer that autonomously queries the VibeCodes RAG database for a full Landing Page structure (Navbar, Hero, Features, Pricing, Footer). ALWAYS call vibe_design_brief first — this tool reads the saved brief to apply the correct color palette.", {
+        themeOrIndustry: zod_1.z.string().describe("The theme, industry, or style of the page (e.g., 'SaaS Finance', 'Dental Clinic', 'Developer Tool')"),
+        projectDir: zod_1.z.string().optional().describe("Absolute path to the project root. Used to read the design brief.")
+    }, async ({ themeOrIndustry, projectDir }) => {
         await checkSanity();
         try {
+            // Read design brief for palette injection
+            let paletteCSS = '';
+            let briefStyle = 'linear';
+            let briefTone = 'dark';
+            let briefAvoid = [];
+            const cwd = projectDir || process.cwd();
+            const root = await findProjectRoot(cwd);
+            const briefPath = path_1.default.join(root, '.vibetachyon', 'design-session.json');
+            if (await fs_extra_1.default.pathExists(briefPath)) {
+                try {
+                    const brief = await fs_extra_1.default.readJson(briefPath);
+                    if (brief.paletteCSS)
+                        paletteCSS = brief.paletteCSS;
+                    if (brief.referenceStyle)
+                        briefStyle = brief.referenceStyle;
+                    if (brief.styleProfile?.tone)
+                        briefTone = brief.styleProfile.tone;
+                    if (brief.rules?.mustAvoid)
+                        briefAvoid = brief.rules.mustAvoid;
+                }
+                catch { /* use defaults */ }
+            }
+            // Fallback: use linear palette if no brief
+            if (!paletteCSS) {
+                const fallbackPalette = STYLE_PALETTES[briefStyle] || STYLE_PALETTES.linear;
+                paletteCSS = `:root {\n${Object.entries(fallbackPalette).map(([k, v]) => `  ${k}: ${v};`).join('\n')}\n}`;
+            }
             // Map sections to Animmaster use cases and search terms
             const sectionMap = [
                 { section: 'preloader', query: 'preloader', useCase: 'preloader' },
@@ -1361,7 +1751,14 @@ COMPONENT SELECTION FILTER (apply mentally before using any component):
                 { section: 'features', query: 'features section', useCase: 'feature-section' },
                 { section: 'footer', query: 'footer', useCase: 'footer' }
             ];
-            let combinedPage = `[🎬 ANIMMASTER PAGE COMPOSER: ${themeOrIndustry}]\n\nINSTRUCTION FOR AI: Assemble a complete page using Animmaster components in init_order sequence.\n\n`;
+            let combinedPage = `[🎬 ANIMMASTER PAGE COMPOSER: ${themeOrIndustry}]\n`;
+            combinedPage += `Style: ${briefStyle} | Tone: ${briefTone}\n\n`;
+            combinedPage += `⚠️ MANDATORY COLOR RULES — INJECT THIS PALETTE FIRST IN <style>:\n\`\`\`css\n${paletteCSS}\n\`\`\`\n\n`;
+            combinedPage += `CRITICAL: Use ONLY var(--background), var(--primary), var(--foreground), var(--border), var(--card) etc.\n`;
+            combinedPage += `NEVER hardcode hex colors. NEVER use purple/neon unless --primary IS purple in the palette above.\n`;
+            if (briefAvoid.length > 0)
+                combinedPage += `AVOID: ${briefAvoid.join(', ')}\n`;
+            combinedPage += `\nINSTRUCTION FOR AI: Assemble a complete page using Animmaster components in init_order sequence.\n\n`;
             const allComponents = [];
             for (const { section, query, useCase } of sectionMap) {
                 const { data } = await supabase

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vibetachyon",
-    "version": "1.8.0",
+    "version": "2.0.0",
     "description": "VibeCodes MCP CLI Installer and Server",
     "main": "dist/index.js",
     "bin": {