A hands-on walkthrough of Anthropic's new Claude Design tool — a design environment backed by a full Claude Code under the hood and the new Opus 4.7 model. The creator builds a dashboard redesign, an animated data visualization, a slide deck, and an animated travel globe, arguing this is the first AI design tool that genuinely feels like "flow editing" rather than a chat-and-pray experience.
What Claude Design Actually Is
Available at claude.ai/design for paying subscribers (rolling out gradually). It is not just a vibe-coding sandbox — there's a real Claude Code instance attached, so you can drop whole repos or folders in and work against them.
- Interview-first workflow: Instead of jumping straight to output, it asks pointed, reasonable questions up front (how much to redesign, light/dark, how many variations).
- Tweaks panel: Your answers ("give me 4–5 variations," "both light and dark") become live toggles you can switch between — layout directions, color themes, fonts.
- Enhanced visual understanding: Powered by the Opus 4.7 model, which has noticeably stronger image-reading capabilities.
Direct Manipulation Inside the Preview
The internal browser preview supports multiple interaction modes beyond prompting:
- Draw on the canvas: Circle an element, add an arrow — Claude screenshots the annotation and understands what you meant.
- Direct text editing: Click a heading and rewrite it inline, or swap fonts from a side panel.
- Presentation modes: Full-screen, new tab, resizable viewports for review.
Design Systems and Export
Below each prototype is a button to generate a full design system from the work. You upload assets, point to a repo, add fonts/logos/Figma files, and it produces a reviewable system of buttons, cards, chips, colors, and type families — each element approved one at a time.
Once approved, exports include:
- ZIP, PDF, PowerPoint, Canva, HTML
- Direct Claude Code handoff: Generates a URL to the design artifact and a command that tells Claude Code to fetch it, read the README, and implement it in your project.
Three Demos Worth Noting
Animated SWE-bench Timeline
Asked Claude Design to research every frontier model release since 2023 with SWE-bench scores, then build an animation. It did the research, produced a data file, and rendered an HTML animation — including a requested 8-bit monkey walking along the x-axis as history unfurls, with zoom effects to handle the packed recent releases.
Slide Deck from the Same Data
Re-uploaded the data file to the slides tab with a prompt to "tell the story of SWE-bench scores over time." The output is noticeably polished.
"Two and a half years ago, the best model in the world fixed seven of every 500 bugs. That's the number to hold in your head… The curve is in two halves. The second one looks nothing like the first."
Downloaded as PowerPoint — not pixel-perfect (a genuinely hard problem for AI slide tools), but close enough to clean up and present.
Animated Travel Globe
Fed it travel dates and locations plus 1950s Paris travel posters as a style reference. Output: an animated globe tour handed off to Claude Code as a zip for further extension.
The "Flow Editing" Insight
The author's main argument: this isn't a design tool, it's an early example of flow editing — being able to talk directly to the thing you're working on, whether software, design, or documents.
"This is no longer just a simple design tool… I now have this in Claude Code and can do just about anything with it."
What makes it feel different from prior AI design tools is the tight coupling: an opinionated Opus 4.7 model plus real Claude Code underneath, not a chat box wrapping a generator.
Day One Pains
- Small, separate allotment: Claude Design has its own usage bucket (visible in Claude desktop settings → usage), and it's tight. The author burned through what the UI called a "week's allotment" in a single session.
- Confusing reset messaging: Got told the allotment resets at 11am Friday while it was already 6pm Friday — possibly a time-zone bug.
- Good news: Design usage does not consume your main Claude Code allotment.
The bottom line: If you have an Anthropic subscription, try it. The combination of direct-manipulation editing, real code underneath, and clean handoff to Claude Code makes this feel like a preview of how most creative tools will work.