AI Design Workflow

"AI Gave You Coding. Now It Gives You Design."

A complete 3-step workflow for transforming your application's visual design using AI-powered tools.

Overview

┌─────────────────────────────────────────────────────────────────┐
│                     AI DESIGN WORKFLOW                           │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│   STEP 1              STEP 2              STEP 3                │
│   /mockup             /redesign           /design-system        │
│                                                                  │
│  ┌──────────┐      ┌──────────┐      ┌──────────┐              │
│  │Screenshot│─────▶│ Mockup   │─────▶│  Code    │──────────▶   │
│  │          │      │ Image    │      │ Restyled │              │
│  └──────────┘      └──────────┘      └──────────┘              │
│       │                  │                  │                   │
│       │                  │                  │                   │
│       ▼                  ▼                  ▼                   │
│  ┌──────────┐      ┌──────────┐      ┌──────────┐              │
│  │ ChatGPT/ │      │ Claude   │      │ Design   │              │
│  │ Gemini   │      │ Code     │      │ System   │              │
│  └──────────┘      └──────────┘      └──────────┘              │
│                                                                  │
│  Generate themed    Apply visual      Lock in the               │
│  mockup image       style to code     visual language           │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

Quick Start

# Step 1: Generate a mockup from your screenshot
/mockup screenshot.png --theme ocean --vibe "calm, professional"

# Step 2: Apply the mockup style to your code
/redesign mockup.png

# Step 3: Lock in the design forever
/design-system

Step 1: Create Mockups (/mockup)

Purpose: Transform your app screenshot into a themed visual mockup.

Tool: ChatGPT, Gemini, or any AI with image generation

How It Works

1. Take a screenshot of your application
2. Choose a theme inspiration (flowers, space, ocean, neon, etc.)
3. Define the vibe with adjectives (calm, professional, playful, etc.)
4. AI generates a redesigned mockup image

Example

/mockup dashboard.png --theme space --vibe "dark, futuristic, expansive"

Theme Presets

Preset	Theme	Vibe	Best For
corporate	minimal	professional, clean	B2B apps
playful	bubbles	fun, colorful	Consumer apps
calm	ocean	serene, peaceful	Wellness apps
futuristic	space	dark, cutting-edge	Tech products
nature	forest	organic, sustainable	Environmental apps

Output

A mockup image that preserves your app's structure while applying the new visual theme.

Next: Pass this mockup to Step 2.

---

Step 2: Redesign from Mockup (/redesign)

Purpose: Apply the mockup's visual style to your actual code.

Tool: Claude Code, Cursor, or any AI coding assistant

How It Works

1. Provide the mockup image from Step 1
2. AI extracts colors, spacing, typography, and effects
3. AI transforms your codebase to match the mockup
4. Iterate with refinement H.P.002-COMMANDS as needed

Example

/redesign mockup.png --target src/components/

Refinement Commands

If the first pass needs adjustment:

/redesign mockup.png --refine "Make buttons more rounded"
/redesign mockup.png --refine "Soften the shadows"
/redesign mockup.png --refine "Only redesign the header"

What Gets Transformed

Category	Examples
Colors	Primary, secondary, backgrounds, text, borders
Spacing	Padding, margins, gaps
Typography	Font sizes, weights, line heights
Effects	Border radius, shadows, transitions

Constraints

• Preserves all functionality
• Maintains data flow and event handling
• Keeps accessibility features
• Respects responsive behavior

Next: Once satisfied, proceed to Step 3.

---

Step 3: Create Design System (/design-system)

Purpose: Lock in your visual language forever. "The Boss Move."

Tool: Claude Code or any AI coding assistant

Why This Matters

Without a design system, each new feature is a guess. Guesses degrade over time. Your app drifts back to generic.

With a design system:

• Every new feature follows the same visual language
• AI knows exactly what values to use
• Your design never drifts

How It Works

1. Run /design-system after your app looks good
2. AI analyzes your styled application
3. Two documents are generated:
   • design_concept.json - The "why" and "feel"
   • design-system.json - The exact specifications

Example

/design-system --output docs/

Output Files

design_concept.json (for edge cases):

{
  "vision": "A calming digital environment...",
  "mood": {
    "emotions": ["calm", "playful", "airy"],
    "inspirations": ["soft clouds", "morning light"]
  },
  "principles": [
    "Breathing room over density",
    "Soft edges over sharp corners"
  ]
}

design-system.json (for implementation):

{
  "colors": {
    "primary": "#6B9BD2",
    "surface": "#F8FAFC"
  },
  "borderRadius": {
    "sm": "4px",
    "md": "8px"
  },
  "shadows": {
    "card": "0 4px 12px rgba(0,0,0,0.08)"
  }
}

---

Using the Design System

After Step 3, include these files in all future development:

Please implement [FEATURE] following:
- Design concept: docs/design_concept.json (for creative decisions)
- Design system: docs/design-system.json (for exact specifications)

The AI will automatically use the correct colors, spacing, typography, and effects.

---

Complete Example Workflow

Scenario: Redesign a Dashboard to Ocean Theme

# 1. Take a screenshot of your current dashboard
# Save as: screenshots/dashboard-current.png

# 2. Generate themed mockup
/mockup screenshots/dashboard-current.png \
  --theme ocean \
  --vibe "calm, professional, trustworthy"

# AI generates: mockups/dashboard-ocean.png
# Review and request variations if needed:
/mockup screenshots/dashboard-current.png --variations 3

# 3. Apply to code
/redesign mockups/dashboard-ocean.png --target src/

# Review the changes
# Refine if needed:
/redesign mockups/dashboard-ocean.png --refine "Add more breathing room"

# 4. Lock in the design
/design-system

# Files created:
# - docs/design_concept.json
# - docs/design-system.json

# 5. Future development automatically follows the system
# Just mention the design system in your H.P.007-PROMPTS!

---

CODITECT Components

Skills

Skill	Purpose
ai-mockup-generation	Step 1 documentation
mockup-to-code-redesign	Step 2 documentation
design-system-codification	Step 3 documentation

Agents

Agent	Purpose
moe-ui-mockup-generator	Orchestrates Step 1
moe-ui-theme-applicator	Orchestrates Step 2
moe-ui-design-codifier	Orchestrates Step 3

Commands

Command	Step
/mockup	Step 1
/redesign	Step 2
/design-system	Step 3

Supporting Tools

Tool	Purpose
H.P.004-SCRIPTS/design-system-generator.py	Automated design system extraction
H.P.005-HOOKS/design-system-validation.py	Validates code against design system
H.P.009-CONFIG/H.P.008-TEMPLATES/design-system.template.json	Design system template
H.P.009-CONFIG/H.P.008-TEMPLATES/design-concept.template.json	Design concept template

---

Design Fundamentals Reference

For understanding design vocabulary (contrast, hierarchy, spacing, color, depth):

Design Fundamentals Interactive Reference

---

Source

This workflow is based on: AI Gave You Coding. Now It Gives You Design.

Repository: video_repo__design

---

Part of: CODITECT AI Design System Last Updated: 2026-01-20