AI-Powered Web Design Process

Strategy for WiderWings products (MedSchools.ai, CollegeDojo, Hedge, etc.)

Created: 2026-03-02
Source: Two YouTube videos on AI-based web design (transcripts in Second Brain)

The Problem

Our current process: Henry or Bob describes what to build → agent writes code → we eyeball it → iterate via chat. This is slow, inconsistent, and produces generic "AI vibe-coded" output.

The Solution: 5-Layer Design System

Combining insights from both videos, here's our new process:

Layer 1: Project DNA File (CLAUDE.md / AGENTS.md)

What: A per-project design config file that every agent reads before touching frontend code.

Why: Video 1's biggest insight — a .claude.md file acts as a persistent system prompt. Without it, every agent starts from zero and makes different design choices.

Our Implementation:
Every product repo gets a DESIGN.md that includes:

Brand colors (exact hex values)
Typography (font families, sizes, weights)
Component library preference (shadcn/ui, etc.)
Tone/voice for copy
Screenshot workflow rules
Link to brand assets folder

Action: Create DESIGN.md templates for MedSchools.ai and Hedge immediately. Any agent touching frontend code MUST read this first.

Layer 2: Frontend Design Skill (Mandatory)

What: The frontend-design-ultimate skill we already have installed.

Why: Video 1 showed a dramatic quality jump just from invoking this skill — transforms generic output into professional, modern designs. We already have this skill but we're not consistently using it.

Our Rule:

Every frontend task spawned to any agent MUST include: "Invoke the frontend-design-ultimate skill before writing any frontend code."

This goes in the task description template, not just memory. Non-negotiable.

Layer 3: Screenshot Review Loop

What: Automated visual QA where the agent screenshots what it built, compares to the target, and self-corrects.

Why: Video 1 showed this closing the gap from ~60% to ~90% quality. The agent literally uses its eyes to check its own work.

Our Implementation:

Use Puppeteer (already available) or Playwright (already installed for MedSchools QA)
Agent takes screenshot after building → compares to reference → fixes mismatches → repeat 2x
Exception: Skip screenshot loop for animated/dynamic elements (they cause infinite correction loops)
Store screenshots in /tmp/design-screenshots/ (auto-cleanup)

Config for DESIGN.md:

## Screenshot Workflow
- After building any page/component, take a full-page screenshot
- Compare against reference (if provided) or evaluate against brand guidelines
- Do 2 rounds of screenshot-review-fix
- Skip screenshot loop for animations/dynamic backgrounds
- Store in /tmp/design-screenshots/ (will be cleaned up)

Layer 4: Reference-Driven Design (Clone → Customize)

What: Instead of describing what we want from scratch, we give the agent a reference website screenshot + its CSS/styles, then tell it to clone and rebrand.

Why: This is the single highest-leverage hack from Video 1. Starting from "build me a landing page" = mediocre. Starting from "clone this specific page, then apply our brand" = professional.

Our Process:

Find inspiration on Dribbble, Godly.website, Awwwards, or competitors
Full-page screenshot (F12 → Ctrl+Shift+P → "Capture full size screenshot")
Copy the CSS/styles from the reference site
Give agent: screenshot + styles + our brand assets → "Clone this, then apply our branding"
Screenshot loop kicks in to ensure fidelity

Inspiration Sources:

Source	URL	Best For
Dribbble	dribbble.com	UI components, dashboards
Godly	godly.website	Full landing pages
Awwwards	awwwards.com	Premium/award-winning sites
21st.dev	21st.dev	Individual components (buttons, backgrounds, animations)
Competitors	Direct URLs	Industry-specific patterns

When to Use:

New product launches (find 2-3 reference sites first)
Redesigns (screenshot the "before" + the "target")
New features (find best-in-class examples of that feature)

Layer 5: Component-Level Polish (21st.dev)

What: After the page is 80% done, swap in premium individual components from 21st.dev or similar libraries.

Why: Video 1's "final hack" — full-page cloning gets you the layout and structure, but individual component swaps (buttons, backgrounds, card effects, animations) add the polish that makes it feel custom, not templated.

Our Process:

Build the full page first (Layers 1-4)
Identify 2-3 components that could be elevated (hero CTA button, background, card hover effects)
Go to 21st.dev → find the component → copy the prompt/code
Tell agent: "Replace the hero button with this component: [paste code]"
Important: For animated components, tell agent to skip screenshot comparison

Rule of Thumb: Don't overdo it. 2-3 premium components per page max. More than that = visual noise.

Agent Architecture (from Video 2)

Video 2 covered three patterns we should apply to our design workflow:

Single Agent (Current)

What we do now — one agent handles everything. Works for small tweaks but unreliable for complex pages.

Sequential Agent (Recommended for Design)

Our design pipeline should be sequential:

Agent 1: Design Researcher
  → Finds reference sites, takes screenshots, extracts styles
  → Output: Reference package (screenshots + CSS + brand assets)

Agent 2: Builder  
  → Takes reference package → clones and customizes
  → Uses frontend-design-ultimate skill + screenshot loop
  → Output: Working page on localhost

Agent 3: Polish Agent
  → Takes working page → adds premium components from 21st.dev
  → Handles animations, micro-interactions, responsive tweaks
  → Output: Production-ready page

Agent 4: QA Agent
  → Screenshots final result on mobile + desktop
  → Checks brand consistency, accessibility, performance
  → Output: QA report + final approval or revision notes

Each agent's output feeds into the next. Predictable, reliable, high quality.

Parallel Agent (For Multi-Page Projects)

When building multiple pages (e.g., MedSchools.ai has landing, dashboard, blog, directory):

Spawn one builder agent per page (parallel)
All agents share the same DESIGN.md and brand assets
Final aggregator agent ensures consistency across pages

Deployment Pipeline

From Video 1's GitHub → Vercel flow (we already use this):

Claude Code (local dev) → GitHub (version control) → Vercel (auto-deploy)

Key Rules:

Always test on localhost first
Never auto-push to GitHub — agent must ask permission
Vercel auto-deploys from GitHub (already configured for our projects)
Keep sensitive info out of repo (use .env, .gitignore)

Implementation Checklist

Immediate (This Week)

Create DESIGN.md for MedSchools.ai repo with brand colors, typography, component rules
Create DESIGN.md for Hedge repo
Create brand_assets/ folder in each repo with logos + brand guidelines
Update task templates to include "Use frontend-design-ultimate skill" requirement
Set up Puppeteer screenshot workflow in both projects

Short-Term (This Month)

Build a reference library: Screenshot 5 competitor/inspiration sites for MedSchools.ai
Build a reference library: Screenshot 5 trading platform references for Hedge
Create a 21st.dev component shortlist (best buttons, backgrounds, cards for our use cases)
Test sequential agent pipeline on one MedSchools.ai page redesign

Ongoing

Every new page starts with a reference screenshot (no more "build me a page" from scratch)
Every design task includes DESIGN.md in context
Screenshot QA loop on every frontend change
Monthly review of design quality across products

Key Takeaways

Never build from scratch — always start with a reference site clone
Brand assets are non-negotiable — logo + guidelines in every repo
The frontend-design skill transforms output quality — always invoke it
Screenshot loops close the quality gap — but skip them for animations
Component-level polish is the final 10% — 21st.dev for premium feel
Sequential agents > single agent for design work — predictable pipeline
Test locally, deploy deliberately — never auto-push to production

Strategy: AI-Powered Web Design Process (5-Layer System)