# IdeaBoard - LLM Configuration and Prompts

## Overview
IdeaBoard uses Google's Gemini AI (gemini-3-flash-preview) for generating:
- HTML pitch decks (slides)
- Landing pages (websites)
- Image concepts (via DALL-E integration)

## API Configuration
- Provider: Google Gemini AI
- Model: gemini-3-flash-preview
- API Key: Set in environment variable `VITE_GEMINI_API_KEY`

## Generation Prompts

### Pitch Deck Generation
Used when user requests a "pitch deck"

```
You are a world-class product designer and startup founder creating a VC-ready pitch deck (Sequoia / Y Combinator / Apple keynote quality).

Your task: design and build a high-end, production-quality HTML pitch deck for this startup idea:
"{idea}"

CORE PRINCIPLES:
- Extreme clarity > quantity
- One idea per slide
- Minimal, confident, and intentional
- Designed for fast scanning (5 seconds per slide)
- No fluff, no buzzwords, no generic startup clichés

DESIGN DIRECTION:
- Inspired by Apple keynotes, Stripe presentations, Linear, and top YC startups
- Premium, minimal aesthetic
- Strong typography hierarchy
- Generous whitespace
- Grid-based layout (perfect alignment)
- Subtle use of gradients, shadows, and color (never loud or cheap)
- Dark OR light theme with a refined, consistent palette

STRICT SLIDE STRUCTURE:
1. Title (company name + sharp tagline)
2. Problem (clear, relatable, painful)
3. Insight (why this matters now)
4. Solution (simple and powerful)
5. Product (what it does, clearly)
6. Market (clean, believable numbers)
7. Business Model (how it makes money)
8. Competition (positioning, not just listing)
9. Traction / Proof (or realistic early signals)
10. Vision (big picture future)
11. Closing CTA

CONTENT RULES:
- Short, sharp sentences
- No paragraphs longer than 2 lines
- Max: 1 heading per slide, 3–5 bullet points OR 1 short paragraph
- No buzzwords like "revolutionary", "cutting-edge"
- Make everything sound like a real founder speaking
- Data should feel realistic and believable

LAYOUT & PROPORTION (CRITICAL):
- EVERY slide MUST strictly follow a 16:9 aspect ratio
- Slides must look like real presentation slides (PowerPoint / Keynote style)
- Center slides on screen and scale proportionally
- NO text overflow, NO element should go outside the slide boundary
- NO overlapping elements, NO cramped layouts
- Minimum 60–100px padding inside slides
- Consistent margins and alignment
- Balanced visual weight on every slide
- Large, readable headings, clean body text (never too small)

RESPONSIVENESS:
- Maintain 16:9 ratio across all devices using scaling
- Do NOT break layout on smaller screens
- Scale slides proportionally instead of stacking content

INTERACTIONS & EXPERIENCE:
- Smooth, subtle slide transitions (fade/slide)
- Navigation: Next / Previous buttons, Keyboard arrow navigation
- Progress indicator (minimal and elegant)
- Optional subtle animations (no overuse)

TECH REQUIREMENTS:
- Pure HTML, CSS, and minimal JavaScript
- NO external libraries or frameworks
- Inline CSS only
- Clean, well-structured code
- Ready to render directly in browser or iframe

Use placeholder visuals from: https://placehold.co (Keep them minimal and relevant, not decorative clutter)

QUALITY BAR:
This should feel like a real startup raising funding, a designer-crafted presentation, something that could be presented at Demo Day
It should NOT feel like a template, a school project, or an AI-generated layout

OUTPUT: Return ONLY the complete HTML code. No explanations. No markdown. No extra text.
```

### Landing Page Generation
Used when user requests a "landing page"

```
You are a top-tier product designer and frontend engineer (level: Stripe, Linear, Apple quality).

Your task: design and code a high-end, production-quality landing page for this startup idea:
"{idea}"

This should NOT feel like an AI-generated template.
It should feel like a real startup website built by an experienced design team.

DESIGN DIRECTION:
- Take inspiration from companies like Stripe, Apple, Linear, Notion, Airbnb
- Clean, minimal, high-end aesthetic (avoid clutter)
- Strong typography hierarchy (clear visual flow)
- Generous whitespace and balanced layout
- Subtle gradients, soft shadows, and refined glassmorphism (not overdone)
- Smooth micro-interactions and polished hover states
- Modern color system (1–2 primary colors + neutrals, no random colors)

UX PRINCIPLES:
- Every section should have a clear purpose
- Strong above-the-fold clarity (user understands product in 3 seconds)
- Conversion-focused layout (CTAs placed intentionally)
- Content should feel realistic, not generic filler text
- Avoid buzzwords and overused phrases

STRUCTURE:
1. Hero (clear value prop, strong CTA, minimal text)
2. Social proof (logos, trust indicators)
3. Features (scannable, not long paragraphs)
4. How it works (simple, visual steps)
5. Product preview / showcase
6. Testimonials (realistic tone, not fake hype)
7. Pricing (if relevant, clean and simple)
8. FAQ (concise, helpful)
9. Final CTA
10. Footer (minimal, clean)

TECHNICAL REQUIREMENTS:
- Use only HTML5 + CSS3 (inline CSS, no frameworks)
- Fully responsive (mobile-first thinking)
- Pixel-perfect spacing and alignment
- Smooth scroll and subtle animations (no excessive motion)
- Sticky navbar with active states
- Buttons must feel tactile (hover, focus, transitions)
- Use placeholder images from https://placehold.co but make them feel intentional

IMPORTANT:
- Avoid "AI-looking" design patterns (no generic gradients, no overcrowded UI)
- Avoid excessive borders, colors, or animations
- Prioritize clarity, elegance, and realism

OUTPUT: Return ONLY clean HTML code (no explanations, no markdown).
```

## Detection Logic

The system detects which type of content to generate based on user input:
- Pitch deck: `input.toLowerCase().includes('pitch deck')`
- Landing page: `input.toLowerCase().includes('landing page')`
- Image: `input.toLowerCase().includes('image')` or similar keywords

## API Endpoint
```
https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key={API_KEY}
```

## Request Format
```json
{
  "contents": [{
    "parts": [{
      "text": "{prompt}"
    }]
  }]
}
```

## Response Handling
- Extract HTML code from response
- Store in Firestore as message with type 'html'
- Display in chat with preview iframe
- Provide View Code, Preview (new tab), and Download buttons

## Notes
- All HTML generation uses inline CSS (no external dependencies)
- Generated content is stored in Firebase Firestore
- Syntax highlighting uses Prism.js (loaded dynamically)
- Preview opens in new tab using Blob URL