企业官网建设流程全解析

• 文档

本指南以仓库中 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）。在这样克制的基底之上，品牌叠加了一套五级彩色强调系统，每一级精确映射一个产品分类：

关键纪律在于：这些强调色以整块卡片填充（full-card fills）的形式出现在产品分类网格中，而从不充当按钮背景色；品牌主 CTA 始终保持近黑。

字体承担第二个决定性的声音：专有字体族WF Visual Sans Variable承担所有 display、body 与 label 角色，权重只落在 500 / 600——品牌从不越过 semibold（600），也不低于 regular（400）。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（#146ef5）：badge-info 徽标蓝。
• Accent Orange（#ff6b00）：托管 / 基础设施类产品面。
• Accent Green（#00d722）：电商 / 成功状态类产品面。
• Accent Yellow（#ffae13）：警告 / 协作类产品面。
• Accent Red（#ee1d36）：错误 / 破坏性状态。

2.2 表面色

• Canvas（#ffffff）：默认页面背景。
• Hairline（#d8d8d8）：1 px 实线描边——输入框边框、卡片镶边、分隔线。

2.3 文本色阶

文本色是一个从近黑到浅灰的六档梯度，用于精确表达信息优先级：

2.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 完整层级表

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 + body：Inter的 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 响应式策略

断点表：

触控目标：按钮渲染高度约 44 px（12 px 纵向内边距 + 25.6 px 行高），满足 WCAG AAA 要求。

折叠策略：桌面端导航为完整链接行，移动端改为汉堡菜单；分类卡片网格桌面 2 / 3 / 4 列、移动 1 列；定价层级桌面 3 / 4 列、移动 1 列。

图片行为：分类卡片是满幅纯色填充（无摄影）；产品截图以 16:9 比例装进{rounded.md}卡片镶边内；营销表面不使用竖幅人像图。

五、层级与深度：五段分层投影配方

装饰性深度：满饱和度的分类卡片（紫 / 粉 / 蓝 / 橙 / 绿整面填充）依靠与白色画布的纯色彩对比制造视觉深度；分层阴影配方是品牌唯一的"氛围"效果——它们是五段投影叠加，且每一段单独不透明度都很低。

六、形状系统：圆角刻度

圆角语义高度一致：按钮永远 4 px，卡片永远 8 px，胶囊只属于图标。这也是本文档 Do's 部分强调的"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-link：nav-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-band：canvas 上的标准内容 band，章节大标题用{typography.display-lg}。
• 五张分类卡片：category-card-purple / pink / blue / orange / green，分别是#7a3dff/#ed52cb/#3b89ff/#ff6b00/#00d722的整面填充，32 px 内边距、8 px 圆角；唯一例外是绿色卡用 ink 文字（{colors.primary}），因为亮绿色底上白字可读性差。
• badge-info+badge-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 产品界面：

这批示例的价值在于示范了"品牌原生组件 → 业务抽象组件"的迁移路径：在保留卡片 8 px 圆角、hairline 边框、32 px 内边距这些品牌令牌的前提下，把产品画廊改造成定价卡、把购物车改造成订阅抽屉，从而让 Webflow 视觉语言可以服务于 B2B / SaaS 类产品界面而不失真。

九、使用守则：Do's and Don'ts

Do（应当）

• 把{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。
• 特色卡片使用分层多偏移投影——这是品牌标志性的抬升配方。

Don't（禁止）

• 不要把按钮中等字重提到 700 以上——品牌权重上限是 600。
• 不要用彩色强调做按钮背景——它们是表面填充，不是操作。
• 不要把 CTA 渲染成胶囊——品牌按钮几何是紧凑的 4 px 矩形。
• 不要引入第六个强调色——五级色板就是这套系统。

十、落地实践：把 DESIGN.md 交给 AI 编码 Agent

最后一步是把这份设计语言真正用起来。仓库根目录 README.md 给出的使用方式只有两步：

1. 复制某个站点的DESIGN.md（例如本文分析的 design-md/webflow/DESIGN.md）到你的项目根目录；
2. 告诉 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 这份文档中完整、自洽、令牌化的定义——colors（10 个品牌 / 强调色 + 8 个表面 / 文本 / 语义色）、typography（17 个层级令牌）、rounded（5 档圆角）、spacing（8 档间距）、components（约 20 个品牌组件 + 10 个示例表面）。任何 Agent 或 LLM 只要读取该文件，就能在不知晓 Webflow 官网细节的情况下，生成配色、字号、圆角、投影与组件形态都吻合的界面——这正是"以文档为单源、以令牌为契约"的 AI 驱动设计工作流的完整示范。

• 文档