competitor-scan

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Competitor Scan Skill

竞品扫描技能

Research how best-in-class products solve similar problems using Browser MCP for screenshots and WebSearch for teardowns.

使用Browser MCP截取截图，结合WebSearch拆解分析，研究顶尖产品如何解决类似问题。

When to Use

使用场景

At the start of DIVERGE Loop (L1)
When exploring new UI patterns
When benchmarking against industry standards

在DIVERGE Loop（L1）启动阶段
探索新UI模式时
对标行业标准时

Instructions

操作步骤

Phase 1: Identify Competitors

阶段1：识别竞品

Use the domain competitor table:

Domain	Products to Study
Workspaces/Collaboration	Notion, Linear, Slack, Figma, Attio
Data Tables	Airtable, Retool, Rows, Grist
AI Chat	ChatGPT, Claude, Gemini, Perplexity
Onboarding/Flows	Stripe, Plaid, Mercury, Ramp
Settings/Admin	Vercel, Railway, PlanetScale
Invitations/Team	Slack, Notion, Linear, Figma
Billing/Subscriptions	Stripe, Paddle, Chargebee

使用领域竞品表：

领域	研究产品
工作区/协作	Notion, Linear, Slack, Figma, Attio
数据表格	Airtable, Retool, Rows, Grist
AI聊天	ChatGPT, Claude, Gemini, Perplexity
引导流程/用户流	Stripe, Plaid, Mercury, Ramp
设置/管理	Vercel, Railway, PlanetScale
邀请/团队	Slack, Notion, Linear, Figma
计费/订阅	Stripe, Paddle, Chargebee

Phase 2: Screenshot Key Flows (Browser MCP)

阶段2：截图关键流程（Browser MCP）

For each relevant competitor:

1. browser_navigate to the product URL or relevant page
2. browser_snapshot to understand the page structure
3. browser_take_screenshot to capture the UI
4. browser_click / browser_type to navigate through flows

Capture:

Entry points (how users start the flow)
Key screens (main interactions)
Edge cases (empty states, errors)
Micro-interactions (hover states, transitions)

针对每个相关竞品：

1. browser_navigate 导航至产品URL或相关页面
2. browser_snapshot 了解页面结构
3. browser_take_screenshot 捕获UI界面
4. browser_click / browser_type 遍历流程

捕获内容：

入口点（用户如何启动流程）
关键界面（主要交互区域）
边缘情况（空状态、错误状态）
微交互（悬停状态、过渡效果）

Phase 3: Research Teardowns (WebSearch)

阶段3：研究拆解分析（WebSearch）

Search for existing analysis:

WebSearch "[Product] UI teardown [feature]"
WebSearch "[Product] UX case study [feature]"
WebSearch "[Feature] best practices design patterns"

搜索现有分析内容：

WebSearch "[产品] UI teardown [功能]"
WebSearch "[产品] UX case study [功能]"
WebSearch "[功能] best practices design patterns"

Phase 4: Extract Patterns

阶段4：提取模式

For each competitor, note:

Aspect	Pattern
Layout	How is content organized?
Navigation	How do users move between states?
Actions	How are primary/secondary actions presented?
Feedback	How is success/error communicated?
Copy	What language/tone is used?

针对每个竞品，记录：

维度	模式
布局	内容如何组织？
导航	用户如何在不同状态间切换？
操作	主要/次要操作如何呈现？
反馈	成功/错误信息如何传达？
文案	使用何种语言/语气？

Output Format

输出格式

After running this skill, output:

markdown

undefined

运行本技能后，输出：

markdown

undefined

Competitor Scan

竞品扫描

Products Analyzed

分析产品

[Product A] - [URL or feature]
[Product B] - [URL or feature]
[Product C] - [URL or feature]

[产品A] - [URL或功能]
[产品B] - [URL或功能]
[产品C] - [URL或功能]

Key Patterns Observed

观察到的关键模式

Pattern	Product	Description
[Pattern]	[Product]	[How they do it]

模式	产品	描述
[模式]	[产品]	[具体实现方式]

Insights for Our Design

对我们设计的启发

[Insight 1]: [How to apply]
[Insight 2]: [How to apply]

[启发1]：[应用方式]
[启发2]：[应用方式]

Screenshots Captured

捕获的截图

[Description of screenshot 1]
[Description of screenshot 2]

undefined

[截图1描述]
[截图2描述]

undefined

Invocation

调用方式

Invoke manually with "use competitor-scan skill" or follow Ask mode DIVERGE loop which references this skill's phases.

手动调用：输入“use competitor-scan skill”，或遵循引用本技能阶段的Ask模式DIVERGE loop。