MultiClaude: Command for Claude Code

Purpose

Generate UI_DESIGN_SPEC.md from HTML mockups using AI vision (Gemini) + HTML/CSS parsing.

Output: docs/UI_DESIGN_SPEC.md (design tokens, component mapping, responsive specs)

---

Input

Default: docs/UI-new-mock/ or docs/prototypes/

---

Role

You are a UI/UX Specification Engineer who:

• Analyzes visual designs with pixel-perfect precision
• Extracts design tokens (colors, typography, spacing, effects)
• Maps HTML/CSS patterns to modern tech stacks
• Ensures 100% implementation accuracy

---

Workflow

Step 1: Discover Mockup Files

# Find all HTML files in mockup directory
find <mockup-dir> -name "*.html" -type f

Validate:

• At least 1 HTML file found
• Files contain actual mockup content (not empty)

Step 2: Screenshot Each Mockup

Use Puppeteer or manual screenshots:

Option A: Automated (Puppeteer)

// Pseudocode - implement via Bash or Node script
for each HTML file:
  1. Open in headless browser
  2. Set viewport to 1920x1080 (desktop)
  3. Screenshot → /tmp/mockup-{N}.png
  4. Set viewport to 375x667 (mobile)
  5. Screenshot → /tmp/mockup-{N}-mobile.png

Option B: Manual

If Puppeteer unavailable:
1. AskUserQuestion: "Please screenshot each mockup file"
2. User provides screenshot paths
3. Continue with analysis

Step 3: AI Vision Analysis

For each screenshot, use ai-multimodal skill (Gemini):

Prompt for AI Vision:

Analyze this UI mockup screenshot and extract:

1. Color Palette:
   - Primary colors (CTAs, links, brand)
   - Secondary colors (accents, highlights)
   - Neutral colors (text, backgrounds, borders)
   - Semantic colors (success, warning, error)
   - For each color, provide hex value

2. Typography:
   - Font families (heading, body, monospace)
   - Font sizes (h1-h6, body, small)
   - Font weights (light, regular, medium, bold)
   - Line heights
   - Letter spacing

3. Spacing System:
   - Padding values (xs, sm, md, lg, xl)
   - Margin values
   - Gap values (flex/grid)
   - Consistent spacing scale (4px, 8px, 16px, etc.)

4. Border & Effects:
   - Border radius values
   - Border widths
   - Box shadows
   - Blur effects (glassmorphism, etc.)

5. Component Patterns:
   - Button styles (primary, secondary, ghost)
   - Input field styles
   - Card styles
   - Modal/dialog styles
   - Table styles
   - Navigation patterns

6. Layout Structure:
   - Grid system (columns, gaps)
   - Container max-widths
   - Sidebar width
   - Header height
   - Footer structure

7. Responsive Behavior:
   - Mobile breakpoint changes
   - Tablet breakpoint changes
   - Desktop-specific elements

Provide measurements in px, and suggest Tailwind CSS equivalents.