網頁變好看懶人包｜DESIGN.md 設計檔＋兩個 Skill
看了「一分鐘教你一個 AI 工具技巧」第 15 集 Reel，留言「網頁」來拿連結的朋友，這頁整理好了：設計檔去哪下載、要貼哪一句指令，還有上一集的兩個 Skill。示範案例是我自己的選物店手機版頁面，換成 Airbnb、Spotify、Nike 三種風格。
💡 快速摘要（TL;DR｜2026.10 實測）
- 連結：設計檔在 GitHub 的 awesome-design-md，進 design-md 資料夾挑網站。
- 做法：下載那個網站的 DESIGN.md，放進專案根目錄，在 Claude Code 貼下面那句指令。
- 附贈：上一集的兩個 Skill（apple-design、Taste）安裝指令也在這頁。
- 試過的環境：Windows 上的 Claude Code；其他環境沒試過。
✍️ 真人實測宣告
本頁依作者 2026.10.23 的實際操作整理；設計檔數量與授權依 GitHub 頁面（2026.10.24 查），以你打開 repo 當下看到的為準。
🔗 連結
- awesome-design-md 專案首頁（進去點 design-md 資料夾）
- Airbnb 的設計檔資料夾
- Spotify 的設計檔資料夾
- Nike 的設計檔資料夾
點進網站資料夾，裡面有 DESIGN.md，用檔案頁右上角的下載鍵存下來，放進你專案的根目錄，檔名維持 DESIGN.md。完整圖文步驟在這一集的文章。
📋 指令：貼進 Claude Code
把 index.html 換成你要改的網頁檔案：
讀專案根目錄的 DESIGN.md，照它的配色、字型、間距和按鈕風格，改寫 index.html 的外觀。只改外觀，不改內容、頁籤功能和頁面結構。改完告訴我改了哪幾類。想換別的網站風格：把根目錄的 DESIGN.md 換成別的網站的版本，再貼一次同一句。改之前建議先複製一份備份，改完自己點一輪頁籤與按鈕再用。
🧩 附贈：上一集的兩個 Skill
這兩個是 Claude Code 的 Skill，apple-design 改互動，Taste 改視覺。各跑一條安裝指令，中間跳出的問題都按 Enter，裝完開新的 Claude Code 對話再用。
apple-design（裝好後用 /apple-design 呼叫）
npx skills@latest add emilkowalski/skills --skill apple-design -gTaste（裝好後用 /design-taste-frontend 呼叫）
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" -g怎麼叫它們「先只審、列清單」再挑條目改，寫在上一集的指令懶人包。