Taste Lab
Taste Lab (/taste) 将任何网站 URL 转化为完整、有证据支持的“设计品味”简报——提取精确的 UI 测量、系统模式和您的 AI 代理可以遵循的简洁 Taste DNA。
https://tastelab.xyz/?ref=producthunt&utm_source=aipure
产品信息
更新于：2026年06月16日
什么是 Taste Lab
Taste Lab 是一款设计分析工具，可以逆向工程任何网站的视觉“品味”，并将其转化为 AI 代理和构建者的可操作设计上下文。通过分析目标 URL，它会生成结构化输出，包括完整的 Design Map（设计代币，如颜色、排版、间距、半径和阴影）和 Taste 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) Design Map（代币，如颜色、排版、间距、半径、带有精确值的阴影）和 (2) Taste DNA（4 个原则，包括触发器、决策、原因、证据、权衡；至少包含一个约束原则）。
7) 使用输出指导您的 AI 工具: 通过将生成的品味上下文放置/附加到您的工具读取的集成文件中来应用它，例如 Cursor：`.cursor/rules/{domain}-taste.mdc`，Windsurf：`.windsurf/rules/{domain}-taste.md`，Claude Code：`CLAUDE.md`（附加一个 Design Taste 部分），GitHub Copilot：`.github/copilot-instructions.md`，Bolt：`.bolt/prompt`，Gemini：`GEMINI.md`。
8) 重新运行您的代理并启用品味上下文: 一旦品味文件位于您的工具的指令/规则位置，再次运行您的正常构建/设计任务；代理应该在下次运行时获取设计代币和 Taste DNA 原则。
Taste Lab 常见问题
Taste Lab 是一种工具/技能，可以逆向工程网站的“设计品味”。它的 /taste 命令将任何 URL 转换为 AI 代理的完整设计上下文，包括设计地图（设计令牌）和品味 DNA（原则和推理）。
与 Taste Lab 类似的最新 AI 工具
Personalized License Plate Generator
一个基于AI的工具，根据用户输入生成独特且个性化的车牌设计。
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 的一款人工智能驱动工具，可从简单的提示快速生成干净、响应式的网页布局和线框图，帮助设计师创建结构蓝图，而不会陷入特定的视觉风格。