A comprehensive guide to creating professional UI designs using AI with a systematic workflow.
Reference Video: YouTube Tutorial
Overview
The key is treating AI like a “junior developer” – giving it systematic steps to follow.
Workflow: Reference Collection → Theme Extraction → Component Creation → Page Implementation
Part 1: One-Time Setup
These tools only need to be installed once on your machine.
1.1 Install pnpm (Package Manager)
macOS (Homebrew):
brew install pnpmOr via npm:
npm install -g pnpmVerify installation:
pnpm --version1.2 Install Playwright (Browser Automation)
Playwright allows AI to “see” and interact with websites.
Global installation:
npm install -g playwrightInstall browsers (Chromium, Firefox, WebKit):
npx playwright install1.3 Add Playwright MCP Globally (Recommended)
MCP (Model Context Protocol) is the bridge that lets Claude Code use Playwright.
Add for all projects:
claude mcp add playwright --scope user -- npx @playwright/mcp@latestVerify:
claude mcp listPart 2: New Project Setup
Repeat these steps for each new project.
2.1 Create Next.js Project
pnpm create next-app my-app
cd my-app2.2 Start Development Server
pnpm devOpen http://localhost:3000 to verify.
Tip: Use two terminals – one for
pnpm dev, one forclaude
2.3 Launch Claude Code
claudePart 3: Theme Extraction
3.1 Crawl Reference Site
In Claude Code, use this prompt:
“I want to create a new website using the theme from https://linear.app. Use Playwright MCP to crawl this website and return the theme data as JSON. Include: color scheme, typography, borders, shadows, and component styles.”
3.2 Save Theme JSON
The crawled theme will include:
- colors: primary, background, text, border
- typography: fontFamily, fontSize, fontWeight
- borders: radius (sm, md, lg, xl)
- shadows: low, medium, high
- components: button, card, input styles
Part 4: Component Library
4.1 Create Base Components
Prompt Claude Code:
“Here’s the theme JSON: [paste JSON]
Based on this theme:
1. Create a /components demo page
2. Build these components: Button, Input, Card, Badge
3. Make them reusable across the project”
4.2 Create Additional Components
“Add these common components:
– Navbar (logo, menu links, CTA button)
– Footer (link sections, copyright)
– Hero Section (large title, description, CTA)
– Carousel/SliderAdd demos to the /components page.”
Part 5: Set CLAUDE.md Rules
Force Claude to always use your component library:
“Document our components in CLAUDE.md with these rules:
1. Always use components from /components folder first
2. Ask before creating new components
3. Always follow the theme JSON for colors
4. Include component list and usage examples”
Part 6: Build Pages
6.1 Create Landing Page
“Create a landing page for my YouTube channel.
Sections needed:
– Hero: channel name, intro, subscribe button
– Popular Videos: 3-4 video cards
– About the Channel
– Subscribe CTA
– FooterImportant: Use components from /components folder.”
Playwright Actions Reference
Playwright acts as Claude Code’s “eyes”:
| Action | Purpose |
|---|---|
browser_navigate |
Visit a website |
browser_take_screenshot |
Capture screen (design review) |
browser_evaluate |
Run JS (extract CSS, scroll) |
browser_click |
Click elements (test buttons) |
browser_snapshot |
Check accessibility tree |
Server Requirements
| Scenario | Server Needed? |
|---|---|
| Crawl external site (linear.app) | No |
| Test localhost:3000 | Yes (pnpm dev) |
| Test production build | Yes (pnpm build && pnpm start) |
| Test deployed site (Vercel) | No (already running) |
Why? Playwright opens a real browser that needs a URL to connect to. Without a server, there’s nothing to load.
Quick Reference
One-Time Setup (Already Done)
| Tool | Scope | Reinstall? |
|---|---|---|
| pnpm | Global | No |
| Playwright | Global | No |
| Playwright browsers | Global cache | No |
| Playwright MCP | User scope | No |
Per-Project Checklist
- Create Next.js project (
pnpm create next-app) - Start dev server (
pnpm dev) - Launch Claude Code (
claude) - Crawl reference site for theme
- Save theme JSON
- Create base components (Button, Input, Card, Badge)
- Create layout components (Navbar, Footer, Hero)
- Set up CLAUDE.md rules
- Build pages
Key Principles
- Treat AI like a junior dev – Give systematic, step-by-step instructions
- Components first – Build reusable components before pages
- Centralize theme – Manage design consistency via JSON
- Set rules – Use CLAUDE.md to enforce component reuse
- Visual verification – Use Playwright to review and iterate
Resources
- Original Video: YouTube
- Playwright Docs: playwright.dev
- pnpm Docs: pnpm.io
- Playwright MCP: GitHub
Related
- Claude Code UI Design Hub – Overview of all UI design guides
