概述

Web Artifacts Builder Skill 是 Anthropic 官方发布的 Claude Skills 之一,旨在使用现代前端 Web 技术为 claude.ai 创建精细的、多组件的 HTML 制品。此 Skill 提供了一个完整的工作流程,用于构建需要状态管理、路由或 shadcn/ui 组件的复杂制品——超越简单的单文件 HTML/JSX 制品。

该 Skill 使用强大的现代技术栈(React 18 + TypeScript + Vite + Parcel + Tailwind CSS + shadcn/ui),并包含处理初始化、打包和测试的自动化脚本,使创建可在 Claude 对话中作为单文件制品共享的复杂 Web 应用程序变得容易。

核心功能

1. 完整的现代技术栈

预配置的开发环境:

React 18 + TypeScript: 类型安全的组件开发
Vite: 快速的开发服务器和构建
Parcel: 制品的单文件打包
Tailwind CSS 3.4.1: 带有 shadcn/ui 主题的实用程序优先样式
shadcn/ui: 40+ 个预安装的、生产就绪的组件
Radix UI: 可访问的组件原语

2. 自动化初始化

使用 init-artifact.sh 单命令项目设置:

创建完全配置的 React + TypeScript 项目
设置 Tailwind CSS 和 shadcn/ui 主题
配置路径别名 (@/)
安装 40+ 个 shadcn/ui 组件
包含所有 Radix UI 依赖项
配置 Parcel 用于打包
确保 Node 18+ 兼容性

3. 单文件打包

将复杂的多文件项目转换为可共享的制品:

将整个 React 应用打包到单个 HTML 文件
内联所有 JavaScript、CSS 和依赖项
不需要外部依赖项
准备在 Claude 对话中共享
使用 bundle-artifact.sh 自动化

4. 预安装的组件库

立即访问 40+ 个 shadcn/ui 组件:

按钮、表单、对话框、下拉菜单
数据表、图表、日历
导航、布局、卡片
以及更多生产就绪的组件

5. 设计指南

通过避免以下内容来避免通用 AI 美学:

过度居中的布局
紫色渐变
统一的圆角
Inter 字体(使用独特的替代品)

使用场景

交互式仪表板: 带有图表和表格的数据可视化
多页应用: 带有路由的复杂应用
表单应用: 带有验证的高级表单
数据管理 UI: 带有状态管理的 CRUD 界面
组件展示: 显示组件库
原型: 复杂界面的快速原型

工作流程

步骤 1: 初始化项目

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

创建包含所有依赖项和配置的完整项目。

步骤 2: 开发制品

编辑生成的文件以构建您的应用程序:

使用 React 组件和钩子
利用 shadcn/ui 组件库
使用 Tailwind CSS 设置样式
根据需要实现状态管理和路由

步骤 3: 打包为单个 HTML

bash scripts/bundle-artifact.sh

创建 bundle.html - 一个包含所有内容的自包含制品。

步骤 4: 与用户共享

在对话中呈现打包的 HTML 文件,以作为 claude.ai 制品查看。

步骤 5: 测试(可选)

使用可用工具测试或可视化制品:

Playwright 用于自动化测试
Puppeteer 用于截图
其他 Skills 用于专业化测试

技术实现

项目结构

完全配置的 package.json
TypeScript 配置 (tsconfig.json)
带有 shadcn/ui 主题的 Tailwind 配置
带有路径别名的 Vite 配置
用于打包的 Parcel 配置 (.parcelrc)

打包过程

bundle-artifact.sh 脚本:

安装打包依赖项
创建带有路径别名支持的 Parcel 配置
使用 Parcel 构建(无源映射)
使用 html-inline 将所有资源内联到单个 HTML 中

组件库

立即可用的 40+ shadcn/ui 组件:

所有组件都使用 Tailwind 设置样式
默认可访问(Radix UI 原语)
可自定义和主题化
生产就绪

设计理念

何时使用此 Skill

具有多个组件的复杂制品
需要状态管理的应用程序
使用 shadcn/ui 组件的项目
带有路由的多页应用程序

何时不使用

简单的单文件 HTML/JSX 制品
没有交互性的静态内容
最小样式要求

设计质量

强调避免通用 AI 美学:

选择独特的字体
使用多样化的配色方案
创建有趣的布局
添加周到的交互

参考文档

shadcn/ui 组件: https://ui.shadcn.com/docs/components
全面的组件文档
使用示例和自定义指南

总结

Web Artifacts Builder Skill 使 Claude 能够创建复杂的、多组件的 Web 应用程序作为可共享的 claude.ai 制品。通过现代工具、预配置的组件和自动化打包,此 Skill 使构建可在对话中作为单个 HTML 文件共享的复杂、生产质量的 Web 应用程序变得容易。

Web Artifacts Builder Skill

概述