UiToolbar 作者: ddotdev

UiToolbar is a browser extension + CLI tool for direct visual design with IDE bridge integration. Simply select, edit and send structured context to Cursor,Claude Code, or any coding agent — directly from the browser.

Point at any element. Tell your coding agent what to change. Watch it edit the source file.

UiToolbar connects your browser to your codebase through Cursor, Claude Code, or OpenAI Codex.
Select a component on your live React app, type what you want ("make this button red", "add a
loading spinner"), and the AI modifies the actual source file — not a preview, not a mockup.

You see the result instantly via hot reload. No copy-pasting. No context-switching. No
explaining which file to open.

— HOW IT WORKS —

1. Hover over any element — UiToolbar detects the React component name, file path, and line
   number automatically
2. Click to select, type your edit in plain English
3. Your coding agent reads the structured context and modifies the source file
4. See the change live on the page. Undo with one click if needed.

— FEATURES —

VISUAL ELEMENT SELECTION
• Click any element to select it. The overlay shows the component name, file path, and tag.
• Shift-click or drag-select to grab multiple elements at once.
• Arrow keys to navigate up to the parent or down to a child component.
• React-aware: extracts component name, props, and source location from the fiber tree.

INLINE TEXT EDITING
• Double-click any text to edit it directly on the page.
• Floating toolbar for font family, size, weight, color, alignment, spacing.
• Apply sends the changes to your coding agent to update the source file.

MOVE & LAYOUT TOOL (Alt+M)
• Drag elements between siblings to reorder them visually.
• Toggle to freeform mode for absolute positioning.
• Resize handles, rotation, alignment snapping, and pixel grid.
• Nudge with arrow keys (1px) or Shift+arrow (10px).
• Apply all layout changes at once — your agent writes the CSS.

ANNOTATION MODE
• Pin comments, bugs, or todos to any element.
• Markers persist across page refreshes.
• Batch-send annotations to your coding agent for fixes.
• Export/import annotations as JSON for team handoffs.

REGION SCREENSHOT CAPTURE
• Draw a rectangle to capture any area of the page.
• Screenshot is included with your AI prompt for visual context.

AGENT SIDE PANEL
• Stream agent responses in real time — see what files it reads, edits, and why.
• Follow-up in the same session to iterate on changes.
• Undo any session with one click (reverts git state).
• Track file diffs: see exactly which files changed and how many lines were added or removed.

— WORKS WITH —

• Cursor (via cursor-agent CLI)
• Claude Code (via claude CLI)
• OpenAI Codex
• MCP servers
• VS Code (fallback: opens file at the right line)

— REQUIREMENTS —

• React app running in development mode (Next.js, Vite, Create React App, Remix — any React
setup)
• A supported coding agent running locally
• Node 18+

— KEYBOARD SHORTCUTS —

Alt+S — Toggle element selection
Alt+M — Toggle move tool
Alt+T — Edit text on hovered element
Arrow Up/Down — Navigate parent/child
Enter — Confirm selection, open prompt
Escape — Cancel or clear
Shift+Click — Multi-select
Ctrl+Z / Ctrl+Shift+Z — Undo / Redo

— PRICING —

Free: 5 AI sessions per day.
Pro: Unlimited sessions.

Start free at uitool.bar