前端组件工坊
原名：web-artifacts-builder
一套用于创建复杂多组件 claude.ai HTML 工件的工具集，采用现代前端技术（React、Tailwind CSS、shadcn/ui）。适用于需要状态管理、路由或 shadcn/ui 组件的复杂工件，不适用于简单的单文件 HTML/JSX 工件。
- 分类
- 开发提效
- 版本
- v1.0.0
- 作者
- 弈韬(@ra1nzzz)
- 下载
- 2
- 收藏
- 0
- 发布
- 2026-08-17
- 更新
- 2026-08-18
- TRACE 评分
- 3.2 / 5
内容概览
To build powerful frontend claude.ai artifacts, follow these steps: 1. Initialize the frontend repo using scripts/init-artifact.sh 2. Develop your artifact by editing the generated code 3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh 4. Display artifact to user 5. (Optional) Test the artifact Stack : React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font. Run the initialization script to create a new React project: This creates a fully configured project with: - ✅ React + TypeScript (via Vite) - ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system - ✅ Path aliases (@/) configured - ✅ 40+ shadcn/ui components pre-installed - ✅ All Radix UI dependencies included - ✅ Parcel configured…