awesome-design-md案例Webflow蓝调营销站精致美学完全拆解【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-mdawesome-design-md 是一个开源的 DESIGN.md 设计系统文件合集专为 AI 编码智能体而生。本文以其中 Webflow 的蓝调营销站案例为例拆解其 5 色强调色系统、600 字重上限的字体层级与 4px 紧凑圆角三大美学细节教你两步让 AI 生成风格高度一致的 Webflow 风营销页面 什么是 DESIGN.mdAI 为什么看得懂它awesome-design-md 项目收录了 73 份从真实网站提取的设计系统文档。所谓 DESIGN.md就是一个纯 Markdown 的设计系统文件——没有 Figma 导出、没有 JSON 配置丢进项目根目录任何 AI 编码智能体或 Google Stitch就能立刻理解你的 UI 应该长什么样。项目用一个巧妙的对照表说明了它的定位文件谁来读定义什么AGENTS.md编码智能体项目怎么构建DESIGN.md设计智能体项目应该长什么样核心思路复制一个 DESIGN.md 到你的项目告诉 AI做一个看起来像这样的页面就能得到视觉风格高度一致的高质量 UI。每份文件都遵循统一格式包含 9 大板块视觉主题、色板与角色、字体规则、组件样式、布局原则、层级阴影、Dos Donts、响应式策略以及给智能体的 Prompt 指南。Webflow 设计语言拆解三大核心美学要素Webflow 的营销页读起来像一个自信的专业产品而不是科技初创公司。它的精致感来自下面三个刻意克制的选择。1️⃣ 色彩近黑主色 五段式强调色蓝色只当卡片不当按钮Webflow 的底色逻辑非常干净画布#ffffff纯白主色/墨色#080808深近黑——比纯黑更深一点用作所有主 CTA、标题和文字发丝线#d8d8d8负责 1px 边框与分隔线围绕这个克制的主色品牌叠加了一套5 段式彩色强调系统每种颜色对应一个产品类别以整卡填充形式出现在产品分类网格中这就是蓝调的出处——亮蓝#3b89ff是 SEO/分析产品面的签名色强调色Hex产品面紫#7a3dff设计/构建粉#ed52cb动画/交互蓝#3b89ffSEO/分析橙#ff6b00托管/基础设施绿#00d722电商/成功状态最容易踩的坑这五种颜色永远只做卡片整面填充绝不用于按钮背景。品牌的主 CTA 始终保持近黑。这条规则是整个体系高级感的关键。2️⃣ 字体单一字体家族字重上限锁死在 600整个系统只用一个字体家族WF Visual Sans Variable技术小字配 Inconsolata 等宽体承担从 80px 大标题到 12px 注释的所有角色规则极其严格Hero 大标题80px / 字重 600 / 字距 -0.8px——自信但不喧哗大标题一律负字距紧凑的排字本身就是品牌声音的一部分字重天花板是 600品牌永远不用 700confident, not loud每个章节都有一枚大写 eyebrow 标签15px / 字重 500 / 字距 1.5px这是它的签名标签样式 开源替代方案来自文档 Font Substitutes 一节正文展示用Inter400/500/600启用ss01等宽用Inconsolata或DM Mono。3️⃣ 形状与阴影4px 按钮 8px 卡片 五段式叠影Webflow 的几何语言同样工程感十足圆角 Token值用途rounded.sm4px按钮、徽章等品牌标准小元素rounded.md8px卡片外壳rounded.full9999px仅限圆形图标容器品牌从不用胶囊形 CTA——按钮是紧凑的 4px 矩形让品牌看起来像被工程出来的。至于阴影品牌唯一的大气效果是五段式叠层投影每层透明度都很低0.01~0.09叠加出温和的抬升感专用于重点卡片绝不 Material 味过重。快速上手两步生成 Webflow 风营销页 第 1 步把 design-md/webflow/DESIGN.md 复制到你的项目根目录。第 2 步告诉你的 AI 智能体一句提示词例如阅读根目录的 DESIGN.md为我的 SaaS 产品构建一个风格一致的营销落地页主 CTA 用近黑色分类卡片使用五色整面填充。文档末尾自带Agent Prompt Guide板块快速色彩参考与即用 Prompt照着改即可。避坑清单Webflow 风格的 4 条 Dont ⚠️Dos and Donts 一节 给出了设计护栏其中四条最容易被 AI 发挥翻车不要把按钮字重提到 700品牌天花板是 600不要把五色强调色用作按钮背景——它们是表面填充不是行动色不要把 CTA 做成胶囊形品牌几何语言是紧凑 4px 矩形不要引入第六种强调色5 段调色板就是系统本身相关文档与延伸阅读 案例源文件design-md/webflow/DESIGN.md含完整 Token 表格与组件规范案例说明页design-md/webflow/README.md项目总览与全部 73 份案例列表README.md贡献指南如何修正色值与 TokenCONTRIBUTING.md这套案例的价值在于它把高级感翻译成了 AI 可执行的精确数字——#080808、字重 600、-0.8px、4px 圆角。下次想复刻任何品牌风格时找对应目录下的 DESIGN.md 丢进项目就是你距离官方级页面最近的捷径。【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考