web-artifacts-buildermain

官方版无广告27

复杂交互网页构建与打包技能

更新日期：

2026年4月20日

分类标签：

语言：

多语言

平台：

没限制

0 人已下载手机查看

web-artifacts-builder 是一个帮助 Claude 制作复杂交互网页的 Skill。它提供项目初始化和打包脚本，能把多组件前端项目整理成单个 HTML 文件，便于在对话中分享。它适合需要状态管理、页面路由或组件库的开发者，以及制作交互原型的人。

适配哪些工具

官方材料将用途限定为 claude.ai 的 HTML artifacts。技术栈包括 React 18、TypeScript、Vite、Parcel、Tailwind CSS 和 shadcn/ui，分别用于界面开发、类型支持、项目构建、打包和样式组件。

材料没有说明在 Claude Code、Codex 或其他助手中安装与调用此 Skill 的方法，这些工具的适配情况未核实。简单的单文件 HTML 或 JSX 页面不属于其推荐场景。

材料未提供 Skill 本身的安装入口、安装目录或启用流程，因此安装方法未核实。已确认的起步方式是使用所附初始化脚本创建前端项目，然后进入项目目录开发。

初始化结果包含 React 与 TypeScript 项目、Tailwind CSS 3.4.1、路径别名、四十多个预装的 shadcn/ui 组件及 Radix UI 依赖。脚本支持 Node 18 及以上版本，并自动检测和固定 Vite 版本。

官方确认的流程是：先初始化项目，修改生成的代码完成界面，再使用打包脚本生成 bundle.html，最后在 Claude 对话中分享该文件。项目根目录必须有 index.html。

打包脚本会安装所需依赖，配置路径别名，通过 Parcel 构建，再把脚本、样式和依赖内联到单个 HTML 文件。材料没有给出具体业务应用示例，也没有提供可据此复述的测试结果。

本条依据所提供的官方摘录编写，未直接核实仓库当前是否仍存在该 Skill，未进行替换。Skill 的发布版本、价格及性能数据均未核实；许可证仅指向 LICENSE.txt，具体条款未核实。

官方建议避免过多居中布局、紫色渐变、统一圆角和 Inter 字体。测试属于可选步骤，可按需要使用 Playwright 或 Puppeteer；材料未承诺所有生成页面均可直接通过测试。