开源CLI StyleProbe：为AI编程Agent提取网站设计系统

AI编程工具在还原参考网站时经常跑偏——颜色偏差、字体对不上、圆角和间距不一致，最终产出一种典型的“AI味”界面。一位开发者在Reddit上发布的开源CLI工具StyleProbe，试图从源头解决这个问题：给它一个网址，它把整站的设计系统结构化地提取出来，直接喂给Cursor、Claude Code这类AI Agent。

问题：AI Agent在“猜”设计

作者描述了自己的实际开发场景：使用Cursor和Claude Code做AI辅助开发时，想让Agent参照某个现成网站的风格来搭建界面，但Agent拿不到精确的设计参数，只能靠猜。结果是颜色略有偏差、排版不匹配、间距和边框圆角前后不一致。

这不是模型能力不足的问题，而是输入信息不完整的问题。视觉稿在浏览器里是渲染结果，AI Agent无法直接读取其中的设计决策（色彩体系、层级关系、组件规范）。StyleProbe的思路是先把这些决策抽取成结构化数据，再交给Agent消费。

Design Token 是设计系统的原子单位，指代颜色、字体、间距、圆角、阴影等可复用的设计决策变量。与直接写死色值（如 #3B82F6）不同，design token 通常带有语义化命名，例如 color-primary、spacing-md、radius-lg。这种抽象层的价值在于：当主题切换或品牌更新时，只需修改 token 映射而无需逐处替换硬编码值；对 AI Agent 而言，拿到语义化 token 意味着它能理解“这是主按钮背景色”而非仅仅“这是一个蓝色”，从而在生成代码时正确地将色值分配到对应的组件角色上。StyleProbe 强调提取语义化 token，正是为了解决 Agent 拿到一堆孤立色值却无法判断用途的根本问题。

StyleProbe能提取什么

据作者介绍，这个工具的核心能力包括几个层面：

• 颜色与语义化设计Token：不只是抓取色值，还提取语义层面的design token，这决定了生成代码时能否正确区分主色、背景色、状态色等角色。
• 排版、间距、阴影与组件样式分析：覆盖构成视觉一致性的几类关键参数，正是AI Agent最容易猜错的维度。
• 多页面爬取：不局限于首页，而是爬取多个页面，避免只拿到单一入口的设计特征而遗漏站内其他模式。
• SVG Logo与品牌资产提取：把品牌视觉资产一并抓出，减少后续手工补素材的环节。

导出格式直接对接主流工作流

工具的出口设计得比较务实，支持导出到Tailwind、shadcn/ui、Figma tokens，以及面向AI Agent的指令文件。

这个设计值得注意：Tailwind和shadcn/ui是当前前端AI生成代码时最常见的落点，Figma tokens对接设计侧协作，而AI-agent instruction files则直接服务于Cursor、Claude Code这类工具的上下文注入。换句话说，它没有试图做一个独立的可视化工具，而是把自己定位成AI辅助开发流水线中的一段预处理环节。

AI Agent 指令文件（如 .cursorrules、CLAUDE.md 或 .github/copilot-instructions.md）是放在项目仓库中、被 AI 编程工具自动读取的上下文配置文件。它们用自然语言或结构化格式描述项目约定、技术栈、代码风格和设计规范，Agent 在生成代码时会优先遵循这些指令。StyleProbe 将提取结果导出为这类文件，相当于把设计系统“翻译”成 Agent 的原生语言，使其在后续每次代码生成时都能持续参考，而无需开发者反复在对话中粘贴设计参数。这种做法的关键在于把一次性提取转化为持久化的上下文资产。

Tailwind CSS 是原子化 CSS 框架，通过工具类（如 bg-blue-500、p-4、rounded-lg）直接在标记中表达样式，其配置文件 tailwind.config.js 本质上就是一套 design token 映射表。shadcn/ui 则是基于 Radix UI 和 Tailwind 的组件集合，组件代码直接复制进项目、可自由修改，其主题同样由 CSS 变量驱动。两者共同构成了当前 AI 生成前端代码时最常见的落点：Agent 产出的代码若符合 Tailwind 类名体系和 shadcn/ui 的组件约定，就能直接落入现有工程而无须二次适配。StyleProbe 支持导出到这两个目标，意味着提取结果可以无缝转化为可运行的样式代码。

背后的产品判断

作者在帖子里没有过度包装，而是直接向开发者社群提了三个问题：这类工具能否嵌入你的AI辅助开发流程？还希望它提取哪些设计信息？什么因素会让你真正长期使用它？

这三个问题本身透露出一个现实：设计系统提取工具的价值不取决于提取能力有多全，而取决于提取结果能否无缝进入现有工作流。对AI编程场景来说，输出格式的适配度可能比抓取覆盖率更关键。

对于经常需要“照着某个网站做一个类似的”的开发者，StyleProbe提供了一条比手工抄色值、量间距更高效的路子；而对于关注AI编程落地细节的人来说，它也是一个观察样本——当模型能力趋于同质化，喂给模型的上下文质量正在成为产出质量的分水岭。

项目以MIT协议开源，可在GitHub获取，作者同时提供了网页版playground供直接试用。