artifacts-builder：让 Claude 帮你构建真正能用的 React+Tailwind HTML 工件

你有没有这种感觉——让 Claude 生成 HTML 工件，做出来的总是那种”一眼 AI 味”的东西？

居中布局 + 紫色渐变 + Inter 字体 + 全是圆角……做个 Dashboard 还好，做稍微复杂点的组件，不是缺状态管理就是样式乱跳，根本没法用。

artifacts-builder 这个 Skill 就是来解决这个问题的。

它的核心理念很简单：不要让 Claude 在对话里直接手写一个巨大的 HTML 文件，而是给它一套完整的前端工程脚手架——React + TypeScript + Vite + Tailwind CSS + shadcn/ui，然后通过脚本把最终产物打包成一个独立的 HTML 文件，直接塞回 Claude 对话里展示。

具体流程分三步走：

第一步，初始化。运行 scripts/init-artifact.sh，Claude 会自动搭建一个配置好的 React 项目，包含了路径别名（@/）、40+ shadcn/ui 组件、Tailwind 主题系统，还有 Parcel 打包配置。你不需要手动装任何依赖，Claude 全程搞定。

第二步，开发。在初始化好的项目里编辑代码，组件化管理，不是单文件塞几千行。shadcn/ui 组件库全部预装，Claude 可以直接调用，样式有设计规范约束。

第三步，打包。运行 scripts/bundle-artifact.sh，Parcel 会把所有 JS/CSS/依赖全部内联进一个 HTML 文件，出来的 bundle.html 可以在对话里直接分享，展示效果和你本地跑的一模一样。

这里有个设计细节我觉得很聪明——设计规范明确要求避免”AI slop”：不要过度居中布局、不要紫色渐变、不要统一圆角、不要用 Inter 字体。Claude 在生成阶段就被这个约束”校准”了审美，做出来的东西更接近真实生产级 UI。

技术栈：React 18 + TypeScript + Vite + Parcel + Tailwind CSS 3.4 + shadcn/ui（基于 Radix UI）。

安装方式也很简单：

pnpm dlx add-skill https://github.com/prorise-cool/claude-code-multi-agent/artifacts-builder

或者直接去 ComposioHQ 的 awesome-claude-skills 仓库，找到 artifacts-builder 文件夹，把 SKILL.md 下到本地。

GitHub 仓库：https://github.com/ComposioHQ/awesome-claude-skills（主仓，artifacts-builder 是旗下模块）

GitHub: https://github.com/ComposioHQ/awesome-claude-skills