前言¶
在 AI 編程工具裏讓 Agent「畫個頁面」，你多半拿到過這樣的東西：一個幾百行的單文件 HTML，樣式靠內聯 CSS 硬湊，組件一多就亂，狀態一複雜就崩。稍微上點強度——多 Tab 切換、表單聯動、彈窗抽屜——Agent 往往要麼反覆改錯，要麼堆出一坨難以維護的 JSX 字符串。
如果你希望 Agent 按現代前端工程的方式幹活，而不是臨時拼頁面，Anthropic 官方倉庫裏的 web-artifacts-builder Skill 值得裝一份。它把 React 18、TypeScript、Vite、Tailwind CSS、shadcn/ui 和打包腳本打包成一套可重複的工作流：初始化腳手架、正常寫組件、最後產出一個自包含的單 HTML 文件，方便在對話裏直接預覽或分享。
這是什麼¶
web-artifacts-builder 是 Anthropic skills 倉庫 中的示例 Skill，面向「需要多組件、狀態管理或 shadcn/ui 組件庫」的複雜 Web 產物，不適用於簡單的單文件 HTML/JSX 場景。
官方定位很直白：用一套腳本幫 Agent 搭建完整前端項目，開發完成後打包成 bundle.html，可直接作爲 claude.ai 的 Artifact 展示；在 Cursor、Claude Code 等支持 Agent Skills 的工具裏，邏輯同樣適用。
技術棧（官方 SKILL.md 原文）：
- React 18 + TypeScript + Vite
- Tailwind CSS 3.4.1 + shadcn/ui（預裝 40+ 組件）
- Parcel + html-inline（打包爲單 HTML）
核心功能與亮點¶
1. 一鍵初始化現代前端腳手架¶
Skill 自帶 scripts/init-artifact.sh，執行後會：
- 用
pnpm create vite創建 React + TypeScript 項目 - 自動檢測 Node 版本（要求 Node 18+；Node 18 會 pin Vite 5.4.11，Node 20+ 用最新 Vite）
- 配置 Tailwind CSS、PostCSS、shadcn/ui 主題變量
- 解壓預置的
shadcn-components.tar.gz，一次性裝入 accordion、dialog、form、table、tabs 等 40+ 組件 - 配置
@/路徑別名與 Vite resolve
開發者熟悉的棧，Agent 寫起來也有章可循。
2. 單文件 HTML 打包¶
開發完成後運行 scripts/bundle-artifact.sh：
- 用 Parcel 構建（支持路徑別名）
- 通過
html-inline把 JS、CSS、依賴全部內聯 - 輸出根目錄下的
bundle.html，體積會隨功能增長，但無需額外服務器即可在瀏覽器打開
3. 明確的設計約束¶
官方在 SKILL.md 裏專門提醒：避免「AI slop」式審美——過度居中佈局、紫色漸變、統一大圓角、Inter 字體氾濫。這對產出「能看、能用」的界面很有幫助。
4. 與簡單 HTML 產物的邊界¶
Skill 的 description 寫得很清楚：需要狀態管理、路由或 shadcn/ui 組件時才啓用；單頁靜態展示用普通 HTML/JSX 更輕。別用大炮打蚊子。
安裝與啓用¶
Claude Code¶
Anthropic 官方 README 給出的方式：
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
安裝 example-skills 插件後，對話裏提到相關需求即可觸發；也可直接說明「使用 web-artifacts-builder Skill」。
Claude.ai¶
官方說明：倉庫中的示例 Skill 已對付費計劃開放；自定義 Skill 上傳見 Using skills in Claude。
Cursor¶
Cursor 從項目或用戶目錄自動發現 Skill。把官方目錄整份放到：
- 項目級：
.cursor/skills/web-artifacts-builder/ - 全局：
~/.cursor/skills/web-artifacts-builder/
目錄內需包含 SKILL.md 以及 scripts/（含 init-artifact.sh、bundle-artifact.sh、shadcn-components.tar.gz）。Agent 會根據 description 自動匹配，或在 Agent 對話裏輸入 /web-artifacts-builder 手動調用。
克隆方式示例：
git clone --depth 1 https://github.com/anthropics/skills.git /tmp/anthropics-skills
cp -r /tmp/anthropics-skills/skills/web-artifacts-builder .cursor/skills/
環境要求¶
- Node.js 18 及以上（init 腳本會檢測並拒絕更低版本）
- pnpm（腳本檢測不到時會嘗試
npm install -g pnpm）
典型用法¶
官方 SKILL.md 定義的標準流程如下。
第一步：初始化項目¶
在 Skill 的 scripts 目錄所在環境中執行（Agent 通常會代勞）：
bash scripts/init-artifact.sh my-dashboard
cd my-dashboard
完成後可本地預覽：
pnpm dev
組件導入方式與常規 shadcn/ui 項目一致：
import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
第二步：開發產物¶
編輯 src/ 下文件，按 React 組件方式組織頁面。需要路由、全局狀態時，在生成的 Vite 項目裏按常規方式添加依賴即可——Skill 的價值在於腳手架和打包鏈路已就緒，而不是限制你只能寫單頁。
第三步：打包爲單 HTML¶
在項目根目錄（需有 index.html）執行：
bash scripts/bundle-artifact.sh
成功後會生成 bundle.html。本地驗證：
# 直接用瀏覽器打開 bundle.html
第四步：交付與可選測試¶
把 bundle.html 提供給用戶或在對話中展示。官方說明：測試是可選步驟，默認不必在交付前跑 Playwright/Puppeteer，以免增加延遲；若用戶反饋有問題再補測。
適用場景與注意事項¶
適合：
- 儀表盤、配置面板、多步驟表單、帶 Tab/Dialog 的交互式小應用
- 希望產出物能在瀏覽器單文件打開、便於分享預覽
- 團隊已在用 React + Tailwind + shadcn/ui，希望 Agent 輸出與現有審美/組件體系一致
不太適合：
- 純靜態落地頁、單組件展示（官方明確建議用簡單 HTML/JSX Skill）
- 無 Node 環境、無法運行 shell 腳本的受限環境
- 需要長期維護、多人協作的大型工程（這更適合正規倉庫 CI/CD，而非 Artifact 打包）
注意：
bundle.html會把依賴全部內聯，功能複雜時文件會變大，需權衡。- init 腳本依賴同目錄下的
shadcn-components.tar.gz，複製 Skill 時務必保留完整scripts目錄。 - Anthropic 倉庫 README 有免責聲明：示例 Skill 用於演示與教育，Claude 實際行爲可能與 Skill 描述存在差異，上線前請在本地實測。
- 該 Skill 最初面向 claude.ai Artifact；在 Cursor 等工具中，最終仍是生成
bundle.html或可在pnpm dev下開發的 Vite 項目，按你的交付方式選用。
小結¶
web-artifacts-builder 解決的不是「會不會寫 HTML」，而是「複雜前端產物能否按工程化方式構建並一鍵打包」。React + shadcn/ui 棧對多數前端開發者沒有學習門檻，Agent 也能在明確腳本約束下少犯結構性的錯。
官方地址：
https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder
