Design Phase

Design Workflow

AI exploration to Figma to production code - a systematic approach to design-first development.

The 4-Step Process

Explore (AI-Powered)

Use Firecrawl to extract design systems from reference sites. Use Google AI Studio for rapid prototyping.

Output: 2-3 design directions with notes

Exit Criteria: Design direction selected

Refine (Figma)

Polish screens, components, and design tokens. Create token-driven styling with no one-off colors.

Output: High-fidelity mockups + design system

Exit Criteria: All variants and states documented

Document (Atomic Design)

Organize components into Atoms, Molecules, Organisms, Templates hierarchy. Document usage notes.

Output: Component library with clear hierarchy

Exit Criteria: Engineers can implement without guessing

Sync (Design-to-Code)

Extract design tokens to tailwind.config.ts and globals.css. Map colors, typography, spacing.

Output: tailwind.config.ts + globals.css

Exit Criteria: Design system matches code 1:1

Atomic Design Hierarchy

Level	Description	Code Location	Examples
Atoms	Basic building blocks	`tailwind.config.ts`	Colors, fonts, spacing, Button, Badge
Molecules	Simple component groups	`components/molecules`	SearchBar, FormField, Card
Organisms	Complex UI sections	`components/organisms`	Header, Sidebar, DataTable, Modal
Templates	Page-level layouts	`components/templates`	DashboardLayout, AuthLayout
Pages	Full screens with data	`app/pages`	HomePage, SettingsPage

Design Token Example

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        // Extracted from Figma design system
      },
      spacing: {
        // 4px grid system from design
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
}