做了一个 AI 复刻 APP UI 的小程序，大家给点意见

[lzzyywz]

做了一个真实 App 截图资料库 + AI 复刻 Prompt 生成工具：Pixlore

最近自己做产品、写页面、用 AI 生成 UI 的过程中，经常被两个问题卡住。

1. 很多设计参考好看，但不一定适合真实产品

平时找 UI 参考，很多人都会去 Dribbble 、Pinterest 、Mobbin 之类的平台。

这些地方确实能找到很多很好看的 App 设计图，但我实际用下来发现一个问题：不少图更像是概念稿、练习稿或者展示稿。视觉上很完整，但真正落到产品页面里，经常会遇到一些问题：

• 页面信息密度和真实业务不匹配
• 按钮、卡片、列表尺寸不一定适合实际使用
• 缺少状态、边界情况、空数据、长文本等真实场景
• 单张图看起来很高级，但做成完整页面后不一定好用

所以我做 Pixlore 的第一个功能，是一个真实 App 截图资料库。

它不是收集概念设计稿，而是尽量整理真实 App 里的页面截图。你可以按关键词、应用、标签、色系、页面类型去找参考，例如：

• 蓝色渐变登录页
• 设置页
• 仪表盘
• 账户设置
• 按色系找界面
• 某类 App 的真实页面结构

如果只是找灵感，可以直接浏览截图；如果要整理资料，也可以下载原图、全量截图，或者打包成 ZIP 。

2. AI 复刻 UI 时，经常只差一点

这段时间我一直在用 ChatGPT 、Claude 、Stitch 、Codex 这类工具做 UI 生成和页面复刻。

它们确实很强，但如果只是把一张或几张截图丢给 AI ，然后期待它一次生成最终页面，结果通常不太稳定。常见问题包括：

• 间距判断不准
• 字体气质不对
• 信息层级被重排
• 卡片比例跑偏
• 把截图里最关键的设计语言忽略掉
• 每换一张截图，都要重新写一大段提示词

我现在比较常用的流程是：

1. 先找到一张真实 App 截图作为参考
2. 用 AI 先生成一个 HTML 原型
3. 在浏览器里快速看布局是否成立
4. 如果方向对，再把 HTML 原型和复刻 Prompt 一起交给 Claude Code / Codex
5. 最后在真实项目里继续调整和落地

这个流程比单纯把截图丢给 AI 更稳定。因为 HTML 原型至少提供了一个结构化中间结果，后续 AI 不需要完全靠“看图猜布局”。

刚好之前小程序认证还没到期，我就花了大概一个月，把这条自己每天会用的流程做成了 Pixlore 。

现在的使用方式大概是：

1. 打开小程序，搜索合适的真实 App 截图
2. 选择截图后生成复刻 Prompt
3. 复制 Prompt
4. 在 Mac 上粘贴到 Codex 、Claude Code 或其他 AI 工具里
5. 快速得到一个可继续调整的页面原型

对我自己来说，这个流程比之前方便不少。

Pixlore 不是“一键生成完整 App”

我不太想把它包装成“输入一句话，一键生成完整 App”的工具。

Pixlore 生成的 Prompt 不可能完美，也不能保证 100% 还原原图。它目前更像是一个中间层：

• 先帮你找到真实 App 的界面参考
• 再把截图里的设计语言、页面结构、组件层级和视觉细节拆出来
• 最后整理成 AI 更容易理解的 HTML 原型和复刻 Prompt

这样后续不管是交给 ChatGPT 、Claude 、Cursor 、Codex ，还是其他 AI 工具继续调整，至少不是从一段很空泛的提示词开始，而是有一个相对完整的参考框架。

为什么还要做这个？

可能有人会觉得，市面上已经有很多类似的 skill 、工作流、提示词模板，为什么还需要再做一个 Pixlore ？

这些工具我自己也用了不少。我的感受是，它们对熟悉 AI 工作流的人来说很好用，但对很多刚开始用 AI 复刻 UI 、做原型、写前端页面的人来说，学习成本仍然不低。

你需要知道：

• 怎么描述页面结构
• 怎么拆组件层级
• 怎么表达视觉风格
• 怎么约束 AI 不要随意重设计
• 怎么把截图转成一个可继续迭代的前端原型

Pixlore 想解决的不是“完全替你设计”，而是降低这一步的启动成本。

它提供的是一个更清晰、更稳定的起点：先有真实参考，再有结构化 Prompt ，最后再进入具体的 AI 编码和人工调整阶段。

目前产品还比较早期，很多地方肯定不完善。如果你也经常用 AI 做 UI 、写页面、复刻 App 截图，欢迎试试看，也希望能收到一些真实反馈。

微信小程序搜：pixlore 设计素材库 目前登录用户赠送 3 天体验会员和 5 个 credits