frontman
让产品经理和设计师无需打开IDE，直接在浏览器中修改前端代码的AI助手。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：frontman。 它的用途是：让产品经理和设计师无需打开IDE，直接在浏览器中修改前端代码的AI助手。 完整的 Skill 内容见：https://321skill.com/skills/frontman/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“把首页这个横幅标题的字体调大一些，颜色改成品牌主蓝色。” 它会定位到渲染该标题的React组件或CSS样式文件，生成修改代码并应用，页面会立即刷新以展示新样式。或者
对AI说：“这个表格在手机上看列宽不对，让它自适应屏幕。” Frontman会分析计算后的CSS和布局，调整相关样式属性来解决响应式问题。
介绍
Frontman是一个开源的AI编程助手，它直接运行在你的浏览器中。它解决了产品、设计与开发团队之间，因微小前端修改（如文案、间距、颜色）而反复沟通、排期和等待的痛点。
使用时，你只需在正在运行的应用中点击任意UI元素，用自然语言描述你想要做的修改（例如“把这个按钮的颜色改成蓝色”），Frontman便会理解你的意图，直接编辑对应的源代码文件，并立即热重载，让你实时看到效果。
这个工具非常适合需要快速迭代UI细节的产品经理、设计师，以及希望获得比传统IDE内AI工具更丰富上下文（如实时DOM、计算后CSS）的前端开发者。
建议在开发或测试环境中使用，以便安全地审查AI生成的代码变更。虽然它能处理许多常见的前端样式和文案问题，但对于复杂的逻辑重构或架构调整，仍需专业开发人员介入。
核心特点
与Cursor、GitHub Copilot等基于源代码文件工作的AI工具不同，Frontman从浏览器中运行的实时应用出发，能直接看到DOM、计算后的CSS、组件树和服务器日志，从而精准定位并修改影响特定UI元素的源代码。
注意事项
不适合进行大规模代码重构、后端逻辑修改或处理与实时渲染视图无关的复杂业务逻辑。
常见问题
Frontman支持哪些前端框架？
官方支持Next.js、Astro和Vite，通过框架中间件集成，可以查看实时渲染输出。
使用Frontman修改代码安全吗？
它会直接修改你的源代码，建议在版本控制下使用，并仔细审查生成的代码差异（diff）后再提交。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/frontman/raw/index.md 读取 frontman 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/frontman/raw/index.md（查看排版版本）