Home /Claude Skills /browser-canvas

强烈推荐

Browser Canvas

告别繁琐的前端配置，用写文件的方式玩转浏览器交互

写文件，出界面，就这么简单

核心原理：
Browser Canvas 让 Claude Code 通过简单的文件操作就能在浏览器中渲染交互式 UI。无需复杂 API，只需编写 App.jsx 或 index.html 文件，就能自动打开浏览器窗口并实现热更新。支持 React 和原生 HTML/CSS/JS 两种模式，是你的前端原型设计神器。

关键功能 (KEY FEATURES)

01双模渲染

React和原生HTML双模式自由切换，满足不同开发需求

02即时热更

编辑文件后浏览器实时刷新，所见即所得

03开箱即用

内置shadcn/ui组件库和Tailwind，省去配置烦恼

04状态同步

通过_state.json实现前后端双向数据通信

github.com/parkerhancock/browser-canvas

data-ai·parkerhancock·2026-02-02·⭐ 2·🔱 0

精选导航站 agent-skills.cc

安装方式

HTTPS

git clone https://github.com/parkerhancock/browser-canvas.git

SSH

git clone [email protected]:parkerhancock/browser-canvas.git

GitHub CLI

gh repo clone parkerhancock/browser-canvas

常见问答

Q: Browser Canvas Agent Skills 的安装步骤是什么？

1.编写文件: 创建App.jsx或index.html

2.自动渲染: 浏览器窗口自动打开

3.即时调试: 修改文件触发热更新

4.状态管理: 通过_state.json交换数据

Q: Browser Canvas Agent Skills 的亮点是什么？

零配置开发
文件即UI
企业级组件库
可视化反馈

Q: Browser Canvas Agent Skills 的使用场景是什么？

快速原型设计
前端教学演示
可视化数据展示
交互式概念验证

Q: Browser Canvas Agent Skills 的局限性是什么？

不适合大型项目开发
样式定制有限

相关 Claude Code Skills

openclaw/openclaw

openclaw

OpenClaw 是一个强大的多模态 AI 助手框架，支持文本、语音、图像等多种交互方式。提供 Canvas 可视化协作界面、MCP 服务器集成、多平台部署能力，让用户能够构建个性化的 AI 助手应用。

f/awesome-chatgpt-prompts

f

这是一个超全的AI提示词库，汇集了各种场景下的ChatGPT、Claude等AI助手的优质提示词模板。无论你是新手还是专家，都能在这里找到灵感，让你的AI对话效率翻倍。

14万人验证过的提示词库，哈佛教授都在用，让你3秒变成AI对话专家

anthropics/claude-code

anthropics

Claude Code 是 Anthropic 官方的终端 CLI 工具，就像一个懂你代码的智能助手。它能帮你理解复杂代码、执行日常任务、处理 Git 工作流，一切只需用自然语言告诉它。

大幅提升开发效率，复杂的Git操作一句话搞定

anthropics/skills

anthropics

Claude技能库就像给AI装了个万能工具箱，无论是设计创意、文档处理还是技术开发，都能找到现成的解决方案。让你告别重复劳动，AI瞬间变身你的专属效率助手。

官方技能库质量有保障，开箱即用解决90%专业需求

upstash/context7

upstash

Context7就像给你的AI编程助手装上了实时更新的百科全书。它会自动拉取最新版本的库文档和代码示例，再也不用担心AI给你过时的解决方案或者根本不存在的API了。

彻底解决AI编程最头疼的问题——过时的文档和虚假API

CherryHQ/cherry-studio

CherryHQ

Cherry Studio 是你的 AI 超级工具箱，一个桌面端就能同时调用 OpenAI、Claude、Gemini 等主流大模型。300+预置助手任选，支持文档处理、代码高亮，还能多模型协同对话。

聚合主流AI服务，文档处理与代码开发无缝衔接，开源免费却有商业级体验