WYSIWYG for Claude Code

The immediacy of WYSIWYG. The control of source code.

PixelSteer gives Claude Code a visual target and gives you an immediate browser review loop—without replacing your codebase with a page builder.

Set up PixelSteer See how it works

Visual intent, grounded in code

Point at the interface.
Keep control of the source.

Click the UI with Claude Code in your workflow, request the change in plain language, and watch your existing app refresh after the source edit. What you review is the real application, not a visual approximation waiting to be exported.

PixelSteer is deliberately not a traditional WYSIWYG editor. The source remains canonical, the coding agent makes the implementation decisions, and your ordinary tests, diffs, and version-control workflow still apply.

The PixelSteer loop

Three steps from feedback to frontend.

Select

Open your running app through PixelSteer and click the element or region you want to change.

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 Code

Use 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 there a WYSIWYG editor inside Claude Code?

PixelSteer adds a WYSIWYG-like browser feedback loop around Claude Code rather than embedding a separate page editor inside it.

Do I have to export generated HTML?

No. Claude Code edits the actual project files, so there is no visual document to export or synchronize.

Stop translating the screen into prose.

Show your agent.

Get started with PixelSteer