惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

有赞技术团队
有赞技术团队
G
Google Developers Blog
T
Tailwind CSS Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
人人都是产品经理
人人都是产品经理
J
Java Code Geeks
P
Proofpoint News Feed
V
Visual Studio Blog
爱范儿
爱范儿
The Cloudflare Blog
博客园 - 叶小钗
V
V2EX
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
M
MIT News - Artificial intelligence
Microsoft Security Blog
Microsoft Security Blog
博客园 - 聂微东
H
Help Net Security
B
Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 【当耐特】
量子位
宝玉的分享
宝玉的分享
WordPress大学
WordPress大学
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知

分享创造

分享 KCase 脑图测试用例生成平台(AI 辅助生成测试用例) 标签页囤积症自救:写了个插件 TabRack,主打快速检索、自动分类和 AI 摘要 [file-preview]一个比较全面的在线文件预览组件库-支持 react 和 vue 撸了个 iOS 小应用[极简水印相机],直接免费 做了一个 V2EX Skill 写了个 iOS 打码 App「遮鸭 Maskduck」,纯离线免费 35 岁前端,裁员失业后,我花 1 个月做了个 AI 生图网站 亲身经历猫咪急症,我做了一款猫狗疼痛检测工具,希望能救你家毛孩一命 如何用 AI 做比较酷炫的落地页? 求真!最近 AI 生图的能力强到可怕 开源一个查看 k8s 的菜单栏工具-kubebar Packpour:我做了个专门给 App Store Connect 填多语言元数据的小工具 面对 140 年一遇的超级厄尔尼诺,我做了个全球监测小站 做了一个自动翻译的 Hacker News 客户端 做了一个 AI 头像生成器,可以免费生成 2 次 [送码 50 个] 自己手搓了个高颜值的倒数日 App——拾光机,求 V 友们指点 一个将苹果健康 APP 数据导出的工具,然后把你的数据喂给 AI 分析 我做了一个叫「订阅斩」的 iOS App,专门对付那些悄悄扣钱的订阅 做了个草率的日麻互动漫画,听听反馈 喜欢自己洗车的朋友们,我用 ai 做了一款洗车小程序 -- 洗车志 感谢 V2EX 上各位 NAS🍆 和 Datahoarder 玩家的关注和真实反馈!作为个人开发者,能得到这么多硬核玩家们的讨论,我非常荣幸。 用 AI 开发熊孩子自律的小程序 用 OpenClaw 搭建个人运动助手 今天摸鱼给 NanaAI 也接入了 GPT-Image-2 [Video Companion]一个 chrome 插件,解决大多对视频操作的需求~欢迎使用提 bug AI 时代,做产品简单了,把产品推广出去却变的更难了~ bestskills.dev - Skills 精选和评测站点 免 ROOT 强力卸载安卓广告软件 一个 All In One 的运维工具,支持 SSH、数据库、Redis 管理 [开源] Codeg V0.10:专注于代码生成的多智能体 IDE(cc、codex、gemini、opencode……),新版本重构了工作区,飞一般的体验,支持桌面端、服务器部署
做了一个 AI 复刻 APP UI 的小程序,大家给点意见
lzzyywz · 2026-05-21 · via 分享创造

做了一个真实 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