AI 工具箱 · 116 大牌设计参考库

116 大牌设计参考库:说一句「Linear 风格」,AI 就照着做

⭐ 大V·云中江树(yzfly)出品——结构化提示词框架 LangGPT 的提出者(1.2 万星,中文提示词工程最有影响力的项目),另有 Awesome-MCP-ZH 7.5 万星。MIT 协议,完全免费。

Claude 官网风格的落地页参考,配色、字体、圆角都是真实品牌值

一、这是什么

把 116 个大牌产品的设计扒成了 116 份可以直接读的 HTML 文件。你想做什么风格,直接说品牌名字就行,AI 自动去读对应的参考,把真实的配色、字体、圆角、按钮形状套到你的页面上。

二、收录了哪些品牌

22 个 iOS App 界面

Apple Music、Notion、Spotify、Instagram、Netflix、TikTok、Uber、Discord、Telegram、Threads、X / Twitter、YouTube、WhatsApp、Snapchat、Tinder、Hinge、Duolingo、星巴克、DoorDash、Robinhood、ChatGPT iOS…

94 个网页落地页

Stripe、Linear、Notion、Cursor、Claude、Supabase、Mistral、xAI、Runway、ElevenLabs、Lovable、Ollama、Cohere、MiniMax、OpenCode…

20 个中国品牌专题

飞书等国内产品的设计语言,中文排版场景直接可用。

Notion 风格:克制的留白与柔和的灰阶层次

Stripe 风格:标志性的网格渐变 Hero 区

Cursor 风格:深色 IDE 质感的开发者落地页

Supabase 风格:荧光绿点缀的暗色技术风

三、怎么用——说人话就行

装完不用记任何命令,提到品牌名它就自动加载:

•
「做个 Linear 风格的产品页」
•
「飞书风的页面」
•
「给我看 Spotify 正在播放的 iPhone 界面」
•
「Duolingo 那种厚实的 3D 按钮」
•
「仿 Stripe 的渐变网格 Hero 区」

Spotify iOS「正在播放」界面

Instagram iOS 信息流界面

Duolingo 标志性的厚实 3D 按钮与游戏化配色

ChatGPT iOS 对话界面

四、为什么用 HTML 而不是文字说明

这是作者最核心的一个判断,也是这个项目的立身之本。

一行文字写「圆角的蓝色按钮」,读的人只能靠想象;而一个 HTML 文件本身就是结果——人和 AI 看到的是同一批像素。一份 300 行的 HTML 在 30 秒内就把色值、字号梯度、动效、交互全交代清楚,换成文字规范写几小时还传达不全。

五、适合谁

•
看到喜欢的 App 或网站,想说「我要做一个这样的」的人
•
做小程序、App 界面时缺参照,不知道大厂怎么排版布局的人
•
不懂设计术语,但能指着一个品牌说「就要这个感觉」的人

六、还能怎么用

不装 skill 也能用——每一份都是单文件自包含的 HTML,样式、字体、设计变量全部内联。去在线画廊挑一个喜欢的,浏览器里直接另存,就是一份完整的品牌级模板,改改文案就能上线。

⚠️ 一句实话:它给的是设计参考,不是能直接跑的 App。iOS 那 22 份是网页模拟出来的界面外观(可以当高保真原型和视觉稿用),不是原生 iOS 代码。另外品牌设计仅供学习参照,商用别照搬人家的 Logo 和标识。需在 Claude Code 等 AI 编程助手里使用。
AI 助手