Taste Lab
Taste Lab · 圖片
Taste Lab 是一款 AI 設計分析器，它會像資深設計師那樣閱讀任何網站網址，接著交給你 AI 程式碼工具一份它們真的能照著做的簡短設計簡報。它從頁面抓出精確的測量值，把它們濃縮成系統層級的規則，並稱之為設計 DNA，然後把結果存成一份 Markdown 檔加一組 JSON 權杖。整個賣點就是這樣。如果你曾要求 AI 工具複製某個網站的樣貌，卻拿回一團通用的漸層，這個工具就是為了補上那個缺失的輸入。
關於 Taste Lab
Taste Lab 是什麼
Taste Lab 解決一個具體又惱人的問題。AI 程式碼工具能寫出頁面的程式碼，卻不知道一個設計為何長成那樣，於是它們退回受訓時學到的通用樣式。Taste Lab 把一個線上網站轉換成結構化的設計脈絡，補上這個缺口。
它透過四個階段運作，每個階段由不同角色處理。一趟抓取精確的測量值。另一趟偵測這些數字之間重複出現的規則。第三趟推斷設計師刻意做出的取捨，最後一趟在檔案寫出前過濾掉任何薄弱的部分。產出不是含糊的情緒板。每個色彩、字重與間距值都附上精確的十六進位碼、像素值或比例。網站設計分析很少能做到這麼精確。
最大的限制在於範圍。Taste Lab 分析的是既有頁面，所以它無法憑空發想一個設計，也無法替你修好壞掉的版面。它也很依賴你餵給它的頁面品質。來源頁面雜亂，產出的簡報就雜亂。把它當成餵養你代理的研究步驟，而不是設計判斷的替代品。
開始使用
- 前往 tastelab.xyz，貼上你想逆向工程其設計的網站網址。
- 讓四個代理跑完它們的抓取、模式偵測、品味推斷與最終審查流程。
- 執行完成後，下載產生的兩個檔案，一份 Markdown 簡報與一組 JSON 權杖。
- 把這些檔案放進你的 AI 程式碼工具當作脈絡，讓它依真實測量值建構，而不是憑空猜測。
- 每當來源網站改變設計、你需要更新簡報時，就重新跑一次分析。
產品資訊
快速了解 Taste Lab 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 前端開發者：當你需要 AI 程式碼代理比照既有品牌或競爭對手的樣貌、又不想手動調每一個數值時，特別有用。
- 產品設計師：方便用來稽核一個線上頁面，並一次記錄它的間距、字體與色彩系統。
- 獨立創辦人：一種在還沒請設計師之前，就讓 AI 打造的原型擁有連貫視覺語言的方法。
任務
- 逆向工程競爭對手的設計系統：抓出它們的權杖，讓你研究版面背後的抉擇。
- 餵給 AI 建構工具設計脈絡：給工具精確的數值，而不是讓它套用通用樣式。
- 記錄既有網站：產出一份你可以交給隊友或留作參考的簡報。
情境
- 你正用 AI 代理重建一個著陸頁，而最初的草稿跟參考對象完全不像。
- 你想理解一個設計良好的頁面為何感覺沉穩而刻意，而不只是複製它的截圖。
- 你正並排比較幾個網站的設計決策，來形塑自己的方向。
主要功能
從網址到簡報的流程
那它實際上交還什麼？一份完整的設計簡報。這條流程依序跑四個代理，每一個都用更銳利的視角讀同一個頁面，直到剩下的是一個 AI 工具能照著建構的檔案。除了網址之外你什麼都不用設定，這讓工作流程保持簡短。這份簡單正是重點。
精確測量值抓取
第一趟從頁面抓出精確、客觀的數值，涵蓋廣泛的類別。色彩以十六進位碼呈現，間距與尺寸以像素值呈現，字體則附上字重與字距數字。沒有任何一項是概略估計。這很重要。AI 工具在任其猜測時，往往會飄向整數，而這種偏差會在整個版面裡累積。
系統層級規則偵測
Taste Lab 不會倒出原始數字，而是偵測它們背後重複出現的規則。十幾個相似的間距值會收斂成一個基準單位加一套級距。每條規則都附上一行證據，以及一段簡短的設計目標，說明它為何存在。你看見的是邏輯，不只是資料。
品味 DNA 原則
最有用的是那個推理層。Taste Lab 會寫出幾條原則，每一條涵蓋一個設計決策、觸發它的原因、為何如此決定，以及它放棄了什麼。至少納入一條克制原則是有意為之。好的設計往往在於設計師拒絕加入什麼，而這點在此被捕捉下來。這正是多數工具略過的部分。
Markdown 與 JSON 雙輸出
每次執行都會寫兩個檔案到你機器上：一份給人看的 Markdown 簡報，和一組給工具用的 JSON 權杖。Markdown 版本讀起來像一份你能分享或編輯的設計備忘錄。JSON 版本能直接接進 AI 程式碼工作流程。你的代理取得可供機器讀取的數值來引用。
品質關卡
在寫出產出之前，Taste Lab 會跑一趟反灌水流程，搜尋填充語言並驗證 JSON 結構。這是個小細節，但很重要。你拿到的簡報比較不會被 AI 工具預設會產生的那種含糊、聽起來很有把握的措辭灌水。
優缺點
優點
- 把一個線上網址轉成精確、可建構的設計數值，而不是含糊的描述。
- 推理層說明了每個選擇為何做出，以及它捨棄了什麼。
- 同時輸出人類可讀的簡報與給 AI 工具用的 JSON 權杖。
- 把工作流程維持在單一輸入，所以在拿到結果前沒什麼需要設定。
缺點
- 只分析既有頁面，所以它無法從無到有生成設計，也無法修好壞掉的版面。
- 產出品質高度取決於來源頁面；雜亂的網站會產出雜亂的簡報。
- 網站上沒有清楚的價格或 API 資訊，讓人難以規劃團隊或自動化用途。
常見問題
它把網站網址轉成給你的 AI 代理用的結構化設計簡報。它從線上頁面抓取精確的測量值，偵測其背後的規則，並寫出一段簡短的設計脈絡，以 Markdown 與 JSON 形式呈現，讓你的程式碼工具能遵循。
相關內容
探索與 Taste Lab 相關的工具、技能與文章。
Taste Lab 替代方案
Google EmbeddingGemma 2
Google DeepMind · 寫作 · 圖片 · 程式設計Google EmbeddingGemma 2 是 7.4 億參數的開源模型，能把文字、程式碼、圖片、音訊與影片畫面轉成同一個 768 維空間裡的向量，在手機與筆電上就能執行。
Tractionwave
TractionWave · 圖片 · 行銷TractionWave 是針對靜態廣告的 AI 注意力熱圖工具。上傳 PNG 或 JPG，就能取得預測注意力、排序後的熱點與修正建議，不必等預算花完才知道問題在哪。
Imejis.io
Imejis.io · 圖片 · 行銷Imejis.io 是給代理與行銷團隊使用的 AI 設計工作室。你用日常說法描述一張圖，它會寫好文案、排出版面、自動調整成各種尺寸，最後匯出完成檔。