做了一个真实 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 ，然后期待它一次生成最终页面，结果通常不太稳定。常见问题包括：
- 间距判断不准
- 字体气质不对
- 信息层级被重排
- 卡片比例跑偏
- 把截图里最关键的设计语言忽略掉
- 每换一张截图，都要重新写一大段提示词
我现在比较常用的流程是：
- 先找到一张真实 App 截图作为参考
- 用 AI 先生成一个 HTML 原型
- 在浏览器里快速看布局是否成立
- 如果方向对，再把 HTML 原型和复刻 Prompt 一起交给 Claude Code / Codex
- 最后在真实项目里继续调整和落地
这个流程比单纯把截图丢给 AI 更稳定。因为 HTML 原型至少提供了一个结构化中间结果，后续 AI 不需要完全靠“看图猜布局”。
刚好之前小程序认证还没到期，我就花了大概一个月，把这条自己每天会用的流程做成了 Pixlore 。
现在的使用方式大概是：
- 打开小程序，搜索合适的真实 App 截图
- 选择截图后生成复刻 Prompt
- 复制 Prompt
- 在 Mac 上粘贴到 Codex 、Claude Code 或其他 AI 工具里
- 快速得到一个可继续调整的页面原型
对我自己来说，这个流程比之前方便不少。
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