用户体验口译员
使用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解释器是令牌密集型的 因为它：
- 捕获多个屏幕截图（3遍协议=每个站点5-10+个屏幕截图）
- 将图像发送到Claude Vision（每张截图≈1000-2000+个令牌）
- 对每个屏幕截图进行详细分析
预计代币消耗量
| 分析类型 | 截图 | 估计令牌 |
|---|---|---|
| 单站点（基础） | 5-8 | 10000-20000 |
| 单个站点（彻底） | 10-15 | 20000-40000 |
| 有竞争力（3个站点） | 20-30 | 50000-100000 |
| 有竞争力（5个站点） | 35-50 | 80000-150000 |
成本优化技巧
- 焦点提取 --仅请求特定令牌
- "Extract only typography from example.com" （更少的截图）
- 跳过交互过程 --用于简单分析
- "Analyze example.com structure and colors, skip hover states"
- 单个视口 --如果不需要，跳过响应分析
- "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™ 🪼