做網站和程式設計裝上就能用
做不像模板的網頁
讓 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. 開啟電腦上的「終端機」，複製下面這行貼進去，按 Enter
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 再試一次。
- 出現一個選擇清單：用方向鍵移動、按空白鍵勾選你要裝到的工具，按 Enter 確認。
- 怎麼算裝好：看到安裝成功的提示就好了。重開 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 次安裝看看怎麼用