Back to Details

react-artifacts

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
<!-- Adapted from: awesome-claude-skills/artifacts-builder -->
<!-- 改编自：awesome-claude-skills/artifacts-builder -->

React Artifacts Builder

React制品构建器

Create elaborate, multi-component claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui.
使用React、Tailwind CSS和shadcn/ui为claude.ai创建复杂的多组件HTML制品。

When to Use

使用场景

  • Building complex React artifacts for claude.ai
  • Creating interactive demos needing state management
  • Using shadcn/ui components in artifacts
  • Bundling React apps into single HTML files
  • NOT for simple single-file HTML/JSX artifacts
  • 为claude.ai构建复杂的React制品
  • 创建需要状态管理的交互式演示
  • 在制品中使用shadcn/ui组件
  • 将React应用打包为单个HTML文件
  • 不适用于简单的单文件HTML/JSX制品

Stack

技术栈

  • React 18 + TypeScript + Vite
  • Parcel (bundling)
  • Tailwind CSS
  • shadcn/ui (40+ pre-installed components)
  • React 18 + TypeScript + Vite
  • Parcel（打包工具）
  • Tailwind CSS
  • shadcn/ui（预安装40+组件）

Workflow

工作流程

  1. Initialize - Create project with init script
  2. Develop - Build your artifact
  3. Bundle - Convert to single HTML file
  4. Share - Display artifact to user
  1. 初始化 - 使用初始化脚本创建项目
  2. 开发 - 构建你的制品
  3. 打包 - 转换为单个HTML文件
  4. 分享 - 向用户展示制品

Project Initialization

项目初始化

bash
undefined
bash
undefined

Create new artifact project

创建新的制品项目

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

Creates project with:

- React + TypeScript via Vite
- Tailwind CSS with shadcn theming
- Path aliases (@/) configured
- 40+ shadcn/ui components pre-installed
- All Radix UI dependencies
- Parcel configured for bundling
bash scripts/init-artifact.sh <项目名称> cd <项目名称>

创建的项目包含：

- 基于Vite的React + TypeScript
- 带有shadcn主题的Tailwind CSS
- 已配置路径别名(@/)
- 预安装40+ shadcn/ui组件
- 所有Radix UI依赖项
- 已配置Parcel用于打包

Bundling to Single HTML

打包为单个HTML文件

bash
undefined
bash
undefined

Bundle entire React app to one HTML file

将整个React应用打包为单个HTML文件

bash scripts/bundle-artifact.sh

Creates `bundle.html` - self-contained artifact with all JS, CSS, and dependencies inlined.
bash scripts/bundle-artifact.sh

生成`bundle.html` - 包含所有内联JS、CSS和依赖项的自包含制品。

Design Guidelines

设计指南

Avoid "AI slop":
  • No excessive centered layouts
  • No purple gradients
  • No uniform rounded corners
  • Vary from Inter font
Best Practices:
  • Match content to subject
  • Clear visual hierarchy
  • Consistent patterns
  • Accessible design
避免“AI劣质设计”：
  • 不要过度使用居中布局
  • 不要使用紫色渐变
  • 不要统一使用圆角
  • 避免只使用Inter字体
最佳实践：
  • 内容与主题匹配
  • 清晰的视觉层级
  • 一致的设计模式
  • 可访问性设计

shadcn/ui Components

shadcn/ui组件

Reference: https://ui.shadcn.com/docs/components
Pre-installed components include:
  • Button, Card, Dialog, Drawer
  • Form, Input, Select, Checkbox
  • Table, Tabs, Toast
  • And many more...
参考：https://ui.shadcn.com/docs/components
预安装组件包括：
  • Button、Card、Dialog、Drawer
  • Form、Input、Select、Checkbox
  • Table、Tabs、Toast
  • 以及更多...

Example Structure

示例结构

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

export default function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>My Artifact</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  )
}
tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>My Artifact</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  )
}

Tips

提示

  • Develop normally, bundle at the end
  • Test in browser before bundling
  • Keep bundle size reasonable
  • Use Tailwind for responsive design
  • 正常开发，最后再打包
  • 打包前在浏览器中测试
  • 保持包大小合理
  • 使用Tailwind实现响应式设计