Claude Design Integration

Claude Design Integration

Introduced in v0.9.0.

Hand-coded HTML mockups are a waste of senior engineer time. Claude Design does visuals. Kasidit does code. Know which is which.

When to route to Claude Design

Before writing any markup / CSS when the mission matches:

Trigger	Use Claude Design for
mockup, wireframe, ร่าง UI	screen mockup (PNG / live URL)
pitch deck, slide, deck	PPTX / Canva-exportable deck
one-pager, landing page	one-page HTML / PDF
pre-code sketch, ยังไม่ code	low-fi wireframe
design system extract	.kasidit/DESIGN_SYSTEM.md draft
stakeholder review	clickable prototype URL
audit visual report	one-pager summary of findings

When NOT to route

• User already provided a target (screenshot / CSS / reference element)
• Tiny spacing / color / alignment fix on existing UI
• Backend / data / logic / infra work
• User explicitly says "skip mockup, go code"

Routing protocol

1. Confirm mission in one line.
2. State: "routing to Claude Design for the visual."
3. Ask:
   - Audience (PM / client / dev handoff / self-reference)
   - Platform (web / mobile / print / slide) + dimensions
   - Brand constraints (link to .kasidit/DESIGN_SYSTEM.md if present)
4. Hand off prompt to claude.ai/design with pre-filled brief.
5. Wait for user to return with PNG / PDF / PPTX / URL.
6. Save export to .kasidit/prototypes/<mission-id>-<stage>.{png,url,pptx}.
7. Resume Kasidit for coding/implementation if mission requires.

Mockup → code handoff

1. Save mockup to .kasidit/prototypes/<mission-id>-after.png
2. Read mockup + .kasidit/DESIGN_SYSTEM.md (if exists)
3. Extract:
   - Component list
   - Spacing values (px)
   - Color tokens (match DESIGN_SYSTEM.md or flag new)
   - Typography (family / weight / size)
4. Produce text plan:
   - Components to build
   - New tokens needed (user confirms)
   - Existing components reused
5. Wait for user confirmation.
6. Enter UI Override / standard flow.
7. Parity check per round (UI Override Rule 8).

.kasidit/DESIGN_SYSTEM.md

Visual counterpart to PATTERNS.md. Records colors, typography, spacing, components, grid. Generated by /extract-system (Claude Design reads codebase, produces draft, user approves).

Schema:

# Project Design System

## Colors
- Primary: #1976d2
- Accent: #ff9800
...

## Typography
- Heading: "Prompt", sans-serif, 600
- Body: "Prompt", sans-serif, 400
...

## Spacing
- Base: 4px (multiples: 4/8/12/16/24/32/48)
...

## Components
- Button: 40px height, 8px radius
- Card: 1px border, 8px radius, 16px padding
...

## Grid / Layout
- Container max-width: 1200px
- Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280
...

Per-tier rules

• Opus — may skip Claude Design for internal-only sketches (fast-path)
• Sonnet — default to Claude Design for any stakeholder-facing artifact
• Haiku — always Claude Design for visuals. No hand-coded mockups. Ever.

Commands

• design <what> — route to Claude Design
• mockup <screen> — shortcut
• extract-system — build DESIGN_SYSTEM.md
• parity <mockup-id> — screenshot vs mockup token diff
• report visual — export findings as one-pager

See Commands.

Anti-patterns

• ❌ Hand-coding a mockup when Claude Design is available
• ❌ Producing a "deck" in markdown when user asked for slides
• ❌ Generating a mockup without asking audience + platform
• ❌ Implementing from a mockup without saving it to .kasidit/prototypes/
• ❌ Skipping DESIGN_SYSTEM.md check when mockup introduces new colors/spacing
• ❌ Parity check by vibes

See also

• v0.9.0 — introduction
• UI Override Mode — Rule 8 (parity check)