Taste Lab

你肯定遇到过这种情况。刷到一个网站，配色舒服，字体高级，按钮的圆角、间距、阴影都恰到好处。你想把它用在自己的项目里，但不知道具体是什么颜色、什么字体、间距多少。于是你打开截图工具，截一张图，拖进 Figma，用取色器一个一个点，再打开 WhatFont 插件识别字体，再手动量一下 padding 和 margin。折腾十分钟，最后发现那个字体是付费的，或者那个颜色在不同屏幕下显示不一样。你放弃了，或者凑合着用了个差不多的，结果做出来总觉得哪里不对。

Taste Lab 就是来解决这个问题的。它叫“设计 DNA 提取器”，你给它一个网址，它把那个网站的设计系统拆出来——颜色、字体、字号、间距、圆角、阴影、渐变，甚至按钮和卡片的层级关系。你不用再截图、取色、猜字体。你输入一个 URL，它输出一套结构化的设计规范，可以直接用在你的项目里。

怎么用？你打开 Taste Lab，粘贴一个网址，比如你喜欢的某个 SaaS 产品的 landing page。系统开始扫描页面的 CSS 和渲染结果，识别出所有用到的颜色，按主色、辅色、中性色分类，提取出字体栈和字号层级，测量出组件之间的间距和圆角半径。输出是一份设计 token 清单，你可以导出成 JSON、CSS 变量、Figma 样式文件，或者直接复制颜色代码和字体声明。如果你用的是 Tailwind、Material UI 这类框架，它还能帮你映射成对应的配置。上下游接什么？你从浏览器里拿到一个设计灵感，Taste Lab 把它变成你设计工具或代码库里的实际参数。

你可以把它想象成一个 DNA 测序仪。你把一个生物样本放进去，它分析出基因序列，然后你拿着这个序列去合成新的生物。Taste Lab 做的就是这件事——把视觉风格拆解成可复制的“基因”，而不是让你用肉眼和取色器去猜。

跟同类工具比，差别很明显。市面上已经有像 ColorZilla、WhatFont 这样的浏览器插件，它们能帮你取色、识别字体，但每次只能取一个点、查一个元素。你要把整个页面的设计系统拼出来，得反复操作，而且没有结构化的输出。Figma 的“样式提取”插件也能从设计稿里抓颜色和文字样式，但前提是你得先有设计稿，或者至少截一张图。Taste Lab 走的是另一条路：直接从渲染好的网页里抓，而且是全量抓，不是点对点。这意味着你不需要设计师先导出设计稿，也不需要自己截图。你看到一个线上产品，就能拿到它的设计规范。这对那些做竞品分析、做灵感收集、或者想快速复刻某个风格的人来说，省的不是几分钟，是几小时。

当然，它也有边界。Taste Lab 提取的是静态的视觉属性，它抓不到动效、交互逻辑、响应式断点背后的设计意图。如果一个网站大量使用 JavaScript 动态生成样式，或者用了复杂的 CSS 变量嵌套，提取结果可能不完整。另外，它依赖网页的渲染结果，如果网站有登录墙、反爬机制，或者用了 Canvas/SVG 绘制图形，它可能只能拿到一部分信息。还有一个更实际的限制：你提取出来的设计 DNA 不一定能直接用在你的项目里，因为版权和品牌识别的问题。你可以学习它的配色比例和间距系统，但直接复制一个知名品牌的颜色和字体，可能会惹麻烦。

说个具体的场景。你是一个独立开发者，正在做一个新的工具类产品。你很喜欢 Linear 的界面风格——干净、克制、深色模式下的蓝色调。你打开 Linear 的官网，把网址贴进 Taste Lab。几秒钟后，你拿到了一组颜色：主色 #5E6AD2，辅色 #8B5CF6，背景色 #0F0F0F，字体 Inter，字号从 12px 到 32px 的层级，卡片圆角 8px，按钮内边距 12px 24px。你把这些直接导入你的 Tailwind 配置，然后开始写代码。一个小时后，你的新项目已经有了 Linear 的“味道”，但内容完全不同。你没有截图，没有取色，没有猜字体。你只是给了它一个网址，然后继续做你真正该做的事。