Lazyweb 免费的 25.7 万截图库｜让 AI 写出好看的前端页面

像我这样后端开发在用AI 智能体做项目开发的时候，就容易没有好的审美标准来告诉 AI 怎么生成好看的前端页面。

最近在写的一个项目里，我试着用了这个开源项目：Awesome DESIGN。

Awesome DESIGN：效果没想象的好

Awesome DESIGN 是一个 GitHub 开源项目，收录了 73 个知名品牌的设计系统文件，Stripe、Linear、Notion、Vercel、Supabase 等都在其中。

核心思路：每个品牌有一个 DESIGN.md 文件，用纯文本描述该品牌的设计语言，色板、字体层级、组件样式、间距规则等。 使用的时候把文件复制到项目根目录，告诉 AI「按这个设计系统来做页面」，AI 就能生成风格一致的 UI。

看起来不错，在项目里应用，它给出了页面风格的参考决策。

比如它明确写了：

• 维修中心 → Airtable + Intercom（数据工作区 + 服务温暖感）
• 平台中心 → IBM + Vercel（企业结构 + 技术精度）
• 设置/文档 → Notion + IBM（安静阅读 + 信息层次）

但是生成的页面，肯定比我自己写的好，但是问题也没达到参考品牌网站那个效果。

问题出在哪？

DESIGN.md 给 AI 提供的是一套基于UI的文字规则。

它的约束大致是这种：「主色是 #635BFF，圆角 8px，间距用 4px 的倍数」以及各类组件的约定，但 AI 不知道这些规则组合起来的前端页面到底长什么样，这就取决于 AI 基模型的能力。

就像一个厨师拿到了一张配料表，但没有看过成品菜长什么样，做出来的东西大概率「能吃但不惊艳」。

AI 缺乏视觉上下文。

Lazyweb：25 万张真实截图做设计参考

然后看网上有介绍免费的截图库：Lazyweb。

这不就是咱们做产品设计时常用的方法嘛：看看别人这个模块/功能怎么做的，像素级抄过来就好了。

Lazyweb 收录了 25.7 万张来自真实应用的截图，然后通过 MCP 协议让 AI 编程工具（Claude Code、Cursor、Codex 等）可以直接搜索和参考这些截图。

和 DESIGN.md 的纯文本不同，Lazyweb 给 AI 的是真实产品的视觉效果。

AI 能看到 Linear 的仪表盘长什么样、Notion 的设置页怎么布局、Stripe 的定价页用了什么信息层级。

这个区别是根本性的。

六个设计技能

Lazyweb 提供了 6 个设计研究技能，每个都是一条 slash 命令，在 AI 编程工具里直接使用：

/lazyweb-design-research 深度竞品调研。

AI 会自动识别同类产品，从截图库中拉取参考，生成结构化报告，包含共性设计模式、差异化亮点和可操作建议。

/lazyweb-quick-references 快速截图查找。

当你需要一个具体的 UI 模式参考时，几秒钟就能返回按视觉相似度分组的真实案例。

/lazyweb-design-improve 设计改进。

截取你当前的页面，AI 自动匹配头部应用的同类页面，给出具体改进建议并附上对比截图。

/lazyweb-design-brainstorm 跨类别头脑风暴。

故意跳出你的产品类别，从完全不同领域引入新颖的设计模式，帮你打破同质化。

/lazyweb-design-tokens 设计系统提取。

一条命令从任意 URL 提取完整的设计系统，Logo、色板、字体、间距全部结构化输出。

/lazyweb-inspiration 跨平台灵感聚合。

同时搜索 Lazyweb 自有库加上 Mobbin、Dribbble、Behance、Savee 等外部设计平台，合并为本地报告。

实战：用 Lazyweb 重构管理后台

先用 Codex 接入 Lazyweb MCP 后，执行下面命令：

/lazyweb-design-research "B2B SaaS admin dashboard with data tables, charts, and workflow approval"

AI 自动从截图库中拉取了 Linear、Notion、Vercel、Supabase、Stripe Dashboard 等产品的管理后台截图，然后生成了一份报告：

1. 1. 数据表格的筛选器应该放在表头上方，而不是侧边栏里，几乎所有头部产品都这么做。
3. 2. 批量操作按钮应该在被选中的数据行附近浮现，而不是固定在页面底部。
5. 3. 审批流程的步骤条用横向时间线比纵向列表更直观，Stripe 和 Retool 都采用这种模式。

接着使用 /lazyweb-design-improve，把项目里现有的仪表盘页面截图丢进去。

AI 对比了 Vercel、Mixpanel、Datadog 等产品的同类页面，给出了三条改进方向：

信息密度太高导致视觉疲劳，建议分组并用卡片容器区分；

关键指标缺少对比基准，建议加入环比/同比数据；

空状态页面一片空白，建议加入引导性占位内容。

每一条都带有 2-3 张参考截图，标注了哪些元素可以直接借鉴。

DESIGN.md 解决的是「设计一致性」问题。

有了颜色、字体、间距的规范，AI 生成的页面不会出现颜色乱飞、字号乱跳的情况。

这是基础层的约束。

Lazyweb 解决的是「设计质量」问题。

它告诉 AI：好的管理后台长这样，好的定价页长这样，好的设置页长这样。

这是视觉层的参考。

光有规范没有参考，AI 在不违反设计原则下自由发挥。

两者结合使用效果最好：DESIGN.md 提供品牌约束，Lazyweb 提供视觉参考。

配置指南

安装非常简单，三步搞定：

第一步：获取免费 Token

curl -X POST https://www.lazyweb.com/api/mcp/install-token \
  -H "content-type: application/json" \
  -d '{}';

第二步：配置 MCP 客户端

在 AI 编程智能体 Trae、Claude Code、WorkBuddy 或 Codex 的 MCP 配置中添加：

{
  "mcpServers": {
    "lazyweb": {
      "type": "streamableHttp",
      "url": "https://www.lazyweb.com/mcp",
      "headers": {
        "Authorization": "Bearer <你的token>"
      }
    }
  }
}

第三步：开始使用

在 Claude Code 中直接输入 /lazyweb-design-research 加上你的需求描述，AI 会自动调用 Lazyweb 完成设计调研。

最后

不要指望 AI 凭空设计出好看的页面。

给它真实的视觉参考，它的产出会超出你的预期。

根据设计参考图，项目的后台管理系统 Dashboard 页面大致长这样。

我没有用这篇文章里的提示词：Claude Design 系统提示词被泄露：AI 如何成为你的专业设计师，觉得还是有参考图符合我的习惯。

项目地址：https://www.lazyweb.com

GitHub：https://github.com/aboul3ata/lazyweb-skill

你有什么好用的设计技能嘛？

欢迎评论区留言。

-END-