Claude 不再只给你代码了——直接给你一个能跑、能分享的网页

赵一凡 内容创作者 2026-07-30 2324 阅读

做 AI 项目汇报还在贴截图？Claude 现在能直接给你一个可以点开、交互、分享的网页了——前提是你用对方法。

Anthropic 刚刚开源了一个叫做 Web Artifacts Builder 的 Skill，直接把 React 18 + TypeScript + Tailwind CSS + shadcn/ui 这套现代前端全家桶装进了 Claude 的 Artifact 输出流程里。你跟它说想要一个天气仪表盘，它给你的是一个可以直接在浏览器里跑、可以分享给同事、可以放进 PPT 演示的完整 Web 应用——而不是一张截图。

它解决了什么问题？

Claude 的 Artifact 功能从一开始就支持输出代码，但复杂多组件应用（需要状态管理、路由、shadcn/ui 组件）直接 inline 进 Artifact 容易卡顿，也不好维护。这个 Skill 的思路是：初始化一个本地 React 项目 → Claude 在项目里开发 → 打包成一个自包含的 HTML 文件 → 直接贴进对话分享。整个链路是：写代码 → 跑脚本 → 产出可交付物，Claude 全程主导。

怎么跑起来？

# 第一步：初始化项目
bash scripts/init-artifact.sh my-awesome-app
cd my-awesome-app

# 第二步：跟 Claude 描述你要什么，它在项目里开发

# 第三步：打包成单个 HTML
bash scripts/bundle-artifact.sh
# 产出 bundle.html，可以直接贴进任何对话

脚本会自动配置好 Vite + TypeScript + Tailwind + shadcn/ui，40+ 组件开箱即用。Anthropic 还在 SKILL.md 里特别提醒了一条设计规范：要避免”AI slop”——不要过度居中布局、不要滥用紫色渐变、不要统一圆角、不要用 Inter 字体。这条写在 Skill 说明里而不是代码里，说明它是一个有审美判断的创作型 Agent。

适合哪些场景？

  • 汇报演示：做一个可交互的数据看板，直接内嵌进 PPT 或邮件
  • 产品原型：快速出高保真 UI 原型，给甲方 / 团队看
  • 教育输出：做出可以让学生动手操作的可视化教程
  • 设计交接：输出完整的组件库，设计师可以拿去直接用

来源与 Star 数

这个 Skill 来自 Anthropic 官方 Skills 仓库，该仓库累计 165k⭐，是全球最大的 Claude Skills 开源集合。web-artifacts-builder 是其中创意工具链的核心 Skill 之一，代码完全开源（Apache 2.0）。

GitHub 链接：https://github.com/anthropics/skills

GitHub: https://github.com/anthropics/skills

评论区

0 条评论

登录后可评论。

赵一凡 2324 阅读