Web Artifacts 构建器

要解决什么问题

在 Claude 对话里展示复杂前端界面时，artifact 需要是单个自包含 HTML：内联 JS/CSS、无外部依赖，且开发体验不能停留在手写 DOM。本技能把「可维护的 React 工程」和「对话内可投递的单文件」串成固定流程。

技能如何工作

技术栈为 React 18 + TypeScript + Vite，样式侧用 Tailwind CSS 与 shadcn/ui（含 Radix 依赖与 @/ 路径别名）。典型路径：

1. 用 scripts/init-artifact.sh 初始化仓库（预装 40+ shadcn 组件、Node 18+ 与 Vite 版本锁定、Parcel 打包配置骨架）。
2. 在生成代码上实现 artifact 交互与 UI。
3. 用 scripts/bundle-artifact.sh 经 Parcel 构建并用 html-inline 产出 bundle.html（要求根目录存在 index.html）。
4. 将打包结果作为 artifact 展示；测试仅在需要时再做，避免无谓延迟。

文档还强调反「AI 风格」的界面约束：少滥用居中、紫色渐变、统一大圆角与 Inter 字体，让成品更像工程师会交付的页面。

适用边界与注意点

• 面向 claude.ai 类 artifact 场景，不是通用 SaaS 部署流水线。
• 打包脚本会安装/使用 Parcel 相关依赖；若项目结构偏离模板（缺少 index.html 或别名配置），需先对齐再打包。
• shadcn 组件参考以官方文档为准，技能负责脚手架与单文件出口，不替代你对业务逻辑与可访问性的审查。