Claude 不再只是给代码片段了——它现在能直接做完整 App

你以为 Claude 只能生成代码片段？它现在能直接做 App 了

真的，不是开玩笑。我最近挖到一个超硬核的 Skill——Web Artifacts Builder，来自 Anthropic 官方。它让 Claude 不再只是给你一段代码，而是能帮你构建完整的多组件 React 应用，打包成单个 HTML 文件，直接扔给任何人打开就能跑。

想象一下：你跟 Claude 说「帮我做个待办列表 App，要能拖拽、有关灯模式」，然后它直接给你一个可以交互的完整应用——不是截图，不是代码，是真的能用的 HTML 文件。这就是这个 Skill 做的事。

技术栈是什么？

背后是正经的前端工程化方案：

• React 18 + TypeScript（via Vite）
• Tailwind CSS 3.4.1 + shadcn/ui 组件库（40+ 组件预装）
• Parcel 打包，把整个应用内联成单个 HTML 文件

流程也非常工程化：初始化项目 → 开发编辑 → 打包成单个 HTML → 直接分享。整个过程 Claude 全程主导，你只需要说需求。

为什么这个 Skill 值得重视？

过去我们觉得 AI 生成的前端都是「玩具级」——单文件 JS，样式全靠行内。这个 Skill 颠覆了这个认知。它能处理：

• 多组件状态管理（不是简单的 useState，是真正的应用级状态）
• 路由支持
• shadcn/ui 完整组件库（Modal、Dropdown、DataTable……）
• 打包后单个 HTML 文件，离线可用，无需服务器

做 PPT 时想要一个可交互的原型？做提案时需要一个可以演示的 Demo？或者就是想让非技术同事能直接打开看效果？用它，几分钟就能搞定。

怎么用？

在 Claude Code 或 Claude.ai 中加载这个 Skill（Anthropic 官方已经内置，Plus/Pro 用户直接可用）。然后用自然语言描述你想要的应用，剩下的交给 Claude。

唯一要注意的是：不要期待它做超大型应用——单 HTML 打包有体积限制，但做个中型的管理后台、待办工具、问卷表单，绝对够用。

说真的，用过这个之后，我做原型的方式彻底变了。以前要用 Figma 画框架，现在直接让 Claude 做可交互的真家伙，效率提升不止一个量级。

GitHub：https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder

GitHub: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder