Web Artifacts Builder Skill 详解

创建复杂的 claude.ai HTML Artifacts

基本信息

属性	值
名称	`web-artifacts-builder`
类别	开发工具
输出格式	单文件 HTML
许可证	Apache 2.0

yaml

name: web-artifacts-builder
description: Suite of tools for creating elaborate, multi-component
claude.ai HTML artifacts using modern frontend web technologies (React,
Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state
management, routing, or shadcn/ui components - not for simple single-file
HTML/JSX artifacts.

1. 核心概念

1.1 什么是 Web Artifacts

通俗比喻：Web Artifacts 就像是可以直接在 Claude 对话中展示的"迷你网页应用"——完全自包含、可交互、无需外部服务器。

1.2 技术栈

技术	用途
React 18	UI 框架
TypeScript	类型安全
Vite	开发服务器
Parcel	打包工具
Tailwind CSS	样式框架
shadcn/ui	UI 组件库

1.3 适用场景

markdown

**适合使用**：
- 需要状态管理的复杂应用
- 需要路由的多页面应用
- 使用 shadcn/ui 组件的应用
- 需要多个 React 组件的项目

**不适合**：
- 简单的单文件 HTML/JSX
- 不需要 React 的静态页面

2. 设计原则

2.1 避免 "AI Slop"

markdown

**非常重要**：避免被称为"AI slop"的设计

✗ 避免：
- 过度居中的布局
- 紫色渐变
- 统一的圆角
- Inter 字体

✓ 追求：
- 有个性的布局
- 独特的配色
- 多样化的设计元素

3. 快速开始

3.1 步骤1：初始化项目

bash

bash scripts/init-artifact.sh <project-name>
cd <project-name>

脚本自动配置：

✅ React + TypeScript (via Vite)
✅ Tailwind CSS 3.4.1 + shadcn/ui 主题系统
✅ 路径别名 (@/) 已配置
✅ 40+ shadcn/ui 组件预安装
✅ 所有 Radix UI 依赖已包含
✅ Parcel 打包配置 (.parcelrc)
✅ Node 18+ 兼容性

3.2 步骤2：开发 Artifact

编辑生成的文件，构建你的应用。

3.3 步骤3：打包为单文件 HTML

bash

bash scripts/bundle-artifact.sh

脚本功能：

安装打包依赖（parcel, @parcel/config-default 等）
创建 .parcelrc 配置（支持路径别名）
使用 Parcel 构建（无 source maps）
使用 html-inline 将所有资源内联到单个 HTML

输出：bundle.html - 自包含的 Artifact 文件

3.4 步骤4：分享 Artifact

将打包后的 HTML 文件在对话中分享，用户可以作为 Artifact 查看。

3.5 步骤5：测试（可选）

markdown

**注意**：这是可选步骤

- 使用 Playwright 或 Puppeteer 测试
- 避免预先测试，因为会增加响应延迟
- 在展示 Artifact 后，根据需要再测试

4. 项目结构

4.1 初始化后的结构

my-artifact/
├── index.html         # 入口 HTML
├── src/
│   ├── App.tsx        # 主应用组件
│   ├── main.tsx       # React 入口
│   ├── index.css      # 全局样式
│   └── components/    # 组件目录
│       └── ui/        # shadcn/ui 组件
├── package.json
├── tsconfig.json
├── tailwind.config.js
└── vite.config.ts

4.2 shadcn/ui 组件

预安装的组件包括：

Button, Card, Dialog
Form, Input, Label
Select, Tabs, Table
和 40+ 其他组件

参考文档：https://ui.shadcn.com/docs/components

5. 开发技巧

5.1 使用 shadcn/ui 组件

tsx

import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>欢迎</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>点击我</Button>
      </CardContent>
    </Card>
  );
}

5.2 使用 Tailwind CSS

tsx

function StyledComponent() {
  return (
    <div className="flex flex-col gap-4 p-6 bg-gray-100 rounded-lg">
      <h1 className="text-2xl font-bold text-gray-900">
        标题
      </h1>
      <p className="text-gray-600">
        内容描述
      </p>
    </div>
  );
}

5.3 状态管理

tsx

import { useState, useEffect } from 'react';

function StatefulComponent() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState<string[]>([]);

  useEffect(() => {
    // 副作用逻辑
  }, []);

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>
        增加
      </button>
    </div>
  );
}

6. 打包原理

6.1 bundle-artifact.sh 工作流程

mermaid

graph LR
    A[安装依赖] --> B[创建 .parcelrc]
    B --> C[Parcel 构建]
    C --> D[html-inline 内联]
    D --> E[bundle.html]

6.2 依赖安装

bash

npm install --save-dev \
  parcel \
  @parcel/config-default \
  parcel-resolver-tspaths \
  html-inline

6.3 .parcelrc 配置

json

{
  "extends": "@parcel/config-default",
  "resolvers": ["parcel-resolver-tspaths", "..."]
}

7. 常见开发任务

7.1 添加新组件

bash

# 在 src/components/ 下创建新组件
touch src/components/MyComponent.tsx

7.2 添加新的 shadcn/ui 组件

如果需要额外的 shadcn/ui 组件：

bash

npx shadcn-ui@latest add <component-name>

7.3 自定义主题

编辑 tailwind.config.js 和 src/index.css 中的 CSS 变量：

css

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  /* ... */
}

8. 使用示例

8.1 触发方式

"帮我创建一个待办事项应用 Artifact"
"build a dashboard with charts"
"create an interactive form wizard"
"make a data visualization artifact"

8.2 典型输出

项目初始化 - 完整的 React 项目结构
开发代码 - 自定义组件和逻辑
打包结果 - 单文件 bundle.html
Artifact 展示 - 在 Claude 对话中可交互

9. 最佳实践

9.1 性能优化

markdown

- 避免大型依赖库
- 使用 React.memo 优化重渲染
- 懒加载非关键组件

9.2 代码组织

markdown

- 组件放在 src/components/
- 工具函数放在 src/lib/
- 类型定义放在 src/types/

9.3 样式一致性

markdown

- 使用 Tailwind 工具类
- 遵循 shadcn/ui 设计系统
- 保持配色方案一致

10. 本节小结

要点	说明
技术栈	React 18 + TypeScript + Tailwind + shadcn/ui
输出格式	单文件自包含 HTML
初始化	init-artifact.sh 脚本
打包	bundle-artifact.sh 脚本
适用场景	复杂交互应用，需要状态管理或路由

返回：Skills 目录

Web Artifacts Builder Skill 详解 ​

基本信息 ​

1. 核心概念 ​

1.1 什么是 Web Artifacts ​

1.2 技术栈 ​

1.3 适用场景 ​

2. 设计原则 ​

2.1 避免 "AI Slop" ​

3. 快速开始 ​

3.1 步骤1：初始化项目 ​

3.2 步骤2：开发 Artifact ​

3.3 步骤3：打包为单文件 HTML ​

3.4 步骤4：分享 Artifact ​

3.5 步骤5：测试（可选） ​

4. 项目结构 ​

4.1 初始化后的结构 ​

4.2 shadcn/ui 组件 ​

5. 开发技巧 ​

5.1 使用 shadcn/ui 组件 ​

5.2 使用 Tailwind CSS ​

5.3 状态管理 ​

6. 打包原理 ​

6.1 bundle-artifact.sh 工作流程 ​

6.2 依赖安装 ​

6.3 .parcelrc 配置 ​

7. 常见开发任务 ​

7.1 添加新组件 ​

7.2 添加新的 shadcn/ui 组件 ​

7.3 自定义主题 ​

8. 使用示例 ​

8.1 触发方式 ​

8.2 典型输出 ​

9. 最佳实践 ​

9.1 性能优化 ​

9.2 代码组织 ​

9.3 样式一致性 ​

10. 本节小结 ​

Web Artifacts Builder Skill 详解

基本信息

1. 核心概念

1.1 什么是 Web Artifacts

1.2 技术栈

1.3 适用场景

2. 设计原则

2.1 避免 "AI Slop"

3. 快速开始

3.1 步骤1：初始化项目

3.2 步骤2：开发 Artifact

3.3 步骤3：打包为单文件 HTML

3.4 步骤4：分享 Artifact

3.5 步骤5：测试（可选）

4. 项目结构

4.1 初始化后的结构

4.2 shadcn/ui 组件

5. 开发技巧

5.1 使用 shadcn/ui 组件

5.2 使用 Tailwind CSS

5.3 状态管理

6. 打包原理

6.1 bundle-artifact.sh 工作流程

6.2 依赖安装

6.3 .parcelrc 配置

7. 常见开发任务

7.1 添加新组件

7.2 添加新的 shadcn/ui 组件

7.3 自定义主题

8. 使用示例

8.1 触发方式

8.2 典型输出

9. 最佳实践

9.1 性能优化

9.2 代码组织

9.3 样式一致性

10. 本节小结