Claude Code: Reworking a screen's design in an interactive canvas

Posted . Visible to the public.

If you aren't happy with the design of a screen or component, you can ask Claude Code to move the screen into an interactive canvas instead:

Reproduce the start page in an interactive canvas so I can work on its design.

Claude reproduces the screen as an artifact on claude.ai, using the real text and content. You then customize it visually with Claude Design:

  • Change any element directly on the canvas.
  • Annotate elements that need work and send the comment to Claude, e.g. "@Claude The badges aren't pretty". Claude applies the change on the canvas.
  • Ask for variations when you're not sure what you want yet. Claude can either show you variations side by side or install a "tweak" dropdown where you can flip between variations interactively.

Image

Communicating between canvas and agent

The canvas stays connected to your Claude Code session. When Claude on the canvas needs to know something about your code or repository, e.g. which Sass variables exist or how a component is built, it asks the agent and gets an answer. So your design changes stay grounded in what your codebase can actually do.

One caveat is that the Canvas own sidebar chat panel does not reach Claude Code. Reach Claude Code by commenting on individual items, or by typing into the agent window.

When you're done, tell Claude Code. It will implement the changes in your actual HTML and CSS.

Profile picture of Henning Koch
Henning Koch
Last edit
Henning Koch
Attachments
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2026-10-09 09:42)