做網站和程式設計要先準備點東西
做自己的 Skill
把你常用的做法寫成一個 Skill,還能跑測試看它好不好用。
適合:想把自己的固定做法交給 AI 的人
402K 次安裝看看怎麼用
讓 AI 做網頁時有自己的風格,不做成千篇一律的模板樣。
適合:想讓 AI 做個人主頁、活動頁的人
照著「你對 AI 說」那句說就行,換成你自己的內容。
你對 AI 說
幫我做一個展示手工陶瓷作品的單頁網站,別做成常見的模板樣子。
AI 會這樣做
最後你會拿到
一個風格鮮明、跟主題貼合的網頁。
你對 AI 說
這個活動頁看著太普通了,幫我重新定一下視覺方向。
AI 會這樣做
最後你會拿到
一版有辨識度的活動頁。
想看它的原始說明(英文):anthropics/skills 上的 SKILL.md
你用的是哪個 AI 工具?
1. 開啟電腦上的「終端機」,複製下面這行貼進去,按 Enter
npx skills add anthropics/ skills @frontend-design -g沒帶工具名,命令會自己找你電腦上裝了哪些 AI 工具,問你裝到哪個。提示沒有 npx 或者版本太舊,就先裝最新的 Node.js(22 以上)。
懶得開終端機?
Claude Code、Codex、Cursor、Trae 這些工具自己就能跑命令,把這句話發給它:
npx skills add anthropics/ skills @frontend-design -g2. 重新開啟你的 AI 工具
新裝的 Skill 要重開一次才會被認出來。
3. 直接說你想幹嘛
照案例裡的說法說就行;想點名用它,可以說「用 frontend-design 幫我……」。
把你常用的做法寫成一個 Skill,還能跑測試看它好不好用。
適合:想把自己的固定做法交給 AI 的人
遇到報錯先查清根本原因再動手修,不靠瞎猜試錯。
適合:寫程式碼時常被 bug 卡住的人
用 React 和 shadcn/ui 做多元件頁面,最後打包成一個 HTML。
適合:會一點前端、想做複雜互動頁面的人