PRD: Design Pipeline Tool (design.widerwings.com)

Status: P2 — Parked for post-MedSchools.ai launch
Owner: Bob
Created: 2026-03-02
Origin: Henry's idea based on AI design lifecycle research

---

Problem

Building professional web pages with AI requires a multi-step process (reference gathering → design system creation → build → QA review). Currently this is manual and inconsistent. Each design task requires the operator to remember and execute all steps correctly.

Vision

A guided web app that takes a plain-English description of what needs to be designed and produces a production-ready page through an automated pipeline.

URL: design.widerwings.com
Users: Internal (WiderWings team) initially, potential external product later

---

User Flow

Step 1: Project Brief (Q&A Session)

• User describes what they need: "Landing page for MedSchools.ai interview prep feature"
• AI asks 5-8 clarifying questions:
  • What's the goal of this page? (conversions, info, signup)
  • Who's the audience? (pre-med students, parents, advisors)
  • What tone? (professional, friendly, urgent, calm)
  • Existing brand assets? (upload logo, guidelines)
  • Any must-have sections? (hero, testimonials, pricing, FAQ)
  • Competitor URLs to reference?
• Output: Structured project brief (JSON + readable summary)

Step 2: Inspiration Gallery

• System scrapes/searches inspiration sources:
  • Dribbble (UI components, layouts)
  • Godly.website (full landing pages)
  • Awwwards (premium/award-winning)
  • 21st.dev (individual components)
  • Direct competitor URLs (if provided)
• Presents a curated gallery of 10-15 reference designs
• User selects 2-3 favorites ("I like this layout" / "I like these colors")
• Can drill into components: "Use the hero from Site A but the testimonials from Site B"

Step 3: Design System Generation

• Based on brand assets + selected inspiration, generates:
  • Color palette (primary, secondary, accent, backgrounds, text)
  • Typography scale (headings, body, captions — with Google Fonts recommendations)
  • Spacing system (consistent padding/margin scale)
  • Component style guide (button styles, card styles, input styles)
  • Dark/light mode variants
• User reviews and can tweak any element
• Output: DESIGN.md file (reusable across projects)

Step 4: Build

• Invokes frontend-design-ultimate skill
• Generates full page using:
  • Project brief (content/structure)
  • Selected reference screenshots (layout inspiration)
  • Design system (styling)
  • Brand assets (logos, images)
• Builds in SvelteKit or Next.js (configurable)
• Deploys to preview URL immediately

Step 5: Screenshot Review Loop

• Takes full-page screenshot of built page
• Side-by-side comparison with selected references
• AI identifies mismatches and auto-fixes (2 rounds)
• Presents before/after to user

Step 6: Component Polish

• Suggests 2-3 premium component upgrades from 21st.dev
• User approves/rejects each suggestion
• Swaps in selected components
• Final screenshot review

Step 7: Delivery

• User approves final design
• Options:
  • Download as zip (HTML/CSS/JS)
  • Push to GitHub repo
  • Deploy to Vercel (auto-connect)
  • Export design system as Figma tokens (stretch)
• Design system saved for future use

---

Technical Architecture

Frontend

• SvelteKit (consistent with our stack)
• Tailwind CSS + shadcn-svelte
• Real-time preview panel (iframe with live reload)
• Gallery/mood board component for inspiration selection
• Side-by-side comparison view for QA

Backend

• Node.js/Python API
• Puppeteer/Playwright for:
  • Scraping inspiration sites (screenshots + styles)
  • Screenshot review loop
• LLM integration (Claude API) for:
  • Q&A session
  • Design system generation
  • Code generation
  • QA analysis
• File storage (Supabase Storage or S3) for screenshots, assets, generated code

Integrations

• Dribbble API (or scraping fallback)
• Godly.website (scrape — no API)
• Awwwards (scrape — no API)
• 21st.dev (component library — copy prompts)
• GitHub API (repo creation, push)
• Vercel API (deploy)
• Google Fonts API (typography recommendations)

Database (Supabase)

• design_projects — project briefs, status, owner
• design_inspirations — saved reference screenshots + URLs
• design_systems — generated color/font/spacing configs
• design_versions — each iteration with screenshots
• design_components — component library selections

---

MVP Scope (Phase 1)

In:

• Q&A brief wizard (5-8 questions)
• Manual URL input for inspiration (user pastes URLs, system screenshots them)
• Basic design system generator (colors + fonts from brand assets)
• Single page builder (SvelteKit output)
• Screenshot QA loop (2 rounds)
• Download as zip

Out (Phase 2+):

• Automated Dribbble/Godly/Awwwards scraping
• 21st.dev component suggestions
• Vercel auto-deploy
• Multi-page projects
• Figma export
• Team collaboration
• Template library

---

Success Metrics

• Time to first design: < 30 minutes (vs current 2-4 hours)
• Design quality: Passes "would I show this to a client?" test on first attempt
• Reusability: Design systems created once, used across multiple pages
• Adoption: Used for every new page across all WiderWings products

---

Timeline Estimate

Phase	Scope	Effort	Trigger
Phase 1 (MVP)	Brief → Build → QA	2-3 weeks	After MedSchools.ai launch
Phase 2	Auto-scraping, component polish, deploy	2 weeks	After 10 internal uses
Phase 3	External product, templates, teams	TBD	If demand exists

---

Open Questions

1. Should inspiration scraping be real-time or pre-cached? (Rate limits, speed)
2. SvelteKit-only output or also support Next.js/plain HTML?
3. Should design systems be shareable across the team (Bob, Kai, etc.)?
4. Pricing model if we productize? (Per design? Monthly? Free tier?)

---

Related

• Design process spec: company/specs/AI_DESIGN_PROCESS.md
• Video transcripts: Second Brain (tagged "ai-based web design")
• Frontend skill: ~/clawd/skills/frontend-design-ultimate/