Compare revisions
Version 1 to version 2
Claude Design Can Touch the Canvas, but Not the Product
Version 1
July 26, 2026
Initial publication examining why Claude Design can work with real design systems and sync with Claude Code while still leaving the authority to change the actual product on the coding side of Anthropic's product boundary.
Version 2
July 26, 2026
Rewrote the essay around four original SVG diagrams showing the surviving handoff, the hidden consequences of visual edits, the difference between generation and iteration, and a model for operational design.
Visual changes
Images, SVG diagrams, and embeds are shown as media instead of raw Markdown so the visual meaning of the revision remains visible.
Added visuals
New graphics and embeds introduced in the later revision.
Diagram comparing the authority of Claude Design and Claude Code
Claude Design can propose and preview. Claude Code retains the authority to write, test, and merge changes into the real product.
/blog/claude-design-can-touch-the-canvas-but-not-the-product/handoff.svg
Diagram showing the system consequences of moving one button
A visual edit can reach shared components, responsive layouts, accessibility, analytics, application states, and tests.
/blog/claude-design-can-touch-the-canvas-but-not-the-product/button-consequences.svg
Diagram contrasting a polished first generation with increasingly difficult revisions
The first generation can look complete. Design begins when the system has to survive component drift, repeated defaults, hard-coded fixes, and continued iteration.
/blog/claude-design-can-touch-the-canvas-but-not-the-product/iteration.svg
Diagram of an operational visual design environment connected to code and review
A visual design tool could operate safely through the same infrastructure as code: a branch, visible diff, responsive previews, accessibility checks, tests, and a pull request.
/blog/claude-design-can-touch-the-canvas-but-not-the-product/operational-design.svg
Structure changes
How the article changed as an object, not only as a sequence of sentences.
6 changed measures
Words
+51
Content blocks
-9
Sections
+4
Paragraphs
-18
Images
+4
Quotes
+1
Article changes
Visual blocks are rendered as previews; other blocks retain the editorial diff.
77 changed blocks
Claude Design seems much less useful than it could be for a simple reason. It can touch the canvas, but it cannot quite touch the product.
This statement already needs a qualification because Claude Design has changed since Anthropic introduced it in April. It is no longer merely a sealed generator that receives a prompt and exports a visual artifact. Claude Design can import a design system from a codebase, use existing components, accept direct edits on the canvas and remain connected to Claude Code through /design-sync. Claude Code can connect to Claude Design through MCP, bring designs into a repository and export code back as a live prototype.
The two products are not completely separate anymore.
But Anthropic still describes the important transition in revealing language. When a design is ready to become software, it is handed off to Claude Code.
That sentence contains the old software industry inside a new AI product.
The designer proposes. The engineer translates. The product changes somewhere else.
For years, this was the normal structure of digital design. A designer made a representation of the product in Photoshop, Sketch or Figma. A developer then recreated that representation in the actual application. The tools improved, components became more systematic and handoff became more detailed, but the basic division remained. Design happened upstream. Production happened downstream. One side was allowed to describe what should exist. The other side was allowed to make it exist.
AI seemed capable of dissolving this boundary. The same system could inspect the repository, understand the design system, observe the running application, propose a change, implement it, test it and revise it when the result did not work. There was no obvious technical reason for the visual and operational versions of the product to remain different objects.
Claude Design comes unusually close to this possibility and then stops.
It can read the codebase as context. It can use components extracted from the codebase. It can produce an interactive prototype that resembles the product. It can even stay synchronized with a coding agent. Yet the authority to modify the real system remains associated with a product called Claude Code.
This is strange because design appears, at first, to be the lower-risk activity. Claude Code reads repositories, edits files, executes commands, runs tests and creates pull requests. Claude Design rearranges interfaces and presentations. If Anthropic is willing to let an agent operate on software, why is the visual design environment treated as the place where consequences should stop?
The obvious answer is that moving a button is not actually a small change.
The button may belong to a component used on sixty pages. Moving it may change the mobile layout, the focus order, the accessible name, the loading state, the analytics event, the empty state or the position of something else that only appears when a user's name is unusually long. A visual decision is attached to code, data, behaviour and organisational rules that are invisible when the object is treated as a rectangle.
But this is an argument for connecting design to the product, not for separating it.
Keeping design inside a cleaner environment does not remove the consequences. It postpones them. The prototype can look correct while the production system continues to contain all the old components, undocumented states, responsive exceptions and awkward dependencies that made the design problem difficult in the first place.
The online reaction to Claude Design is full of this tension. Some users are genuinely impressed by how quickly it can turn a specification into a convincing interface or presentation. Others describe a competent but generic result, a system that looks more capable in the first generation than it feels after the fifth revision.
One Hacker News commenter wrote that Claude Design could produce a competent interface with little effort, but little that felt truly unique. Several people replied that this was exactly what they wanted. Most software does not need to be strange or unprecedented. An internal hospital tool may benefit from being familiar, obvious and visually boring.
That defence is reasonable, but it also shifts the question. Claude Design may be good at raising the floor of interface production. That is not the same as making the work of design more powerful.
Another commenter argued that the remaining difficulty is fitting the interface around domain knowledge, unusual users, existing conventions and real use cases. The generated surface may be competent while the product reasoning remains unresolved. This is where the distinction between making a plausible screen and designing a product becomes important.
A Reddit discussion produced a sharper definition of AI slop: the default obtained with minimal effort is the same default everyone else receives. One user said they had already defined the architecture, button styles, fonts and other design rules, yet still had to repeatedly tell Claude to stop colouring everything teal. Another described the system as strong at producing one-shot concepts for familiar patterns such as dashboards and chat interfaces, but said it fell apart when the user started adding and revising things.
That last criticism matters more than the colour.
I opened Claude Design expecting it to feel like the visual half of Claude Code. That expectation may have been unfair because Anthropic did not present it as a complete visual development environment, but it was also difficult not to make the comparison. Claude Code can enter a repository, inspect the real application, change files, run tests and leave behind a diff. Claude Design can understand many of the same materials, but the moment the work needs to become real, the authority moves somewhere else.
This is less absolute than it was when Claude Design first appeared. It can now import a design system from a codebase, use existing components, accept direct canvas edits and remain connected to Claude Code through /design-sync. Claude Code can connect back through MCP, bring a design into the repository and export code as a prototype. Anthropic has shortened the distance between the two environments considerably.
But its own documentation still describes the transition from design to software as a handoff to Claude Code. I keep returning to that word because it is doing more work than it seems. The tools can share context. They can exchange artifacts. They may even remain synchronized. Yet one side still proposes what the product might become, while the other side receives the power to alter what the product is.
Diagram comparing the authority of Claude Design and Claude Code
Claude Design can propose and preview. Claude Code retains the authority to write, test, and merge changes into the real product.
/blog/claude-design-can-touch-the-canvas-but-not-the-product/handoff.svg
The old division is still inside the new tool
For years, digital design followed roughly the same structure even as its tools improved. A designer made a representation of the product in Photoshop, Sketch or Figma. Someone else translated that representation into the application. Components, design tokens and developer handoff made the translation more precise, but they did not remove it. Design happened upstream. Production happened downstream. The source of truth was always slightly somewhere else.
The designer proposes. The engineer translates. The product changes somewhere else.
AI seemed capable of dissolving this division because one system could theoretically understand both representations. It could inspect the repository, open the running product, recognise the design system, make a visual change, modify the relevant component and test the result. The visual and operational versions would no longer need to drift apart because they would be different views of the same change.
Claude Design approaches this possibility and then stops at the most consequential moment. It can reconstruct the system as context. It can make a prototype that looks like the system. It can pass that prototype towards a coding agent. But when a visual decision acquires consequences, it leaves the design environment and becomes code.
At first this seems backwards because design appears to be the less dangerous activity. Claude Code can execute commands and rewrite a repository, while Claude Design moves cards and buttons around a canvas. Why should the apparently safer activity receive fewer powers?
The answer is that moving a button is not only moving a button.
The rectangle is not the decision
A button may belong to a shared component used across sixty pages. Changing its position may affect mobile layouts, keyboard navigation, reading order, analytics events, loading states, empty states and visual regression tests. The button is visible, but the decision extends into the system around it. A designer moving the rectangle may intend a local adjustment while the codebase interprets it as a global change to a token or component.
Diagram showing the system consequences of moving one button
A visual edit can reach shared components, responsive layouts, accessibility, analytics, application states, and tests.
/blog/claude-design-can-touch-the-canvas-but-not-the-product/button-consequences.svg
This complexity is a real reason not to let a visual tool silently rewrite production software. It is not a good reason to keep the visual tool disconnected from production. Separation does not remove the consequences. It only hides them until the handoff, when someone discovers that the clean canvas was missing the state nobody documented, the breakpoint that behaves strangely or the component nobody wants to touch.
The design then looks correct because it has been evaluated inside a simplified representation. The product remains difficult because the actual constraints were waiting elsewhere. This is one reason digital design so easily becomes decorative. The tool gives the designer control over surfaces while the product's behaviour, permissions, data and exceptions remain outside the frame.
The first output is not the work
The public reaction to Claude Design makes this distinction unusually visible. Some people are impressed by how quickly it can produce a competent dashboard, presentation or interface. Others describe something that looks strongest in the first generation and weaker after the fifth revision. One Hacker News commenter described the output as competent but not particularly unique. Several replies correctly pointed out that most software does not need to be visually unprecedented. A familiar internal tool may be better than an expressive one.
That defence is fair, but it shifts the question from whether Claude Design can make a good screen to whether it can support design as an ongoing activity. A Reddit commenter defined AI slop as the default obtained with minimal effort being the same default everyone else receives. Another user said they had already specified the architecture, typography and button styles, but still had to keep telling Claude not to colour everything teal. The teal is funny, but the more important criticism was that the system could generate a strong one-shot concept and then begin falling apart as the user added things or tried to revise them.
Diagram contrasting a polished first generation with increasingly difficult revisions
The first generation can look complete. Design begins when the system has to survive component drift, repeated defaults, hard-coded fixes, and continued iteration.
/blog/claude-design-can-touch-the-canvas-but-not-the-product/iteration.svg
A professional designer described feeding Claude Design a real startup design system and high-fidelity product states. According to the comment, Claude retained basic typography and colour choices but ignored much of the component system. The resulting work was difficult to repair manually because the structure had become a large hard-coded HTML artifact. It was useful for getting quick stakeholder approval before the designer rebuilt the result properly in Figma.
That workflow is almost too perfect as a criticism. AI was supposed to remove the translation between the prototype and the product. Instead, it produced the prototype faster, helped secure approval and then required the real design to be rebuilt elsewhere. The mockup became cheap without becoming operational.
The usage complaints point in the same direction. One person compared Claude Design to a gym membership that allowed three repetitions per day. The exact limits will change, but the metaphor exposes the product assumption. If the valuable unit is one complete generated artifact, a few expensive outputs may be acceptable. If design is a sequence of small corrections, comparisons, reversals and discoveries, then restricting iteration attacks the activity itself.
The first output is the demo. Iteration under constraint is the work.
A professional designer using Claude Design for a startup described feeding it a full Figma system and high-fidelity product states. According to the comment, Claude retained basic typography and colours but ignored much of the component system. The generated work was difficult to repair manually because it was represented as a rigid, monolithic HTML structure. The designer found it useful for quickly obtaining stakeholder approval before rebuilding the work properly in Figma.
This is almost a perfect reconstruction of the workflow AI was supposed to remove.
Generate something convincing. Get approval. Rebuild the real thing somewhere else.
The tool has accelerated the mockup while preserving the handoff.
There is another contradiction in the usage model. Design is iterative by definition, but early users complained that a few rounds could consume a large portion of their available usage. One person compared it to buying a gym membership and being allowed only three repetitions per day. Anthropic has since moved Claude Design into the shared Claude usage pool, but its own documentation still warns that complex projects and many iterations consume more usage.
This is not only a pricing complaint. It reveals an assumption about what the valuable unit of design is. If the expensive moment is generating the first complete artifact, then the product is organised around output. If the valuable work happens through dozens of small corrections, comparisons, reversals and discoveries, then the product has to support sustained manipulation.
Claude Code became useful partly because software development already has infrastructure for controlled consequences. A coding agent can work in a branch. Its changes can be shown as a diff. Tests can fail. A pull request can be reviewed. A commit can be reverted. Permissions can limit which files and commands are available.
Design tools developed a different kind of control. They control appearance through frames, layers, components, variants and comments. They are excellent at preserving an editable representation of the intended interface. They are much weaker at showing what changing that representation does to the operating system of the product.
Perhaps Claude Design is not handcuffed because design is more dangerous than code. Perhaps it is handcuffed because design has not been given the same operational infrastructure.
The stronger version of Claude Design would not need unrestricted write access. It could operate on a temporary branch or worktree. A user could move an element on the canvas and see both the visual result and the code diff. Claude could explain whether it changed a local style, a shared component or a design token. It could run responsive screenshots, accessibility checks and interaction tests. The designer could accept one change, reject another and open a pull request without changing modes.
The visual interface would become a way of operating on the product rather than describing a hypothetical version of it.
This would also force design to become less clean.
The designer would encounter the component nobody wants to touch, the state that was never documented, the old permission rule, the analytics requirement and the test that fails when the layout changes. These may look like implementation details from the canvas, but they are part of what the product is. A design that ignores them is not more conceptual. It is simply incomplete.
There is a habit in the software industry of saying design is strategically important while keeping it safely separated from power. Designers can create journeys, systems, prototypes and visions, but the source of truth remains somewhere else. They can decide what the product should communicate, but they cannot always alter the machinery that determines what the product actually does.
Claude Design reproduces this hierarchy inside Anthropic's product line. Design can import the real system, imitate it and send work towards it. Code receives the authority to act.
Maybe this is only a temporary organisational boundary. Claude Design began as an Anthropic Labs research preview and is now in beta. The current connection with Claude Code already makes the original separation less severe. Anthropic may eventually combine the canvas, repository, browser, tests and branch into a single environment.
But the current product still reveals something about how the industry understands design.
The strange part is not that Claude Design cannot freely rewrite production software. It should not. The strange part is that the moment a visual decision gains operational consequences, it leaves the design product and becomes code.
AI has made the handoff faster without removing the assumption underneath it.
Claude Design can touch the canvas.
Claude Code still gets to touch the product.
Design needs controlled consequences
Claude Code is useful not because code is harmless, but because software development has spent decades building infrastructure around dangerous changes. An agent can work on a branch. Its edits can appear in a diff. Tests can fail. A reviewer can inspect the result. A commit can be reverted. Permissions can limit the filesystem and commands available to it. The environment does not pretend consequences do not exist. It makes them visible and reversible.
Design tools developed a different kind of safety. Frames, layers, components, variants and comments make appearance editable and collaborative, but they do not usually show the operational consequences of a visual decision. The canvas is controlled because it is a representation. The repository is controlled because it has branches, diffs, tests and review. Claude Design currently inherits the first model even though its real potential depends on the second.
The stronger version would not need unrestricted write access. It could make every visual change inside a temporary branch or worktree. Moving an element would show the updated screen and the code diff together. Claude could explain whether it changed one local style, a shared component or a design token. Responsive screenshots, accessibility checks and interaction tests could run automatically. The designer could accept one part, reject another and open a pull request without leaving the visual environment.
Diagram of an operational visual design environment connected to code and review
A visual design tool could operate safely through the same infrastructure as code: a branch, visible diff, responsive previews, accessibility checks, tests, and a pull request.
/blog/claude-design-can-touch-the-canvas-but-not-the-product/operational-design.svg
This would make design less clean, which may be exactly what makes it more real. The designer would encounter the old permission rule, the awkward component, the analytics requirement and the test that fails when the layout changes. These are often dismissed as implementation details, but they are parts of the product. A design that cannot absorb them is not more strategic. It is incomplete.
There is a familiar habit in the software industry of calling design strategically important while separating it from power. Designers can create journeys, systems, prototypes and visions, but the source of truth remains somewhere else. They can explain what the product should communicate, but they cannot always alter the machinery that determines what the product does.
Claude Design reproduces this hierarchy inside Anthropic's own product line. Design can import the real system, imitate it and remain synchronized with it. Code still receives the authority to act. Maybe this is only a temporary product boundary. Claude Design is still in beta, and Anthropic already has most of the necessary pieces across Claude Design and Claude Code.
But the current boundary reveals an assumption worth noticing. The strange part is not that a design agent cannot freely rewrite production software. It should not. The strange part is that the moment a visual decision gains operational consequences, it stops being treated as design.
AI has made the handoff faster without removing the hierarchy beneath it. Claude Design can touch the canvas. Claude Code still gets to touch the product.
Connected reading
- [AI Can Make the Screenshot](/blog/ai-can-make-the-screenshot) - [The Prototype Has Become Too Cheap to Trust](/blog/the-prototype-has-become-too-cheap-to-trust) - [The Design System Under the Design System](/blog/the-design-system-under-the-design-system) - [The Coding Assistant Is Becoming the Development System](/blog/the-coding-assistant-is-becoming-the-development-system) - [The Interface Is Now Part of the Answer](/blog/the-interface-is-now-part-of-the-answer)
AI authorship note
This essay began with Kris Haamer noticing that Claude Design felt much less useful because it ran separately from the product and lacked direct authority to change it. AI supported the current product research, review of public reactions, drafting, editing and implementation. Kris identified the central contradiction, rejected an unclear first title, selected the title Claude Design Can Touch the Canvas, but Not the Product, and approved the article for publication.
This revision began with Kris Haamer asking for a new illustrated draft of the original essay. AI supported the editorial rewrite, development of the four visual arguments, SVG implementation and publishing workflow. Kris chose the central argument, the title and the decision to preserve the original essay as version 1 while making the illustrated version current.