web-artifacts-builder

技能简介

web-artifacts-builder 是一套用于创建复杂、多组件 claude.ai HTML artifacts 的工具套件，基于 React、Tailwind CSS 和 shadcn/ui 等现代前端技术。它解决了简单单文件 HTML/JSX 无法满足的复杂场景需求，例如需要状态管理、路由或 shadcn/ui 组件时，帮助开发者高效构建、打包并分享功能完整的前端 artifact。

使用场景

• 构建需要多组件协作、状态管理（如 useState/Context）的交互式前端应用。
• 开发包含多页面或路由逻辑的复杂 artifact。
• 使用 shadcn/ui 预置组件（Data Table、Dialog、Calendar 等）快速搭建界面。
• 将 React 应用一键打包为可直接分享的单 HTML 文件，便于在 Claude 对话中直接预览。
• 规避“AI slop”风格（过度居中、紫渐变、圆角泛滥），产出定制化视觉设计。

使用方法

1. 初始化项目：运行初始化脚本创建 React 项目（自动配置 Vite、Tailwind、shadcn/ui 及路径别名，并预装 40+ 组件）：

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

2. 开发 artifact：编辑生成的项目代码，实现所需功能。

3. 打包为单 HTML 文件：

   bash scripts/bundle-artifact.sh
   

   命令将生成 bundle.html（内含所有 JS、CSS 与依赖），可直接在 Claude 中分享。

4. 展示给用户：将 bundle.html 提供给用户查看。

5. （可选）测试：仅在需要时使用 Playwright/Puppeteer 等工具测试，避免增加交付延迟。

注意事项

• 遵循设计指南：避免过度居中布局、紫色渐变、统一圆角及 Inter 字体，以防产物落入“AI slop”俗套。
• 打包要求：项目根目录须存在 index.html 才能成功执行 bundle 脚本。
• 不建议在交付前主动进行测试，除非用户明确提出或有问题需要排查——这有助于缩短首次响应时间。