像我这样后端开发在用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 缺乏视觉上下文。Lazyweb25 万张真实截图做设计参考然后看网上有介绍免费的截图库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 approvalAI 自动从截图库中拉取了 Linear、Notion、Vercel、Supabase、Stripe Dashboard 等产品的管理后台截图然后生成了一份报告1. 数据表格的筛选器应该放在表头上方而不是侧边栏里几乎所有头部产品都这么做。2. 批量操作按钮应该在被选中的数据行附近浮现而不是固定在页面底部。3. 审批流程的步骤条用横向时间线比纵向列表更直观Stripe 和 Retool 都采用这种模式。接着使用/lazyweb-design-improve把项目里现有的仪表盘页面截图丢进去。AI 对比了 Vercel、Mixpanel、Datadog 等产品的同类页面给出了三条改进方向信息密度太高导致视觉疲劳建议分组并用卡片容器区分关键指标缺少对比基准建议加入环比/同比数据空状态页面一片空白建议加入引导性占位内容。每一条都带有 2-3 张参考截图标注了哪些元素可以直接借鉴。DESIGN.md 解决的是「设计一致性」问题。有了颜色、字体、间距的规范AI 生成的页面不会出现颜色乱飞、字号乱跳的情况。这是基础层的约束。Lazyweb 解决的是「设计质量」问题。它告诉 AI好的管理后台长这样好的定价页长这样好的设置页长这样。这是视觉层的参考。光有规范没有参考AI 在不违反设计原则下自由发挥。两者结合使用效果最好DESIGN.md 提供品牌约束Lazyweb 提供视觉参考。配置指南安装非常简单三步搞定第一步获取免费 Tokencurl -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.comGitHubhttps://github.com/aboul3ata/lazyweb-skill你有什么好用的设计技能嘛欢迎评论区留言。-END-推荐阅读Multica让 AI 智能体变为你的员工给 AI 装上真实浏览器camofox-browser 实战基于 DeepSeek 的编程智能体 TUIChatGPT 里的哥布林goblins是怎么来的不用一个违禁词 让 Claude 说出炸药配方红队攻击实录大模型黑箱揭秘GPT、Claude、Gemini、Grok、Hermes 系统提示词全公开jcode 深度解析纯 Rust 打造它凭什么号称「最强 Coding Agent」让 AI 帮你修 bug结果它把整个代码重写了一遍没人整理过的 DeepSeek 进化史25篇论文里的技术蜕变AI 让我更累了这不是错觉89.2%攻击成功率腾讯、字节研究发现 OpenClaw Agent 存在可利用结构性漏洞谷歌提示工程白皮书Google Prompt Engineering White-paper
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 缺乏视觉上下文。Lazyweb25 万张真实截图做设计参考然后看网上有介绍免费的截图库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 approvalAI 自动从截图库中拉取了 Linear、Notion、Vercel、Supabase、Stripe Dashboard 等产品的管理后台截图然后生成了一份报告1. 数据表格的筛选器应该放在表头上方而不是侧边栏里几乎所有头部产品都这么做。2. 批量操作按钮应该在被选中的数据行附近浮现而不是固定在页面底部。3. 审批流程的步骤条用横向时间线比纵向列表更直观Stripe 和 Retool 都采用这种模式。接着使用/lazyweb-design-improve把项目里现有的仪表盘页面截图丢进去。AI 对比了 Vercel、Mixpanel、Datadog 等产品的同类页面给出了三条改进方向信息密度太高导致视觉疲劳建议分组并用卡片容器区分关键指标缺少对比基准建议加入环比/同比数据空状态页面一片空白建议加入引导性占位内容。每一条都带有 2-3 张参考截图标注了哪些元素可以直接借鉴。DESIGN.md 解决的是「设计一致性」问题。有了颜色、字体、间距的规范AI 生成的页面不会出现颜色乱飞、字号乱跳的情况。这是基础层的约束。Lazyweb 解决的是「设计质量」问题。它告诉 AI好的管理后台长这样好的定价页长这样好的设置页长这样。这是视觉层的参考。光有规范没有参考AI 在不违反设计原则下自由发挥。两者结合使用效果最好DESIGN.md 提供品牌约束Lazyweb 提供视觉参考。配置指南安装非常简单三步搞定第一步获取免费 Tokencurl -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.comGitHubhttps://github.com/aboul3ata/lazyweb-skill你有什么好用的设计技能嘛欢迎评论区留言。-END-推荐阅读Multica让 AI 智能体变为你的员工给 AI 装上真实浏览器camofox-browser 实战基于 DeepSeek 的编程智能体 TUIChatGPT 里的哥布林goblins是怎么来的不用一个违禁词 让 Claude 说出炸药配方红队攻击实录大模型黑箱揭秘GPT、Claude、Gemini、Grok、Hermes 系统提示词全公开jcode 深度解析纯 Rust 打造它凭什么号称「最强 Coding Agent」让 AI 帮你修 bug结果它把整个代码重写了一遍没人整理过的 DeepSeek 进化史25篇论文里的技术蜕变AI 让我更累了这不是错觉89.2%攻击成功率腾讯、字节研究发现 OpenClaw Agent 存在可利用结构性漏洞谷歌提示工程白皮书Google Prompt Engineering White-paper
