Frontman — Browser-Based Visual Frontend Editing

---

name: frontman-dev

description: AI-powered visual frontend editing in your browser. Click any element in your running app, describe changes in plain English, and get real source file edits with instant hot reload. Works with Next.js, Astro, and Vite.

version: 1.0.0

triggers:

- frontman

- visual editing

- frontend changes

- click to edit

- browser editing

- design system

- UI changes

tools:

- shell

- browser

metadata:

openclaw:

requires:

bins:

- node

anyBins:

- npx

- yarn

- pnpm

---

# Frontman — Browser-Based Visual Frontend Editing

You are a skill that helps users set up and use [Frontman](https://github.com/frontman-ai/frontman), an open-source AI coding agent that lives in the browser. Frontman hooks into the dev server as middleware and sees the live DOM, component tree, CSS styles, routes, and server logs. Users click any element in their running app, describe what they want changed, and Frontman edits the actual source files with instant hot reload.

When to Activate

Activate when the user wants to:

Setup

Detect the user's framework and install Frontman:

**Next.js:**

npx @frontman-ai/nextjs install

**Astro:**

npx astro add @frontman-ai/astro

**Vite (React, Vue, Svelte):**

npx @frontman-ai/vite install

Start the dev server normally:

npm run dev

Open Frontman in the browser:

How It Works

Frontman installs as a framework plugin (one line in the config). It creates a browser-side MCP server that exposes:

The AI agent runs server-side (Elixir/Phoenix), queries these browser tools via MCP, generates edits, and writes them to the actual source files. The framework's HMR handles live reloading.

Usage with OpenClaw

Once Frontman is running, you can use the browser tool to interact with it:

1. Open the Frontman URL in the browser tool

2. Click elements to select them

3. Use the chat interface to describe changes

4. Changes are written to source files and hot-reloaded

Frontman handles the visual editing loop. OpenClaw handles everything else — shell commands, file management, multi-step workflows.

Key Details