網頁一句話換成知名網站風｜DESIGN.md 設計檔實測
DESIGN.md 是把網站的配色、字型、按鈕寫成一個檔，丟給 Claude Code 就能改外觀。附取得步驟、指令，與 Airbnb、Spotify、Nike 的實測對照。
⏱️ 一分鐘教你一個 AI 工具技巧｜第 15 集 · 看全系列 ›
更新時間：2026.10.23（Windows 實測）
DESIGN.md 是把一個網站的配色、字型、按鈕風格寫成一個檔案，放進專案，Claude Code 就會照著它改你網頁的外觀。這集我用它把同一個頁面換成 Airbnb、Spotify、Nike 的風格。
上一集講的是兩個 Skill（網頁變好看？裝這 2 個 Skill），這集是續集：這次不用裝東西，只要下載一個檔案。步驟與指令都在下面，你可以用同樣的指令在自己的網頁上試試。
📱 這系列的 Reel 都在 IG｜@pinkjhs.life，下一集不漏接 立即追蹤 IG ›💡 快速摘要（TL;DR｜2026.10 實測）
- 這是什麼：DESIGN.md 是社群整理的網站風格分析檔，內容是某個知名網站的配色、字型、間距與按鈕風格。
- 怎麼取得：到 GitHub 的 awesome-design-md，進 design-md 資料夾，挑一個網站，把它的 DESIGN.md 下載（或複製）到專案根目錄。
- 怎麼用：在 Claude Code 貼一句指令，請它照 DESIGN.md 改外觀，只改外觀、不動內容。
- 我試過的：Windows 上的 Claude Code，把同一個選物店頁面分別換成 Airbnb、Spotify、Nike；其他環境沒試過。
✍️ 真人實測宣告
本文根據作者 2026.10.23 的實際操作與錄影撰寫，對照圖為本機實測畫面；設計檔數量與授權依 GitHub 頁面（2026.10.24 查），未親身驗證的部分已於文中標明。
📑 快速導覽目錄
- 📥 ① 怎麼取得：下載一個檔案就好
- 📋 ② 指令懶人包：直接複製
- ✨ ③ 效果展示：同一個頁面，換三種風格
- ❓ 常見問題 FAQ
- ⏱️ 一分鐘版
- 💡 結語：下載一個檔，再說一句話
📥 ① 怎麼取得：下載一個檔案就好
這集沒有安裝指令。需要的只有兩樣：Claude Code（安裝方式看Claude Code 安裝文件），以及一個你想改外觀的網頁專案。我是在 Windows 上的 Claude Code 試的，其他環境沒試過。
第 1 步：進 repo，找到 design-md 資料夾
設計檔都放在 GitHub 專案 VoltAgent/awesome-design-md。進去之後，點檔案列表裡的 design-md 資料夾。
圖說：awesome-design-md 的首頁，要點的是檔案列表裡的 design-md 資料夾。
第 2 步：挑一個網站
資料夾裡一個網站一個子資料夾，名字就是網站名（airbnb、apple、spotify……）。我這次挑了 airbnb、spotify、nike 三個。
圖說：design-md 資料夾：一個網站一個子資料夾，依字母排序。
第 3 步：下載它的 DESIGN.md，放進專案根目錄
點進網站資料夾，裡面有 DESIGN.md 和 README.md。點開 DESIGN.md，用檔案頁右上角的下載鍵存下來（也可以整份複製，貼進自己新建的 DESIGN.md），然後放到你專案的根目錄，檔名維持 DESIGN.md。
圖說：左：airbnb 資料夾裡的兩個檔案；右：點開 DESIGN.md 看到的內容，是一份寫給 AI 讀的英文風格說明。
我的做法是每次都從同一份原版複製一份工作副本，再放進對應的 DESIGN.md，這樣三個品牌的「改前」都是同一個畫面。
怎麼確認有用
下一章的指令最後一句請它「告訴我改了哪幾類」，改完它通常會說明動了哪些項目（例如配色、字型、按鈕）。再打開網頁，看外觀有沒有跟你選的網站接近，就知道這個檔有沒有被用上。
📋 ② 指令懶人包：直接複製
把 index.html 換成你要改的網頁檔案。這是我實測時貼的那一句原文，你可以依自己的頁面加減限制。
① 照設計檔改外觀（貼進 Claude Code）
讀專案根目錄的 DESIGN.md，照它的配色、字型、間距和按鈕風格，改寫 index.html 的外觀。只改外觀，不改內容、頁籤功能和頁面結構。改完告訴我改了哪幾類。這句有三個地方可以照抄：指名讀哪個檔（根目錄的 DESIGN.md）、指名改哪個檔（index.html）、先講清楚「只改外觀，不改什麼」，最後要它回報改了哪幾類。
② 想換另一個品牌
把根目錄的 DESIGN.md 換成別的網站的版本，再貼一次同一句指令就好。我三個品牌用的都是同一句。
③ 上一集的兩個 Skill
apple-design（改互動）和 Taste（改視覺）的安裝指令與用法，整理在上一集的指令懶人包。
✨ ③ 效果展示：同一個頁面，換三種風格
我拿自己選物店（shop.pinkjhs.com）的手機版設計稿當測試頁，這是改之前的原版，以及依序換成 Airbnb、Nike、Spotify 之後的樣子。三次的文字內容、頁籤和商品卡都沒有動，變的是顏色、按鈕和標題的樣式。
圖說：由左至右：改前原版、Airbnb、Nike、Spotify。同一個頁面首屏，內容沒動。
🏠 Airbnb：白底、玫紅按鈕
主按鈕變成鮮明的玫紅色，標題變得比較小而清爽，頁籤是底線式。整體看起來像一個乾淨的旅宿預訂頁。
👟 Nike：黑色大標題、膠囊按鈕
標題字變得很大很粗，主按鈕是黑色，頁籤改成圓角膠囊。我沒有放任何品牌 logo，畫面上的 PinkJHS 是我自己的店名。
🎧 Spotify：黑底、綠色按鈕
整頁換成深色底，按鈕與選中的頁籤是亮綠色。往下捲的商品卡也跟著變色。
圖說：往下捲到商品卡的畫面，同樣由左至右是原版、Airbnb、Nike、Spotify。
這是我一個頁面的實測，你的網頁結構不同，套出來的樣子也會不一樣，建議改完自己點一輪頁籤與按鈕再用。
❓ 常見問題 FAQ
Q1：DESIGN.md 是誰整理的？
它是 VoltAgent 在 GitHub 上整理的社群專案，內容是對各網站設計風格的分析。專案頁寫的是「We do not claim ownership of any site's visual identity」（2026.10.24 查）。
Q2：要付費嗎？授權是什麼？
GitHub 頁面標示 MIT 授權，並寫明檔案「as is」提供、不附保證（2026.10.24 查）。這只表示這個整理專案的使用條件；你拿風格做出來的網頁要不要商用、會不會碰到品牌識別的問題，請自己再確認。Claude Code 本身的使用條件請看 Anthropic 的說明頁。
Q3：設計檔有多少個網站？
專案頁標示 73 個（2026.10.24 查），分成 10 個分類，另有 Dell（1996）、Nintendo.com（2001）兩個舊網站風格。這個數字會隨專案更新增減，以 repo 為準。
Q4：一定要用 Claude Code 嗎？
我只試過 Windows 上的 Claude Code，其他環境沒試過，不保證效果一樣。專案頁的簡介寫的是把檔案放進專案，讓 coding agents 產生對應的介面（2026.10.24 查），所以不限於 Claude Code，但我沒有逐一驗證。
Q5：Claude 網頁版可以用嗎？
沒試過。我的做法是把 DESIGN.md 放進專案資料夾，讓 Claude Code 直接讀檔，網頁版沒有這個流程，我不確定怎麼做才會有一樣的效果。
Q6：資料夾裡的 README 寫「已搬到 getdesign.md」，是怎麼回事？
我 2026.10.23 看 airbnb 資料夾時，README.md 寫著設計系統的細節已搬到 getdesign.md，那裡可以看預覽與下載；不過同一個資料夾裡仍然有 DESIGN.md 可以直接下載，我用的就是這個。專案可能隨時調整，以你打開 repo 當下看到的為準。
Q7：改完內容和功能會不會壞掉？
我的指令寫了「只改外觀，不改內容、頁籤功能和頁面結構」，這次實測三個品牌的文字內容與頁籤都還在。但這只是我的頁面的結果，建議改之前先複製一份備份（或用 git），改完自己點一輪。
Q8：中文字型會不會跑掉？
設計檔裡指定的字型不一定有中文字，所以中文頁面套用後的字型，請你自己打開看一次。我這次的對照圖是手機寬度的畫面，其他裝置沒逐一看過。
Q9：想要連結和指令，在哪裡拿？
這篇文章已經是完整步驟。我另外做了一頁獨立的懶人包頁，整理好連結與指令，上一集的兩個 Skill 也一起附上；Reel 結尾留言「網頁」，我會把那一頁的網址傳給你。兩邊內容是同一批，不用重複看。
⏱️ 一分鐘版
一分鐘看一個設計檔，怎麼把同一個網頁換成知名網站的風格。
【待補：Reel 嵌入，發布後補】
⏱️ 本系列「一分鐘教你一個 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 集：生日月優惠信一次整理
- 第 10 集：Claude 儀表板
- 第 11 集：Claude 寫 Python 畫 Reels 動畫
- 第 12 集：信用卡帳單這樣整理
- 第 14 集：系統架構圖一筆都沒畫
- 第 15 集：DESIGN.md 把網頁換成 Airbnb、Spotify、Nike 風（籌備中）
👉 看全系列
💡 結語：下載一個檔，再說一句話
整件事其實只有三步：下載你想要的網站的 DESIGN.md、放進專案根目錄、貼那句「只改外觀」的指令。同一個頁面想看別的風格，換檔再說一次就好。你也可以拿自己的網頁試試同樣的指令；想連同上一集的兩個 Skill 一起拿，Reel 留言「網頁」，我會把懶人包頁的網址傳給你。
遇到這類問題，問 AI 就對了。
這個系列每一集的完整整理，都收在 AI 工作流入口頁。
💡 延伸閱讀：
👉 讓網頁變好看的 2 個 Skill：apple-design、Taste 實測
👉 Claude 儀表板 3 步做好：GA 報表丟給它一句話，今年去年流量一鍵對比（實測）
