文章目录
- 快速导航
品牌设计参考库：118 个自包含 HTML 如何用于截图与 AI
独立开发者缺的不是「再下一个 UI Kit」，而是可打开的风格样本
做商店截图或落地页时，你常能说出目标气质——「像飞书那样干净」「像 Linear 那样克制」——却很难把官方品牌 PDF 喂给 Agent，更不好意思直接扒线上站的整页资源。开源项目 yzfly/awesome-design-html（MIT）把约 118 个自包含 HTML（约 96 个网页营销页 + 22 个 iOS 机型样机）整理成可本地打开的参考页：色值、字体阶梯、圆角与组件都写在文件里的 :root 里。
站点工具 品牌设计参考库 把这些 HTML 自托管在本站：按中英文品牌名搜索（飞书 / Feishu、小红书 / Xiaohongshu 等），按中国品牌、SaaS、AI、开发工具等分类筛选，预览、下载单个 HTML，或一键复制设计变量与一段给 AI 的 Prompt。
硬边界：MIT 管文件，不管商标
| 可以 | 不可以 |
|---|---|
| 按 MIT 使用、修改、再分发 HTML 文件本身 | 把品牌 Logo、字标、独特视觉识别当成自己的商标 |
| 提取色板、圆角、字号阶梯做成自己的界面 | 对外暗示与该品牌有合作或背书 |
| 把 token 贴进 Agent，生成你自己的截图风格 | 把参考页截图原样当上架素材 |
这些页面是非官方风格参考。商标与视觉识别归各品牌所有；本站与各品牌无隶属关系。完整声明见 /design-refs/LICENSES.txt。
三步上手
- 打开 品牌设计参考库，搜索品牌中英文名或点热搜词；用「网页 / iOS 样机」与分类缩小范围。
- 点开卡片：iframe 预览本站托管的 HTML（不依赖第三方演示 CDN）。
- 按需操作：
- 下载 HTML — 离线打开或丢给本地 Agent 读文件；
- 复制设计变量 — 读取
:root自定义属性，整理成可粘贴的 CSS 块； - 复制 AI Prompt — 带上 token，方便直接贴进 Cursor / Claude。
搜索、筛选、复制均在浏览器本地完成；HTML 与缩略图是静态文件，预览不上传你的业务数据。
和截图工作流怎么接
推荐顺序：
- 在参考库选定 1–2 个「气质接近、品类不冲突」的样本（例如效率工具对 Linear / Notion 向，消费工具对更活泼的样本）。
- 复制
:root变量，改名成你自己的 token（避免文件中残留品牌专名出现在客户可见 CSS 注释里）。 - 若使用 Agent，可同时安装 UI设计Skill 里的设计系统类 Skill，让清单约束「如何应用 token」，而不是只贴一串色值。
- 在截图生成器里用自制背景与字阶出图；需要看竞品上架结构时再开 App Store截图灵感。
选型小表
| 你想强化的感觉 | 优先筛选 | 落到截图上的动作 |
|---|---|---|
| 深色画布 + 产品 UI 主角 | SaaS / 开发工具类网页样 | 深色背景、细边框卡片、单强调色 |
| 浅色 + 轻渐变 Hero | 消费 / 国际化品牌网页样 | 控制渐变面积，避免整屏紫粉 |
| 原生 iOS 表面 | iOS 样机分类 | 学习控件密度与导航结构，勿冒充系统 UI |
| 中文大厂气质 | 中国品牌分类 | 注意字重与信息密度，再本地化到你的文案 |
常见误用
- 整页换皮冒充某品牌官网 — 法律与信任双杀。
- 把参考 HTML 里的 Google Fonts 外链当成生产依赖也不评估 — 上架图应内嵌或使用你已许可的字体。
- 只复制颜色、忽略圆角与字阶 — Agent 仍会画出「正确色值的错误产品」。
- 与灵感库下载的商店 PNG 混在同一「可商用素材」文件夹 — 许可完全不同，请分目录。
致谢与来源
页面 HTML 来自 yzfly/awesome-design-html（MIT）。上游致谢 VoltAgent/awesome-design-md（MIT）与 Meliwat/awesome-ios-design-md。使用本工具时，建议在项目 README 的第三方致谢中保留上游项目名。
清单
- 搜索并预览 ≥2 个候选品牌样
- 复制
:root并重命名为自有 token - 确认未把 Logo / 字标用于对外标识
- 将 token 接入截图或 Agent 工作流
- 需要榜单结构时改用灵感库，需要可商用表情时改用表情包图库