Refero.Design 的公開建造實驗

我在X.com上看到有推使用Refero.Design，我決定用來重新設計 aicoding.tw 的新首頁，我選了這個Huddle的設計，下載全部的檔案給Claude Code參考，最後的成果是可以實現接近Huddle.Works的頁面設計，只是感覺配色與整體不太適合aicoding.tw，因此我決定捨棄這個設計，但這一次的實驗結果讓我知道Refero.Design是可以真的給Claude Code更好的參考，唯一的問題是素材與視覺動畫效果等要自己準備好。

這篇就是那個過程。我覺得刪掉的這個結果，比做成功還值得寫。

那份東西到底是什麼

Refero.Design 不是一個做好的網頁，它給你的是一份規格。

你在上面挑一個你喜歡的網站風格，它就給你一份文件，寫著這個風格用哪幾個顏色、色碼是多少、標題幾號字、字要多粗、間距幾格、圓角要圓多少。還有一份清單寫著這個風格「不准做什麼」。

這跟直接抓一個做好的模版來改，是兩件事。模版給你的是結果，你照著搬就有；規格給你的是別人已經替你做完的決定，長什麼樣還是要你自己排。

我挑的 Huddle，它自己的一句話介紹是「奶油色紙上的粉彩卡片」。

最有用的，是那份「不准做什麼」

規格裡真正救到我的，不是它告訴我要用哪個顏色，是它告訴我不能做什麼。

它明說：卡片不准加陰影，要靠顏色本身分層；大標題不准用粗體，要用細字，粗體會毀掉那種編輯感；內文不准置中，全部靠左。

這幾條看起來很小，但它們擋住的東西很具體。你叫 AI 做一個「好看的首頁」，它十次有九次會給你粗黑的大標題、加陰影的卡片、置中的段落——因為它學過的網頁大多長那樣，它會往那個平均值靠過去。有一份白紙黑字寫著「不准」，它就靠不過去了。

它沒給你的：素材跟會動的東西

規格裡有一段寫著，這個設計沒有主視覺照片、沒有產品截圖、沒有裝飾插圖，那些彩色卡片本身就是圖片。

我看到這句很高興，因為我另外幾個網站到現在還在用模版原本附的圖，一直沒換成自己的內容，生一批合用的圖太花時間。

結果這句話也不準。你看這篇的封面——那就是我在 Refero.Design 上看到的那頁——裡面有真人的頭像、有一張飲料罐的產品照。實際的網站是有照片的，規格說沒有。

會動的部分它更是完全不提。整份規格從頭到尾沒有一個字講到互動或動畫，而 Huddle 最好看的地方偏偏就是會動的那一段。

所以要有心理準備：這份規格給你顏色、字級、間距、圓角，素材跟動畫效果要自己準備。

然後我踩到最大的坑

那份規格，跟它描述的那個網站，對不起來。

不是小數點的差別，是四個地方對不上：

規格說整頁是白底。實際那個網站是深色底，一塊一塊圓角的白色區塊浮在上面。

規格說卡片的圓角是 8 格。實際量出來是 24 格，大三倍，而且完全沒有描邊，規格說有一條細細的框線。

規格說有三個粉彩色，一種顏色代表一種狀態——綠的代表「即將開始」、紫的代表「進行中」、粉紅的代表「已完成」。實際那個網站是四個顏色輪流用，顏色根本不代表狀態。同一個「進行中」的標籤，在粉紅卡、紫卡、灰綠卡上都出現過。

標籤的樣式也完全不一樣。規格說是咖啡色外框配金色的字，實際是同一個色系深淺互換的實心小方塊。

我是怎麼發現的

我沒有只讀那份文件。我直接打開那個網站本人，把它每一塊的實際數值量出來。

這一步是整件事裡最划算的動作。它把「照著描述猜」變成「照著實際的抄」，前後大概花二十分鐘，省掉的是整頁做完才發現長得不對、要重做的時間。

