ux-compare

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UX Compare

UX 对比

Read N pattern libraries produced by

ux-extract

and synthesise a comparison. Answers questions like:

"Across claude.ai, Linear, Notion, Vercel, and Superhuman — how are empty states handled?"
"Which apps use keyboard shortcuts, and what's the shared vocabulary?"
"When we build our billing page, should we follow convention or deliberately break it?"

A single extract is a reference point. Multiple extracts are a design library. A comparison is a decision aid — it turns the library into "here's what to do and why".

读取由

ux-extract

生成的N个模式库并合成对比结果。可解答如下问题：

"在claude.ai、Linear、Notion、Vercel和Superhuman中，空状态是如何处理的？"
"哪些应用使用键盘快捷键，共享的操作词汇有哪些？"
"当我们构建账单页面时，应该遵循惯例还是刻意打破常规？"

单个提取结果是一个参考点。多个提取结果构成一个设计库。而对比分析是一种决策辅助工具——它将设计库转化为「该做什么以及为什么这么做」的指导。

When to use

使用场景

Before a build — comparing 3–5 references for the feature class you're about to build reveals the convention and the tradeoffs
During a design review — "this pattern isn't in any of the 5 references we've extracted — is that deliberate?"
For team alignment — shared reference for a design decision
To produce a design brief — convergent patterns become the baseline; divergent patterns become the discussion

构建前——对比3-5款同类型功能的参考应用，可揭示行业惯例与权衡取舍
设计评审期间——「我们提取的5款参考应用中都没有这个模式——这是刻意设计的吗？」
团队对齐——为设计决策提供共享参考依据
生成设计 brief——趋同模式成为基准，差异模式成为讨论议题

Inputs

输入项

Available libraries

可用的模式库

First, discover what's available. Pattern libraries live at:

docs/ux-extracts/<app-name>/pattern-library.md

.jez/artifacts/ux-extracts/<app-name>/pattern-library.md

~/Documents/.jez/artifacts/ux-extracts/<app-name>/pattern-library.md

List everything you find. Show the user the inventory with the extraction date for each so they can spot stale ones:

Available pattern libraries:
- claude.ai      (extracted 2026-03-12)
- linear.app     (extracted 2026-02-28)
- notion.so      (extracted 2026-01-15) ← 3 months old
- superhuman     (extracted 2026-03-20)

If only one library exists, stop and suggest running

ux-extract

on more apps first. A one-library "comparison" is just the library.

首先，了解可用的资源。模式库存储在以下路径：

docs/ux-extracts/<app-name>/pattern-library.md

.jez/artifacts/ux-extracts/<app-name>/pattern-library.md

~/Documents/.jez/artifacts/ux-extracts/<app-name>/pattern-library.md

列出所有找到的内容。向用户展示清单及每个库的提取日期，以便识别过时的库：

Available pattern libraries:
- claude.ai      (extracted 2026-03-12)
- linear.app     (extracted 2026-02-28)
- notion.so      (extracted 2026-01-15) ← 3 months old
- superhuman     (extracted 2026-03-20)

如果仅存在一个模式库，请停止操作并建议先对更多应用运行

ux-extract

。单个库的「对比分析」其实就是该库本身。

Scope / focus

范围/关注点

Ask the user what to compare — or infer from their request:

Whole library — compare every category across every library (verbose but comprehensive)
One category — just empty states, just keyboard, just modals (tighter, more useful for specific decisions)
A feature area — "how do these apps handle settings", crosses multiple categories but stays focused
A specific question — "which apps support offline?" — searches Notable Absences sections too

Narrower scope produces sharper recommendations. Default to asking: "What feature or pattern do you want to compare?"

询问用户要对比的内容——或从用户的请求中推断：

全库对比——对比所有库中的每个类别（内容详尽但冗长）
单一类别——仅对比空状态、仅对比键盘操作、仅对比模态框（更聚焦，对特定决策更有用）
功能领域——「这些应用如何处理设置」，跨多个类别但保持聚焦
特定问题——「哪些应用支持离线？」——同时搜索「显著缺失」部分

范围越窄，生成的建议越精准。默认询问："你想要对比哪些功能或模式？"

Libraries to include

要包含的模式库

By default, include every library the user mentions or all of them if they don't specify. Let them exclude: "all except notion — their library is too stale".

默认包含用户提及的所有库；如果用户未指定，则包含全部。允许用户排除部分库："除了Notion之外的所有库——它的模式库太旧了"。

Comparison Process

对比流程

1. Read every library

1. 读取所有模式库

