Taste Lab
Taste Lab (/taste) 將任何網站 URL 轉換為一個完整、有證據支持的「設計品味」簡報——提取精確的 UI 測量、系統模式和您的 AI 代理可以遵循的簡潔品味 DNA。
https://tastelab.xyz/?ref=producthunt&utm_source=aipure
產品資訊
更新時間：2026年06月16日
什麼是 Taste Lab
Taste Lab 是一個設計分析工具，它可以逆向工程任何網站的視覺「品味」，並將其轉換為 AI 代理和開發人員可操作的設計上下文。透過分析目標 URL，它會產生一個結構化輸出，其中包括完整的設計圖（設計標記，例如顏色、排版、間距、半徑和陰影）和品味 DNA（設計決策背後的推理和權衡）。目標是幫助團隊和 AI 工具清晰地重現網站的設計意圖，其基礎是客觀測量而不是模糊的風格形容詞。
Taste Lab 的主要功能
Taste Lab (tastelab.xyz) 是一個設計分析工具/技能，能將任何網站 URL 轉換為 AI 代理的完整「設計上下文」。它使用多代理管道來提取精確的 UI 測量值（例如顏色、排版、間距、半徑、陰影等標記），檢測系統級設計規則，並推斷底層的「品味 DNA」（包含觸發器、決策、證據和權衡的原則）。輸出以 Markdown 和 JSON 兩種格式生成，並可整合到流行的 AI 編碼/設計工作流程中（例如 Cursor、Windsurf、Claude Code、Copilot），以便代理可以構建與參考網站設計品味一致的 UI。
URL 到設計上下文提取: 輸入網站 URL 並生成結構化的設計地圖，捕捉客觀的 UI 標記，例如十六進制顏色、字體大小/粗細、間距單位、半徑和陰影。
高精度測量（無近似值）: 引用約 20 個測量類別的精確像素/十六進制/比例，生成一套可作為設計系統基礎的標記。
模式檢測為系統規則: 從提取的測量值中推導出 5-8 個系統規則，每個規則都附有證據和明確的設計目標（規則存在的原因）。
包含權衡的品味 DNA 原則: 生成四個「品味原則」（包括至少一個限制原則），解釋關鍵設計選擇背後的原因，並有證據和明確的權衡支持。
雙重輸出：Markdown + JSON: 編寫人類可讀的簡報（.md）和機器可讀的文件（.json），以便團隊可以審查決策，工具可以可靠地攝取標記。
AI 工具的工作流程整合: 匯出到工具特定的指令位置（例如 Cursor 規則、Windsurf 規則、CLAUDE.md、Copilot 指令），以便 AI 代理可以在後續運行中應用提取的品味。
Taste Lab 的使用案例
用於快速原型設計的設計克隆: 產品團隊可以輸入競爭對手或靈感來源的 URL，以生成一套標記和原則，從而加速創建具有相似感覺的 UI，而無需手動審核。
代理引導的程式碼中 UI 實作: 使用 AI 編碼助理的開發人員可以附加 Taste Lab 的輸出，以便代理生成符合一致間距、排版和顏色決策的組件/頁面。
新創公司的設計系統引導: 早期團隊可以從高品質的參考網站創建初始設計系統，生成可重複使用的標記和規則，以在產品擴展時保持一致性。
品牌/設計一致性審核: 設計主管可以比較多個頁面或屬性的輸出，以檢測標記和規則的偏差，然後標準化為一套單一的原則。
代理商可重複使用的「品味簡報」: 代理商可以提供簡潔、有證據支持的設計簡報（標記 + 原則 + 權衡），以協調利益相關者並減少交接過程中的來回溝通。
優點
生成精確、有證據支持的設計標記（像素/十六進制/比例），適用於程式化重用。
不僅捕捉 UI 是什麼，還捕捉它為什麼是那樣（原則 + 權衡），提高代理的可靠性和團隊的一致性。
以人類和機器友好的格式輸出，並可插入多個 AI 工具鏈。
缺點
專注於提取和編纂現有的設計品味；對於從頭開始生成全新的視覺方向可能幫助不大。
最佳結果取決於目標網頁的可訪問性/結構以及自動提取的準確性（例如，動態樣式或大量使用畫布的 UI 可能更難解析）。
如何使用 Taste Lab
1) 安裝先決條件: 準備好 CLI 環境（Claude Code 或 Gemini CLI）。您還需要 Playwright MCP（它會下載一個 Chromium 運行時 ~100MB）。
2) 將 Taste 技能克隆到您的代理技能目錄中: 將存儲庫克隆到您的工具的正確文件夾中：Claude Code：`git clone https://github.com/senlindesign/taste-skill ~/.claude/skills/taste` 或 Gemini CLI：`git clone https://github.com/senlindesign/taste-skill ~/.gemini/skills/taste`。
3) 添加 Playwright MCP 服務器（一次性設置）: Claude Code：運行 `claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated`。Gemini CLI：將 Playwright MCP 添加到 `~/.gemini/settings.json` 中，如下所示：`{ "mcpServers": { "playwright": { "command": "npx", "args": ["-y", "@playwright/mcp@latest", "--isolated"] } } }`。
4) 重啟您的代理工具: 重啟 Claude Code 或 Gemini CLI，使其加載新的技能和 MCP 服務器配置。
5) 在網站 URL 上運行 Taste Lab: 執行命令 `/taste <url>`（例如：`/taste https://linear.app`）。Taste 運行一個 4 代理管道：提取測量 → 檢測模式 → 推斷品味 → 觀察者（最終編輯器/質量門）。
6) 審查生成的輸出: 每次運行都會產生兩個文件：`{domain}.md` 和 `{domain}.json`。它們包含 (1) 設計圖（具有確切值的標記，如顏色、排版、間距、半徑、陰影）和 (2) 品味 DNA（4 個原則，包括觸發器、決策、原因、證據、權衡；至少包含一個約束原則）。
7) 使用輸出指導您的 AI 工具: 透過將生成的品味上下文放置/附加到您的工具讀取的集成文件中來應用它，例如 Cursor：`.cursor/rules/{domain}-taste.mdc`、Windsurf：`.windsurf/rules/{domain}-taste.md`、Claude Code：`CLAUDE.md`（附加設計品味部分）、GitHub Copilot：`.github/copilot-instructions.md`、Bolt：`.bolt/prompt`、Gemini：`GEMINI.md`。
8) 在啟用品味上下文的情況下重新運行您的代理: 一旦品味文件位於您的工具的指令/規則位置，請再次運行您的正常構建/設計任務；代理應在下次運行時獲取設計標記和品味 DNA 原則。
Taste Lab 常見問題
Taste Lab 是一種工具/技能，可以逆向工程網站的「設計品味」。它的 /taste 命令將任何 URL 轉換為 AI 代理的完整設計上下文，包括設計地圖（設計標記）和品味 DNA（原則和推理）。
与 Taste Lab 类似的最新 AI 工具
Personalized License Plate Generator
一個基於人工智能的工具，根據用戶輸入生成獨特且個性化的車牌設計。
Keak
Keak是一個AI驅動的A/B測試工具，自動生成網站變體，啟動測試並優化轉換。
Makeasite
Makeasite 是一個創新的網站構建器，允許用戶僅使用提示快速創建和分享網站。
Adviseful
Adviseful 是一個 AI 驅動的工具，加速 IT 諮詢公司和數位代理商的網頁和移動應用規劃，將想法在幾分鐘內轉化為合格的潛在客戶。
类似 Taste Lab 的热门 AI 工具
GPT Engineer
GPT Engineer 是一個 AI 驅動的軟件開發工具，使任何人都能通過與 AI 工程師聊天來構建網絡應用程序。
Framer
Framer是一個強大的網頁構建器，允許設計師使用直觀的界面創建令人驚嘆的響應式網站，並立即發布，無需編碼。
Framer Workshop
Framer Workshop 是一個內置於 Framer 的 AI 驅動組件生成器，它允許設計師和開發人員通過簡單的對話提示創建高級的、可自定義的網站組件，而無需編寫代碼。
Wireframer
Wireframer 是 Framer 的一款人工智能驅動工具，可通過簡單的提示快速生成乾淨、響應式的網頁佈局和線框圖，幫助設計師創建結構藍圖，而不會被鎖定到特定的視覺樣式中。