WiderWings Auto-Design Pipeline v1.1

Owner: Bob Wings
Date: March 7, 2026 (updated from v1.0)
Status: Active

---

Overview

A 5-step pipeline that takes a plain-English design request and produces a production-ready page. Single-agent build with design review — no multi-agent handoff overhead.

Key insight: Quality comes from strong inputs (DESIGN.md, references, generated images), not from splitting work across agents. One agent with full context beats three agents losing context at each handoff.

Roles

Role	Agent	When
Brief writer	PM (Kevin/Liz) or Bob	Kick-off
Builder	Kai (drives the whole build)	Steps 1-4
Reviewer	Sam (design review)	Step 5, after build
Images	Kai, Maya, or Sam (whoever's building)	Step 3

Kai owns the pipeline. He reads the DESIGN.md, gathers inspiration, generates images, builds the page, and self-reviews before handing to Sam.

---

The Pipeline

Step 1: Brief + DESIGN.md

Owner: PM or Bob writes a 1-paragraph brief. Kai reads the project's DESIGN.md before starting.

DESIGN.md is mandatory. Every project repo must have one. No frontend work starts without it.

What goes in the brief:

• What page/component is needed
• Who it's for (audience)
• What it should feel like (reference any inspiration)
• Any must-have sections or content
• Where to put it (route path)

Step 2: Inspiration (2-3 references)

Owner: Kai

Find 2-3 reference sites that match the desired aesthetic:

• Godly.website — Full landing pages
• Awwwards — Award-winning sites
• Dribbble — UI components
• Competitors — Industry-specific patterns

Take mental note of what works: layout structure, typography, whitespace, section rhythm.

Rule: Never build from scratch. Always start with references.

Step 3: Generate Images (Nano Banana 2)

Owner: Kai (or whoever is building)

python3 ~/clawd/skills/image-pipeline/scripts/generate.py \
  --prompt "description matching brand" \
  --purpose blog-hero \
  --project medschools

Purposes: og, blog-hero, thumbnail, avatar, icon, full

Rules:

• Generate 1-2 hero options
• All images must match brand palette from DESIGN.md
• Images auto-upload to Supabase Storage with public URLs

Step 4: Build

Owner: Kai

Build the page in one shot with full context: brief + DESIGN.md + references + generated images.

Before writing code, verify:

• Read DESIGN.md for brand rules
• Reviewed reference sites
• Generated any needed images
• Know the target route path

Anti-AI-Slop Checklist (non-negotiable):

• Typography is distinctive (not Inter/Roboto/Arial for headlines)
• Background has atmosphere (not solid white/gray everywhere)
• Color palette follows 70-20-10 rule
• At least one memorable visual element
• Varied section rhythm (not every section looks the same)
• Generous whitespace between sections (py-20+)
• Mobile-responsive (works at 375px)

After building:

• Run pnpm build to verify compilation
• Self-review: mentally check the anti-slop list above

Step 5: Design Review

Owner: Sam

After Kai builds, Sam reviews:

1. Screenshot at desktop (1440px) and mobile (375px)
2. Check brand consistency against DESIGN.md
3. Identify gaps: spacing, color, typography, hierarchy
4. Provide specific fixes (not vague "looks off")
5. Max 2 rounds of review. Then ship.

Skip for: Small fixes, hotfixes, non-visual changes.

---

When to Use Each Level

Scenario	Steps	Agents
New page / redesign	All 5 steps	Kai builds, Sam reviews
Component update	Steps 4-5	Kai builds, Sam optional
Quick fix / hotfix	Step 4 only	Kai, no review needed
New images only	Step 3 only	Whoever needs them

---

Project DESIGN.md (Required)

Every product repo must have a DESIGN.md at the root with:

• Brand colors (exact hex values)
• Typography (font families, sizes, weights)
• Component patterns (buttons, cards, sections)
• Tone/voice
• Anti-patterns (what NOT to do)
• Image asset locations

Current DESIGN.md files:

• ✅ MedSchools.ai: apps/medschools-ai/DESIGN.md
• ❌ Hedge: needs creation

---

What Makes This Work

The quality comes from 4 things, not from the number of agents:

1. Strong DESIGN.md — Specific rules, not vague guidelines
2. Reference screenshots — Never build from scratch
3. Nano Banana 2 images — Custom AI images, not stock photos
4. Anti-slop checklist — Forces intentional design choices

Get these 4 right and a single agent produces professional output. Get them wrong and 10 agents won't fix it.