做网站和编程装上就能用
做不像模板的网页
让 AI 做网页时有自己的风格，不做成千篇一律的模板样。
适合：想让 AI 做个人主页、活动页的人
886.5K 次安装看看怎么用
回到 Skills
做网站和编程开发者向107.5K 次安装
做复杂网页小应用
用 React 和 shadcn/ui 做多组件页面，最后打包成一个 HTML。
适合：会一点前端、想做复杂交互页面的人
要先准备：电脑上要有 Node.js 18 以上和 bash
装上以后可以这样用
照着「你对 AI 说」那句说就行，换成你自己的内容。
做一个记账小工具
你对 AI 说
做一个能记账、能按月份切换查看的网页小工具，打包成一个 HTML 文件。
AI 会这样做
- 1.用脚本初始化 React 项目
- 2.写好页面和状态逻辑
- 3.打包成单个 bundle.html
最后你会拿到
一个双击就能打开的 bundle.html 小工具。
带标签页的书单
你对 AI 说
做一个能切换标签页的读书清单网页，用 shadcn/ui 组件。
AI 会这样做
- 1.初始化带 shadcn/ui 的项目
- 2.搭出标签页和列表组件
- 3.打包成单个 HTML
最后你会拿到
一个代码和样式都内联好的单文件网页。
想看它的原始说明（英文）：anthropics/skills 上的 SKILL.md
怎么装上
你用的是哪个 AI 工具？
1. 打开电脑上的「终端」，复制下面这行贴进去，回车
npx skills add anthropics/skills @web-artifacts-builder -g 没带工具名，命令会自己找你电脑上装了哪些 AI 工具，问你装到哪个。提示没有 npx 或者版本太旧，就先装最新的 Node.js（22 以上）。
第一次用终端？
- 怎么打开：Mac 按 ⌘ + 空格，搜「终端」；Windows 在开始菜单搜「PowerShell」；Cursor、Trae、VS Code 里点菜单「终端 → 新建终端」。
- Windows 报「禁止运行脚本」：把命令开头的 npx 换成 npx.cmd 再试一次。
- 出现一个选择列表：用方向键移动、空格勾选你要装到的工具，回车确认。
- 怎么算装好：看到安装成功的提示就好了。重开 AI 工具，问它「你现在有哪些 Skill？」确认一下。
懒得开终端？
Claude Code、Codex、Cursor、Trae 这些工具自己就能跑命令，把这句话发给它：
帮我在终端运行这行命令，装好后告诉我结果：npx skills add anthropics/skills @web-artifacts-builder -g 2. 重新打开你的 AI 工具
新装的 Skill 要重开一次才会被认出来。
3. 直接说你想干嘛
照案例里的说法说就行；想点名用它，可以说「用 web-artifacts-builder 帮我……」。
同样是「做网站和编程」的
- 做网站和编程要先准备点东西
做自己的 Skill
把你常用的做法写成一个 Skill，还能跑测试看它好不好用。
适合：想把自己的固定做法交给 AI 的人
402K 次安装看看怎么用 - 做网站和编程开发者向
系统地找 bug
遇到报错先查清根本原因再动手修，不靠瞎猜试错。
适合：写代码时常被 bug 卡住的人
292.9K 次安装看看怎么用