web-artifacts-builder ：把 Claude 的 Artifact 当成正经前端项目来写

你让 Claude 画一个带交互的小工具，它吐出来的 HTML 多半长一个样。所有东西居中排布，背景是紫到蓝的渐变，按钮是全圆角胶囊，字体清一色 Inter。这不是你的 Prompt 写得差，是模型默认的审美就停在 2023 年的那套模板里。这种雷同不是审美口味问题，而是模型在训练数据里见得最多的那套网页模板的投影。

Anthropic 自己显然也看不下去了。他们在 skills 仓库里放了一个叫 web-artifacts-builder 的技能，专门用来生成那种”看起来不像 AI 写的” claude.ai 前端 Artifact。有意思的是，这个技能不是教你写更好的 Prompt，而是直接给你一套现成的工程脚手架。我前阵子让模型生成一个待办应用，它回我一屏紫色渐变卡片，条目居中排列，按钮圆得像药丸，一眼就是模板味。

说白了，它的核心思路特别朴素。别在对话里手写 HTML 了，把 Artifact 当成一个正经的 React 前端项目来开发，最后再打包成单个 HTML 文件丢回对话里。这个思路一旦点破，你就会发现它解决的根本不是”怎么写”的问题，而是”怎么让产物不丑、不崩、可维护”的问题。换句话说，它把 AI 生成 UI 这件事从”靠运气”变成了”靠流程”，这比任何一条 Prompt 技巧都管用。

它到底适合谁

先泼一盆冷水。这个技能在 description 里就写得很克制，它只适合”需要状态管理、路由，或者要用 shadcn/ui 组件”的复杂 Artifact，明确说不适合简单的单文件 HTML/JSX。这句话的潜台词是，如果你只是想要一个静态说明页，用它纯属杀鸡用牛刀。我见过不少人兴冲冲装了，跑完脚手架发现下一步还是得自己写 React，热情瞬间就凉了。

我自己的判断更尖锐一点。这套脚手架的价值分两层，第一层是工程化，第二层是审美。工程化那层，对只会写 Prompt 的普通用户其实是个门槛，你得装 pnpm、Node 18 以上、跑两个 bash 脚本。审美那层才是所有人都能直接受益的东西，后面会单独讲。换句话说，它把”能不能用”和”好不好看”拆成了两件事，很多人只想要前者，却被后者绑架着装了一整套工具链。

真正适合用它的人，是那种想在 Claude 对话里交付一个像样交互产品的人。我举个例子，你想做个能切换三种计算方式的小工具，纯对话生成时光把状态管理写对就够呛，更别说加个像样的下拉菜单。用这个技能，下拉菜单直接从一个 shadcn 组件库里 import 就行。

具体点说，这几类需求用它最舒服：

• 带标签页或路由的多视图小工具
• 需要表单、校验和反馈的交互向导
• 用图表或表格展示数据的小 dashboard

反过来，纯静态说明页或一段一次性脚本，就别折腾它了。这类东西如果纯靠对话里逐行生成，改一次就崩一次，维护成本极高。

工作流其实只有五步

整个技能的设计非常克制，没有花活，就五个步骤，其中两步还是可选的。注意第 3 步要求项目根目录有个 index.html 当入口，打包脚本就是靠它定位起点的，缺了这一步直接报错退出。你跑一个 init-artifact.sh 把项目骨架搭起来，然后在生成的代码里开发你的 Artifact，再用 bundle-artifact.sh 把所有东西塞进一个 HTML 文件，最后把这个文件丢回对话里给用户看。测试那一步官方都标注了”可选”，还特意提醒你别提前测，先让用户看到东西再说。我第一次跑的时候习惯性地想先 build 验证一下，结果发现脚本压根不鼓励你这么做，它巴不得你跳过验证直接交付。

这个”先交付后测试”的排序很关键，它反映的是 Anthropic 对延迟的执念。他们很清楚，用户要的是尽快看到能跑的东西，而不是一个完美但等了十分钟的产物。这种取舍在 AI 产品里不算多见，大多数工具都恨不得把验证环节前置到所有步骤之前。

技术栈的选择有讲究

