欸超爽！Claude Code 新手第一個作品：我用 1 小時拓印了漂亮網頁的設計系統

上個星期三下午兩點，我盯著螢幕上第 17 次報的同一個排版錯誤。那時候我第一次開口問了 Claude Code 一個「笨問題」，解鎖了網頁拓印的新玩法。

「我沒想到，一個非工程師，能在三週內用 Claude Code 把心裡那個軟體做出來。」

你上次打開網頁編輯器，試圖手動刻一個自己想做的網站時，進度停在哪裡？是不是總覺得版面看起來很模板感，色彩不知道怎麼搭，怎麼調都看起來很廉價？這不是你的問題，是因為我們習慣去學完整語法，而不是去「拆解結構」。看著別人的漂亮網站很有質感，卻說不出它到底好在哪裡。這不是你的問題，今天我們用做出來再說的路，教你怎麼把質感拓印下來。

對啦，以前的玩法都是教你要先學會 HTML、CSS、JavaScript，還要看懂幾百頁的網頁排版手冊，結果光是看那些術語就累了，根本做不出東西。我考慮過跟著傳統課程慢慢刻，最後我選了直接逆向工程的玩法，因為做網頁就像打怪，先拿到神裝才是真的。

這就是我決定做網頁拓印的原因。質感這件事不是玄學，它是色彩比例、字體分工、還有版型節奏的結構。我們不用抄別人的內容，但我們可以把別人已經驗證好看的「設計指紋」拓印下來。這就是非工程師完成 Claude Code 新手第一個作品的最佳起點。

這個拓印流程真的很簡單。我們不用從零去想，而是用看圖估算跟 DOM 拓印這兩種拆解法。

第一步是選定目標網站，我選了一個很有暖編輯風格的精緻首頁。接著是三層拓印，也就是拆解設計 token、資訊架構、還有說服結構。我讓 Claude Code 幫我讀取那個網頁的樣式特徵。

不誇張，我們在 1 小時內就把它的設計系統拓印下來了。實際執行時，我拿到了 1 套 tokens.css，裡面只有最核心的色彩 and 間距設定。接著在 7 個模組的實戰課框架下，我把 M1 到 M6 的步驟跑完，成功把這個設計系統套到我自己的首頁上。

我們做這件事的實際數據很精準：

• 總共只花了 45 分鐘。
• 產出了 1 套可更換主題的設計系統。
• 順利把 3 層拓印全部封裝完畢。

在用這套方法做網頁時，我踩到了一個小坑。那就是字體授權。一開始我讓 Claude Code 100% 還原目標網站的特殊字體，結果發現那些商用字體超級貴。後來我趕快轉彎，讓 Claude Code 幫我找免費的近似字體，一樣很有質感，而且完全免費。

意外的驚喜是，當我們把設計 tokens 獨立成 CSS 檔案後，只要改掉 tokens 裡面的色彩值，整站的性格就完全變了。根本不需要重寫 HTML。

接下來我打算挑戰整頁拓印，把完整首頁的版型也逆向過來。

如果你也想試試看這個玩法，今天的第一步：打開 Claude Code，把你最欣賞的那個網站網址傳給它，問它：「這個網頁的色彩與字體是怎麼設計的？請幫我寫出它的 tokens 設定。」

[去 BUILD 做出第一個小作品](/build)