Birkenpapier/ai-app-cloner

## 为什么用截图 网站会直接提供源码。打开开发者工具，DOM、CSS、字体 和资源 URL 都摆在眼前。但手机应用不会给你任何这些东西。 没有可供阅读的标记语言，也没有可供复制的样式表，有的只是屏幕上的像素。 所以输入用截图，因为这是你无需越狱、反编译或安装任何软件， 就能从任何应用中捕获的唯一内容。无论应用是运行在 iOS 还是 Android 上， 同一文件夹的 PNG 截图都适用。 困难的部分在于图像本身不包含具体的数值。你无法直接从截图中读出“16px padding”。 这就是为什么该工具的核心是一个 diff loop（差异循环）：它构建一个页面， 将其渲染出来，对自己的输出进行截图，将其与你的截图进行比对，并修正差异。 它不断重复，直到两者匹配为止。这个循环完成了在网页端本可以由 DOM 直接提供给你的测量工作。 ## 快速开始 ``` git clone https://github.com/Birkenpapier/ai-app-cloner cd ai-app-cloner npm install npx playwright install chromium # one-time, used by npm run verify npm run web # the blank template should boot in a browser tab git checkout -b my-clone # the clone builds into this repo, so keep main pristine ``` 然后，在你的编程代理中（Claude Code 是参考设置）： 1. 连接一个浏览器自动化 MCP（Chrome、Playwright 或 Puppeteer）。没有它，diff loop（差异循环） 就无法运行，因为这是代理在构建克隆时对克隆版进行截图的方式。 2. 将截图放入 `docs/screenshots/` 中。请参阅 [`docs/screenshots/README.md`](docs/screenshots/README.md) 了解需要捕获哪些内容 以及如何命名文件，以便代理能够区分不同的页面。 3. 运行 `/clone-app`。 想先看看成品效果？每个 `demo/*` 分支都包含一个完整的克隆： `git checkout demo/todoist`（或 `demo/keep`、`demo/spendee`）。 ## 适用的代理 `/clone-app` 技能由唯一的真实源（用于命令的 `.claude/skills/clone-app/SKILL.md`，用于 项目规则的 `AGENTS.md`）为所有主要的 AI 编程代理生成。编辑源文件后，运行 `node scripts/sync-skills.mjs` 和 `bash scripts/sync-agent-rules.sh` 重新生成针对各代理的文件。 | 代理 | 运行方式 | | --- | --- | | Claude Code | `/clone-app`（参考实现） | | Codex CLI | `/clone-app` | | Cursor | `/clone-app` 命令 | | Windsurf | `/clone-app` 工作流 | | Gemini CLI | `/clone-app` | | GitHub Copilot | `.github/` skill + instructions | | Cline | 读取 `.clinerules` | | Roo Code | 读取 `AGENTS.md` | | Continue | `/clone-app` 命令 | | OpenCode | `/clone-app` | | Amazon Q | `clone-app` 代理 | | Augment Code | `/clone-app` 命令 | | Aider | 读取 `AGENTS.md` | 目前只有 Claude Code 经过端到端验证。其余的均使用各个代理官方文档记载的 配置格式，并从相同的源生成。欢迎反馈其他代理的使用情况。 ## 输出文件的位置 你克隆的仓库是一个空白的 Expo 应用。运行 `/clone-app` 会填充它： - 页面文件放入 `src/app/`（Expo Router） - 组件放入 `src/components/` - design token 放入 `tailwind.config.js` 和 `src/lib/tokens.ts` - 代理的分析结果（屏幕映射、导航图、单页规范）放入 `docs/research/` 所以输出*就是*这个项目，现在承载着你的克隆版。没有单独的导出 步骤。如果你想在运行任何东西之前先看看成品，每个 `demo/*` 分支都包含一个完整的克隆。 ## 工作原理 ``` screenshots/ ──▶ cluster into ──▶ infer navigation ──▶ app-spec.json (app states) screens & states graph (tabs/stack) (the IR) │ ┌─────────────────────────────────────────────────────────┘ ▼ foundation per-screen spec visual-diff loop assembled (tokens, nav) ▶ + builder agents ▶ render→shot→diff→fix ▶ Expo app (parallel, worktrees) (until it matches) ``` 整个引擎就是一份用自然语言（英语）编写的文件： [`.claude/skills/clone-app/SKILL.md`](.claude/skills/clone-app/SKILL.md)。 在执行中途，它会写入 `app-spec.json`，这是一份对应用（token、 导航、屏幕、状态）的描述，其中完全未提及 React Native。这是有意为之的。 RN 生成器今天会读取它；路线图中的原生目标平台将读取 同一个文件。其结构记录在 [`docs/research/app-spec.schema.json`](docs/research/app-spec.schema.json) 中，并提供了一个 完整的[示例](docs/research/app-spec.example.json)。 ## 演示 顶部的三个克隆版是根据真实应用的截图构建的，因此你可以 根据已知的应用来评判输出效果： | 克隆 | 原版 | 展示特性 | | --- | --- | --- | | Todoist | [Todoist](https://todoist.com) | tab navigation、任务列表、将数据保存到设备上的添加任务功能 | | Keep | [Google Keep](https://keep.google.com) | 笔记网格、笔记编辑器、标签 | | Spendee | [Spendee](https://www.spendee.com) | tab、记录支出并更新账户实时余额 | 它们仅用于展示工具能力，不可用于正式发布。请参阅[法律与道德](#legal-and-ethics)。 ## 两种模式 | 模式 | 输入 | 保真度 | 说明 | | --- | --- | --- | --- | | **Screenshots**（主要用途） | 一文件夹的 app-state 截图 | 通过 diff loop 实现视觉一致 | 适用于任何应用，iOS 或 Android，无需安装 | | **Web → RN**（附加功能） | web app URL | 基于 DOM 和真实资源的精确还原 | 用于将 web app 转换为 React Native | ## 技术栈 Expo SDK 56, Expo Router (file-based screens), React Native 0.85, NativeWind (Tailwind syntax), TypeScript strict. ## 路线图 每个阶段都读取同一个 `app-spec.json`，因此新目标只是一个新的代码生成器， 而不是一个新的 pipeline。 | 版本 | 输入 | 输出 | 状态 | | --- | --- | --- | --- | | **v1** | 应用截图 | Expo / React Native | ✅ 正在发布 | | **v1** | web app URL | Expo / React Native | ✅ 附加模式 | | **v2** | 应用截图 | 原生 SwiftUI 和 Jetpack Compose | 🔜 下一步 | | **v3** | 反编译的 APK | 原生代码，并恢复精确的数值 | 🧭 已规划 | ## 诚实的局限性 这是基于应用像素进行的逆向工程，README 不会 掩饰这一点： - **Screenshot 模式没有精确数值。** 间距和颜色是尽力还原的，并且 diff loop 负责弥补差距。Web 模式可以从 DOM 获取精确数值。 - **资源被固化在像素中。** Logo、应用图标和照片会被重建 （图标通过 lucide 重新创建）或作为光栅图裁剪，绝不会作为真实文件恢复。Web 模式 可以下载真实资源。 - **覆盖率取决于你的捕获范围。** 你没有截图的屏幕或状态 是无法克隆的。 - **无后端。** 数据是 mock 的或保存在设备上。每个 server call 都是一个类型化 stub， 标记为 `// TODO: wire backend`。 ## 法律与道德 克隆你拥有的应用、你获得许可克隆的应用，或者为了学习和 原型设计进行克隆。不要将他人应用的克隆版冒充为你自己的产品，并 尊重商标、应用商店规则和原应用条款。你对使用此工具 构建的任何内容自行负责。 该工具重现的是布局和行为，而非品牌资产。图标是被重新创建 而非复制的，并且它绝不会重新分发应用原始的图像或 logo 文件。 逐像素重现特定商业应用的外观仍然可能引发 版权、商业外观和设计专利问题，因此请负责任地进行克隆，并在发布具名产品的克隆版之前 寻求法律建议。 这里的演示仅供参考。本项目不隶属于、 不受认可或由展示的任何应用或公司赞助。所有产品名称、logo 和 商标均属于其各自的所有者。 ## 许可证 MIT，请参阅 [LICENSE](LICENSE)。由 [Birkenpapier](https://github.com/Birkenpapier) 制作。

标签：AI编程, Expo, React Native, UI克隆, 特征检测, 移动开发, 自动化代码生成, 自定义脚本