Webflow 将网页布局、Class 样式和 CMS 内容管理放在视觉建站流程中，适合营销页面和需要持续更新内容的网站。产品入口：Webflow官方页面。

1. 站点结构：Webflow是什么，适合什么团队

Webflow适合把页面结构、视觉样式和内容集合放在同一套建站流程中管理。它更接近网站实现与发布环节，不能替代需求梳理、产品原型或团队设计评审。先区分静态页面、CMS 列表和营销落地页，再决定是否用同一套组件。

对于案例、文章等重复内容，先确定集合字段与详情页模板；对于首页、定价页等固定页面，先确定导航、内容区块和响应式布局。两类页面共用颜色、字体和间距，更新内容时更容易保持一致。

2. Class 样式：核心功能与工作边界

Class 样式适合管理重复使用的视觉规则。按钮、导航和卡片先统一字体、颜色、容器宽度与间距，再处理不同页面的差异。CMS 集合负责存放重复内容，页面模板负责呈现这些字段：内容与样式分开后，新增一篇案例不必重新排版整页。

先建立页面树和导航，再定义颜色、字号、容器和间距等基础样式；随后为重复内容建立集合字段，制作列表页与详情页模板；最后在桌面、平板、390px 手机宽度逐项检查。每一步都要留下一个可回退版本，避免为了修一张卡片而重做整站。

以 SaaS 官网为例：先在 Pixso 中画首页、定价页、案例列表和案例详情四类页面；在 Webflow 中将案例名称、行业、封面、摘要、客户标签拆成集合字段。列表页验证空结果和分页，详情页验证长标题、图片比例和分享描述，发布后再从真实域名回看导航与规范链接。

响应式布局需要同时照顾内容顺序和可读性。桌面端的多列卡片到了手机端通常要改成单列；长标题、空图片和较长按钮文案则容易暴露容器宽度与间距问题。先在一个模板页解决这些情况，再把同一套规则用于其他集合页面。

与 Figma 或 Sketch 相比，Webflow承担的网站实现和发布范围更靠后；与 Framer 相比，选择时要看团队更重视 CMS 内容管理、视觉编辑还是动效探索。Pixso适合在工具切换前统一组件、状态和验收口径。

迁移网站时，先盘点旧站页面、表单、图片、第三方脚本和重定向。CMS 内容需要对应到新集合的字段，并在列表页和详情页分别检查。保留旧 URL 与新 URL 的对应关系，再核对 slug、canonical、robots、站点地图和 404 页面。

发布前检查标题与描述是否来自真实页面，图片是否有宽高和替代文本，字体与脚本是否阻塞首屏，表单失败是否有反馈。对 Webflow 类网站还要检查集合权限、动态链接和重定向规则。

网站还处于布局讨论阶段时，可以在 Pixso 中统一页面结构与组件，再到 Webflow 中实现网站和管理 CMS 内容。可以进入Pixso UI 设计协作，查看原型设计、设计系统，或直接进入 Pixso 工作台。