id: “d2442d11-7ab3-594a-89be-929a17aff619” name: artifacts-builder description: 一套工具，用于使用现代前端Web技术（React、Tailwind CSS、shadcn/ui）创建精美的、多组件的claude.ai HTML工件。适用于需要状态管理、路由或shadcn/ui组件的复杂工件，不适用于简单的单文件HTML/JSX工件。 license: 完整条款在LICENSE.txt中
Artifacts Builder
要构建强大的前端claude.ai工件，请按照以下步骤操作：
- 使用
scripts/init-artifact.sh初始化前端仓库 - 通过编辑生成的代码来开发您的工件
- 使用
scripts/bundle-artifact.sh将所有代码打包成单个HTML文件 - 向用户展示工件
- （可选）测试工件
技术栈: React 18 + TypeScript + Vite + Parcel（打包）+ Tailwind CSS + shadcn/ui
设计与风格指南
非常重要：为避免常说的“AI垃圾”，避免使用过多的居中布局、紫色渐变、统一圆角和Inter字体。
快速开始
步骤1：初始化项目
运行初始化脚本以创建新的React项目：
bash scripts/init-artifact.sh <project-name>
cd <project-name>
这将创建一个完全配置的项目，包括：
- ✅ React + TypeScript（通过Vite）
- ✅ Tailwind CSS 3.4.1 与 shadcn/ui 主题系统
- ✅ 配置了路径别名（
@/） - ✅ 预安装了40多个 shadcn/ui 组件
- ✅ 包含所有 Radix UI 依赖项
- ✅ 配置了 Parcel 用于打包（通过 .parcelrc）
- ✅ Node 18+ 兼容性（自动检测并固定Vite版本）
步骤2：开发您的工件
要构建工件，请编辑生成的文件。请参阅下面的常见开发任务以获取指导。
步骤3：打包成单个HTML文件
将React应用打包成单个HTML工件：
bash scripts/bundle-artifact.sh
这将创建 bundle.html - 一个自包含的工件，所有JavaScript、CSS和依赖项都已内联。此文件可以直接在Claude对话中作为工件分享。
要求: 您的项目必须在根目录中有一个 index.html。
脚本的作用:
- 安装打包依赖项（parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline）
- 创建支持路径别名的
.parcelrc配置 - 使用 Parcel 构建（无源映射）
- 使用 html-inline 将所有资源内联到单个HTML中
步骤4：与用户分享工件
最后，在对话中分享打包的HTML文件，以便用户可以将其视为工件。
步骤5：测试/可视化工件（可选）
注意：这是一个完全可选的步骤。仅在必要或请求时执行。
要测试/可视化工件，请使用可用工具（包括其他技能或内置工具，如Playwright或Puppeteer）。一般来说，避免预先测试工件，因为这会在请求和看到完成工件之间增加延迟。如果有请求或出现问题，则在呈现工件后稍后测试。
参考
- shadcn/ui 组件: https://ui.shadcn.com/docs/components