init 脚本搭出来的项目，技术栈是 React 18 加 TypeScript，构建用 Vite，打包用 Parcel，样式用 Tailwind CSS 3.4.1，组件库是 shadcn/ui。这套组合单独看都不新鲜，但放在一起的逻辑值得琢磨。Vite 负责开发时的热更新体验，Parcel 负责最终把所有依赖内联进单文件，两个构建工具各管一段，互不打架。这里有个容易忽略的取舍：Vite 的正式构建产物是拆成多个 chunk 的，而 claude.ai 的 Artifact 只认单个 HTML 文件。真正把一切揉成一块的，是 Parcel 之后的 html-inline 这一步，少了它前面全白搭。

最让我意外的是它对 Node 版本的兼容性处理。脚本会先读 Node 主版本号，如果低于 20 就自动把 Vite 钉死在 5.4.11，不低于 18 才放行。这种”检测环境再降级”的细节，说明它不是在 Mac 上跑通就算完事的演示项目，是真的打算让人用在各种破烂环境里的。顺带一提，脚本还会自己判断有没有装 pnpm，没有就现场用 npm 全局装一个，省得你卡在环境准备上。

还有个很聪明的偷懒技巧。40 多个 shadcn 组件不是现场用 CLI 一个个生成的，而是直接打成一个 tar 包随脚本分发，初始化时解压到 src 目录。这绕开了 shadcn CLI 联网和交互式选择的麻烦，也让整个初始化过程变成了纯离线操作。

真正值钱的是那句”别写成 AI 味”

讲完工程，必须说这个技能里我最欣赏的部分。它的 SKILL.md 用了一整段加粗的 Design Guidelines，核心就一句话，专门用来躲开所谓的”AI slop”。它给的全是否定式：

• 别用过度的居中布局
• 别用紫色渐变
• 别用统一的全圆角
• 别用 Inter 字体

就这么四条，比一堆 Prompt 工程教程都实在。

为什么这四条这么准。居中布局暴露的是”模型只会把东西堆在中间”的懒惰，紫色渐变是 2023 年 AI 审美的最大公约数，全圆角胶囊按钮是默认组件库的懒人选择，Inter 则几乎成了”这玩意儿是 AI 生成的”的视觉签名。避开这四个特征，你的产物立刻就和 90% 的 AI 垃圾拉开了距离。这四条不是审美刁难，而是把”看起来像 AI”这件事拆成了四个可操作的禁忌，比任何笼统的”请设计得好看些”都管用。

我甚至觉得，这四条准则的价值已经超出了 Claude 的 Artifact 场景。任何用 AI 生成 UI 的人，把这四条贴在显示器边上，产出的质量都能上一个台阶。它是这个技能里唯一不需要跑任何脚本、立刻能用的东西。

它的边界也得讲清楚

不能只夸。这个技能有明显的适用范围限制，最硬的一条是它产出的 bundle.html 是给 claude.ai 的 Artifact 环境用的。你一旦离开这个环境，比如想把产物部署成独立网站，单文件内联的思路反而从优势变成包袱，这时候直接用 Vite 正常构建反而更轻。

还有几个现实摩擦点。它强制依赖 pnpm，你机器上只有 npm 的话脚本会现场给你装一个全局 pnpm，这种静默改动环境的行为不是所有人都喜欢。bundle 出来的单文件体积也不小。我拿一个中等复杂度的表单试过，打包出来接近 3MB。在 Artifact 里加载没问题，但你要是想把它当网页嵌到别处，这个体积会让你犹豫。毕竟把 React 运行时和 40 多个组件全内联进去，代价就是胖。

更微妙的一点是，它把”工程化”当成了默认答案。但对很多用户来说，在对话里直接拿到一段 HTML 就能用，反而是 Artifact 最大的爽点。一旦引入项目脚手架和打包流程，你就被迫离开对话、切到终端，这个心智切换的成本，Anthropic 并没有替你消化。

资源地址

总结

我的结论很直接。如果你在 Claude 里做复杂交互 Artifact，且愿意为”不丑、可维护”付出一点工程成本，这个技能值得装。它的脚手架省掉了最烦人的环境配置，那四条设计准则更是白送的审美保险。我自己的使用频率不算高，但只要遇到稍微复杂点的交互需求，回头用它比在对话里硬刚要省心太多。

如果你只是偶尔生成个静态页面，或者压根不想离开对话切到终端，那它对你就是过度设计。这个判断不是绝对的，今天它绑定 claude.ai 的 Artifact 格式，明天 Anthropic 完全可能把脚手架下沉成产品内的一键按钮。但有一条不会变：模型默认审美是廉价的，有意识的工程化才值钱。