品牌设计参考库
收录 96 个网页营销页 + 22 个 iOS 机型样机，全部为自包含 HTML。适合独立开发者和 App 团队做商店截图、预览图和落地页时找风格参考。来源开源项目 awesome-design-html（MIT）。
HTML 来源：yzfly/awesome-design-html（MIT，© 2026 云中江树）。上游致谢 VoltAgent/awesome-design-md、Meliwat/awesome-ios-design-md。许可与声明见 /design-refs/LICENSES.txt。侵权或下架请求请 联系我们。
这个工具能做什么
做 App 商店截图、预览图或落地页时，独立开发者常需要「像飞书那样干净」或「像 Linear 那样克制」的风格参考，但官方品牌规范要么不好找，要么不能直接给 AI 用。这个工具把开源项目 awesome-design-html 里的 118 个自包含 HTML（96 个网页 + 22 个 iOS 机型样机）放到本站托管：可以按中英文品牌名搜索（飞书/Feishu、小红书/Xiaohongshu），按中国品牌、SaaS、AI、开发工具等分类筛选，点开即可预览、下载单个 HTML，或一键复制 :root 设计变量和一段给 AI 的 Prompt。 请注意：这些页面是非官方的风格参考，商标与视觉识别归各品牌所有，只适合学习配色、字体和版式，不要把品牌 Logo 或商标拿去当自己的商业标识。
使用步骤
- 在搜索框输入品牌中英文名或别名（如「飞书」「Linear」「Spotify」），或点热搜词。
- 用「网页 / iOS 样机」和分类（中国品牌、SaaS、AI 等）缩小范围。
- 点开卡片：预览页面、下载 HTML、复制设计变量，或复制一段带 token 的 AI Prompt。
常见问题
这些 HTML 是官方品牌规范吗？
不是。它们是开源社区整理的非官方风格参考，用接近真实品牌的色值、字体和版式做成可打开的 HTML，方便学习和给 AI 当参考。商标、Logo 与视觉识别仍归各品牌所有，本站与各品牌均无隶属或背书关系。
可以商用下载的 HTML 吗？
HTML 文件本身来自 MIT 许可的开源项目 awesome-design-html，可以按 MIT 条款使用、修改和再分发。但文件中的品牌名、Logo 图形和独特视觉识别不属于 MIT 授权范围，不能当作你的商标或对外宣称与该品牌有合作。更稳妥的做法是：提取色板、圆角、字体阶梯等设计变量，再做成你自己的界面。
「复制设计变量」复制的是什么？
工具会读取该 HTML 里的 :root CSS 自定义属性（如主色、背景、圆角、阴影、字体），整理成一段 :root { ... } 文本放到剪贴板，方便贴进你的样式表或发给 AI。
图片和预览会上传到服务器吗？
不会。HTML 和缩略图都是本站静态文件；搜索、筛选、复制都在浏览器本地完成。预览用 iframe 加载本站托管的 HTML，不依赖第三方演示站。
用了哪些开源项目？如何致谢？
页面 HTML 来自 yzfly/awesome-design-html（MIT，© 2026 云中江树）。上游致谢 VoltAgent/awesome-design-md（MIT）与 Meliwat/awesome-ios-design-md。完整许可与商标声明见 /design-refs/LICENSES.txt。
相关文章和工具
更多工具见开发者工具箱；要做应用商店预览图，可以用App Store 截图生成器。