🎨 Web Artifacts Builder - Web 组件构建器

这是什么？

Web Artifacts Builder 是一个完整的工具套件，用于创建复杂的、多组件的 claude.ai HTML artifacts。它基于现代前端技术栈：

React 18 + TypeScript - 类型安全的组件化开发
Vite - 极速开发体验
Tailwind CSS - 实用优先的样式系统
shadcn/ui - 40+ 高质量 UI 组件
Parcel - 打包成单个 HTML 文件

核心价值：3 个命令，从零到完整的可分享 artifact。

能做什么？

核心功能一览

🚀 一键初始化：自动配置 React + TypeScript + Tailwind + shadcn/ui
🎨 40+ UI 组件：预装 Button、Dialog、Card、Form 等组件
📦 单文件打包：将整个应用打包为一个 HTML 文件
⚡ 极速开发：Vite 提供毫秒级热更新
🎯 类型安全：TypeScript 编译时错误检查

适合谁用？

前端开发者：需要快速原型开发
设计师：想创建交互式设计稿
产品经理：制作可点击的产品演示
教育工作者：创建交互式教学示例

典型使用场景

场景 1：交互式仪表板 📊

需求：创建一个数据可视化仪表板，包含图表、过滤器、数据表格

# 3 个命令搞定
bash scripts/init-artifact.sh dashboard
cd dashboard
# 编辑 src/App.tsx，添加组件和数据
bash scripts/bundle-artifact.sh

结果：生成 bundle.html，包含完整的交互式仪表板

场景 2：表单向导 📝

需求：多步骤注册表单，带验证和进度条

// 使用 shadcn/ui 组件
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Progress } from '@/components/ui/progress'

function RegistrationWizard() {
  const [step, setStep] = useState(1)
  
  return (
    <div>
      <Progress value={step * 33} />
      {step === 1 && <PersonalInfo />}
      {step === 2 && <ContactInfo />}
      {step === 3 && <Confirmation />}
      <Button onClick={() => setStep(step + 1)}>下一步</Button>
    </div>
  )
}

价值：无需从零配置，专注业务逻辑

场景 3：单页应用（SPA）🌐

需求：文档网站，包含导航、搜索、多页面

示例：

首页 + 关于页 + 文档页
侧边栏导航
响应式布局

优势：使用 React Router + shadcn/ui，快速实现专业效果

快速开始

3 步创建 Artifact

步骤 1：初始化项目（30 秒）

bash scripts/init-artifact.sh my-app
cd my-app

自动完成：

✅ 创建 React + TypeScript 项目
✅ 安装 Tailwind CSS 和 shadcn/ui
✅ 配置路径别名 @/
✅ 预装 40+ UI 组件

步骤 2：开发应用（5-30 分钟）

编辑 src/App.tsx：

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'

function App() {
  const [count, setCount] = useState(0)
  
  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <Card className="max-w-md mx-auto">
        <CardHeader>
          <CardTitle>计数器应用</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-4xl font-bold text-center mb-4">{count}</p>
          <Button 
            onClick={() => setCount(count + 1)}
            className="w-full"
          >
            点击增加
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

export default App

步骤 3：打包并分享（10 秒）

bash scripts/bundle-artifact.sh

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

分享：直接将此文件发送给用户，在 Claude 中显示为 artifact

何时使用？何时不用？

✅ 适合使用的场景

复杂交互：需要状态管理（多个组件间共享数据）
使用 shadcn/ui：需要高质量 UI 组件（Dialog、Select、DatePicker 等）
多页面应用：需要路由和导航
大型应用：超过 200 行代码

❌ 不适合的场景

简单静态页面：只有 HTML + CSS，无需 React
单组件展示：一个按钮或表单，直接写 JSX 即可
纯信息展示：不需要交互，用 Markdown 或纯 HTML

原则：如果不需要 React 的状态管理和组件化，就别用这个工具。

设计指南：避免 "AI 风格"

重要提醒

避免常见的 "AI 生成" 风格特征！

❌ 避免的设计

/* 避免过度居中 */
.everything-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* 避免紫色渐变 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* 避免统一圆角 */
border-radius: 12px; /* 所有元素都是 12px */

/* 避免只用 Inter */
font-family: 'Inter', sans-serif;

✅ 推荐的设计

/* 多样化布局 */
.content-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

/* 品牌色系统 */
--primary: #3b82f6;
--secondary: #10b981;
--accent: #f59e0b;

/* 变化的圆角 */
.card { border-radius: 8px; }
.button { border-radius: 6px; }
.badge { border-radius: 4px; }

/* 合适的字体 */
font-family: system-ui, -apple-system, sans-serif;