技能详情（站内镜像，无评论）
作者：Danni Friedland @bluehotdog
许可证：MIT-0
MIT-0 ·免费使用、修改和重新分发。无需归因。
版本：v1.0.0
统计：⭐ 0 · 12 · 0当前安装次数· 0历史安装次数
⭐ 0
安装量（当前） 0
🛡 VirusTotal ：良性 · OpenClaw ：可疑
Package：bluehotdog/frontman-dev
安全扫描（ClawHub）
- VirusTotal ：良性
- OpenClaw ：可疑
OpenClaw 评估
The skill's instructions mostly match a browser-based dev tool, but important details are ambiguous — notably where the AI runs and whether your source, logs, and screenshots are sent to third-party servers — and the runtime uses npx which downloads and executes remote packages in your project.
目的
Name/description (visual frontend editing) align with the instructions: the SKILL.md tells the agent how to add Frontman plugins (npx/astro/vite), start the dev server, open the local Frontman UI, and use it to edit source files. Required binaries (node, npx/yarn/pnpm) are appropriate for this purpose.
说明范围
The instructions require opening a running dev server and exposing the live DOM, computed CSS, screenshots, console logs, component-to-file mappings, and then writing edits to actual source files. The SKILL.md does not clearly state whether the 'AI agent runs server-side (Elixir/Phoenix)' is self-hosted locally or handled by a remote service; that ambiguity creates a potential data-exfiltration risk because the tool will surface screenshots, l…
安装机制
This is an instruction-only skill (no install spec). However, it instructs the user/agent to run npx commands to install packages into the project. npx fetches and executes code from npm (remote code run at install time). That is expected for this kind of plugin, but it is a higher-risk action than purely local scripted changes — verify the package source and audit package scripts before running.
证书
The skill declares no required env vars, which is reasonable. But the README mentions 'BYOK' for LLM providers and says the AI runs server-side; SKILL.md does not require or document how API keys are provided, nor whether those LLM calls (and any code/DOM/screenshots) are routed to third-party servers. Absence of explicit credential handling combined with ambiguous execution location makes it unclear whether sensitive project data or keys woul…
持久
always is false and the skill is user-invocable only. There is no install script or persistent components declared by the skill itself. The expected behavior (modifying project files via Frontman plugins) is scoped to the project and development workflow.
安装（复制给龙虾 AI）
将下方整段复制到龙虾中文库对话中，由龙虾按 SKILL.md 完成安装。
请把本段交给龙虾中文库（龙虾 AI）执行：为本机安装 OpenClaw 技能「Frontman — Visual Frontend Editing」。简介：AI-powered visual frontend editing in your browser. Click any element in your r…。
请 fetch 以下地址读取 SKILL.md 并按文档完成安装：https://raw.githubusercontent.com/openclaw/skills/refs/heads/main/skills/bluehotdog/frontman-dev/SKILL.md
（来源：yingzhi8.cn 技能库）SKILL.md
---
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:
- Make visual changes to a running web app (spacing, colors, layout, copy)
- Edit frontend components without opening an IDE
- Set up browser-based AI editing for their project
- Fix design system inconsistencies by clicking elements directly
- Let designers or PMs make UI changes without engineering tickets
## Setup
### Detect the user's framework and install Frontman:
**Next.js:**
```bash
npx @frontman-ai/nextjs install
```
**Astro:**
```bash
npx astro add @frontman-ai/astro
```
**Vite (React, Vue, Svelte):**
```bash
npx @frontman-ai/vite install
```
### Start the dev server normally:
```bash
npm run dev
```
### Open Frontman in the browser:
- Next.js: `http://localhost:3000/frontman`
- Astro: `http://localhost:4321/frontman`
- Vite: `http://localhost:5173/frontman`
## How It Works
Frontman installs as a framework plugin (one line in the config). It creates a browser-side MCP server that exposes:
- **Live DOM tree** — the actual rendered page, not source files
- **Computed CSS** — runtime values, not class names
- **Component tree** — which component renders which element, with source file locations
- **Screenshots** — visual context for the AI
- **Element selection** — click any element to target it
- **Console logs and build errors** — from the dev server
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
- **Open source**: Apache 2.0 (client) / AGPL-3.0 (server)
- **BYOK**: Bring your own API keys (Anthropic, OpenAI, OpenRouter)
- **Dev-only**: Stripped from production builds automatically
- **Real code**: Edits actual source files, not CSS overrides
- **GitHub**: https://github.com/frontman-ai/frontman
- **Docs**: https://frontman.sh/docs/