Taste Lab favicon

Taste Lab

访问网站

taste：基于溯因推理的网页设计品味与 AI 智能体语境提取工具

介绍:

taste 是一款由 Sen Lin 开发的深度设计分析工具，专为 AI 智能体提供网页设计品味语境。它通过溯因推理分析 URL，不仅提取颜色、间距等 Tokens，更深入挖掘设计背后的决策与权衡（Decisions × Trade-offs）。该工具生成的 Design Map 和 Taste DNA 可无缝集成至 Cursor、Claude Code、Windsurf 等开发工具，让 AI 能够理解并复刻顶级网站的设计精髓。

记录:

2026-06-16

每月访客数:

--K

网页设计
Taste Lab - AI Tool Screenshot and Interface Preview

Taste Lab 产品信息

taste：通过溯因推理深度解析网页设计品味的 AI 辅助工具

什么是 taste？ (What's taste)

在网页设计的语境下，taste（品味）被定义为一个核心公式：taste = decisions × trade-offs（品味 = 决策 × 权衡）。

大多数网页提取工具只能为您提供基础的“Token”，例如背景色为 #08090A、字体使用 Inter、圆角为 6px 等。但这仅仅是一份规格说明书（Spec Sheet），而非真正的品味。真正的品味在于理解每一个决策背后的“为什么”：为什么选择这种近乎黑色的色调而非纯黑？这个决策背后的目的是什么？

taste 是一款由 Sen Lin 开发的创新工具，它利用**溯因推理（Abductive Reasoning）**技术，将任何 URL 转化为 AI 智能体可理解的完整设计语境。当一个 AI 代理仅拥有 Token 时，它只会盲目复制数字；而当它拥有了 taste，它便理解了每个决策的意义，即使在从未见过的页面上也能做出正确的设计选择。

taste 的核心功能 (Features)

1. 深度品味 DNA 提取

taste 不仅仅抓取数据，它会生成两份关键文件：.md 简报和 .json 数据文件。其核心输出包含：

  • Design Map (设计地图)：涵盖颜色、排版、间距、圆角、阴影等完整的 Tokens 集合。
  • Taste DNA (品味基因)：包含 4 条设计原则，每条原则都详细解释了触发点、决策方案、设计理由、数据证据以及最终的权衡取舍。

2. 四阶段 AI 处理流水线 (Pipeline)

taste 通过四个各司其职的 AI 智能体，层层递进地解析目标页面：

  • 01 提取测量值 (Extract Measurements)：由资深设计 AI 负责，提取精确、客观的网页设计测量数据。
  • 02 检测模式 (Detect Patterns)：由首席设计工程师负责，从测量数据中识别系统性的设计规则。
  • 03 推断品味 (Infer Taste)：作为顶级设计评论家，推断出设计师在过程中做出的深思熟虑的权衡（Trade-offs）。
  • 04 观察者过滤 (Observer)：由首席评论家和最终编辑把关，无情地过滤掉所有废话（Zero bullshit），确保输出结果的纯净与高质量。

3. 精确到像素的逆向工程

taste 能够分析 20 个测量类别，确保没有任何近似值。其分析范围包括：

  • 颜色系统：包括页面背景（如 #08090A）、表面色（Surface）、主次文本色及面板边框（1px 嵌入环）。
  • 字体排版：详细到 H1、H2、H3 及 Body 的具体像素（px）、字重（Weight）、跟踪间距（Tracking）及行高。
  • 间距与深度：定义 8px 基础间距单位、各组件的内边距，以及通过投影和边框构建的深度感信号。

4. 广泛的 AI 工具兼容性

taste 生成的设计规范文件可以直接被主流 AI 开发工具读取，无需复杂的设置或粘贴操作：

  • Cursor: 生成 .cursor/rules/{domain}-taste.mdc
  • Windsurf: 生成 .windsurf/rules/{domain}-taste.md
  • Claude Code: 自动在 CLAUDE.md 中追加设计品味章节
  • GitHub Copilot: 写入 .github/copilot-instructions.md
  • 其他: 支持 v0、Bolt、Figma Make、Lovable 等工具。

taste 的应用场景 (Use Case)

为 AI 智能体注入设计灵魂

当开发者使用 AI 编程工具构建 UI 时，AI 往往缺乏对特定设计风格的理解。通过运行 taste，AI 可以获取目标网站（如 Linear 或 Stripe）的设计逻辑，从而在生成代码时完美还原那种“高端感”。

学习顶级设计系统

设计师可以使用 taste 来拆解成熟产品的设计系统。通过查看 Taste DNA，你可以了解到顶级设计师为了实现某种视觉目标而放弃了什么（例如为了简洁感而牺牲了某些信息密度）。

快速构建设计上下文

在进行新项目开发时，通过对参考网站运行 /taste 指令，可以瞬间获得包含颜色、字号、间距规范的系统性规则，为后续开发建立稳固的基础。

如何使用 taste (How to Use)

只需简单三个步骤，即可在您的开发环境中使用 taste 提取网页设计品味：

  1. 克隆技能仓库： 将工具克隆到您的 Claude 技能目录中： git clone https://github.com/senlindesign/taste-skill ~/.claude/skills/taste

  2. 安装 Playwright MCP： 安装运行所需的 Chromium 内核（约 100MB）： claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated

  3. 运行指令： 重启 Claude Code，然后对任何感兴趣的 URL 运行提取命令： /taste https://linear.app

常见问题 (FAQ)

Q: taste 提取的“设计品味”具体包含哪些内容？ A: 包含两部分。Part 1: Design Map 提供颜色、排版、间距等所有 Token。Part 2: Taste DNA 提供 4 条核心原则，每条原则涵盖触发点（Trigger）、决策（Decision）、理由（Reason）、证据（Evidence）及权衡（Trade-off）。

Q: 为什么 taste 需要推断“权衡（Trade-offs）”？ A: 因为任何设计决策都有两面性。品味不仅在于选择了什么，更在于为了这个选择而有意放弃了什么。taste 要求在分析中至少包含一条“克制（Restraint）”原则，这是理解设计灵魂的关键。

Q: taste 支持哪些字体和颜色的提取？ A: 它支持所有网页端可见的 CSS 属性，包括 Variable 字体（如 Inter Variable）、精确的十六进制色值（Hex）、RGBA 值、以及复杂的边框阴影（Shadow）和比例关系。

Q: 该项目是谁开发的？ A: taste 是由 Sen Lin 开发的一个侧边项目，旨在探索 AI 如何更好地理解人类的设计品味。

注意：本工具生成的输出包含详细的 .md 和 .json 文件，可直接作为 AI Agent 的指令输入，实现“拿来即用”的设计语境导入。