大品牌的網站為什麼看起來很貴？3 步抄下它的設計系統，寫成 DESIGN.md
用瀏覽器 F12 讀出任何網站真實的字型、字級、顏色、圓角，貼給 Claude 整理成 DESIGN.md，再用這份系統做你自己的網站。只抄系統，不抄文案和 Logo。
在 Instagram 看這支 Reels留言關鍵字 #系統 就會收到這篇
大品牌的網站看起來很貴，秘密是背後有一套很小、很嚴格的「設計系統」：固定幾個顏色、幾個字級、一個圓角值，全站照做。
Reels 裡我用程式打開 5 個官網直接讀出真實數值。這篇教你用同一個方法抄任何網站的系統，整理成一份 DESIGN.md，然後讓 Claude 照著做你的網站。
01為什麼不能只看截圖
給 AI 一張截圖，它只能猜：「大概是 32px」「大概是深灰」。用瀏覽器的開發者工具讀出來的，是網站真的在用的數值：字重 300、顏色 #0A2540、圓角 6px。差一點，質感就差很多。
021. 取得真實數值（用電腦）
- 用電腦的 Chrome 打開你想參考的網站。
- 按 F12 打開開發者工具，切到 Console 分頁。
- 第一次貼程式碼時 Chrome 會擋，先輸入 allow pasting 按 Enter，再貼。
- 貼上下面這段，按 Enter。它會把頁面上標題、內文、連結、按鈕的字型、字級、字重、顏色、底色、圓角整理好，自動複製到剪貼簿。
copy([...new Set([...document.querySelectorAll('h1,h2,p,a,button')].map(e=>{const s=getComputedStyle(e);return [e.tagName,s.fontFamily.split(',')[0],s.fontSize,s.fontWeight,s.color,s.backgroundColor,s.borderRadius].join(' ')}))].join('\n'))
這段做的事：找出頁面上所有的 h1、h2、p、a、button，用 getComputedStyle 讀出瀏覽器實際算出來的樣式，去掉重複，一行一個元素，最後用 Console 的 copy() 複製。你會看到像這樣的結果：H1 Sohne 56px 300 rgb(10, 37, 64) rgba(0, 0, 0, 0) 0px。
032. 請 Claude 整理成 DESIGN.md
- 打開 claude.ai，把剛才複製的結果貼上。
- 再上傳一張該網站首頁的截圖，讓它看得到版面和留白。
- 貼上下面的 prompt。
根據以上數值和截圖寫 DESIGN.md：顏色 hex、字型、字級、字重、間距單位、圓角、按鈕／卡片規則、Do/Don't 各 3 條。只抽出系統，不要照抄文案和 logo。
DESIGN.md 就是一份用文字寫的設計規範。之後不管做網站、簡報還是 IG 貼文，把這份檔案給 AI，風格就會一致。
043. 用這套系統做你的網站
用這份 DESIGN.md 做［你的店］的網站
- 在同一個對話裡接著說，Claude 會記得 DESIGN.md 的內容。
- 內容、版面、照片用你自己的，只有「系統」（顏色、字級、間距、圓角）是抄來的。
- 做好後再對一次 DESIGN.md：按鈕圓角對不對、標題字重對不對。對不上就說「按鈕圓角改成 DESIGN.md 寫的 6px」。
05要注意
- 字型要換成有授權的。大品牌常用自家訂製字型（例如 Stripe 的 Sohne），你可以用 Inter、Noto Sans TC 這類免費字型替代，只保留字級和字重。
- 一次只參考一個網站。混兩個網站的系統，就兩邊都不像。
- DESIGN.md 存在專案資料夾裡，每次請 AI 做新頁面都先給它看。