Artifacts Builder 前端制品构建

来源：基于 anthropics/skills（MIT）内容改写。

要在 claude.ai 中构建强大的前端 Artifact，请依次执行：

1. 运行 scripts/init-artifact.sh 初始化前端仓库
2. 修改生成的代码开发 Artifact
3. 使用 scripts/bundle-artifact.sh 将所有代码打包为单个 HTML 文件
4. 将 Artifact 展示给用户
5. （可选）对 Artifact 进行测试

技术栈：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 步：开发 Artifact

按需求编辑脚手架生成的文件构建 Artifact。可参考下文 常见开发任务 指南。

第 3 步：打包为单文件 HTML

将 React 应用打包成单个 HTML Artifact：

bash scripts/bundle-artifact.sh

脚本会生成 bundle.html —— 一个自包含的 Artifact，所有 JavaScript、CSS 与依赖均已内联，可直接在 Claude 对话中分享。

前提要求：项目根目录必须存在 index.html。

脚本执行内容：

• 安装打包依赖（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline）
• 创建带路径别名支持的 .parcelrc
• 使用 Parcel 构建（无 source map）
• 通过 html-inline 将全部资源合并到单个 HTML

第 4 步：向用户展示 Artifact

在对话中分享打包后的 HTML 文件，让用户直接以 Artifact 方式查看。

第 5 步：测试 / 预览 Artifact（可选）

说明：此步骤完全可选，仅在必要时执行。

若需测试或预览 Artifact，可调用现有工具（其他 Skills 或 Playwright、Puppeteer 等内置工具）。通常不建议在呈现前预先测试，以免增加响应延迟。若用户提出请求或发现问题，再进行测试即可。

参考资料

• shadcn/ui 组件文档：https://ui.shadcn.com/docs/components

GitHub 访问

在 GitHub 查看