乐于分享
好东西不私藏

受够了 AI 写的丑界面!他怒建 25.7 万截图库免费开放,Claude/Codex 直接调用,Mobbin 慌了

受够了 AI 写的丑界面!他怒建 25.7 万截图库免费开放,Claude/Codex 直接调用,Mobbin 慌了

导读
AI 编程 Agent 写代码越来越猛,但生成的 UI 丑到离谱——因为它们根本看不到真实产品长什么样。一位独立开发者受够了这种落差,花式用 7 台 iPhone + Claude 自动采集了 25.7 万张真实 App/网页截图,打包成一个免费 MCP 服务,让 Claude Code 和 Codex 一键变身设计研究员。推文发出 24 小时,11 万人围观,4000 人收藏。

「我讨厌 AI 做设计做得这么烂」

故事要从一个开发者的怒气说起。

Ali Abouelatta 在推特上甩出了一句话,直接炸了:

“I hated how bad agents are at design. I hated how Codex can’t access Mobbin. So I created Lazyweb.”

「我讨厌 AI 智能体在设计方面表现如此糟糕。我讨厌 Codex 无法访问 Mobbin。所以我创建了 Lazyweb。」

▲ Ali Abouelatta 发布推文,24 小时内 11 万浏览、2228 点赞、4020 收藏

这条推文背后的痛点,每个用过 AI 写前端的人都懂:Claude Code、Cursor、Codex 写逻辑一把好手,但让它们做 UI 设计?出来的东西像是 2008 年的政府网站。

原因很简单。这些 AI 的训练数据里,有海量的代码和文档,但缺乏结构化的设计参考。它知道 pricing page 应该有什么元素,但它不知道 Notion、Linear、Figma 的定价页到底长什么样

设计师有 Mobbin——业内最强的 UI 参考库,收录了海量真实 App 截图和用户流程。但问题来了:Mobbin 要付费订阅,而且没有给 AI agent 开放任何 API。

也就是说,你的 AI 编程助手,在设计这件事上,完全是个瞎子。

暴力解法:7 台 iPhone + Claude = 25.7 万张截图

Ali 的做法简单粗暴——既然 Mobbin 不开放,那就自己建一个。

Lazyweb诞生了。

核心构成就三样东西:

  • 25.7 万+ 真实截图
    (覆盖 iOS App + 网页营销页)
  • 6 个有主见的设计研究技能
    (slash command 直接调用)
  • 1 个 MCP 服务器
    (兼容 Claude Code 和 Cursor)

最离谱的是数据采集方式。有人在评论区问:「这么多截图怎么来的?」

Ali 回了一句:

“Screens are added by Claude that has access to 7 iphones”

截图由拥有 7 台 iPhone 访问权限的 Claude 自动添加。

没错——他让 Claude 操控 7 台实体 iPhone,自动打开各种 App,一屏一屏地截图。这大概是 Claude 目前最「体力劳动」的用法了。

别只给我截图,给我研究报告

光有截图还不够。Lazyweb 真正的杀手锏在于它的6 个设计研究技能——每一个都带有明确的方法论,经过设计研究从业者打磨。

▲ Lazyweb 官网展示的 4 个核心技能(另有 2 个未公开展示)

具体来看:

`/lazyweb-design-research`——深度竞品分析输入一个需求(比如 “pricing page best practices”),它会搜索 25.7 万张截图,找到 47 个设计模式、23 家公司案例,下载 12 张参考截图,生成结构化报告。

`/lazyweb-quick-references`——秒级拉取视觉参考想看「注册页面都怎么设计的」?一个命令,截图按视觉相似性分组,直接下载到本地。

`/lazyweb-design-improve`——对标最佳实践截图你当前的设计,它自动在头部 App 里找类似界面,然后给出改进建议。

`/lazyweb-design-brainstorm`——跨域灵感碰撞故意搜索你所在领域之外的设计模式。做金融 App 的,给你看健身 App 的交互灵感——打破信息茧房。

注意这里的关键词:opinionated(有主见的)。这套技能有自己的方法论和判断标准,给出的报告带有明确的建议和反模式提醒,跟无脑堆截图完全两码事。

接入只要三步,完全免费

Lazyweb 通过 MCP(Model Context Protocol)协议接入 AI 工具链。MCP 是 Anthropic 推出的标准化插件协议,目前 Claude Code 和 Cursor 都支持。

接入流程极其简单:

第一步:调用 `POST https://www.lazyweb.com/api/mcp/install-token` 获取免费 Bearer Token(无需注册)

第二步:把 MCP 服务器地址 `https://www.lazyweb.com/mcp` 配到你的 AI 工具里

