mcpField
R
replica-recon

replica-recon

github.com/jakeschincariol设计与 UI6.3k756 次安装4 周前更新
代码仓库

关于 replica-recon

replica-recon 是用于梳理应用界面、流程、组件、数据模型和功能的技能,为洁净室式复刻做准备。它指导使用公开来源和用户自己的账户进行调研,并明确禁止复制私有数据或实现细节。

主要功能

  1. 01确定应用、平台、范围和目标用户
  2. 02盘点界面与用户流程
  3. 03记录组件和推断的数据模型
  4. 04建立按优先级排列的功能矩阵
  5. 05标记不可复刻项并估算规模

适用场景

  1. 01规划应用核心流程的复刻调研
  2. 02对照参考界面检查复刻结果
  3. 03识别无法复刻的功能
  4. 04在开发前估算项目范围

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/jakeschincariol/replica-skill --skill replica-recon

安装后在 Claude Code 中输入/replica-recon确认已加载。

附带文件features.csvrecon-map.md

详细介绍

replica-recon

软件包中的其他所有内容都基于此技能写下的内容构建。调研地图做得不好,克隆效果就会很差,所以请在这里多花些时间。

输出保存在用户的项目中:

replica/recon.md        the recon map (template: recon-map.md in this folder)
replica/features.csv    the feature matrix (template: features.csv in this folder)
replica/screens/        reference screenshots of the original. Never shipped.

首先了解规则

此技能以干净室方式重建功能和 UX 模式。它会研究应用的功能,以及用户如何使用应用,但不会拿走应用拥有的任何内容。

  • **仅使用公开来源和用户自己的账户。**绝不登录不属于用户的账户,绝不索要密码,也绝不通过任何手段绕过付费墙或登录。
  • **阅读,而非抓取。**不使用爬虫、不批量下载、不循环抓取。如果浏览器工具连接的是用户自己的浏览器,请在用户陪同下以人工速度浏览页面。
  • **不读取源代码,不使用私有 API。**不要读取或保存应用的 JavaScript 包,不要反编译其二进制文件,也不要记录其网络调用来复制端点。可以阅读公开的 API 文档。
  • **检查条款。**有些产品的条款禁止用户使用自己的账户构建竞品。如果用户的账户受此类条款约束,请明确说明,并仅使用公开来源。
  • **截图仅供参考。**截图保存在 replica/screens/ 中,用于比较布局,绝不能放进克隆版。

第 1 步:确定范围

询问以下三点,或提出答案并获得用户确认:

  1. **要做哪个应用、哪个平台。**Web、iOS、Android、桌面端。
  2. 要做哪部分。“整个 Notion”不是一个项目。“Notion 的页面、区块和分享功能”才是。默认聚焦核心循环:用户付费使用的那一条流程。
  3. **目标用户是谁。**用户自己的业务、某个细分领域,还是要销售的产品。

第 2 步:列出来源

先创建来源表,每行都要包含 URL。按价值排序:

来源能提供什么
帮助中心/文档最完整的功能列表和设置说明
定价页面哪些功能很重要(它们会限制功能的使用)
更新日志最近新增了什么,以及团队认为哪些内容很重要
应用商店页面每个关键屏幕的截图、产品宣传语和评分
公开的演示视频真实流程的逐步演示
营销网站产品定位,以及他们描述的核心循环
用户自己的账户真实产品的所有状态,由用户操作
公开的 API 文档几乎不费力地了解数据模型

第 3 步:屏幕清单

每个屏幕占一行。ID 固定不变:S01、S02……其他所有文件都会引用这些 ID。

ID | screen | route or how you get there | purpose | key components | states seen

状态很重要:空状态、加载中、已填充、错误、权限被拒绝、移动端。没记录的空状态,就不会被构建出来。

第 4 步:用户流程

F01、F02……每条流程都包含一个目标,以及实现目标所经过的屏幕:

F01 Guest books a meeting
    S07 booking page -> S08 pick a time -> S09 details form -> S10 confirmed
    edge: no slots this week, time zone differs, slot taken while filling the form

统计顺畅流程中的点击次数。这个数字就是需要超越的目标。

第 5 步:组件

记录所有重复出现的 UI 部分:按钮、输入框、日期选择器、模态框、表格、提示消息、导航。注明名称、变体、状态以及使用这些组件的屏幕。这将成为 replica-design 的组件列表。

第 6 步:推断数据模型

记录实体、字段和关系,并为每项标注证据和置信度:

Booking  id, event_type_id, start_at, end_at, guest_name, guest_email,
         status (confirmed | cancelled | rescheduled), answers (json)
         evidence: S09 form fields, S10 confirmation, help article "Cancel a booking"
         confidence: high

将猜测明确标为猜测。replica-architect 会据此构建真实的架构。

第 7 步:功能矩阵

编写 replica/features.csv(列:feature、area、priority、original、clone、notes)。优先级分为 must/should/could。每行的 clone 初始值都设为 no,并在构建过程中填写。replica-diff 会为其评分。

第 8 步:无法克隆的内容

如实列出无法克隆的内容,将其标记为 skip 行并注明原因:授权内容(音乐目录、图库)、网络及其用户、应用拥有的数据、合作伙伴协议、硬件、受监管的牌照(银行、医疗)。 “克隆任何应用”指的是功能和流程,而不是应用拥有的内容。

步骤 9:估算规模

页面、流程、实体和难点(实时功能、同步、支付、日历或电子邮件集成、离线支持)。评估规模:S(一个周末)、M(几周)、L(一个季度)、XL(重新确定范围)。不承诺完美复刻。

输出

replica/recon.md 和 replica/features.csv,然后附上一份五行摘要:核心循环、页面和流程数量、三个最难的部分、不在范围内的内容,以及下一步:/replica-architect。

评论

支持 Markdown