How to Build a Consistent Design System with AI Without Figma

TL;DR: Learn how to build a highly accurate, consistent Design System using AI without relying on Figma. Automate design for frontend developers and optimize your workflow. In this post, I will share practical experiences and a detailed guide.

Figma is a great tool. But for solo founders or small teams running at the speed of AI, Figma sometimes becomes a bottleneck instead of an enabler.

You have to design in Figma, export specs, and then write code. With AI, you can design directly in code — and AI will help you maintain a consistent design system across your entire project.

What is a Design System and Why Do You Need It?

A Design System is a set of rules governing a product's visual language:

• Colors: Primary, secondary, semantic (success, error, warning)
• Typography: Font family, scale, weight
• Spacing: Consistent spacing between elements
• Components: Buttons, Cards, Inputs — standardized once, used everywhere
• Motion: Animation timing, easing functions

Without a design system, every developer builds their own way, making the UI look like a patchwork.

Step 1: Define Tokens in CSS

With Tailwind CSS v4, design tokens are defined directly in CSS:

@import "tailwindcss";

@theme inline {
  /* Colors */
  --color-primary: #7b61ff;
  --color-primary-hover: #6b4ff0;
  --color-danger: #ff375f;
  --color-success: #34d399;
  --color-bg: #0a0a0a;
  --color-surface: #141414;
  --color-text: #f0f0f0;
  --color-text-muted: #6b7280;
  
  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', monospace;
  
  /* Spacing scale */
  --spacing-section: 5rem;
  --spacing-card: 1.5rem;
  
  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

Step 2: Prompt Claude to Create the Component Library

Once you have your tokens, prompt Claude to build the components:

Sử dụng design tokens đã define trong globals.css để tạo:

1. Button component với variants: primary, secondary, ghost, danger
   - Sizes: sm, md, lg
   - States: default, hover, active, disabled, loading

2. Card component: glass morphism style với shadow và border nhẹ

3. Input/Form field: với label, placeholder, error state, success state

Tất cả dùng Tailwind utility classes, TypeScript strict, 
export từ src/components/ui/index.ts

Step 3: Use AI to Check Consistency

After building a few pages, prompt Claude to audit them:

Review các file components trong src/components/ và kiểm tra:
1. Có component nào đang dùng hardcoded colors thay vì design tokens không?
2. Spacing có nhất quán không (chỉ dùng 4, 8, 12, 16, 24, 32, 48, 64px)?
3. Border radius có nhất quán không?
4. Font sizes có đúng typography scale không?

List ra tất cả inconsistencies và cách fix.

Step 4: Replace Storybook with a Dev Page

Instead of setting up a complex Storybook, create a /dev page to display all components:

// src/app/dev/page.tsx
export default function DevPage() {
  return (
    <div className="p-8 space-y-8">
      <section>
        <h2>Buttons</h2>
        <div className="flex gap-4">
          <Button variant="primary">Primary</Button>
          <Button variant="secondary">Secondary</Button>
          <Button variant="ghost">Ghost</Button>
          <Button variant="danger">Danger</Button>
        </div>
      </section>
      {/* Thêm cards, inputs, etc. */}
    </div>
  )
}

This page acts as your "living style guide" — allowing you to view and test every component in one place.

Conclusion

You don't need Figma or a dedicated designer to build a Design System if you have AI and the right workflow. Define tokens once, prompt Claude to build components, and use a dev page for reviews — this workflow is powerful enough for 80% of web projects.

Learn more about the AI-driven design process: Claude Code Mastery Pro.

To improve operational efficiency and systemic thinking, read: Designing a Premium Dark UI with Tailwind CSS v4 and Claude AI to apply it to your work immediately.