Claude 写前端还在凑合用？Anthropic 官方这个 Skill 直接给你产 artifact

Claude 写前端还在“凑合用”？Anthropic 官方这个 Skill 直接给你产 artifact

说个真事：我让 Claude 写个带路由、状态管理、还好看的前端页面，以前它只能吐一坨单文件 HTML，跑是能跑，离“能交差”还差十万八千里。

直到我挖到 Anthropic 自己开源的 web-artifacts-builder。

它是什么？

说白了，这是一个“把 Claude 从 HTML 手工作坊推进到前端工程化”的官方 Skill。它不教你 prompt 技巧，而是直接给 Claude 配了一套正经前端工作流：React 18 + TypeScript + Vite + Tailwind CSS + shadcn/ui，外加 Parcel 打包，最后能输出一个单文件 HTML artifact。

你只需要跑：

bash scripts/init-artifact.sh <项目名>

然后该写组件写组件，该调接口调接口。最后再跑 bundle-artifact.sh，一个能直接在 Claude 对话里展示的完整 HTML artifact 就出来了。对，是真正的工程化项目，不是粘出来的 demo。

为什么我说它很苏棠？

因为它完美契合“AI + 混搭玩法 + 效率黑科技”的味儿：

• 零配置开箱：shadcn/ui 40+ 组件预装，Radix UI 全量依赖到位，开箱就写业务
• 不会 AI 味过重：官方 README 特意提醒“别搞满屏紫色渐变+圆角+Inter字体”——官方都嫌 AI 生成的前端太丑，你细品
• 产出的东西能直接用：不是聊天里看着爽，复制出来跑不了的废稿；是真 artifact，真 artifact，真 artifact

适用场景

• 需要给 Claude 提一个“正经前端页面”需求的任何场合
• 快速原型：Dashboard、Landing Page、工具面板
• 你是一个前端，想让 Claude 帮你搭骨架、写组件，你改样式

使用门槛

Node 18+、Chrome 远程调试可选用、Python3 + Pillow 可选（给超长页面拼切片用）。没有别的依赖，不需要 Playwright/Puppeteer 全家桶。

GitHub 地址

https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder

如果你还在让 Claude 写“能用但丑”的单页面，装上这个，你会发现它突然变成了一个正经前端工程师。不是帮你写代码的实习生，是能交付 artifact 的那种。

GitHub: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder