Landing Page Builder

Step 2: Refine UI Requirement & Generate Spec (spec.md)

Analyze the user's request. If the visual/UI description is brief, expand it into a rich, specific design specification.

Create spec.md inside the project directory. The spec must include:

1. Expanded Prompt:

   • Project Context (brand story, mood, intent)
   • Hero Section (Video-First — see Hero Section Philosophy below)
   • Typography (scale, pairing, weight strategy)
   • Layout (grid, whitespace, rhythm)
   • Motion (scroll animations, transitions, hover states)

2. Tech Strategy:

   • Stack (HTML5, modern CSS, minimal JS)
   • Asset Protocol (generation approach, format, resolution)

3. Design System:

   • Color Palette — ⚠️ MUST comply with the Strict Color Constraint (see below)
   • Typography — Scale and font pairing
   • Layout — Grid system, spacing tokens

Rule: This spec.md serves as the strict blueprint for all subsequent work. All code and assets must adhere to it.

Step 3: Visual Asset Generation (High Fidelity)

Based on the spec, generate required visual assets. Prioritize the Hero Video.

For Videos (PRIORITY):

• Resolution: Ensure the output is 1080p (1920×1080) minimum
• Enhance prompts with specific camera gear and focal lengths:
  • e.g., "Close-up texture shot, 85mm lens", "Wide angle landscape, 16mm lens"
  • Include keywords: "Shot on Arri Alexa, 35mm lens, f/1.8 shallow depth of field, slow-motion, cinematic lighting, hyper-realistic, 8k resolution"
• Use gen_videos tool
• Storage: project_name/videos/

For Images:

• Use gen_images tool
• Storage: project_name/imgs/

Directory Structure:

project_name/
├── imgs/
├── videos/
├── spec.md
└── index.html

Step 4: Code Generation & File Integrity

Spec Adherence: Read spec.md and implement requirements exactly.

Structure: Clean, semantic HTML5 with modern CSS.

Defensive Coding & Path Safety (Zero Tolerance for Broken Links):

1. Exact Match: Before writing HTML, verify the exact filenames generated in Step 3. Do not hallucinate filenames.
2. Relative Paths: Use simple, relative paths (e.g., ./videos/hero_loop.mp4).
3. Fallback Strategy:
   • Images: loading="lazy" AND onerror="this.style.display='none'"
   • Videos: NO static image overlays. Set a background color on the video container matching the video's tone as the only fallback.

Responsive Design: Mobile-first approach.

Performance: Minimize external dependencies, inline critical CSS.

Step 5: Pre-Deployment Integrity Check (Playwright Protocol)

Validate build quality before deployment. Focus heavily on Media Integrity.

1. Setup: playwright install chromium 2>&1
2. Validation: Run Python/Playwright to verify:
   • No 404 Errors on Media: Specifically check that all <img> src and <video> sources resolve to 200 OK.
   • No Console Errors.
   • Page renders correctly.
3. Correction: If ANY media file returns a 404, you MUST fix the path in the HTML code immediately and re-validate.

Step 6: Deployment (MANDATORY)

• Deploy using the deploy tool with the project directory as dist_dir.
• No Local Servers: Never use python -m http.server or npx serve.
• Provide URL: Include the deployed URL in the final response to the user.

Step 7: Deliver to User

Present the user with:

• Deployed online URL (mandatory)
• Project source files (optional, on request)

Strict Color Constraint (NON-NEGOTIABLE)

❌ FORBIDDEN

• Standard Tech Blue
• Indigo
• Violet
• Blurple
• Neon Purple
• Any blue or purple hues whatsoever

✅ APPROVED Palettes

• Earth tones — Terracotta, sand, clay, warm brown
• Monochrome — Black, white, greyscale
• Warm tones — Orange, red, cream, amber, gold
• Nature greens — Forest, sage, olive, moss

Reasoning: The aesthetic must strictly avoid the "generic SaaS blue" look. Every generated page must feel bespoke and premium.

Hero Section Philosophy (CRITICAL)

The Hero is EVERYTHING. The first impression determines success. Deliver overwhelming visual impact.

Hero Video Priority

The Hero Section Video is the single most important asset.

• Default Strategy: Video-Led Hero
• Resolution Requirement: 1080p (1920×1080) Minimum — do not accept low-resolution or pixelated outputs
• Quality Standard: Prompts must imply high-end cinematography with keywords like: "Shot on Arri Alexa, 35mm lens, f/1.8 shallow depth of field, slow-motion, cinematic lighting, hyper-realistic, 8k resolution"
• Cleanliness (No Placeholders): If using a video hero, DO NOT include a static placeholder <img> or a poster image that might block or delay the video. The video must autoplay seamlessly. Use a solid background color matching the video's tone as the only technical fallback.
• The video must be atmospheric and looping, serving as a powerful backdrop for massive typography.

Hero Patterns

NEVER Do This in the Hero

• Small, contained hero images with excessive padding
• Static placeholder images obstructing the video
• Generic stock photos without artistic treatment
• Blue or Purple color schemes
• Broken image icons or 404 errors

Output Checklist

Before delivering the final result, verify every item:

• spec.md generated (checked for No Blue/Purple)
• Visual assets generated (Hero Video is 1080p & Cinematic)
• HTML/CSS/JS code generated (semantic, responsive, performant)
• Path Integrity Check: All media paths match generated files exactly
• Playwright validation passed (No 404s, no console errors)
• Deployed via deploy tool
• Deployment URL provided to user

Common Mistakes to Avoid

1. Using blue or purple in any element — backgrounds, buttons, links, gradients, borders. This is the #1 violation.
2. Hallucinated filenames — Referencing asset paths that don't match actual generated files.
3. Static poster images over video — The video hero must autoplay without any image overlay blocking it.
4. Low-resolution hero video — Anything below 1080p is unacceptable.
5. Using local dev servers (python -m http.server, npx serve) instead of the deploy tool.
6. Skipping Playwright validation — Always validate before deploying.
7. Generic SaaS aesthetic — Every page must feel bespoke, not templated.
8. Missing onerror handlers on images — All <img> tags need onerror="this.style.display='none'".
9. Excessive external dependencies — Inline critical CSS, minimize third-party libraries.
10. Not providing the deployment URL — The user must always receive the live URL.

File & Output Conventions

• Project directory: Named after the project (lowercase, hyphens for spaces)
• Main HTML file: index.html at the project root
• Images directory: project_name/imgs/
• Videos directory: project_name/videos/
• Spec file: project_name/spec.md
• Paths in HTML: Always relative (e.g., ./videos/hero_loop.mp4, ./imgs/feature.jpg)
• Video format: MP4 preferred, muted autoplay with loop
• Image format: WebP or optimized JPG/PNG, with loading="lazy"

Tool Reference