Originally published at kalyna.pro

Anthropic launched Claude Design in April 2026 as a research preview, then shipped a major overhaul in June 2026 that fixed most of the early complaints. Instead of describing code, you describe a visual outcome — a landing page, a prototype, a slide deck — and Claude generates real, runnable HTML, CSS, and JavaScript, not a static mockup.

What Claude Design Actually Is

Claude Design is built into Claude.ai and powered by Opus 4.8. You describe what you want in natural language and Claude produces production-ready code you can run immediately — no canvas, no drag-and-drop, no "convert design to code" step.

• Real output — HTML/CSS/JS, not Figma-style mockups
• Conversational iteration — describe changes, they apply in place
• Canva export for further non-technical editing
• Built on Opus 4.8, same model family as Claude Code

Design System Import (the June 2026 Update)

The April release often ignored brand fonts, spacing, and colors. June's update added design system import — point Claude Design at a GitHub repo, design files, or raw component code, and it builds using your approved components instead of inventing new ones. Layout, type, and button-style controls were also expanded beyond pure prompting.

The Token-Burning Problem (Fixed)

Early adopters flagged heavy token use on iterative edits — small visual tweaks triggering large regenerations. The June update targeted this directly with smaller, more efficient diffs and better structure adherence on minor changes.

Connectors to Creative Tools

Claude now connects to Adobe Creative Cloud, Affinity by Canva, Autodesk Fusion, SketchUp, Blender, Ableton, Resolume Arena and Wire — translating formats, syncing assets, and (via Claude Code) writing custom scripts and generative systems as documented code.

Access

Available to Claude Pro, Max, Team, and Enterprise subscribers inside Claude.ai. No API endpoint yet — it's a product feature, not something you call like the Claude API.

Claude Design vs v0 by Vercel

v0 is opinionated toward React + Tailwind + shadcn/ui; Claude Design outputs plain HTML/CSS/JS — more portable, less scaffolding. Claude Design's design-system import is a more direct brand-fidelity workflow than v0's component library approach, and it extends beyond web UI into slides and the creative-tool connectors.

Honest Take

Good for fast prototypes, landing pages, and teams with an existing design system to import. Still needs human review for complex interactions, accessibility, and pixel-perfect brand alignment — treat it like Claude Code output: a strong first pass, not a final ship.

Summary

• Real HTML/CSS/JS output, not mockups
• Pro/Max/Team/Enterprise only, inside Claude.ai
• June update: design-system import + fixed token-burning on edits
• Connectors extend into Adobe, Blender, SketchUp, Ableton
• Strong first draft tool — pair with human review before production