Web Artefacts Builder 是一套用于创建复杂、多组件 claude.ai HTML 制品的工具集，采用现代前端 Web 技术构建。
用途 该工具集面向需要为 claude.ai 生成前端制品的场景，帮助开发者从初始化项目、选择主题、开发组件，到打包为单个 HTML 文件并交付给用户，形成完整工作流。
主要能力
- 提供初始化脚本 scripts/init-artifact.sh，生成已配置好的项目：React 19 + TypeScript（通过 Vite 8）、Tailwind CSS v4（在 src/index.css 中进行 CSS-first 配置，无 tailwind.config.js）、src/components/ui/ 下 40+ 个 shadcn/ui 组件、radix-ui 伞包与 lucide-react、在 tsconfig.json 与 vite.config.ts 中配置的路径别名 @/，以及可编辑的 App.tsx 占位文件。
- 提供主题资源 resources/themes.css，内含五套命名主题：Editorial paper（暖纸、墨色、赭石强调，适合长文、计划、报告、复盘）、Technical mono（近单色、单一绿色强调，适合代码审查、系统图、状态页、调试）、Warm desaturated（沙色、陶土棕、柔和赤陶，适合品牌相关制品、设计页面）、Cool muted（安静石板色、低彩度青绿，适合仪表盘、状态报告、技术文档）、Nordic dark（极夜灰、霜蓝，适合事件记录、调试转储、暗色优先的开发者工具）。
- 提供打包脚本 scripts/bundle-artifact.sh，将项目打包为单个自包含的 bundle.html，内联所有 JS、CSS 与资源。
- 配套设计原则与反 AI 默认风格规则，指导制品的视觉与排版决策。
使用方式
- 使用 bash scripts/init-artifact.sh <project-name> 初始化前端仓库，并进入项目目录。
- 从 resources/themes.css 中选择主题并应用：复制所选主题的 :root { ... } 与 .dark { ... } 块，替换项目 src/index.css 中现有的对应块，保留 @theme inline 与 @layer base 块；按主题注释添加建议字体栈（通过 index.html 中的 Google Fonts 链接或 src/index.css 中的 body { font-family: ... }）。若用户已有品牌或设计系统，应优先遵循。
- 编辑 src/App.tsx 并按需添加组件，组件从 @/components/ui/<name> 导入，cn() 辅助函数位于 @/lib/utils。开发预览使用 pnpm dev。
- 运行 bash scripts/bundle-artifact.sh 打包：脚本会添加 vite-plugin-singlefile 开发依赖、写入 vite.config.bundle.ts、执行 vite build --config vite.config.bundle.ts，并将 dist/index.html 重命名为 bundle.html。
- 将 bundle.html 作为制品交付给用户。
- 可选测试：仅在用户要求或制品含交互逻辑时，使用 Playwright 或本地打开文件进行测试，否则优先快速交付并根据反馈迭代。
设计原则
- 平静、编辑式美学：克制的强调色、充裕留白，避免英雄渐变、营销光泽与仪表盘式装饰（除非制品本身是仪表盘）。
- 排版优先于装饰：先用字重、字号与行高建立层级，再考虑边框、背景或色条；衬线标题搭配无衬线正文是参考中的常见模式；默认仅用 Inter 是 AI 输出的特征，应从所选主题的字体说明中选择搭配。
- 珍惜强调色：多数主题仅提供单一强调色，应仅用于页面中最需要关注的一处（主操作、链接、聚焦状态）。
- 内容适合时使用全宽：表格、对比或空间性内容不宜居中窄栏，宽布局配结构化列优于 720px 文本轴。
- 导出交互状态：若制品是编辑器、看板等用户工作界面，应提供“copy as JSON”或“copy as prompt”按钮，使结果回流到智能体循环。
反 AI 默认风格规则 仅在颜色或处理编码特定信息（状态、类别、严重程度、优先级）时使用视觉强调（彩色边框条纹、着色背景提示框、卡片强调条）；不要装饰性使用，不要为多样性在相邻项轮换调色板颜色，不要默认使用带色条的着色提示框。避免过度居中布局、紫色渐变、统一圆角、玻璃拟态、emoji 项目符号、三卡网格英雄区；避免状态永不变化的徽章或脉冲点、复述提示或技术栈的文案、伪系统命名（// 分隔符、SCREAMING_SNAKE 标签、版本胶囊、间隔等宽大写眉题）、工作界面上的落地页装饰。需测量计算盒以检查 SVG、ASCII 艺术与时间线标记的对齐。
适用场景 适合构建报告、计划、复盘、代码审查、系统图、状态页、调试、品牌相关制品、设计页面、仪表盘、技术文档、事件记录、暗色优先开发者工具、编辑器、看板等前端制品。
限制 需要 Node 20.19+ 或 22.12+。打包依赖 vite-plugin-singlefile。测试为可选步骤。若用户已有品牌或设计系统，应优先遵循而非使用内置主题。