/** * AI Prompt Library for Website Generation * * Generates a complete, self-contained multi-page website as HTML files * using plain HTML, CSS, and JavaScript — NO React, NO frameworks, * NO CDN dependencies required (except Google Fonts). * * This follows the same proven pattern as landingPageWebsitePrompts.ts * but is adapted for full websites with multiple pages/sections from * Website Planner data. */ import { buildLanguageDirective } from './websitePlannerPrompts'; export interface WebsiteSection { name: string; enabled?: boolean; purpose?: string; contentRequirement?: string; uiNotes?: string; cta?: string; seoNotes?: string; priority?: string; } export interface WebsitePage { name: string; url?: string; pageType?: string; goal?: string; metaTitle?: string; metaDescription?: string; sections?: string[]; } /** * Turn a planner page into the HTML filename the site will use. * The home page is always index.html; everything else uses its URL slug. * Exported so the generator route and the prompt agree on the exact filenames — * the navigation on every page is built from these. */ export function websitePageFileName(page: WebsitePage, index: number): string { const raw = (page.url || page.name || '').trim().toLowerCase(); const slug = raw.replace(/^https?:\/\/[^/]+/, '').replace(/^\/+|\/+$/g, '').replace(/[^a-z0-9/-]+/g, '-').replace(/-+/g, '-'); const isHome = index === 0 || !slug || slug === 'home' || slug === 'index' || raw === '/'; if (isHome) return 'index.html'; return `${slug.replace(/\//g, '-')}.html`; } /** One entry in the shared navigation that every page must render identically. */ export interface WebsiteNavEntry { name: string; file: string; active?: boolean; } export interface WebsiteWebsiteInputs { // Website planner data websiteName: string; websiteType?: string; domain?: string; primaryCTA?: string; secondaryCTA?: string; targetAudience?: string; country?: string; language?: string; seoTargetRegion?: string; uiStyle?: string; animationNotes?: string; responsiveNotes?: string; accessibilityNotes?: string; /** * Website Settings chosen in the wizard's AI Prompt step, already rendered as * directive lines by services/aiContext/websiteAiSettings. Empty for websites * saved before that panel existed, which keeps their prompt unchanged. */ designSettingsDirectives?: string[]; // Sections and pages sections?: WebsiteSection[]; pages?: WebsitePage[]; contentBlocks?: any[]; features?: any[]; faqs?: any[]; caseStudies?: any[]; // Business profile companyName?: string; companyIndustry?: string; companyDescription?: string; companyMission?: string; companyUsp?: string; companyWebsite?: string; // Visual identity — colors (flat structure from ModuleData) primaryColor?: string; accentColor?: string; secondaryColor?: string; backgroundColor?: string; surfaceColor?: string; textColor?: string; textMutedColor?: string; // Visual identity — fonts headingFont?: string; bodyFont?: string; accentFont?: string; // Brand strategy brandTagline?: string; brandVoice?: string; brandPersonality?: string[]; brandValues?: string[]; brandPositioning?: string; brandPromise?: string; elevatorPitch?: string; keyMessages?: string[]; // Logo logoUrl?: string; logoAlt?: string; // Brand images (from brand assets) heroImageUrl?: string; heroImageAlt?: string; backgroundImageUrl?: string; brandPatternUrl?: string; ogImageUrl?: string; // Context-aware image data industry?: string; industryKeywords?: string[]; productImages?: Array<{ name: string; description: string; url: string }>; serviceDescriptions?: string[]; // SEO metaTitle?: string; metaDescription?: string; // Generation options responsive?: boolean; /** * Shared navigation for the whole site. Set when generating ONE page at a time: * `pages` then holds only the page being generated, while this holds every page * so the nav and footer links are identical and correct across the site. */ navPages?: WebsiteNavEntry[]; /** Exact filename the generated page must use (single-page generation). */ targetFile?: string; } export interface PromptResult { systemPrompt: string; userPrompt: string; maxTokens: number; } // ============================================ // HELPER: Build Google Fonts tag // ============================================ function buildGoogleFontsLink(inputs: WebsiteWebsiteInputs): string { const fonts = new Set(); if (inputs.headingFont) fonts.add(inputs.headingFont); if (inputs.bodyFont) fonts.add(inputs.bodyFont); if (inputs.accentFont) fonts.add(inputs.accentFont); if (fonts.size === 0) fonts.add('Inter'); const families = Array.from(fonts).map(f => f.replace(/\s+/g, '+') + ':wght@400;500;600;700' ).join('&family='); return ``; } // ============================================ // HELPER: Build brand context section for user prompt // ============================================ function buildBrandContextSection(inputs: WebsiteWebsiteInputs): string { const parts: string[] = []; if (inputs.companyDescription) parts.push(`Company Description: ${inputs.companyDescription}`); if (inputs.companyMission) parts.push(`Mission: ${inputs.companyMission}`); if (inputs.companyUsp) parts.push(`Unique Selling Proposition: ${inputs.companyUsp}`); if (inputs.brandTagline) parts.push(`Brand Tagline: "${inputs.brandTagline}"`); if (inputs.brandVoice) parts.push(`Brand Voice: ${inputs.brandVoice}`); if (inputs.brandPersonality?.length) parts.push(`Brand Personality: ${inputs.brandPersonality.join(', ')}`); if (inputs.brandValues?.length) parts.push(`Brand Values: ${inputs.brandValues.join(', ')}`); if (inputs.brandPositioning) parts.push(`Brand Positioning: ${inputs.brandPositioning}`); if (inputs.brandPromise) parts.push(`Brand Promise: ${inputs.brandPromise}`); if (inputs.elevatorPitch) parts.push(`Elevator Pitch: ${inputs.elevatorPitch}`); if (inputs.keyMessages?.length) { parts.push(`Key Messages:`); inputs.keyMessages.slice(0, 5).forEach((m, i) => { parts.push(` ${i + 1}. ${m}`); }); } // Industry-specific image context if (inputs.industry || inputs.industryKeywords?.length) { const industryLabel = inputs.industry || 'General'; const keywordsLabel = inputs.industryKeywords?.length ? inputs.industryKeywords.join(', ') : industryLabel; parts.push(`\nINDUSTRY CONTEXT: This is a ${industryLabel} company. All content, imagery descriptions, and section themes MUST be relevant to the ${industryLabel} industry. Draw on your knowledge of ${keywordsLabel} — common pain points, industry terminology, typical customer expectations, competitive landscape, and sector-specific value propositions. Write content that demonstrates deep understanding of the ${industryLabel} space. Do NOT use generic business language — use ${industryLabel}-specific vocabulary and examples.`); } if (inputs.productImages?.length) { parts.push(`\nPRODUCT IMAGES (use these in Features, Benefits, and Product sections as tags with descriptive alt text):`); inputs.productImages.forEach(p => { parts.push(` - ${p.name}: ${p.description || 'Product image'} → ${p.url}`); }); } if (inputs.serviceDescriptions?.length) { parts.push(`\nSERVICES: ${inputs.serviceDescriptions.join('; ')}`); } if (parts.length === 0) return ''; return `BRAND CONTEXT (use this to inform tone, messaging, content, and imagery):\n${parts.join('\n')}`; } // ============================================ // PROMPT BUILDERS // ============================================ export function buildWebsiteWebsitePrompt(inputs: WebsiteWebsiteInputs): PromptResult { const enabledSections = inputs.sections?.filter(s => s.enabled !== false) || []; const sections = enabledSections.slice(0, 12); // Allow more sections for a full website // Build detailed section descriptions // Build detailed section descriptions with the REAL copy, not just a brief. // This block used to emit only name/purpose/contentRequirement/uiNotes/cta, // so everything the user generated or wrote in the Content step — headline, // subheadline, description, bullet points, trust statements — never reached // the AI and it invented its own. Mirrors the Landing Page generator. const sectionDetails = sections.map((s: any, i) => { const parts = [`${i + 1}. ${s.name}`]; if (s.headline) parts.push(` Headline: "${s.headline}"`); if (s.subheadline) parts.push(` Subheadline: "${s.subheadline}"`); if (s.description) parts.push(` Description: ${s.description}`); if (Array.isArray(s.bulletPoints) && s.bulletPoints.length > 0) { parts.push(` Key Points:`); s.bulletPoints.slice(0, 6).forEach((bp: string) => parts.push(` - ${bp}`)); } if (Array.isArray(s.trustStatements) && s.trustStatements.length > 0) { parts.push(` Trust Statements:`); s.trustStatements.slice(0, 4).forEach((ts: string) => parts.push(` - ${ts}`)); } if (s.purpose) parts.push(` Purpose: ${s.purpose}`); if (s.contentRequirement) parts.push(` Content: ${s.contentRequirement}`); if (s.uiNotes) parts.push(` UI Notes: ${s.uiNotes}`); if (s.conversionNotes) parts.push(` Conversion Notes: ${s.conversionNotes}`); if (s.cta) parts.push(` CTA: "${s.cta}"`); if (s.priority) parts.push(` Priority: ${s.priority}`); return parts.join('\n'); }).join('\n\n'); // Build page structure const pages = inputs.pages || []; const pageDetails = pages.length > 0 ? pages.map((p, i) => { const parts = [`${i + 1}. ${p.name} (${p.url || `/${p.name.toLowerCase().replace(/\s+/g, '-')}`})`]; if (p.pageType) parts.push(` Type: ${p.pageType}`); if (p.goal) parts.push(` Goal: ${p.goal}`); if (p.metaTitle) parts.push(` Meta Title: ${p.metaTitle}`); return parts.join('\n'); }).join('\n\n') : ''; // Brand colors const primaryColor = inputs.primaryColor || '#7C6BF0'; const accentColor = inputs.accentColor || '#C8FF2E'; const secondaryColor = inputs.secondaryColor || '#1E293B'; const backgroundColor = inputs.backgroundColor || '#0a0a0f'; const surfaceColor = inputs.surfaceColor || 'rgba(30, 41, 59, 0.5)'; const textColor = inputs.textColor || '#f1f5f9'; const textMutedColor = inputs.textMutedColor || '#64748b'; // Fonts const headingFont = inputs.headingFont || 'Inter'; const bodyFont = inputs.bodyFont || 'Inter'; // Names const businessName = inputs.companyName || inputs.websiteName || 'Company'; const industry = inputs.companyIndustry || 'General'; // Google Fonts link const fontLink = buildGoogleFontsLink(inputs); // Logo instruction const logoInstruction = inputs.logoUrl ? `LOGO: Use an actual tag for the logo: ${inputs.logoAlt || businessName} — wrap this in