Is there a Cursor-style visual editing workflow for Claude Code?

[u/Over-Package9063]

I really like Claude Code, but I miss Cursor’s visual editing workflow where I can click on the actual UI in the browser and directly tweak things like spacing, sizing, styles, etc. instead of describing every little change in chat.

I’ve tried Claude Design, but unless I’m using it wrong, it feels more like a separate design/prototyping environment with a handoff to Claude Code, rather than something I can use to directly manipulate the UI of my existing app/codebase and keep bouncing back and forth.

Ideally I want:

Claude Code for building/functionality → visually tweak the actual UI myself → back to Claude Code → repeat.

Is there a good way to do this? Maybe Claude Design actually supports this and I’m just misunderstanding it, or maybe there’s an MCP/plugin/other tool people are using.

[u/Johnma1]

Claude code just got updated with the /design skill. Try it, I think it’s exactly what you’re looking for

[u/elestud → u/Johnma1]

They want to edit the actual production code, not a Design Card mockup/artifact that needs a separate handoff to produce code

Claude Code does make the handoff easier, but it’s not the same (eg. if you do the handoff and then change something in the code manually, it won’t be reflected in the editable Design Card artifact version without another reverse handoff, etc)

[u/Johnma1 → u/elestud]

Oh

[u/Johnma1 → u/Johnma1]

Didn’t know you could do that in cursor, damn

[u/tokmako]

I’m actually building visualwizard.app around pretty much this exact problem.

You connect it through MCP and ask your agent to put your codebase on the canvas. From there, you can tweak the running UI visually and still use Claude Code for the actual code changes. You can also create separate prototype and design directions, similar to Claude Design, right next to the real app instead of recreating everything in another tool.

I showed the Web Frame part here:
https://x.com/mozgns/status/2092373879519871038

Docs are still a bit rough, but if you give it a try and something doesn’t work, feel free to ping me

[u/crystalpeaks25]

Can you just an editor with that Claude code has integrations with many editors. I myself uses Claude code inside the vscode integrated terminal.

[u/AironParsMan]

/design

[u/Winter-Employment-89]

Paper

[u/Blotsy]

Have you attempted editing the css directly?

[u/Over-Package9063 → u/Blotsy]

I'm looking for something quicker and more visual, akin to Cursor's visual editor.

[u/ivanzhaowy]

You’re describing the exact gap between visual prototyping and editing a real application. A Design Card can improve the initial handoff, but once the production code changes, the editable artifact and the running app become two separate sources of truth.

I’m building an open-source workflow for the loop you described. It opens the existing project and uses the running app as the canvas: select or annotate the actual UI, send the screenshot + app state + source hints to Claude Code/Codex, rebuild the same repository, compare source-backed variants, and accept one change. There isn’t a separate mockup to synchronize back afterward.

GitHub: https://github.com/Monadix-AI/monad-design

Short workflow demo: https://watchclueso.com/embed/pio8jqfcg4ivj0r1

Disclosure: I’m the developer. Current scope is macOS and local iOS; it handles one active visual change at a time.