Introducing UiToolbar

My passion for visual design tools led to a project that lasted two and a half months instead of the intended one week. Today, I have finally developed a front-end visual direct design tool.

After all the lines of code I wrote — from CodeCamp tutorials to JSMastery tutorials and many YouTube tutorials — I always felt like there was a trade-off. A frustrating gap between what I wanted to do and my ability to express it cleanly in code.

The First Attempt

My first project to overcome this was a Chrome extension that pulled the HTML and CSS from inspiration sites so I could rewrite and repurpose them. It was helpful, but it wasn't enough. At the time, AI coding tools were not as advanced as they are now. We had Copilot and simple tab completion. There was always a trade-off.

As AI coding tools improved and became more attuned to visual feedback, I realized I could build something more integrated — something that truly merged design and code. There were tools like Stagewise, Inspector, ReactGrab by Aiden Bai, Agentation by Benji Taylor, and even Cursor's visual editor that showed the all-in-one approach was possible.

However, I specifically did not include no-code platforms. The point I was trying to make was code translation — enabling developers, not removing them from code.

Building the Extension

So, I began working on a browser extension that would sit on top of any website — including your local development environment — and turn the web into your personal playground. You can use your codebase visually on the frontend, pull assets and design tokens from inspiration sites, and repurpose them into code blocks or context for your coding agents.

Introducing UiToolbar. Direct visual design for coding agents.

UiToolbar is a browser extension and CLI tool that connects your IDE to direct visual design in the browser. Select, design, and transmit structured context to Cursor, Claude Code, or any coding agent — right from the page.

Your agent modifies the source file. Your dev server hot-reloads. And you see the changes instantly in the browser.

Visual Element Selection

• Click on any element to select it. View component name, file path, and tag in the hover card.
• Shift-click or drag to select multiple elements.
• Use arrow keys to move up to parent or down to child component.
• React-aware: extracts component name, props, and source location from the fiber tree directly.

Inline Text Editing

• Double-click on any text to edit it live.
• Use a floating toolbar to change font, size, weight, color, alignment, and spacing.
• Click Apply to transmit structured changes to your coding agent.

Move & Layout Tool (Alt+M)

• Move elements between siblings to reorder them visually.
• Switch to freeform mode for absolute positioning.
• Includes resize handles, rotation controls, alignment snapping, and pixel grid.
• Nudge elements with arrow keys (1px) or Shift+arrow keys (10px).
• Apply all layout changes at once — your agent writes the CSS.

Annotation Mode

• Pin comments, bugs, or TODOs to any element.
• Markers persist through page reloads.
• Batch-send annotations to your coding agent for implementation.
• Export/import annotations as JSON for team handoffs.

Region Screenshot Capture

• Draw to capture any area of the page.
• Include the screenshot in your AI prompt for better visual context.

Agent Side Panel

• Stream agent responses in real time — see which files it reads and edits.
• Continue iterating within the same session.
• One-click undo restores your Git state.
• Track diffs to see exactly what changed.

What This Means

We're entering a new era where the browser becomes the design surface and AI becomes the implementation engine.

UiToolbar is my step toward closing the gap between vision and code.