文档【免费下载链接】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点击查看免费下载本指南以仓库中 design-md/webflow/DESIGN.md 为主体完整拆解 Webflow 这一视觉建站平台的色彩、字体、布局、圆角、阴影与组件体系并说明如何将这份 Stitch 格式的设计文档交给 AI 编码 Agent直接生成风格一致的界面。读完本文你将掌握一套可直接复用的近黑主色 五色强调系统 单一可变字体的设计令牌组合以及把它落地到 Agent 工作流中的完整方法。Webflow 的 DESIGN.md 属于本仓库提供的 73 份品牌设计文档之一仓库根目录 README.md 中有完整清单。它既是一份设计系统规格说明也是一份可以被 LLM 直接读取的纯文本配置文件——包含 front-matter 中的颜色、排版、圆角、间距、组件令牌定义以及正文中对品牌气质、层级规则和使用守则的定性描述。下面按文档骨架逐层展开。一、设计概览自信的专业工具而非技术创业公司Webflow 的营销表面marketing surface整体读起来是自信的专业产品。默认页面是一块慷慨的白色画布{colors.canvas}#ffffff配以深度近黑主色{colors.primary}#080808用于品牌主 CTA、正文与墨色ink。在这样克制的基底之上品牌叠加了一套五级彩色强调系统每一级精确映射一个产品分类强调色令牌色值对应产品面{colors.accent-purple}#7a3dff设计 / 构建design / build{colors.accent-pink}#ed52cb动画 / 交互animation / interaction{colors.accent-blue}#3b89ffSEO / 分析SEO / analytics{colors.accent-orange}#ff6b00托管 / 基础设施hosting / infrastructure{colors.accent-green}#00d722电商 / 成功状态ecommerce / success关键纪律在于这些强调色以整块卡片填充full-card fills的形式出现在产品分类网格中而从不充当按钮背景色品牌主 CTA 始终保持近黑。字体承担第二个决定性的声音专有字体族WF Visual Sans Variable承担所有 display、body 与 label 角色权重只落在 500 / 600——品牌从不越过 semibold600也不低于 regular400。Hero 展示字排 80 px / 600 权重 /-0.8 px字距自信但不喧哗15 px、500 权重、1.5 px正字距的大写 eyebrow 标记每一个章节头。形状系统同样克制按钮取紧凑的{rounded.sm}4 px 圆角——既非胶囊也非直角方整体读感是被工程化过的卡片升一档到{rounded.md}8 px胶囊{rounded.full}9999 px只预留给圆形图标容器。分层多偏移投影layered drop-shadows为特色卡片提供适度的抬升感但从不显得 Material 式厚重。关键特征Key Characteristics速览两色转化层级所有主 CTA 用近黑{colors.primary}所有次级操作是白底 hairline 描边彩色强调只做分类卡片的整面填充绝不做按钮背景。五级分类色板是品牌签名紫 / 粉 / 蓝 / 橙 / 绿各绑一个产品面以满饱和度做卡片填充。Hero 排版 80 px / 600 权重 /-0.8 px字距——克制、自信绝不广告牌式张扬。WF Visual Sans Variable 是唯一字体族品牌不为 body / display 另设字体WFVisualSans-Mono / Inconsolata 只出现在技术性 caption 场景。按钮几何是紧凑的 4 px 圆角卡片 8 px品牌从不使用胶囊形 CTA。特色卡片上的分层多偏移投影是品牌唯一的抬升线索elevation cue。二、色彩系统令牌定义与语义角色2.1 品牌色与强调色Ink Black{colors.primary}—#080808品牌主转化色。每个主 CTA、每个标题、每个 wordmark 都使用它。比纯黑更深读起来有品牌感。Accent Purple#7a3dff五级分类强调之一对应设计 / 构建类产品面。Accent Pink#ed52cb洋红强调对应动画 / 交互类产品面。Accent Blue#3b89ff明亮青蓝对应 SEO / 分析类产品面。Accent Blue Deep#006acc更深的蓝用于强调链接emphasis links。Accent Blue Info#146ef5badge-info 徽标蓝。Accent Orange#ff6b00托管 / 基础设施类产品面。Accent Green#00d722电商 / 成功状态类产品面。Accent Yellow#ffae13警告 / 协作类产品面。Accent Red#ee1d36错误 / 破坏性状态。2.2 表面色Canvas#ffffff默认页面背景。Hairline#d8d8d81 px 实线描边——输入框边框、卡片镶边、分隔线。2.3 文本色阶文本色是一个从近黑到浅灰的六档梯度用于精确表达信息优先级令牌色值角色{colors.ink}#080808默认文本与标题{colors.ink-strong}#222222近黑强调{colors.body}#363636默认正文颜色{colors.body-mid}#5a5a5a中强调次级文本页脚行、caption{colors.mute}#898989低优先级文本{colors.mute-soft}#ababab最浅文本角色placeholder、fine print2.4 语义色Info Blue#146ef5信息徽标 / 通知。Success Green#00d722成功指示。Warning Yellow#ffae13警告状态。Error Red#ee1d36校验 / 破坏性操作。在 design-md/webflow/DESIGN.md 的 front-matter 中这些颜色全部以colors:命名空间下的令牌形式定义如primary: #080808正文各章节再以{colors.xxx}占位符引用形成定义—引用的单源体系这与 Stitch 的 DESIGN.md 规范一致Agent 拿到文件后无需解析 JSON 或 Figma 导出直接按令牌生成即可保持视觉一致性。三、字体排印系统单一家族的权重纪律3.1 字体家族一个专有家族承担所有排印角色WF Visual Sans Variable系统回退为Arial本文档给出的 font-family 链为WF Visual Sans Variable, Inter, system-ui, -apple-system, sans-serif。可用权重为 400 / 500 / 550 / 600品牌从不使用 700 / 800 / 900。等宽变体WFVisualSans-Mono回退Inconsolata处理少量技术性 caption 与代码风格标签并启用 OpenType 特性ss02、ss10、zero用于带样式的零字形。3.2 完整层级表令牌字号权重行高字距用途{typography.display-xxl}80px60083.2px-0.8pxHero 大标题{typography.display-xl}56px60058.24px0次级 Hero display{typography.display-lg}44.8px60046.6px0章节大标题{typography.display-md}32px50041.6px0卡片簇标题{typography.display-sm}24px50031.2px0子章节 display{typography.display-xs}20px50028px0行内微标题{typography.eyebrow-uppercase}15px50019.5px1.5px章节上方大写 eyebrow{typography.eyebrow-uppercase-sm}12px50012px0.6px小号大写元数据{typography.body-lg}28.8px40046.08px-0.288px引导段落{typography.body-md}16px40025.6px-0.16px默认正文{typography.body-md-strong}16px50025.6px-0.16px行内加粗正文{typography.body-sm}14px40022.4px0次级正文{typography.body-sm-strong}14px50022.4px0加粗 caption / 导航链接{typography.caption}12.8px55015.36px0徽标标签品牌签名式 550 权重{typography.caption-mono}12px40018px0等宽代码 caption{typography.button-md}16px50025.6px-0.16px按钮标签3.3 四条排印原则权重上限 600品牌从不使用 700 以上——自信但不喧哗。display 尺寸负字距80 px 处为-0.8 px随尺寸递减延续紧凑字距本身就是品牌声音的一部分。每个章节都用大写 eyebrow 标记15 px / 500 权重 /1.5 px正字距是品牌的签名标签样式。全系统单一字体族display 与 body 不分开靠可变字体的轴向完成全部工作。3.4 字体替代方案WF Visual Sans Variable 是专有字体开源替代建议文档原话Display bodyInter的 400 / 500 / 600 权重并开启font-feature-settings: ss01是风格上最接近的替代。Mono文档记录的回退Inconsolata或DM Mono。四、布局系统4 px 基准与响应式策略4.1 间距系统基准单位4 px并常用 0.4 / 0.8 亚倍数做精细内边距。完整令牌{spacing.xxs}2 px ·{spacing.xs}4 px ·{spacing.sm}8 px ·{spacing.md}12 px ·{spacing.lg}16 px ·{spacing.xl}20 px ·{spacing.2xl}24 px ·{spacing.3xl}32 px。章节内边距hero / content band 使用{spacing.3xl}32 px 排水沟gutters加慷慨的纵向间距。卡片内边距feature 与 pricing 卡片统一 32 px{spacing.3xl}。4.2 网格与容器营销容器很宽实际接近满幅带{spacing.3xl}排水沟。分类卡片网格桌面端 2 / 3 列且尺寸混合部分更大的 feature 卡片横跨 2 列。定价层级网格桌面端 3 列移动端 1 列。4.3 响应式策略断点表名称宽度关键变化Mobile 479pxHero 纵向堆叠所有网格 1 列Mobile-Large479–767px与 Mobile 相同Tablet768–991px2 列网格Desktop≥ 992px完整多列网格触控目标按钮渲染高度约 44 px12 px 纵向内边距 25.6 px 行高满足 WCAG AAA 要求。折叠策略桌面端导航为完整链接行移动端改为汉堡菜单分类卡片网格桌面 2 / 3 / 4 列、移动 1 列定价层级桌面 3 / 4 列、移动 1 列。图片行为分类卡片是满幅纯色填充无摄影产品截图以 16:9 比例装进{rounded.md}卡片镶边内营销表面不使用竖幅人像图。五、层级与深度五段分层投影配方层级处理方式用途Level 0 — Flat无阴影、无边框默认 bandLevel 1 — Hairline{colors.canvas}上 1 px 实线{colors.hairline}边框默认卡片镶边与输入框边框Level 2 — Layered Drop多段分层投影带轻微暖色偏移0 84px 24px rgba(0,0,0,0), 0 54px 22px rgba(0,0,0,0.01), 0 30px 18px rgba(0,0,0,0.04), 0 13px 13px rgba(0,0,0,0.08), 0 3px 7px rgba(0,0,0,0.09)需要可见抬升的特色卡片Level 3 — Layered Drop StrongLevel 2 的加深版末段偏移不透明度提到0.12定价 / 模态级强调Level 4 — Heavy Modal极重的多段配方——末段0 24px 24px rgba(0,0,0,0.26), 0 6px 13px rgba(0,0,0,0.29)模态 / 对话框表面装饰性深度满饱和度的分类卡片紫 / 粉 / 蓝 / 橙 / 绿整面填充依靠与白色画布的纯色彩对比制造视觉深度分层阴影配方是品牌唯一的氛围效果——它们是五段投影叠加且每一段单独不透明度都很低。六、形状系统圆角刻度令牌值用途{rounded.none}0px满幅 band{rounded.xs}2px紧凑的行内胶囊{rounded.sm}4px品牌标准按钮 徽标 小元素圆角{rounded.md}8px卡片镶边与 feature / category 卡片{rounded.full}9999px仅限圆形图标容器圆角语义高度一致按钮永远 4 px卡片永远 8 px胶囊只属于图标。这也是本文档 Dos 部分强调的engineered读感来源。七、组件体系从按钮到签名组件7.1 按钮四态button-primary标准近黑 CTA。背景{colors.primary}#080808、文字{colors.on-primary}白色、标签{typography.button-md}16 px / 500、内边距{spacing.md} {spacing.xl}、圆角{rounded.sm}4 px。button-secondary白底描边 CTA。背景{colors.canvas}、文字{colors.ink}、1 px 实线{colors.hairline}边框排印与内边距同上。button-text-arrow长文段中带箭头的下划线文字链接。背景 canvas、文字 ink、无边框、正文用{typography.button-md}、内边距{spacing.xl}0。button-icon-circular轮播控制用的圆形图标按钮。背景 canvas、ink 图标、形状{rounded.full}。7.2 卡片与容器card-feature画布上的标准 feature 卡片。canvas 背景、ink 文字、1 px hairline 边框、内边距{spacing.3xl}、{rounded.md}8 px作为特色卡时通常抬升到 Level 2 阴影。card-feature-dark极性反转的近黑 feature 卡。{colors.primary}背景、{colors.on-primary}文字、32 px 内边距、8 px 圆角。card-pricing定价层级卡。canvas 背景、ink 文字、hairline 边框、32 px 内边距、8 px 圆角特色档位带分层阴影。7.3 输入与表单text-input标准文本输入。canvas 背景、ink 文字、1 px hairline 实线边框、{typography.body-md}正文、内边距{spacing.md} {spacing.lg}、圆角{rounded.sm}。7.4 导航nav-bar吸顶导航。canvas 背景、ink 文字、内边距{spacing.lg} {spacing.3xl}。nav-linknav-bar 内的链接项ink 文字{typography.body-sm-strong}排印。footer页脚 band。canvas 背景、{colors.body-mid}次级文字、32 px 内边距、{typography.body-sm}正文。7.5 签名组件hero-band白色 hero band。canvas 背景、ink 文字、{spacing.3xl} {spacing.3xl}内边距、{typography.display-xxl}80 px / 600大标题。hero-band-dark极性反转的近黑 hero band用于部分活动页。{colors.primary}背景、白色文字内边距与大标题规格相同。content-bandcanvas 上的标准内容 band章节大标题用{typography.display-lg}。五张分类卡片category-card-purple / pink / blue / orange / green分别是#7a3dff/#ed52cb/#3b89ff/#ff6b00/#00d722的整面填充32 px 内边距、8 px 圆角唯一例外是绿色卡用 ink 文字{colors.primary}因为亮绿色底上白字可读性差。badge-infobadge-info-soft实心蓝或柔和描边的信息徽标。实心版背景{colors.accent-blue-info}#146ef5白字柔和版 canvas 底、蓝字两者都用{typography.caption}12.8 px / 550——即品牌签名式 550 权重 caption。在 front-matter 中上述组件全部以components:命名空间定义且大量使用跨命名空间引用语法例如backgroundColor: {colors.canvas}、typography: {typography.body-sm-strong}、padding: {spacing.md} {spacing.xl}。这种令牌引用令牌的写法让整套系统只需维护一层定义源Agent 在换肤时改一处颜色即可全局生效。八、示例组件ex-*面向 SaaS / B2B 场景的十个可复用表面DESIGN.md 在 front-matter 末尾额外提供了 10 个ex-*示例表面。文档注明它们是自动派生的 kit-mirror 演示表面每个ex-*条目都引用品牌原生基元primitives使下游生成流程可以一致地重新换肤同一批表面。其设计意图是将 Webflow 面向电商建站的原生视觉语言复用re-purpose到 SaaS / B2B 产品界面示例令牌用途关键属性ex-pricing-tier默认定价档卡片复用 feature-card 外观backgroundColor/textColor/borderColor/rounded/paddingex-pricing-tier-featured高亮档位极性反转表面亮色模式下深底浅字backgroundColor/textColor/rounded/paddingex-product-selectorWhats Included 汇总卡面向 SaaS / B2B 的抽象非字面产品画廊backgroundColor/rounded/paddingex-cart-drawer订阅汇总抽屉按 add-on 逐行展示非字面购物车backgroundColor/rounded/padding/item-dividerex-app-shell-rowApp Shell 侧边栏导航行激活态以品牌主色做指示条backgroundColor/activeIndicator/rounded/paddingex-data-table-cell数据表 th td 外观表头用等宽大写 eyebrow、表体用 body-smheaderBackground/headerTypography/bodyTypography/cellPadding/rowBorderex-auth-form-card登录 / 注册卡片内部复用 text-input 基元backgroundColor/rounded/paddingex-modal-card模态对话框表面与 feature-card 同外观并加抬升阴影backgroundColor/rounded/paddingex-empty-state-card空状态插图框backgroundColor/rounded/padding/captionTypographyex-toastToast 通知表面feature-card 外形 中等阴影backgroundColor/rounded/padding/typography这批示例的价值在于示范了品牌原生组件 → 业务抽象组件的迁移路径在保留卡片 8 px 圆角、hairline 边框、32 px 内边距这些品牌令牌的前提下把产品画廊改造成定价卡、把购物车改造成订阅抽屉从而让 Webflow 视觉语言可以服务于 B2B / SaaS 类产品界面而不失真。九、使用守则Dos and DontsDo应当把{colors.primary}#080808留给每一个主 CTA、每一个标题、每一个 wordmark——近黑就是转化色。五级彩色强调紫 / 粉 / 蓝 / 橙 / 绿只做整面填充的分类卡片绝不做按钮背景。Hero 大标题用{typography.display-xxl}600 权重 -0.8 px字距。让 WF Visual Sans 家族贯穿每一个排印角色。按钮用{rounded.sm}4 px、卡片用{rounded.md}8 px品牌从不使用胶囊 CTA。特色卡片使用分层多偏移投影——这是品牌标志性的抬升配方。Dont禁止不要把按钮中等字重提到 700 以上——品牌权重上限是 600。不要用彩色强调做按钮背景——它们是表面填充不是操作。不要把 CTA 渲染成胶囊——品牌按钮几何是紧凑的 4 px 矩形。不要引入第六个强调色——五级色板就是这套系统。十、落地实践把 DESIGN.md 交给 AI 编码 Agent最后一步是把这份设计语言真正用起来。仓库根目录 README.md 给出的使用方式只有两步复制某个站点的DESIGN.md例如本文分析的 design-md/webflow/DESIGN.md到你的项目根目录告诉 AI Agent 使用它例如build me a page that looks like this即可生成与 Webflow 视觉语言保持一致的 UI。这套机制的技术基础是 Stitch 提出的 DESIGN.md 概念一份纯文本的设计系统文档AI Agent 可以直接读懂无需 Figma 导出、JSON Schema 或任何特殊工具。在项目中的分工是AGENTS.md告诉编码 Agent如何构建项目而DESIGN.md告诉设计 Agent项目应该如何呈现。每个品牌的目录如 design-md/webflow/都配套了说明性 README指向完整的预览、暗色模式示例与下载入口。从实现角度总结本仓库的证据链Webflow 的设计风格得以复现靠的正是 design-md/webflow/DESIGN.md 这份文档中完整、自洽、令牌化的定义——colors10 个品牌 / 强调色 8 个表面 / 文本 / 语义色、typography17 个层级令牌、rounded5 档圆角、spacing8 档间距、components约 20 个品牌组件 10 个示例表面。任何 Agent 或 LLM 只要读取该文件就能在不知晓 Webflow 官网细节的情况下生成配色、字号、圆角、投影与组件形态都吻合的界面——这正是以文档为单源、以令牌为契约的 AI 驱动设计工作流的完整示范。赞分享文档【免费下载链接】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点击查看免费下载相关推荐Perfetto Agent Evals用一个 regex Grader 验证 ANR 原因——anr-why 案例与评分机制详解Perfetto Agent Evals用一个 regex Grader 验证 ANR 原因——anr why 案例与评分机制详解 本文以 Perfetto文档复刻 Webflow 视觉语言OpenDesign 设计系统令牌化实战指南复刻 Webflow 视觉语言OpenDesign 设计系统令牌化实战指南 本篇指南以 OpenDesign 仓库中 design systems/webflAI 应用人工智能AI 技能设计系统媒体生成Slang IR 控制流指令完全参考block、param 与 TerminatorInst 家族详解Slang IR 控制流指令完全参考block、param 与 TerminatorInst 家族详解 本文是 Slang 编译器中 IR中间表示控制流指文档上一篇MHY_Scanner 完整使用指南游戏扫码登录与直播抢码一步到位下一篇EasyWeChat 6.x 微信支付工具类Utils实战生成四种 JS 调起支付配置与敏感字段 RSA 加密创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考