v0.9.0

v0.9.0 — Claude Design Integration

Released: 2026-04-20 Theme: Stop hand-coding mockups. Route visual work to Claude Design.

TL;DR

Before v0.9.0, Kasidit defaulted to hand-coding HTML/CSS mockups and stakeholder artifacts — slow, wrong tool, hallucination-prone. v0.9.0 introduces Design/Visual Mode that routes those missions to Claude Design (Anthropic Labs, launched 2026-04-17). Kasidit then consumes the mockup and implements the code.

Why this release

The author observed three recurring failures:

1. AI invented layouts instead of iterating on a visible artifact.
2. Hand-coded HTML mockups took ~10× the time of prompting a visual tool.
3. Stakeholder reviews (PM / client / exec) needed visual polish that code-as-mockup could not deliver in reasonable time.

Splitting responsibilities — Claude Design does visuals; Kasidit does the code that implements the visual — produces better output in less time on every tier. Critically, Haiku hand-coded mockups are consistently wrong; offloading them is not optional.

What's new

Design / Visual Mode

New domain in the detection table. Triggers:

• mockup, wireframe, ร่าง UI
• pitch deck, slide, deck
• one-pager, landing page
• pre-code sketch, ยังไม่ code, ขอ mockup ก่อน
• design system extract, visual pattern
• stakeholder review
• audit visual report

When a trigger fires, the agent routes to Claude Design instead of generating markup itself.

Routing protocol

1. Confirm the mission in one line.
2. State: "routing to Claude Design for the visual."
3. Ask for:
   - Target audience (PM / client / dev handoff / self-reference)
   - Rough dimensions or platform (web / mobile / print / slide)
   - Existing brand constraints (link to DESIGN_SYSTEM.md if present)
4. Hand off prompt to Claude Design (open claude.ai/design with pre-filled brief).
5. Wait for user to return with exported 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 it.

.kasidit/prototypes/

New storage directory in every project. Mockups, wireframes, screenshots, and exported decks live here, filename-indexed by mission id.

DESIGN_SYSTEM.md

Visual counterpart to PATTERNS.md. Records:

• Colors — primary / accent / error / success / text / background (hex)
• Typography — heading / body / code stacks with weight + size
• Spacing scale — base unit + multiples, section gap, component padding
• Components — button / card / input / table specs
• Grid / layout — container max-width, breakpoints, dashboard column count

Generated via /extract-system command — Claude Design reads codebase CSS and component files, produces the draft, user approves, saved as .kasidit/DESIGN_SYSTEM.md.

Mockup → code handoff

When user brings a mockup back:

1. Save mockup to .kasidit/prototypes/<mission-id>-after.png
2. Read mockup + DESIGN_SYSTEM.md (if exists)
3. Extract: component list, spacing values, color tokens, typography
4. Produce a text plan: components to build / new tokens needed / existing reused
5. Wait for user confirmation
6. Enter UI Override / standard implementation flow
7. Each round, parity check vs mockup (UI Override Rule 8)

UI Override Rule 8 — token-level parity

Mission started with a Claude Design mockup in .kasidit/prototypes/:

• After each CSS change, compare user screenshot vs mockup side-by-side
• Parity criteria: spacing (px-level), color (hex), typography (family + weight + size), component placement
• Report [parity high | medium | low] per round
• Mission done only when parity = high and user confirms

Parity check by vibes is an anti-pattern — token-level comparison is required.

Five new commands

Command	Purpose
design <what>	route to Claude Design for visual work
mockup <screen>	shortcut for design mockup <screen>
extract-system	build .kasidit/DESIGN_SYSTEM.md from codebase
parity <mockup-id>	compare current UI screenshot vs saved mockup
report visual	export last findings as a one-pager via Claude Design

Per-tier routing

• Opus — may skip Claude Design for internal-only, self-reference sketches (fast-path).
• Sonnet — default to Claude Design for any stakeholder-facing artifact.
• Haiku — always route visual work to Claude Design. Never hand-code mockups.

What changed vs v0.8.0

• New domain mode — Design / Visual, with routing protocol
• New storage — .kasidit/prototypes/
• New file type — .kasidit/DESIGN_SYSTEM.md
• Rule 3 updated — offers Claude Design prototype as the design-before-code artifact for UI missions
• UI Override Rule 1 updated — Claude Design mockup is a third valid visual target alongside screenshot and raw CSS values
• UI Override Rule 8 added — token-level parity check
• Review Mode step 8 — optional Claude Design one-pager for non-technical audiences
• Workflow diagram updated — reflects design-mode routing and prototype saves
• 5 new commands — design / mockup / extract-system / parity / report visual
• Anti-patterns +3 — hand-coding when Claude Design is available; implementing from mockup without saving it; parity check by vibes

Breaking changes

None. Projects without Claude Design exposure keep behaving as before — the new triggers simply produce a different response path.

Migration

No action. On your next UI / mockup / deck mission, the agent routes. Existing .kasidit/ directories are not modified.

Known limitations

• Claude Design is a separate Anthropic product — requires access to claude.ai/design.
• .kasidit/prototypes/ file naming is by convention; no lint enforces it.
• DESIGN_SYSTEM.md generation requires Claude Design access; without it, maintain by hand using the schema in the skill.

See also

• Claude Design Integration
• UI Override Mode
• v0.8.0 — prior release
• v0.9.1 — next release