中間還有一個插曲。我一開始是用網頁截圖工具把那個網站存成一張長圖來看，結果中間有一大塊，大概佔了半張圖，是整片全黑的。我當下以為是截圖工具壞了。

不是。那塊黑色是真的，而且那是整個網站最重要的一段——四張白色的區塊會隨著你往下捲，一張一張停住、後一張蓋上來，疊成一疊，露出下面的黑邊。靜態截圖拍不到這個，因為它要捲動才會發生，所以在圖片裡就塌成一片黑。

如果我當時相信「這裡壞掉了」，就會整段漏掉。這是我這次最想提醒的一件事：靜態的圖片會吃掉會動的東西，而會動的那部分往往才是重點。

做完的樣子

整頁做完了。九個段落，從破題、公開建造、十二個學院的清單，到招生方案、常見問題、訂閱。

十二個 AI 學院我排成一列彩色卡片，四個顏色輪流，aicoding 那一張標「你在這裡」。「怎麼開始」那段做成四張會疊起來的卡片，往下捲會一張一張停住。整頁沒有寫任何動畫程式，全部是瀏覽器本來就有的功能。

首頁的檔案大小是 1.29 KB，整頁載入 108 KB，手機上沒有跑版。

然後我決定不用

風格跟 aicoding.tw 不合。

就這麼簡單。不是做壞了，是做對了但不適合。粉彩色的卡片、深墨色的底、那種安靜的目錄感——它很好看，它就是不像一個教人用 AI 寫程式的地方。

我把整包刪掉了。程式碼刪光、分支刪掉，首頁退回原本的樣子。

這次真正學到的

選風格不能只看文字描述。

我當初是看到「奶油色紙上的粉彩卡片」這句話才選它的。腦子裡浮出來的是米白色的紙、淡淡的顏色、很輕。實際那個網站是深墨色的底。

同一個設計，用一句話寫出來跟親眼看到，給人的感覺可以差到改變「適不適合」的結論。我這次的錯就錯在這裡：我對著文件做了選型判斷，沒有先去看網站本身。

規格買到的不是時間，是「為什麼」。

它不會讓你做得比較快。它會讓你知道為什麼標題不能用粗體、為什麼卡片不能加陰影。這種東西模版不會告訴你，模版只會給你一個結果。

所以它適合的情況是：你已經知道自己要什麼視覺語言，只是需要一份嚴謹的規格把它釘下來。它不適合拿來「逛逛看有沒有喜歡的」。

還有一個意外的收穫：設計可以用機器檢查。

因為規格是白紙黑字的數字，做完之後我可以直接掃一遍——全站有沒有出現過陰影、圓角是不是只有那幾個值、顏色是不是只有那幾個。以前判斷「有沒有照著設計做」是憑感覺吵架，這次變成一個可以跑出答案的檢查。

這件事跟我選哪個風格無關，下次我還會這樣做。

刪掉的代價，比我想的小

我上一個網站也發生過做完才捨棄的事，那次做了十三個段落、所有互動都做好了，才被判定「效果都是放大縮小，其實沒什麼特別」。那次很痛。

這次不痛。因為這個風格不需要素材、動畫是瀏覽器本來就有的功能，「做到足以判斷好不好」這件事本身的成本就很低。一天之內就拿到答案了。

這給我一個新的判準：選風格的時候，除了看它好不好看，也要看「做到能判斷為止要花多少力氣」。有些風格你得投三天才看得出來合不合適，有些一天就知道。在還不確定的階段，選後者。

我留下了什麼

那個「一張一張停住疊起來」的做法，我留著了。它跟粉彩卡片一點關係都沒有，是一個獨立的東西，下次不管做什麼風格都能用。

九個段落要怎麼排的那張對照表也留著，段落順序不用重想。

還有這篇文章。

首頁我要重新設計。這次我會先去看網站本人，再決定。