// Track

Design-System-Driven Frontend with AI

Make AI Build Interfaces That Don't Look AI-Generated

The constraint system that makes AI produce distinctive, on-brand UI instead of generic templates. From extracting design tokens to the master prompt, surgical iteration, and Playwright visual verification — the full production workflow for AI-assisted frontend work.

Recommended: Complete Spec-Driven Development: PRD → Ship first

9 lessons~72 min total

Lessons are shown in recommended order. Complete them in sequence for the best experience — or jump to any lesson.

Lesson 458·7 min read

Why AI Frontends Look Generic

The AI aesthetic trap is a missing-constraint problem — and a design system is the constraint that solves it.

Lesson 459·8 min read

The Design System as Source of Truth

MASTER.md is the contract AI must honour — not a reference it can consult and ignore.

Lesson 460·8 min read

Extracting a Design System from a Reference

Lock the reference first. Then extract every token from computed styles — not visual estimation.

Lesson 461·8 min read

Typography That Survives Dark Mode

Five hard rules: body ≥16px, weight ≥400 (300 banned), headings ≥600, line-height ≥1.5, readable ≥#94A3B8.

Lesson 462·7 min read

Color, Contrast & the Three-Tier Hierarchy

Primary (slate-50/200) → muted (slate-400) → dim (slate-500 labels only) — readable text must be Tier 2 or above.

Lesson 463·8 min read

Component Patterns & the Glass-Card System

The glass-card is the shared language across all five ecosystem properties — one specification, five sites.

Lesson 464·9 min read

The Master Prompt for Rebuilds

Seven parts: Role → Goal → Lock Reference → Design System → Section Breakdown → Visual Accuracy → Close. Skip any part and AI fills the gap with interpretation.

Lesson 465·8 min read

Surgical Iteration — One Feature at a Time

End every prompt with 'Fix only these items. Do not change anything else.' One feature per conversation — context overload degrades quality across everything.

Lesson 466·9 min read

Pre-Delivery — The UI Checklist & Playwright Verification

UI work is not done when the code is written — it is done when the checklist passes and Playwright screenshots confirm the build.