第三步:验证一下,搜一次试试

完事了。100% 免费,无速率限制,无订阅费用。

▲ 作者在回复中公布官网 lazyweb.com,网站本身也是 Lazyweb 辅助设计的

25.7 万张截图到底覆盖了什么?

光说数字没感觉,看看实际的数据库规模:

▲ Lazyweb 的 App Directory,收录了数百家公司的产品截图

数据库覆盖了几乎所有主流品类:音乐、中文 LLM、金融科技、电商、健康、AI 工具、冥想、招聘……从 Airbnb 到 AliExpress,从 Adobe 到 BeReal,叫得上名的基本都有。

更值得关注的是User Flows(用户流程)数据库:

▲ Lazyweb 的用户流程库,按类型分类展示真实 App 的完整流程

流程类型
数量
搜索与探索
206
注册
149
引导
127
登录
116
设置
103
付费墙/订阅
75
个人资料
69
评论/评分
63
结账/支付
56
推荐/邀请
42
其他流程
1132

这意味着你可以让 AI 直接看到「Airbnb 的注册流程长什么样」「Spotify 的付费墙怎么设计的」,然后照着最佳实践来生成代码。

而且 Lazyweb 还能聚合搜索 Mobbin、Savee、Dribbble、Behance 等主流设计平台——相当于一个统一入口,Agent 一次搜完所有设计素材库。

推特炸了:4020 人收藏,比点赞还多

推文发出 24 小时内的数据:

  • 11.1 万次浏览
  • 2228 点赞
  • 4020 收藏
  • 140 转发,85 评论

注意一个细节:收藏数(4020)几乎是点赞数(2228)的两倍。这在推特上极为罕见。通常收藏/点赞比不到 0.3,而 Lazyweb 达到了 1.8。

这说明什么?大家真的打算用。点赞是社交动作,收藏是真实需求。

▲ @IslaIntel 评论:「生成是容易的部分。参考 + 研究才是 AI 设计工具总是跳过的。」

评论区也很精彩:

“Mobbin paywalling research was my biggest blocker last month, this fixes that.”

「Mobbin 把设计研究放在付费墙后面,上个月这是我最大的障碍。现在解决了。」——@bygregorr

“design context as an mcp is the right shape. agents fail at design because they have no reference of what good looks like in your domain. 257k screens as ground truth fixes the cold start problem.”

「将设计上下文做成 MCP 是正确的形态。Agent 做不好设计,是因为它们没有’你的领域里什么是好设计’的参考。25.7 万张截图作为基准数据,解决了冷启动问题。」——@tulexaicom

这条评论说到了本质:AI agent 做设计失败,根源在于缺少领域内的「好设计」参考。

坦诚面对差距:和 Mobbin 比还差得远

Ali 没有回避和 Mobbin 的差距。有人问起对比,他直接说:

“Still big gap to Mobbin, Lazyweb doesnt have web apps, and flows only exist on iOS. But we will chip away at it, and build smth that agents want”

「和 Mobbin 相比还有很大差距。Lazyweb 没有 Web App 截图,用户流程只在 iOS 上存在。但我们会一点点补上,构建 Agent 真正想要的东西。」

具体差距:

  • Web App 截图
    :Lazyweb 目前只有营销页面,没有真正的 Web App 界面
  • 用户流程
    :只覆盖 iOS,Web 端还没做
  • 动效/转场
    :只有静态截图,没有交互动画
  • 登录后页面
    :iOS 已覆盖,Web 端尚未
  • 注释/交互标注
    :Mobbin 有,Lazyweb 没有

但 Ali 同时也强调了 Lazyweb 的独特优势——这是第一个原生支持 AI agent 的设计参考库。Mobbin 再强,AI 也调不动。

“This works best for marketing sites, and iOS apps. Still long way to go for web apps but we’ll get there”

「目前最适合营销网站和 iOS App。Web App 还有很长的路,但我们会到达的。」

这个工具为什么值得关注?

回到开头的那个痛点:AI 写代码越来越强,但做出来的东西就是不好看。

问题从来都不在生成能力上——GPT-4、Claude、Codex 写 React/SwiftUI 代码已经相当流畅。真正的瓶颈在设计感知:AI 没有「审美数据库」,它不知道 2026 年的头部产品都在用什么设计语言。

Lazyweb 切的就是这个口子。25.7 万张真实产品截图 + 结构化的设计研究技能 + 标准化的 MCP 接入——让 AI 不再凭感觉画 UI,而是有据可依。

免费、开放、无限制。V1 还很粗糙,但方向对了。

正如那条最高赞评论说的:「这是那种默默变得不可或缺的基础设施。」


— END —

— END —