Skill 練功室 · 工程與開發

web-artifacts-builder

產生較完整的單頁應用（狀態、routing、元件）。

適合情境
做小 demo、教學互動頁
安裝／啟用
anthropics/skills → web-artifacts-builder
練完長這樣
狀態與畫面清單清楚，之後能丟進 Cursor 實作。

練習 Prompt

複製後貼到 Cursor 或 Claude。可依你當天真實情況改名字、科別或草稿內容。

請用 web-artifacts-builder 思路：規劃一個單頁「Skill 打卡器」——可勾選今天練過哪些 skill、存 localStorage。先列元件與狀態，不要一次做完整 app。
回練功室

同分類其他關卡

  • claude-api — 正確使用 Anthropic API（串流、工具呼叫、批次等）。
  • mcp-builder — 協助生成 MCP Server，打通 AI 與外部工具。
  • frontend-design — 現代前端 UI；先設計思考，避開 AI slop。
  • webapp-testing — 用 Playwright 測試前端。