Video summary

Building beautiful UI using AI (My design workflow)

Main summary

Key takeaways

Technology

Main idea

The video presents a repeatable workflow for building consistent, good-looking UI with AI. While AI models make it easier to generate general UI, they often produce inconsistent design unless you start with a structured foundation—something the creator felt was missing in an example app they previously shipped.

Key problem: AI-only design becomes inconsistent

  • Auto-generated UI can look “AI-ish,” such as:
    • weird borders
    • “smell” (unclear phrasing in the source, but refers to off/odd visual details)
    • inconsistent rounding/styles
  • Example: the creator’s app has a different look between the home/landing page and the dashboard/chat screens because they did not use a design system or design tokens.

Core concepts: Design systems + design tokens

Design system

A single source of truth for UI, including:

  • UI components
  • design guidelines
  • brand identity (colors, copy, etc.)

Design tokens

Variables representing specific design decisions (e.g., spacing medium or color brand primary) instead of hardcoded pixels/hex values.

Benefits highlighted:

  • Global theming: changing token values updates the whole UI (e.g., easier dark mode).
  • Centralized maintenance: brand/color/radius changes don’t require manual searches for hardcoded values across the codebase.

Tutorial/workflow steps (“design workflow”)

Step 1: Collect inspiration (Inspo sourcing)

Suggested sources:

  • Twitter: bookmark UI pages from dev/designer/AI accounts.
  • GatherOS: organize bookmarks.
  • Mobbin: reference UI patterns (onboarding, hero sections, dashboards).
  • A key inspiration source used later: family.co, admired for a “fun/cute but tasteful” style.

Step 2: Create a design system using Claude Design (from a reference)

Process:

  • Capture a full-page screenshot (using Zen Browser’s screenshot feature).
  • Upload to Claude Design and prompt it to:
    • create a design system from the attached page
    • generate components using that design system
    • display tokens
    • show everything on a single page

Step 3: Review + tweak the generated system

What the generated output includes:

  • Color palette and shades
  • Semantic colors (success/warning/danger/info)
  • Typography (H1/H2/H3 sizes)
  • Spacing
  • Radius
  • Component examples (e.g., buttons, badges, inputs, avatars)

Key emphasis:

  • AI is not expected to match the screenshot perfectly; it’s treated as a starting canvas that you edit.

Editing approach:

  • Use markup/annotation on the design system canvas.
  • Ask Claude Design to:
    • remove specific elements (e.g., “confetti” dots, unwanted logo)
    • fix alignment in components (e.g., badges)

Goal:

  • Spend time refining the design system so the rest of the app remains consistent.

Step 4: Add more missing components

After the initial system is generated, Claude Design is prompted to add more UI primitives, such as:

  • dialogue component
  • form component
  • alerts/notifications
  • checkboxes/radios
  • dropdowns/tooltips/steps

Then the workflow repeats tweaks until the system feels right.

Step 5: Build the actual app with Claude Code using the design system

Setup and implementation:

  • Start a minimal SvelteKit + TypeScript app (“Svelte Design”).
  • Use Claude Code with “dangerously skip permissions” mode (as stated) to implement pages.
  • Provide Claude Code with the project + design system so it can use tokens/components.

Requested pages:

  • Landing page
  • Sign-in / Sign-up auth page
  • Dashboard

Step 6: Validate consistency

Outcome emphasized:

  • A single prompt leads to consistent styling across pages because the codebase is “baked” with the design system.
  • Any remaining visual discrepancies are resolved by revising the design system, since changes propagate globally.

Optional add-on: UI libraries for micro-animations

Once the design system is working, AI can incorporate prebuilt UI components (with animations) while still matching the system.

  • Example library: BUI
    • accordion with animation
    • drawer with open motion
    • hover tilt card

Strategy:

  • Give the agent the component code or URL, and instruct it to use the design system for styling.

Sponsored / side content (non-core to the workflow)

  • Sponsor: Scrimba, promoted as an “AI Engineer path” course.
  • A clip mentioned featuring Mark Cuban about implementing AI in businesses (the main takeaway of the video remains the UI/design workflow).

Main speakers / sources

  • Speaker/creator: Ross
  • Tools/platform sources: Claude Design, Claude Code, Zen Browser, SvelteKit, GatherOS, Mobbin
  • Inspiration/design references: family.co, Vercel design system (vercel.com/design.md)
  • Mentioned external clip/person: Mark Cuban
  • Sponsor: Scrimba
  • UI library mentioned: BUI

Original video