For each library in scope, read the full

pattern-library.md

. Note:

Extraction date
Scope of the extract (whole app vs partial)
Any Notable Absences section — often the most interesting data for comparison

对于范围内的每个模式库，完整读取

pattern-library.md

。记录：

提取日期
提取范围（整个应用 vs 部分应用）
任何显著缺失部分——这通常是对比中最有价值的数据

2. Walk category by category

2. 按类别逐一梳理

For the scope requested, walk each pattern category that appears in any library. For each category:

List what each app does — one bullet per app, concrete and verbatim where possible
Identify convergence — what's the same across most or all? This is the low-risk default.
Identify divergence — where do they genuinely differ? This is a design decision.
Flag unique approaches — only one app does X. Either innovation or weirdness; call it out either way.
Flag coverage gaps — if an app's library doesn't cover this category, say so (don't silently treat absent-from-library as absent-from-app).

针对请求的范围，梳理所有库中出现的每个模式类别。对于每个类别：

列出各应用的做法——每个应用一个项目符号，尽可能具体且保留原文表述
识别趋同点——大多数或所有应用的共同做法是什么？这是低风险的默认选择。
识别差异点——哪些地方存在真正的差异？这是需要做出的设计决策。
标记独特方案——只有一个应用采用X方案。无论是创新还是特殊设计，都要明确指出。
标记覆盖缺口——如果某个应用的模式库未覆盖该类别，需说明（不要将「库中缺失」默认为「应用中不存在」）。

3. Cross-reference absences

3. 交叉验证缺失内容

After walking categories, collect what's absent across the set. If 4 of 5 apps have no undo on destructive actions, that's a pattern. If 3 of 5 apps have no keyboard shortcut for new-record creation, that's a decision someone keeps making.

梳理完类别后，汇总所有应用中均缺失的内容。如果5款应用中有4款在破坏性操作中没有撤销功能，这就是一种模式。如果5款应用中有3款没有新建记录的键盘快捷键，这说明这是一个反复被做出的决策。

4. Synthesise recommendations

4. 合成建议

Close with opinionated guidance:

Safe default — the convergent pattern. Following it means users feel at home.
Deliberate choices — the divergent patterns, with the tradeoff of each so the user can pick.
Avoid — unique-to-one patterns unless there's a clear reason why that one app does it differently.
Gaps worth filling — absences that are surprising, or that your users would benefit from seeing addressed.

The recommendations section is the reason to run the comparison. Without it, the doc is a pile of bullets. With it, it's a decision.

最后给出主观性指导：

安全默认方案——趋同模式。遵循该模式会让用户感到熟悉。
可选方案——差异模式，说明每种方案的权衡，供用户选择。
避免方案——单一应用的独特模式，除非有明确理由说明该应用为何采用不同做法。
值得填补的缺口——令人意外的缺失，或能为你的用户带来价值的缺失功能。

建议部分是运行对比分析的核心意义所在。没有建议，文档只是一堆项目符号；有了建议，它就成为决策依据。

Output

输出

Write to

docs/ux-comparisons/<topic>-YYYY-MM-DD.md

(or

.jez/artifacts/ux-comparisons/<topic>-YYYY-MM-DD.md

if that path exists).

Topic slug from the scope — e.g.

empty-states

keyboard-shortcuts

onboarding

destructive-actions

See references/comparison-template.md for the full output shape.

Short version:

undefined

写入

docs/ux-comparisons/<topic>-YYYY-MM-DD.md

（如果该路径不存在，则写入

.jez/artifacts/ux-comparisons/<topic>-YYYY-MM-DD.md

）。

主题标识来自对比范围——例如

empty-states

、

keyboard-shortcuts

、

onboarding

、

destructive-actions

。

完整输出格式请参考references/comparison-template.md。

简化版示例：

undefined

UX Comparison: Empty States

Compared: claude.ai, linear.app, notion.so, superhuman Date: 2026-04-19 Scope: How these apps handle empty states across list views, onboarding, and zero-data dashboards.

At a glance

[2-3 sentences: what converges, what diverges, what's missing across the set]

Pattern-by-pattern

Empty list state

claude.ai: illustration + headline + description + primary CTA + 3 shortcut hints
linear: headline only, small text, no CTA
notion: template picker (unique — offers 12 templates)
superhuman: empty state not reached in extract (all-data demo account)

Convergence: most show some form of guidance; none are fully blank. Divergence: claude.ai guides toward keyboard workflow; notion guides toward templates. Unique: notion's template-first empty state. Coverage gap: superhuman not assessed.

claude.ai: illustration + headline + description + primary CTA + 3 shortcut hints
linear: headline only, small text, no CTA
notion: template picker (unique — offers 12 templates)
superhuman: empty state not reached in extract (all-data demo account)

Empty search results

[...]

Recommendations

Safe default: illustration + one-line description + primary CTA. All convergent apps do this.
Consider: shortcut hints (like claude.ai) if your power-user persona is strong. Tradeoff: adds visual noise that doesn't help first-time users.
Skip: notion's template picker unless you have a templates feature.
Fill a gap: none of the 4 apps explain why the list is empty. A one-liner ("No clients yet — add your first to get started") is convergent practice and worth preserving.

Safe default: illustration + one-line description + primary CTA. All convergent apps do this.
Consider: shortcut hints (like claude.ai) if your power-user persona is strong. Tradeoff: adds visual noise that doesn't help first-time users.
Skip: notion's template picker unless you have a templates feature.
Fill a gap: none of the 4 apps explain why the list is empty. A one-liner ("No clients yet — add your first to get started") is convergent practice and worth preserving.

Source libraries

claude.ai — 2026-03-12
linear.app — 2026-02-28
notion.so — 2026-01-15 (stale, re-extract recommended)
superhuman — 2026-03-20

undefined

claude.ai — 2026-03-12
linear.app — 2026-02-28
notion.so — 2026-01-15 (stale, re-extract recommended)
superhuman — 2026-03-20

undefined

Autonomy

自主操作规则

Just do it: Discover available libraries, read them, write the comparison document, cite specific screenshots or copy from the source libraries
Ask first: If the user didn't specify scope — one focused question is cheaper than a sprawling comparison
Stop and confirm: If fewer than 2 usable libraries exist — comparing is impossible with 1 library, suggest
```
ux-extract
```
first

直接执行：发现可用的模式库，读取它们，撰写对比文档，引用源库中的特定截图或文案
先询问：如果用户未指定范围——聚焦一个具体问题比宽泛的对比更高效
停止并确认：如果可用库少于2个——单个库无法进行对比，建议先运行
```
ux-extract
```

Reference files

参考文件

When	Read
Writing the comparison document	references/comparison-template.md

场景	参考文件
撰写对比文档时	references/comparison-template.md

Tips

提示

Don't re-list everything from every library. The comparison is value-add synthesis. If you're just copying bullets from 5 libraries, you're not comparing.
Convergence is usually the safest choice, but not always the most interesting one. Call out where convergence might be copy-paste rather than good design.
Cite screenshots from the source libraries — don't copy them. "See claude.ai pattern library § Empty States, screenshot 502" keeps extracts as the single source of truth.
Stale libraries are still useful — just note the date. A 12-month-old library is a snapshot of that moment, not nothing.
Recommendations must be opinionated. "It depends" is the weakest possible output. State a position. The user can disagree.
Comparisons age too. Re-run when underlying extracts get refreshed, or when a new reference enters the set.

不要重复列出所有库的内容。对比分析是增值的合成工作。如果只是复制5个库的项目符号，那就不是对比。
趋同通常是最安全的选择，但并非总是最有趣的选择。要指出趋同可能是盲目复制而非优秀设计的情况。
引用源库中的截图——不要复制。例如「参见claude.ai模式库§空状态，截图502」，确保提取结果作为唯一的事实来源。
过时的库仍然有用——只需标注日期。12个月前的库是那个时刻的快照，并非毫无价值。
建议必须带有主观性。*「视情况而定」*是最弱的输出。要表明立场，用户可以提出异议。
对比分析也会过时。当源提取结果更新或新增参考应用时，重新运行对比分析。

Future: more than 5 apps

未来规划：超过5款应用的对比

Comparisons scale non-linearly. 3 apps is comfortable; 5 is the upper bound of readability; 10 becomes a matrix that's impossible to synthesise in prose. If comparing more than 5 libraries, bucket them:

Tier 1 (closest to your app) — detailed bullets
Tier 2 (reference-class) — summary bullets
Tier 3 (outliers, novel approaches) — mention by exception

Or do several narrower comparisons rather than one mega-comparison.

对比分析的复杂度呈非线性增长。3款应用的对比很轻松；5款是可读性的上限；10款会变成难以用文字合成的矩阵。如果对比超过5个库，可将它们分组：

第一梯队（与你的应用最相似）——详细项目符号
第二梯队（参考级别）——摘要项目符号
第三梯队（异类、创新方案）——仅作为例外提及

或者进行多个更窄范围的对比，而非一个大型对比。