AI Design Workflow: Building Consistent UIs with Design Systems
AI-generated design often looks generic and inconsistent. This workflow fixes it: collect inspiration, build a design system with tokens using Claude Design, tweak components to your taste, then hand the system to Claude Code to build your entire app consistently. Design tokens ensure changes propagate everywhere automatically, eliminating manual fixes.
The Problem: AI Design Looks Generic
AI-designed UIs have a recognizable 'smell'
AI-generated designs are visually identifiable by their weird borders, inconsistent styling, and generic appearance. You can tell when a site was fully designed by AI because it lacks personality and cohesion.
Inconsistency kills professional apps
The speaker's Pluto app had a beautiful landing page but the dashboard looked completely different—buttons had different border radius, spacing varied, and components didn't match. This happened because no design system or tokens were used during design.
Design Systems and Tokens Explained
What is a design system?
A design system is a single source of truth containing UI components, design guidelines, and brand identity (colors, typography, spacing). It ensures every part of your app follows the same rules.
What are design tokens?
Design tokens are variables representing design decisions. Instead of hardcoding 'padding: 16px' and 'color: #0066FF', you use 'spacing-medium' and 'brand-primary'. This abstraction lets you change values globally.
Two key benefits of tokens
Global theming: changing one token value (e.g., dark mode) updates everywhere automatically. Centralized maintenance: if your brand changes primary colors, you update one token instead of manually finding and replacing hex codes across the codebase.
Step 1: Collect Inspiration
Where to find design inspiration
Bookmark design examples from Twitter (follow designers and developers), use Mobbin (has onboarding flows, hero sections, dashboards), or find sites like family.co that match your aesthetic. Save screenshots or sections you like.
Step 2: Generate Design System with Claude Design
Screenshot your inspiration site
Use a browser like Zen that has a screenshot feature to capture the entire page of your inspiration site (e.g., family.co). Download the image.
Prompt Claude Design to create a system
Upload the screenshot to Claude Design and use a prompt like: 'Please create a design system with the attached page. Please create components using the design system and display the tokens. I want this displayed on one page.' Claude will generate colors, typography, spacing, radius, and example components.
What Claude Design generates
The output includes color palettes (primary, secondary, semantic colors like success/warning/danger), typography (font families, sizes for H1-H3, display), spacing and radius values, and example components (buttons, badges, inputs, avatars, dialogs, forms).
AI doesn't capture one-to-one, and that's okay
Claude Design won't perfectly replicate the inspiration site. That's intentional—it gives you a canvas to tweak. AI is good at creating a structured starting point, not pixel-perfect copies.
Step 3: Tweak the Design System
Use markup to request changes
Click 'markup' in Claude Design and draw on elements you want to change. Tell Claude to remove confetti, fix badge alignment, remove logos that look AI-generated, or adjust spacing. Claude will update the design system accordingly.
Request additional components
Ask Claude to generate more components like dialogs, forms, alerts, notifications, checkboxes, radios, dropdowns, and tooltips. Keep tweaking until the design system matches your vision.
Alternative: use Vercel's design.md as a base
If you don't have an inspiration site, use vercel.com/design.md (available for light and dark themes). Copy the markdown, paste it into Claude Design, and ask it to build a design system from the markdown. Then customize it to your taste.
Add your personal sauce
Spend significant time tweaking the design system. If you use AI without personal input, your site will look like everyone else's. Your individual taste and style are what make it unique.
Step 4: Build with Claude Code
Export design system to Claude Code
Click 'share' in Claude Design and select 'send to Claude code.' This generates a prompt that imports your design system into Claude Code via the Claude Design MCP (Model Context Protocol).
Set up your app framework
Create a new SvelteKit project (or your preferred framework) with TypeScript. The speaker uses SvelteKit because it's minimal and clean. Initialize with npm.
Prompt Claude Code to build pages
Paste the design system prompt into Claude Code and add your request: 'Build a landing page, sign-up/sign-in page, and dashboard.' Claude Code will use the design system tokens and components automatically, ensuring consistency across all pages.
Design system is baked into the codebase
Because the design system is embedded in the code, Claude Code uses it by default. You don't need to repeat 'use the design system'—it's already there, so every component follows the same rules.
Consistency across pages is automatic
The landing page, auth page, and dashboard all use the same colors, fonts, spacing, and component styles. Changes to the design system propagate everywhere, eliminating the inconsistency problem from the Pluto app.
Step 5: Enhance with UI Libraries
Add micro-animations and polish
Use UI libraries like BUI to add animations (accordion bounces, drawer slides, tilt effects on hover). Copy the component code and give it to Claude Code with instructions to use your design system for styling.
Combine design system with component libraries
You can add cool animations and interactions from UI libraries while keeping your design system's colors, typography, and spacing. This gives you both consistency and polish.
The Complete Workflow Summary
Five-step design workflow
Collect inspiration from Twitter, Mobbin, or custom sites. Create a design system using Claude Design from a screenshot. Generate and tweak components and tokens to your liking. Build your app with Claude Code, which uses the design system automatically. Optionally enhance with UI libraries for animations.
Why this workflow solves the AI design problem
By creating a structured design system first and embedding it in your codebase, you ensure every page and component follows the same rules. Changes propagate globally, and you avoid the inconsistency and generic look of pure AI design.
Notable quotes
You can tell if it's just fully been designed with AI because it has that smell, it has those weird borders. — Ras Mic
Tokens make it incredibly easy to introduce a dark mode. You simply change the underlying token value and the update propagates everywhere automatically. — Ras Mic
If you use AI to design the entire thing, no sauce or input from you, your site's going to look like everybody else's. — Ras Mic
Action items
- Collect design inspiration from Twitter, Mobbin, or a site like family.co that matches your aesthetic
- Screenshot your inspiration site and upload it to Claude Design
- Prompt Claude Design to create a design system with components and tokens
- Use markup to tweak the design system: remove AI-looking elements, fix alignment, adjust colors and spacing
- Request additional components (dialogs, forms, alerts) until your design system is complete
- Create a new SvelteKit (or preferred framework) project with TypeScript
- Export your design system from Claude Design and send it to Claude Code
- Prompt Claude Code to build your landing page, auth pages, and dashboard
- Review the generated pages for consistency and make adjustments via Claude Code
- Optionally add micro-animations from UI libraries like BUI while maintaining your design system styling