Phase 1 — Senior Project Manager Analysis. THIS SHOULD BE THE FIRST TOOL CALLED.

Analyzes the user's project description and produces a structured scope document. Identifies: project type, industry, tone, target audience, pages needed, complexity, features. Generates clarifying questions if the request is ambiguous.

Returns: project scope, multi-page structure, clarifying questions, risk assessment.

IMPORTANT: Always call this FIRST before any other tool. It sets up the entire project context.

Phase 2 — System Analyst / Solutions Architect.

Takes the project scope (from analyze_project) and generates:

• Technology stack decisions (framework, styling, build tool, routing)

• Component architecture map per page (which UIverse components each section needs)

• File structure for the chosen framework

• Interactivity plan (scroll animations, hover effects, form behaviors)

• Multi-page routing strategy (separate HTML files for vanilla, React Router, file-based for Next/Nuxt)

IMPORTANT: Run analyze_project first. This tool uses the stored project scope.

Phase 3 — Generate a complete, production-ready design system based on business context.

Returns: color palette (primary, secondary, accent, neutrals, semantic), typography (with Google Fonts link), spacing (8px grid), shadows, border radius, transitions — all as CSS custom properties.

The theme is NEVER randomly dark or light — it's chosen based on industry (fintech → light + navy, gaming → dark + neon, etc.). Colors avoid the AI-telltale purple-blue gradient.

Call this AFTER analyze_project and plan_architecture, BEFORE select_components.

Phase 3.5 — Select and adapt animated UI components for your framework and design system.

Returns: production-ready component code (HTML/CSS or React/Vue/Angular/Svelte), a locked Design Token Registry (ensuring every button looks the same across the page), and accessibility notes.

61 components across 13 categories × 5 styles (flat, neumorphic, glassmorphic, gradient, animated). Components have HIGH animation preference — every component has hover effects, entrance animations, focus rings, and micro-interactions.

IMPORTANT: Run design_theme first to generate your design tokens.

Presets: "all" (13 components), "landing" (button + card + nav + badge), "form" (input + checkbox + toggle + radio + buttons), "dashboard" (10 components), "minimal" (button + card + input + nav).

Phase 4 — Generate a CSS background pattern that matches your industry and theme.

Returns: production-ready CSS for subtle, professional background patterns.

Pattern types: "geometric" (dot grids, line grids — tech/corporate), "gradient" (soft mesh gradients — startups/creative), "noise" (grain texture — luxury/editorial), "organic" (wave dividers — health/education), "blob" (animated shapes — creative/SaaS).

Pattern is auto-selected based on industry. All patterns are barely noticeable — atmosphere, not distraction.

IMPORTANT: Run design_theme first so colors match your palette.

Phase 5 — Generate the complete project directory structure and base files.

Returns: all project files (CSS reset, variables, animations, base styles, page templates, routing) ready for the chosen framework.

Generates:

• CSS foundation: variables.css (from design tokens), reset.css, animations.css, base.css, layout.css

• JavaScript: animations.js (Intersection Observer), main.js

• Framework-specific: routing, page components, config files

• Project files: package.json, README.md, .gitignore

For vanilla HTML: separate .html files per page with inter-page navigation. For React/Vue/Angular/Svelte/Next/Nuxt/Astro: proper routing setup with page components.

IMPORTANT: Run design_theme first so the CSS variables file is populated with real tokens.

Phase 6 — Generate complete, production-ready code for all pages.

Assembles all page sections (hero, features, pricing, testimonials, footer, etc.) into complete pages with:

• Real UI components from the 61-component library (not generic code)

• All CSS using design token variables (zero hardcoded colors)

• Scroll entrance animations on every section

• Rich hover/focus/active states on all interactive elements

• Responsive design (mobile-first with breakpoints)

• Accessibility attributes (ARIA, keyboard nav, focus rings)

• Navigation linking between all pages

For vanilla HTML: generates complete HTML documents per page. For frameworks: generates framework-specific page components.

Use 'pageSlug' to generate one page at a time (e.g. "index", "about") to avoid output truncation on multi-page sites.

IMPORTANT: Run design_theme first. Optionally run scaffold_project to get the project structure.

Phase 7 — Project Manager QA Review.

Analyzes generated code against the quality checklist from CLAUDE.md. Catches:

• AI-telltale patterns (purple-blue gradients, generic layouts)

• Hardcoded colors (must use CSS variables)

• Missing accessibility (ARIA, labels, keyboard nav, focus states)

