Select
Open your running app through PixelSteer and click the element or region you want to change.
Claude Code visual editor
A visual editor for Claude Code—without a second canvas.
PixelSteer adds point-and-describe editing to your running frontend while Claude Code continues to modify the source you already own.
Visual intent, grounded in code
Point at the interface.
Keep control of the source.
Visually edit React or another frontend with Claude by selecting what is already rendered. Ask to move a button, tighten a card, rewrite a CTA, or align one section with another without translating the screen into a long prompt.
This is not a drag-and-drop page builder. PixelSteer does not keep a proprietary representation of the page. It connects visual intent to an agent that edits components, styles, and templates in the repository.
The PixelSteer loop
Three steps from feedback to frontend.
Describe
Add the result you want. PixelSteer keeps the note attached to the page and visual context.
Review
Claude Code edits the real source. Your existing dev server reloads the result for review.
Install once
Add the PixelSteer skill.
Run the install command from your frontend project, then invoke it in Claude Code.
npx skills add PixelSteer/pixelsteer-skillThen in Claude CodeUse the pixelsteer skill to start the visual feedback session for my frontend. Keep handling browser feedback until I ask you to stop.Open skill instructions Questions
What developers ask.
Is PixelSteer a Claude Code WYSIWYG editor?
It provides a WYSIWYG-like feedback loop, but the agent edits source code rather than a hidden visual document.
Can I visually edit React with Claude?
Yes. Run the React app, select the rendered target through PixelSteer, and describe the change for Claude Code to implement in the project.
Stop translating the screen into prose.