AI导哈

设计令牌提取工具

UX Interpreter是一款基于Playwright MCP和Claude视觉能力的工具，用于从网站中提取设计令牌并生成多种格式的输出。

  • by agenisea
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 agenisea/ux-interpreter-cc-plugins

使用说明

用户体验口译员

使用Playwright MCP视觉工作流程从任何网站提取设计令牌。

像人类一样导航。像设计师一样看。输出构建就绪令牌。

问题

从现有网站复制设计系统需要手动检查元素、猜测类型比例和逆向工程间距系统。这很乏味，不精确，而且错过了 为什么 设计决策背后。

解决方案

UX解释器使用Playwright MCP像人类一样浏览网站，在关键时刻捕捉屏幕截图，并通过Claude的视觉能力解释视觉设计。它输出具有置信度得分和决策痕迹的定量设计蓝图，而不是虚假的精度。

  • 3遍捕获协议 --结构、组件和交互
  • 有信心的令牌范围 --诚实地看待愿景可以决定什么
  • 内容语义 --网站类型、语音/语调、视觉语言对齐
  • 策略推理 --为什么设计有效，而不仅仅是它们包含什么
  • 多种导出格式 --JSON、CSS变量、顺风、Figma令牌

快速开始

# Add the marketplace
/plugin marketplace add agenisea/ux-interpreter-cc-plugins

# Install the plugin
/plugin install ux-interpreter@ux-interpreter-marketplace

先决条件：剧作家MCP

UX解释器需要Playwright MCP来实现浏览器自动化：

# Add globally (recommended)
claude mcp add --scope user playwright npx '@playwright/mcp@latest'

验证安装：

/mcp
# Should show "playwright" in the list

成本

什么是免费的

组件 成本 注释
剧作家 免费 开源，Apache 2.0许可证
剧作家MCP 免费 开源集成
UX解释器插件 免费 MIT许可证

什么要花钱

组件 成本 注释
Claude API代币 基于使用情况 发送给Claude Vision的截图

UX解释器是令牌密集型的 因为它：

  1. 捕获多个屏幕截图（3遍协议=每个站点5-10+个屏幕截图）
  2. 将图像发送到Claude Vision（每张截图≈1000-2000+个令牌）
  3. 对每个屏幕截图进行详细分析

预计代币消耗量

分析类型 截图 估计令牌
单站点（基础） 5-8 10000-20000
单个站点（彻底） 10-15 20000-40000
有竞争力（3个站点） 20-30 50000-100000
有竞争力（5个站点） 35-50 80000-150000

成本优化技巧

  1. 焦点提取 --仅请求特定令牌

    • "Extract only typography from example.com" （更少的截图）

  2. 跳过交互过程 --用于简单分析

    • "Analyze example.com structure and colors, skip hover states"

  3. 单个视口 --如果不需要，跳过响应分析

    • "Analyze example.com at desktop only"

命令

命令 描述
/ux-interpreter 从网站URL中提取设计标记

技能（自动触发）

技能由Claude根据触发短语自动调用：

技能 触发短语 目的
ux口译员 “ux解释器”、“从[url]中提取设计令牌”、“分析[url]]的设计系统”、“来自[url]1的设计令牌”，“竞争设计分析” 设计令牌提取

用法示例

单站点分析

/ux-interpreter

Analyze https://stellar-tasks.app for design tokens

输出：

  • 排版比例和字体
  • 带有角色的调色板
  • 间距系统
  • 布局网格
  • 战略分析
  • 决策痕迹

竞品分析

/ux-interpreter

Compare design systems: glorious-payments.com, nimbus-deploy.io, clarity-docs.so

输出：

  • 图案重叠矩阵
  • 复合代币（共识）
  • 分歧分析
  • 差异化机会

特定提取

> Extract only the typography system from codeforge.dev

> What spacing scale does windstyle-ui.dev use?

> Analyze the color palette of pixelcraft.design

导出格式

> Analyze glorious-payments.com and export as CSS variables

> Extract tokens from stellar-tasks.app in Figma format

> Generate Tailwind config from nimbus-deploy.io design system

输出格式

格式 用例
JSON 带有元数据的完整蓝图
CSS变量 即用型自定义属性
顺风 theme.extend配置
Figma代币 导入到Figma
标记语言 人类可读报告

运作原理

3遍捕获协议

传递 聚焦 捕捉到什么
1.结构 页面架构 整页@1440px，部分边界
2.组件 UI元素 每个部分的组件、状态
3.互动 动态行为 悬停状态，响应式（768像素，375像素）

决策痕迹

每个提取的令牌都包含证据：

{
  "observed": "H1 appears ~3x body size, H2 ~2.25x body",
  "measured": "Ratios: 1.33, 2.25, 3.0 between levels",
  "inferred": "Clustering around 1.25 multiplier",
  "blueprint_rule": { "scale_ratio": 1.25, "confidence": 0.82 }
}

准确性和局限性

UX解释器使用 克劳德作品4.5 视觉能力来解释设计系统。我们根据实际源代码验证了输出，以建立预期的准确性：

类别 准确性 注释
颜色（结构） 85-90% 十六进制值±10-15%
排版（比例尺） 80-85% 等级和比率
字体家族 ~60% 通过分类方法改进
间距 75-80% 值在一定范围内
组件 80%-85% 模式，不是精确的CSS
内容策略 90-95% 最高精度
总体 ~78%

这意味着什么

  • 高度自信：调色板、排版比例、组件模式、内容策略
  • 信心较低：精确的字体名称、精确的十六进制值、像素测量值
  • 缓解：我们输出具有置信度分数的范围，而不是假精度

哲学

人本诠释

  • 超出假精度范围 --诚实地看待愿景可以和不能决定什么
  • 像素之上的系统 --提取底层逻辑，而不仅仅是测量
  • 战略高于规格 --解释 为什么 设计工作，不仅仅是 什么 它们包含
  • 证据凌驾于假设之上 --每个标记都可以追溯到视觉证据

UX解释器是什么

  • 视觉语言解释器 --查看截图，而不是HTML
  • 量化分析师 --具有置信度得分的输出范围
  • 策略推断器 --解释设计为什么有效

UX解释器不是什么

  • Web剪贴器 --我们不解析HTML/CSS
  • 设计审核员 --我们不评分或批评
  • 品牌复印机 --我们提取系统，而不是身份

伦理

  • 提取 系统，而不是品牌
  • 输出 范围 有信心分数
  • 尊重 robots.txt
  • 不 表单提交或绕过身份验证
  • 屏幕截图是 临时的

安全与信任模型

  • 无外部依赖关系 --所有功能都是自包含的
  • 无数据收集 --您的提示和输出保持在本地
  • 无网络呼叫 -除了Playwright（浏览器）和Claude API
  • 开源 --完全透明，自己审核代码

需求

  • 克劳德代码1.0或更高版本
  • 剧作家MCP服务器

许可证

MIT许可证——见 许可证 了解详情。

链接

建造于 Agenisea™ 🪼

相关 MCP