讓網頁變好看的 2 個 Skill：apple-design、Taste 實測
網頁做好了卻說不出哪裡怪？實測 apple-design 與 Taste 兩個 Claude Code Skill，附安裝步驟與指令懶人包，照著做就能在自己的網頁上試一次。
⏱️ 一分鐘教你一個 AI 工具技巧｜第 8 集 · 看全系列 ›
更新時間：2026.10.10（apple-design 實測 2026.10.09、Taste 實測 2026.10.10）
看完 Reel 想知道怎麼裝？這篇照順序講：先裝好兩個 Skill，再複製指令，最後看我實測的結果。兩個都是 Claude Code 的 Skill：apple-design 改互動，Taste 改視覺。我拿自己選物店網站（shop.pinkjhs.com）的手機版設計稿各跑一次，你可以用同樣的指令在自己的網頁上試試。
📱 這系列的 Reel 都在 IG｜@pinkjhs.life，下一集不漏接 立即追蹤 IG ›💡 快速摘要（TL;DR｜2026.10 實測）
- 這是什麼：兩個在 Claude Code 使用的設計類 Skill。apple-design 改互動（動態、點擊範圍），Taste 改視覺（例如配色、字型、版面）。
- 怎麼裝：各跑一條
npx skills指令，兩條都帶--skill和-g，中間跳出的問題都按 Enter。 - 怎麼用：打
/apple-design或/design-taste-frontend，附上要審的網頁，要求「先只審、列清單」，挑好條目再改。
✍️ 真人實測宣告
本文根據作者實際操作與錄影撰寫，條目、數字與成品皆為本機實測紀錄；網頁版是否能安裝未親自驗證，詳見 FAQ。
📑 快速導覽目錄
- 🛠️ 怎麼安裝：先裝這兩個 Skill
- 📋 指令懶人包：裝好後直接複製
- ✨ 效果展示：我實測的結果
- ❓ 常見問題 FAQ
- ⏱️ 一分鐘版
- 💡 結語：先列清單，再決定改哪幾條
🛠️ 怎麼安裝：先裝這兩個 Skill
需要先裝好 Claude Code（Pro、Max、Team、Enterprise 或 Console 帳號才有，免費的 claude.ai 方案不含，2026.10.10 查）和 Node.js（跑下面的安裝指令用）。Claude Code 的安裝方式看 官方安裝文件。
第 1 步：裝 apple-design
npx skills@latest add emilkowalski/skills --skill apple-design -g裝好後用 /apple-design 呼叫。
第 2 步：裝 Taste
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" -g裝好後用 /design-taste-frontend 呼叫。Taste 目前是 v2 實驗版（2026.10.10 查），作者還在持續更新，你跑出來的條數和建議可能跟我的不完全一樣。
圖說：Linux 終端機示意，Windows PowerShell 的選項相同。
兩條都帶了 -g（裝成全域，每個專案都能用，原因見 FAQ），中間跳出的問題都按 Enter 用預設。最後如果出現一行紅字 ✗ … PromptScript does not support global skill installation，可以忽略，Claude Code 那一份已經裝好了。裝完請開一個新的 Claude Code 對話，再輸入 / 找指令。
📋 指令懶人包：裝好後直接複製
把括號裡的字換成你要審的網頁檔案。我自己的指令比這個長，還多了「文案逐字不動」這類限制，你可以依需求加減。
- apple-design（改互動）：
/apple-design 對象：（你的網頁檔案），手機版優先，以 390px 寬為主。 - Taste（改視覺）：
/design-taste-frontend 對象：（你的網頁檔案），手機版優先，以 390px 寬為主。 - 兩個都要加的那句（先審、不改）：
先只審、不要改任何東西。列出問題清單，每一條寫哪裡有問題、依據哪條規則、打算怎麼改，然後停下來等我決定要改哪幾條。
用法是：先貼 1 或 2，再接上 3；看完清單，回覆它「改第幾條、第幾條不要改」，它才會動手套用。
✨ 效果展示：我實測的結果
下面是我用上面那幾句指令，對同一份手機版型實測的結果。你的網頁不一樣，審出來的條目也會不同，但流程是一樣的，你也可以用上面的指令懶人包試試。
🤌 apple-design：審出 11 條，我挑 8 條套用
圖說：第一步只審、不改，我用的指令比懶人包長。
一個明顯的例子：切換分頁。 改前，點頁籤內容是直接切換；套用後，新內容會淡入進場，按下去也有回饋。
圖說：同一次點頁籤，左邊是改前，右邊是套用後。
Reel 裡看到的「手指左右滑切頁」，是我另外請它做的「不設限版」才有，正式套用的版本沒有，原因見 FAQ。
🎨 Taste：審出 15 條，放行 14 條
圖說：同樣第一步只審、不改。
一個明顯的例子：置中單欄變靠左兩欄。 改前，標題置中、商品單欄排列；放行後，標題靠左、商品兩欄，一個畫面看得到更多商品。Claude 回報整頁長度從 6,836px 降到 2,864px。
圖說：同一個頁面的首屏，左邊是改前，右邊是套用後。
❓ 常見問題 FAQ
Q1：Claude 網頁版能裝嗎？
官方支援上傳自訂 Skill：把 Skill 資料夾打包成 ZIP，並需開啟程式碼執行（2026.10.10 查 support.claude.com）。但這兩個我只在 Claude Code 本機實測，網頁版沒試過，不保證裝得起來，也不保證效果一樣。
Q2：安裝指令為什麼要加 -g 和 --skill？
npx skills 預設只裝在目前的資料夾；加 -g 會裝到使用者目錄（~/.claude/skills/），所有專案都能用。
沒加的話，安裝時會跳出「Installation scope」選單，預設停在 Project，要自己往下選 Global。我第一次裝 Taste 就忘了加，裝進了 Claude Code 當時開的暫存資料夾，換資料夾就叫不出來。
--skill 是指定只裝這一個：apple-design 那個 repo 有 14 個 Skill（2026.10.10 查），不加的話會先跳出一個預設全部沒勾的清單，直接按 Enter 等於什麼都沒裝。如果安裝時還跳出「Which agents do you want to install to?」的清單，確認有勾到 Claude Code，再按 Enter。
Q3：我的結果會跟你一樣嗎？
不會完全一樣。我的測試對象是選物店手機版的設計稿，條目是 Skill 依規則對這份頁面判斷出來的；你的網頁不同，條目就不同。Taste 的審核表也是英文，需要的話可以再請 Claude 翻成中文。
Q4：影片裡的手指左右滑切頁，為什麼我套用的版本沒有？
那是 apple-design 報告的第 11 條，報告標示可選、成本最高，並建議先不做，我照做，所以正式套用的版型沒有。之後我另外請它放手做一版全開的「不設限版」，只為了看全套效果，手指滑動只有那一版有。
⏱️ 一分鐘版
這集的一分鐘 Reel 把兩個 Skill 各做什麼壓成約 45 秒，先看片再回來抄指令也可以：
⏱️ 本系列「一分鐘教你一個 AI 工具技巧」
- 前導集：Claude Chat 跟 Cowork 合併了
- 第 1 集：IG 貼文圖字體一致性
- 第 2 集：Reels 加動畫實測：Claude 六輪改稿，全用講的
- 第 3 集：Claude Code 必裝 3 個 MCP
- 第 4 集：複製自己的聲音
- 第 5 集：一支 Reel 背後用了 5 個 AI 工具（整理在 AI 工作流入口頁）
- 第 6 集：Claude 必裝 3 個 Skill
- 第 7 集：Claude 模型怎麼選最省
- 第 8 集：讓網頁變好看的 2 個 Skill（本篇）
- 第 9 集：生日月優惠信一次整理
👉 看全系列
💡 結語：先列清單，再決定改哪幾條
apple-design 改互動，Taste 改視覺，用法都一樣：先請它列清單，再由你決定改哪幾條。裝好以後，把懶人包的指令複製下去，你也可以在自己的網頁上試試。
遇到這類問題，問 AI 就對了。
📚 問 AI 就對了 系列
- Claude Chat 跟 Cowork 合併了！新版 Claude 4 件事實測
- IG 貼文圖字體怎麼一致？用 Claude 做視覺母版實測
- Reels 加動畫實測：Claude 六輪改稿，全用講的
- Claude Code 必裝 3 個 MCP：Playwright、Context7、Firecrawl 實測
- AI 複製你自己的聲音實測：MiniMax 錄 3 分鐘，打字就能出口白，再用對嘴讓照片開口
- Claude 必裝 3 個 Skill：eli5、pptx、frontend-design 實測
- Claude 額度老是用完？日常先用 Sonnet，卡關才開 Opus 的選法
這個系列每一集的完整整理，都收在 AI 工作流入口頁。