• Missing animations (scroll entrance, hover effects, transitions)

• Responsive issues (missing media queries, viewport meta)

• Semantic HTML issues (div soup, missing landmarks)

• Single-page anti-patterns (JS show/hide instead of real pages)

• Pure black/white usage (should use tinted neutrals)

Returns: issue list with severity, score (0-100), pass/fail status, and fix suggestions.

Call this LAST to validate the generated output before delivering to the user.

Phase 3.2 — Fetch REAL animated UI components from UIverse.io's open-source library (4,300+ components on GitHub).

This makes the MCP server HYBRID — it goes beyond the built-in 61 components and fetches fresh, community-built components directly from UIverse's GitHub repository (uiverse-io/galaxy).

Returns: actual HTML/CSS code for each component, animation scores, and source URLs.

Components are ranked by animation richness — the most animated components (with @keyframes, transitions, hover effects) are returned first.

Use this to discover new, unique components beyond the built-in library. Combine with select_components for the best of both worlds.

Categories: buttons, cards, loaders, inputs, checkboxes, toggles, radio-buttons, forms, dropdowns, navigation, tooltips, badges, modals.

Phase 6.5 — SEO & Digital Marketing Audit.

Analyzes generated HTML for SEO optimization and digital marketing readiness. Checks 50+ factors across 10 categories: meta tags, heading structure, images, performance, accessibility, content quality, technical SEO, mobile optimization, social media readiness, and link structure.

Returns: SEO score (0-100), letter grade (A-F), detailed issue list with severity + fix instructions + code snippets, and top 5 priority recommendations.

Issues feed back into the pipeline — if the score is too low, re-run code generation with the suggested fixes.

Call this AFTER generate_full_page, BEFORE review_output.

Phase 6.7 — Design Consistency Checker for multi-page websites.

Validates that ALL pages of a website look like they were designed by ONE designer. Checks: header/footer identity across pages, typography consistency, color system adherence, spacing uniformity, component style consistency, layout patterns, animation usage, and navigation completeness.

Returns: consistency score (0-100), per-page report, and detailed issues with affected pages listed.

CRITICAL for multi-page sites — ensures the header, footer, and design language stay identical across every page. This is what separates professional templates from amateur ones.

Call this AFTER generating all pages with generate_full_page.

Phase 5.5 — Resolve real images for every section of the website.

3-Layer Image System: Layer 1: Unsplash API (keyword-matched HD stock photos — needs UNSPLASH_ACCESS_KEY env var) Layer 2: Pexels API (fallback stock photos — needs PEXELS_API_KEY env var) Layer 3: Lorem Picsum (always works, zero config — real photos from Unsplash, random but consistent via seed) Icons: Lucide CDN (always works, zero config — 1,500+ SVG icons via CDN URL)

Returns: ready-to-use image URLs per section (hero photos, team portraits, feature icons, testimonial avatars, gallery shots, product images) — all matched to the project industry.

Works WITHOUT any API keys — Lorem Picsum + Lucide icons provide real images and icons out of the box. Add Unsplash/Pexels keys for keyword-matched results.

IMAGE TYPES PER SECTION: hero → full-width landscape photo | features → SVG icons | team → portrait photos testimonials → avatar photos | about → company/office photo | services → SVG icons pricing → plan icons | gallery → multiple photos | product-grid → product photos blog → cover photos | how-it-works → step icons | stats → stat icons

Call this AFTER scaffold_project, BEFORE or alongside generate_full_page.

Final Phase — Generate a Build Manifest / Component Report as a Markdown file.

Documents EVERY component used on EVERY page of the website, including:

• Per-page section breakdown with component listings

• UIverse GitHub source URLs for every component

• Built-in library references with browse links

• Design token summary (colors, fonts, theme)

• SEO audit score, consistency score, QA review score

• Complete pipeline metadata

THIS IS THE LAST TOOL TO CALL. Run it at the end of every pipeline to generate the final report.

The Markdown file acts as a project handoff document — it tells the developer exactly what was used, where it came from, and links to every component source.

Industry-aware content generator — produces structured section copy (headlines, features, pricing, testimonials, etc.) tailored to industry and audience. No API key needed.

Auto-patches HTML based on SEO audit results — adds missing meta tags, alt text, Open Graph, canonical links, heading hierarchy, lazy loading, and more. No API key needed.

Full orchestration pipeline — chains all 13 tools end-to-end to produce a complete website from a single description. Includes automatic SEO/QA retry loop.