browser-canvas
让AI通过纯文件操作，在浏览器中渲染交互式UI界面。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：browser-canvas。 它的用途是：让AI通过纯文件操作，在浏览器中渲染交互式UI界面。 完整的 Skill 内容见：https://321skill.com/skills/browser-canvas/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我创建一个展示实时股票行情走势的仪表盘，要有图表和关键指标卡片。”AI会在.claude/artifacts/目录下生成App.jsx文件，Browser Canvas会自动打开浏览器展示这个交互式仪表盘。你可以继续让AI调整样式或添加功能，所有修改都会实时反映在浏览器中。
介绍
Browser Canvas 解决了AI Agent（如Claude Code）在开发过程中难以直接创建和预览可视化界面的痛点。它通过监听文件变化，将AI编写的App.jsx或index.html文件实时渲染到浏览器中，实现了从代码到UI的无缝转换。
使用方式极其简单：安装插件或启动本地服务器后，AI只需在指定目录下写入UI文件，Browser Canvas便会自动打开浏览器窗口并展示界面。用户或AI后续对文件的任何修改，都会触发浏览器的热重载，实现即时预览。
它非常适合前端开发、全栈开发、智能体开发等需要快速原型验证或构建AI驱动界面的角色。无论是构建一个内部工具仪表盘，还是演示一个交互式概念验证，都能通过纯文件操作高效完成。
建议在需要快速迭代UI、进行可视化调试或构建AI可操作的画布应用时使用。注意，它主要服务于开发预览阶段，生成的产物需根据实际部署需求进行后续处理。
核心特点
核心区别在于其极简的“文件即UI”协议，无需API调用或特殊通信机制，AI仅通过读写文件即可与浏览器画布进行双向交互和状态管理。同时，它原生支持React（含完整组件库）和纯HTML/CSS/JS两种模式，适应不同复杂度和可移植性需求。
注意事项
不适合用于生产环境部署或需要复杂后端逻辑集成的场景。
常见问题
Browser Canvas 需要联网吗？
不需要。它是一个本地服务器，所有渲染和热重载都在本地浏览器中进行。
支持哪些UI框架？
主要支持两种模式：React模式（预置shadcn/ui等组件）和Vanilla模式（纯原生HTML/CSS/JS）。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/browser-canvas/raw/index.md 读取 browser-canvas 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/browser-canvas/raw/index.md（查看排版版本）