Workshop

Designing with AI

We'll design an admin dashboard from scratch — together, live, using AI to explore more ideas than any one person could alone.

Define→ Generate→ Configure→ Rate→ Evolve

Mindset

The Bicycle Shop Advantage

Wright Brothers
  • Bicycle mechanics
  • Homemade wind tunnel
  • Hundreds of wing shapes tested
  • Cheap materials, fast cycles
  • Flew first
Samuel Langley
  • $50K government grant
  • Smithsonian scientist
  • One design, over-engineered
  • Years of planning
  • Crashed into the Potomac. Twice.
AI gives you a wind tunnel. Test hundreds of ideas before lunch.

Today

Admin Dashboard

Stats, charts, tables, nav, workflows. A real SaaS analytics dashboard — not a toy.

dashboard.app
Dashboard
Users
Products
Revenue
Settings
12.4K
Users
$48K
Revenue
89%
Uptime
342
Orders

Plan

90 Minutes, Five Phases

15 min
Define
Brain dump into the shared doc. Who uses this? What data matters?
20 min
Generate
Feed the brief to AI. Get 9+ radically different designs back.
15 min
Configure
Open the Design Lab. Tune colors, spacing, layout — live.
15 min
Rate
Score each design in the Gallery. Tag your favorites and kills.
20 min
Evolve
Export feedback to AI. New round of designs. Repeat.

Phase 1

Define

Before AI touches anything, answer four questions.

Product

  • What does the app do?
  • Who's the user?
  • One key metric?
  • What can they act on?

Aesthetic

  • Dark, light, or both?
  • Data-dense or spacious?
  • Playful or serious?
  • Brand colors?
// example brief
Name: "CloudMetrics"
Users: "Product managers, growth teams"
Data: "MRR, churn, active users, feature usage"
Vibe: "Premium, trustworthy, data-forward"

Phase 2

Generate

Pick 3 aesthetic families. AI makes 3 variations of each.

A: Warm Editorial

Serif type, cream bg, magazine feel

B: Deep Forest

Dark bg, muted greens, monospace

C: Soft Terracotta

Clean sans-serif, warm neutrals, airy

3 families × 3 variations = 9 designs. Each is a standalone HTML file.

Tools

Macro vs. Micro

Two levels of design exploration.

Macro — Design Gallery

Whole-layout comparison

Browse all 9 designs full-screen. Swap between them instantly. Rate each one. Spider chart analysis. Export feedback as an AI prompt.

Micro — Design Lab

Tuning one design

20+ themes, sidebar position, spacing, fonts, border styles, colors — all adjusted live with a floating config panel. Zero reload.

Phase 4

Rate & Compare

Score each design across 5 dimensions in the Gallery.

Keyboard-driven

1-5 star rating, auto-advances
F favorite   S ship it   N needs work
Rate all 9 in under 3 minutes.

Five axes

  • Utility — does it work?
  • Delight — does it feel good?
  • Speed — does it feel fast?
  • Discovery — can users explore?
  • Innovation — is it fresh?

Phase 5

Evolve

Your ratings become the next prompt.

// auto-generated from your ratings

LOVED (more like these):
  A1 (5★) "Keep the warm serif type + cream bg"
  C2 (4★) "Clean and airy. Needs denser data tables."

FIX (iterate):
  B2 (3★) "Too dark. Lighten the greens."

KILL (avoid):
  B3 (1★) "Too busy. Buried the key metrics."
Gen 1 → Feedback → Gen 2 → Ship

Let's go

design-workshop.pages.dev

Open the link. Brain dump into the shared doc.
We'll generate the first round together.

Be the Wright Brothers.
Build the wind tunnel. Test everything. Iterate fast.