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

推荐订阅源

Engineering at Meta
Engineering at Meta
雷峰网
雷峰网
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
B
Blog
Y
Y Combinator Blog
WordPress大学
WordPress大学
Microsoft Azure Blog
Microsoft Azure Blog
小众软件
小众软件
G
Google Developers Blog
云风的 BLOG
云风的 BLOG
罗磊的独立博客
博客园 - 三生石上(FineUI控件)
博客园 - 叶小钗
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
量子位
The Cloudflare Blog
T
The Blog of Author Tim Ferriss
博客园_首页
B
Blog RSS Feed
Hugging Face - Blog
Hugging Face - Blog
IT之家
IT之家
阮一峰的网络日志
阮一峰的网络日志
L
LangChain Blog
宝玉的分享
宝玉的分享

V2EX

我用 AI 写代码,但终端管理反而成了累赘——于是我做了 codux [调研] 各位在公司都用什么 ide 和 agent 写代码? 老运维 share 一个运维平台 看到有公司考核 token 指标,很好奇大家上个月的 AI 账单是多少 GLM-Coding 调用持续报错: z.ai 的 Lite 套餐几乎无法使用,官方 Pro/Max 是否稳定? 现在还有什么渠道可以稳定安全地使用 Claude 吗? 上海漕河泾内推,本组有 2 个 hc,一个后端,一个前端,预算都是 20k 左右,不打卡,氛围好 如果 V2EX 上有一组不永久保存聊天记录(比如只保存 7 天或者 24 小时)的聊天室,那么会开启哪些有用或者有趣的可能? gemini cli 貌似挂了,一直返回 403 第一次在自媒体上赚到钱 收集了最近在使用的低价 GPT, Gemini,邮箱等 AI 会员的小店合集 讨论个大实话:现在企业还在说 AI 编程提效 20%, 30%的,真的太落后,没用懂 AI。因为包括很多前沿公司,已经狂奔到提效 200%-500%的情况 [招聘][远程][币安] 前端/后端/QA/iOS/Android 至少 3 年以上经验 目前有大量 HC 欢迎投递 Chatgpt Pro 用量用不完的可以开这些设置 面试的时候好像遇到钓鱼了,给各位避个坑 cursor 年续费 22 号到期, 自动续费是否还是老的计次套餐呢 被两件破事毁掉的一下午,琐碎的内耗消磨人的精力 使用 Planet 存储 Codex 的会话或者重要信息 如果业务部门领导不要你开发功能,而是要求你教会它用 claude code 开发功能,你会怎么做? 分享一个 MacOS 接绿联 CM818 USB 转 DP 转接器使用感受 我的 HR 朋友 10 年老 Java ,非全大专,大家帮忙看看简历 开源了一个 AI 口语练习工具,音素级发音评分,完全免费可自部署 V2EX 上有哪些你觉得很有趣、印象深刻的妹纸? 字节为啥不出个国内版 Vercel? 有在大马的朋友吗? 问个运营商问题 你们在有领导的公司大群发过的最大胆的消息是什么 公司裁员,目前没有工作。想试试摆摊,做一个移动鲜啤打酒车 我的硬盘 Memblaze Pblaze 5 Linux 下不识别,给 Linux 内核提交了补丁, AI 说有望被合并 只有我一个人觉得 codex 不好用?
做了一个 AI 复刻 APP UI 的小程序,大家给点意见
lzzyywz · 2026-05-21 · via V2EX

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