artifacts-builder

Artifacts Builder - Claude AI 前端组件构建工具

技能概述

Artifacts Builder 是一套用于创建复杂多组件 Claude.ai HTML artifacts 的工具集，支持 React、TypeScript、Tailwind CSS 和 shadcn/ui 等现代前端技术栈，适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts，而非简单的单文件 HTML/JSX artifacts。

适用场景

1. 复杂交互式 UI 构建

当您需要为 Claude.ai 创建包含复杂用户交互、状态管理或多页面路由的 artifacts 时，Artifacts Builder 提供完整的 React + TypeScript 开发环境。相比简单的单文件 HTML，这里可以构建真正的应用程序级别的界面。

2. shadcn/ui 组件库集成

如果您希望在 Claude artifacts 中使用 shadcn/ui 的 40+ 预装组件（包括按钮、表单、对话框、数据展示等），Artifacts Builder 已预配置好所有依赖和主题系统，无需手动配置即可直接使用。

3. 生产级前端项目打包

当需要将 React + Vite 项目打包为单个自包含的 HTML 文件时，Artifacts Builder 提供自动化脚本，处理 Parcel bundling、资源内联、路径别名等复杂配置，一键生成可直接分享的 bundle.html。

核心功能

1. 一键项目初始化

运行 scripts/init-artifact.sh 即可创建完整的 React + TypeScript + Vite 项目，包含 Tailwind CSS 3.4.1 + shadcn/ui 主题系统、路径别名（@/）、40+ shadcn/ui 组件、所有 Radix UI 依赖，以及 Node 18+ 兼容性配置。

2. 自动化打包脚本

scripts/bundle-artifact.sh 脚本自动完成打包流程：安装 bundling 依赖（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline）、创建 .parcelrc 配置、使用 Parcel 构建（无 source maps）、将所有资源内联到单个 HTML 文件。

3. 现代前端技术栈

支持 React 18、TypeScript、Vite（开发）、Parcel（打包）、Tailwind CSS 和 shadcn/ui，提供完整的现代前端开发体验，包括热模块替换、类型检查、CSS-in-JS 和响应式设计支持。

常见问题

Artifacts Builder 适合什么类型的 Claude artifacts？

Artifacts Builder 专为 elaborate, multi-component artifacts 设计。如果您的 artifact 需要状态管理、路由功能、或 shadcn/ui 组件库，那么这是理想选择。对于简单的单文件 HTML/JSX artifacts，建议直接使用更轻量的方案。

如何将我的 React 项目打包成单个 HTML 文件？

确保项目根目录有 index.html 文件，然后运行 bash scripts/bundle-artifact.sh。脚本会自动安装打包依赖、配置 Parcel、构建项目并内联所有资源，生成 bundle.html 文件，可直接在 Claude 对话中分享。

项目初始化后包含哪些预配置？

初始化脚本创建的项目包含：React + TypeScript（通过 Vite）、Tailwind CSS 3.4.1 + shadcn/ui 主题系统、路径别名（@/）配置、40+ shadcn/ui 组件预装、所有 Radix UI 依赖、Parcel 打包配置（.parcelrc），以及 Node 18+ 兼容性（自动检测并锁定 Vite 版本）。