智能网页设计助手

# 企业官网（Webflow）加速交付设计方案

## 摘要
面向Webflow站点快速交付，采用移动优先12列网格与模块化组件。输出包含导航结构、组件清单、中文文案、实施步骤与发布前检查清单，确保高效上线与稳定性能。

## 分步建议

### 一、布局建议（12列，移动优先）
- 栅格规范
  - 断点：移动基线≥320，平板≥768，桌面≥992，宽屏≥1440
  - 容器：移动全宽；平板内边距24；桌面最大宽度1200，左右外边距自适应
  - 列数：全断点12列
  - 列间距：移动12；平板16；桌面20；宽屏24
  - 页面边距：移动16；平板24；桌面40；宽屏64
  - 垂直节距：8的倍数（8/16/24/32/48/64）
- 栏位建议
  - 移动：主要内容跨度12；次要跨度6或12
  - 平板：左右图文6/6；卡片4列等分
  - 桌面：图文5/7或6/6；卡片3列等分
- 组件对齐
  - Section统一上下内边距：移动48，平板64，桌面96
  - 视觉对齐：标题与按钮对齐栅格边缘
- 字体与尺寸
  - H1 32/40；H2 28/36；H3 22/30；正文16/24；小字14/22
  - 行高充足，保证中文可读性

### 二、内容建议（组件清单、导航结构、文案草稿、占位图）
- 导航结构
  - 顶部导航：LOGO / 首页 / 方案 / 价格 / 资源 / 联系 / 按钮（咨询）
  - 页脚导航：重复主导航，并含隐私与条款
- 组件清单与结构
  - 首屏Hero
    - 元素：标题/副标题/主次按钮/背景图
    - 图片占位：1920×960 背景图；图标48×48
  - 优势列表
    - 元素：区块标题/3-6项优势卡片/图标
    - 图片占位：每卡图标 64×64
  - 案例
    - 元素：区块标题/案例卡片/标签/按钮
    - 图片占位：每卡主图 800×600
  - 价格
    - 元素：区块标题/3档套餐卡/功能清单/按钮/标记
    - 图片占位：套餐徽章 96×96
  - CTA
    - 元素：标题/说明/按钮/背景装饰
    - 图片占位：装饰图 1440×320
  - 页脚
    - 元素：品牌简介/导航/联系/社媒/订阅/备案
    - 图片占位：LOGO 160×40，社媒图标 24×24
- 中文文案草稿（每段不超过60字）
  - 首屏Hero
    - 标题：以更快速度上线您的企业官网
    - 副标：Webflow驱动，稳健、易管、可增长
    - 主按钮：立即咨询
    - 次按钮：查看方案
  - 优势列表
    - 标题：为速度与增长而生
    - 优势1：即插即用组件库，加速搭建
    - 优势2：移动优先架构，性能优先
    - 优势3：可视化编辑，团队好协作
    - 优势4：SEO与分析内建，数据清晰
  - 案例
    - 标题：用更短时间，交付更好结果
    - 卡片1：客户A 科技官网 三周上线
    - 卡片2：客户B SaaS站点 线索增长
    - 卡片3：客户C 制造业站群 成本降低
    - 按钮：查看详情
  - 价格
    - 标题：透明价格，按需选择
    - 套餐1：启动版 适合小型项目
    - 套餐2：成长版 适合成长团队
    - 套餐3：旗舰版 适合复杂场景
    - 按钮：选择方案
    - 备注：价格含搭建与基础培训
  - CTA
    - 标题：准备好更快上线了吗？
    - 说明：留下信息，三小时内响应
    - 按钮：获取报价
  - 页脚
    - 简介：我们用Webflow加速企业增长
    - 联系：邮箱与电话，随时沟通
    - 备案：ICP备案号占位
- 语气与风格
  - 专业、友好、简洁，强调速度与可靠性
  - 动词导向按钮，减少名词堆砌

### 三、性能与SEO建议（加速交付导向）
- 资源优化
  - 图片导出WebP/AVIF，2×与1×成对，懒加载
  - 合理使用Lottie，避免大体积循环
  - 仅加载必要交互，减少Scroll监听
- 样式与脚本
  - 统一变量管理颜色与间距，减少类数量
  - 合并复用组件，避免重复CSS
  - 第三方脚本延迟或按需加载
- SEO与可及性
  - 语义标签：header/main/section/nav/footer
  - H1唯一，层级清晰；每图含Alt
  - 元标题与描述控制字数与关键词
  - 可见焦点态与对比度达标

### 四、实施步骤（Webflow可直接执行）
- 项目初始化
  - 新建项目与Style Guide页面
  - 创建全局变量：主色、辅色、文字、间距
  - 定义排版样式：H1-H6、段落、链接、按钮
- 栅格搭建
  - 创建12列容器类：设置列数与间距
  - 建立Section基础类：统一上下内边距
  - 为常用跨度建立预设布局（如5/7、6/6）
- 导航与页脚
  - 构建Navbar并设为Symbol
  - 设置当前状态样式与锚点跳转
  - 构建Footer并设为Symbol，加入备案与订阅
- 首页组件
  - 首屏Hero：添加背景图占位与按钮组
  - 优势列表：建立卡片并复用类
  - 案例区：使用CMS Collection List绑定字段
  - 价格区：三卡布局，突出推荐套餐
  - CTA区：对比色背景与简短表单
- CMS配置
  - 集合：案例、资源
  - 字段：标题、摘要、封面、标签、链接
  - 模板页：案例详情模板，资源文章模板
- 交互与动效
  - Hero淡入；滚动露出：20%透明至不透明
  - 悬停态：按钮与卡片轻微提升与阴影
- 响应式适配
  - 移动优先构建，向上调整列跨度
  - 调整图片裁切与文本换行
- 表单与集成
  - 联系与订阅表单，设置成功与错误提示
  - 集成分析与CRM（按需）
- 资产与发布
  - 上传优化图片与图标集
  - 设置站点域名与发布目标

### 五、发布前检查清单
- 结构与导航
  - 所有链接可用，当前态正确
  - 锚点跳转与返回顶部可用
- 内容与CMS
  - 文案无错别字，长度适配
  - CMS字段完整，模板渲染正常
- 设计与响应式
  - 断点布局无溢出，无横向滚动
  - 图文对齐，卡片等高
- 性能与资源
  - 图片WebP/AVIF，尺寸正确
  - 不必要脚本移除，动画平滑
- SEO与可及性
  - 标题与描述填写，OG图设置
  - Alt文本完整，语义标签正确
  - 可聚焦与键盘访问可用
- 合规与追踪
  - 备案信息与隐私条款
  - 分析脚本与同意管理
- 技术与错误
  - 404与密码页设计
  - 重定向与站点地图
  - 表单投递测试通过

## 注意事项
- 始终移动优先构建，再适配平板与桌面。
- 控制类名与变量数量，优先复用组件。
- 图片与动效轻量化，避免阻塞首屏渲染。
- 保持中文字体可读性，优先系统或可变字体。
- 确保颜色对比度达标，关注无障碍标准。

# 新品无线耳机促销落地页（Webflow）提升转化率优化方案

## 摘要
围绕“提升转化率”，本方案从移动端优先出发，重点优化首屏钩子、产品对比表、信任背书与CTA布局，提供A/B文案各2条，制定表单字段策略（手机号与邮箱为必填），并给出折叠FAQ与优惠条模块描述。所有建议均可在Webflow直接实施，兼顾布局、内容与性能三方面的落地执行。

## 分步建议

### 一、布局与交互结构（布局分析）
- 页面信息架构（移动端优先）
  1) 固定优惠条（顶部/底部）：限时优惠与倒计时，点击锚点跳转至表单。
  2) 首屏区（Hero）：产品主图 + 强钩子标题 + 副标题利益点 + 双CTA（立即购买/领取优惠）。
  3) 信任背书条（Above the fold）：评分、销量、质保、免运费徽章紧邻主CTA。
  4) 卖点速览：3–4个核心利益点的图标化要点（续航、降噪、低延迟、双设备）。
  5) 产品对比表：新品 vs 友商品牌/旧款，核心差异一屏可读，配“加入购物车/预约”CTA。
  6) 场景图/UGC：佩戴场景与短评，强调真实使用感。
  7) 价格与套餐：单品价 + 捆绑/加价购，突出优惠力度与时限。
  8) 保障与承诺：30天无忧退换、2年质保、全国包邮、客服在线。
  9) FAQ（折叠式）：常见疑问，一键展开/收起。
  10) 页脚：政策、客服、社媒、版权。
- Webflow实现要点
  - 使用Section + Container + Grid/Flex布局；首屏设置最小高度满足首屏可视（避免折叠后主CTA下移过多）。
  - CTA采用主按钮 + 次按钮，设置Sticky CTA（移动端底部固定）以提升可达性。
  - 对比表用2列Grid：左（新品X1），右（友商/旧款）；行内为特性点，末行放CTA。
  - FAQ用Accordion（Webflow交互）：默认全部收起，仅允许单个展开；滚动进入淡入动画（持续<250ms，避免性能负担）。
  - 优惠条设置粘性定位与可关闭按钮；点击文案滚动到表单区（Anchor链接）。

### 二、文案与模块内容（内容生成）

- 首屏钩子（A/B文案各2条）
  - A1：听见细节，赢在瞬间
  - A2：45dB深度降噪，安静只为更专注
  - B1：10分钟快充，2小时畅听
  - B2：低至45ms延迟，游戏声画零感差
  - 副标题参考（与任一主标题搭配）
    - 轻至4g｜蓝牙5.3｜双设备同时连接｜40小时总续航
- CTA按钮文案（A/B文案各2条）
  - A：立即购买；领取新品立减券
  - B：现在预定；马上省¥50
- 优惠条（移动端优先，A/B文案各2条）
  - A：限时立减¥50｜今日24:00截止
  - A：下单包邮＋30天无忧退换
  - B：新品首发｜加赠硅胶耳套
  - B：再减¥30｜叠加学生专享
- 卖点要点（图标搭配短文）
  - 主动降噪45dB｜地铁/通勤更安静
  - 低延迟45ms｜游戏观影更跟手
  - 40h总续航｜快充10min听2h
  - 双设备连接｜手机/电脑自由切换
  - IPX5防水｜运动出汗无惧
- 产品对比表（内容示例）
  - 新品X1无线耳机 vs 友商品牌M款
    - 主动降噪：45dB vs 25dB
    - 低延迟模式：45ms vs 120ms
    - 续航（单次/总）：10h/40h vs 6h/24h
    - 蓝牙版本：5.3 vs 5.0
    - 双设备连接：支持 vs 不支持
    - 快充：10min=2h vs 无
    - 防水等级：IPX5 vs IPX4
    - 售后保障：2年质保 vs 1年质保
    - 价格：¥499 vs ¥799
    - CTA：加入购物车｜立即领取优惠 vs 了解更多
- 信任背书与CTA布局
  - 紧邻首屏CTA放置：4.8/5评分（3k+评价）、30天无忧退换、2年质保、全国包邮徽章。
  - Logo墙（媒体/合作品牌/KOL推荐）置于首屏下方第一屏内，维持视觉连贯，避免稀释主CTA。
  - 用户短评（UGC）3则：每则≤60字，含“音质”“降噪”“佩戴舒适”关键词，末尾放“查看更多评价”锚点。
- 表单字段策略（手机号与邮箱为必填）
  - 字段配置
    - 手机号（必填，校验：11位中国大陆手机号格式）
    - 邮箱（必填，校验：标准Email格式）
    - 颜色/版本（可选：黑/白/限定色）
    - 购买意向（可选：立即购买/三天内/观望）
    - 备注（可选，限制100字）
  - 表单结构与微文案
    - 标题：领取新品立减券/优先发售名额
    - 提交按钮：立即领取优惠
    - 隐私提示：提交即同意接收订单与物流通知，信息仅用于服务联络
    - 错误提示：格式不正确/请填写手机号与邮箱
  - 交互与验证
    - 即时校验（onBlur）；提交前统一校验；提交后Toast反馈“已发送至邮箱/短信”
    - 防滥用：基础蜜罐字段 + 简易频控（同设备限时重复提交）
- FAQ（折叠式，移动端优先）
  - Q1：兼容哪些设备？A：iOS/Android/Windows/ macOS，蓝牙5.0及以上均可连接
  - Q2：真实续航多久？A：单次约10小时，总续航约40小时，视音量与降噪而异
  - Q3：可以同时连接两台设备吗？A：支持，手机与电脑可无缝切换
  - Q4：防水等级如何？A：IPX5，日常防汗防溅
  - Q5：售后政策？A：30天无忧退换，2年质保
  - Q6：配送时效？A：现货48小时内发出，全国包邮
  - Webflow实现：使用Dropdown/Accordion组件；默认收起；仅单项可展开；图标切换（+/-）与高度动画（200ms）
- 优惠条模块描述（移动端优先）
  - 位置与行为：底部Sticky条，始终可见；含优惠文案 + 倒计时（可选）+ CTA锚点按钮
  - 显示逻辑：滚动超过首屏后出现；用户点击关闭后24小时内不再显示（基于LocalStorage逻辑可用第三方或自定义设置）
  - 视觉建议：高对比底色；按钮宽≥48px高；文案≤18字，避免遮挡内容

### 三、性能与数据验证（优化验证）
- 性能优化（Webflow可实施）
  - 媒体：首屏主图使用WebP/AVIF；尺寸按移动端1x/2x；延迟加载非首屏图
  - 字体：只加载所需字重；预加载首屏字体；开启字形子集
  - 交互：减少滚动侦听与过度动画；禁用对比表内不必要的交互动效
  - 结构：单H1；组件复用减少DOM复杂度；避免CLS（为图像预设宽高）
- SEO/分享
  - Meta：标题≤30字，含“无线耳机/降噪/新品”；描述≤80字含核心卖点与优惠
  - Schema：Product + AggregateRating；Open Graph图与标题一致
  - Alt文本：以功能与场景描述为主
- 埋点与A/B验证
  - 关键事件：首屏CTA点击、对比表CTA点击、表单提交、优惠条点击、FAQ展开率
  - A/B配置：分别测试首屏钩子与CTA文案；分流比例50/50，样本量达标后固定优胜版本
  - 转化追踪：表单成功页/成功Toast触发转化事件；绑定来源UTM参数保留到提交

## 注意事项
- 保持视觉层级清晰：首屏仅一个主CTA与一个次CTA，避免分散注意力。
- 移动端优先：确保首屏关键信息（钩子、价格/优惠、CTA、信任徽章）在首屏内完整可见。
- 文案一致性：对比表与卖点区数值口径一致，避免前后矛盾。
- 法规与合规：隐私提示清晰；短信/邮件频率合理；支持用户取消订阅。
- 可访问性：按钮触控面积≥48px；文字对比度达标；为图像与图标添加ARIA/Alt。
- 备用路径：Sticky CTA与优惠条都指向同一表单锚点，降低流失。
- 组件复用：FAQ、徽章、卡片使用可复用Symbol（Component），便于后续快速迭代与A/B测试。

# 活动专题页品牌一致性设计规范与Webflow落地方案

## 摘要
围绕“统一品牌风格”的目标，制定适用于活动专题页的端到端设计与实现规范，涵盖配色与字体规范（含色值与层级命名）、语气风格与用词示例、内容骨架模板（Hero/故事/亮点/CTA），并给出可批量延展到多主题页的命名与复用策略与本地化字段标注。方案可直接在Webflow中实施，保证品牌一致性、可扩展性与可本地化。

## 分步建议

### 一、布局与组件架构（Webflow 落地）
- 页面结构（模块化）
  - sec/hero：首屏品牌强化与主要行动路径
  - sec/story：活动缘起/品牌故事/价值主张
  - sec/highlights：亮点卡片（3–6项）
  - sec/cta：强/弱CTA区与社证（媒体或合作LOGO）
- 响应式布局
  - 容器：container（max-width 1200px），gutter 24px
  - 栅格：12列桌面，平板6列，移动2–4列；卡片在移动端纵向堆叠
- 类命名与复用（BEM/Utility混合）
  - 区块：sec/hero、sec/story、sec/highlights、sec/cta
  - 组件：cmp/card--highlight、cmp/badge、cmp/stat
  - 按钮：btn/primary、btn/secondary、btn/ghost；尺寸修饰符 is-sm、is-lg
  - 工具类：u/flex-center、u/grid-12、u/pt-48、u/pb-48、u/text-center
  - 主题修饰符：is-theme-[keyword]（例如 is-theme-summit、is-theme-spring）
  - 暗色模式修饰符：is-dark（供深色首屏或夜间主题）
- 交互建议
  - Hero CTA按钮0.2s轻微scale与阴影增强；亮点卡片hover提升阴影与轻移位
  - 首屏淡入、滚动触发的“亮点”序列进入（延迟50–100ms阶梯）
- 访问性
  - 文字与背景对比度≥4.5:1；键盘可聚焦；aria-label用于图标按钮

### 二、视觉规范：配色与字体（含色值与层级命名）
- 配色系统（Color Tokens 与命名）
  - 品牌主色 brand/primary
    - primary-50 #EDF3FF
    - primary-100 #D6E4FF
    - primary-200 #AFC6FF
    - primary-300 #84A7FF
    - primary-400 #5E88FF
    - primary-500 #2157FF（主用）
    - primary-600 #1746D6
    - primary-700 #1136AD
    - primary-800 #0C2A87
    - primary-900 #081D5E
  - 品牌辅色 brand/secondary
    - secondary-100 #D8F6F3
    - secondary-300 #61D9CF
    - secondary-500 #16B3A5（建议用于点缀与数据高亮）
    - secondary-700 #0E857A
  - 中性色 neutral
    - gray-50 #F7F9FC
    - gray-100 #EFF3F8
    - gray-200 #E2E8F0
    - gray-300 #CBD5E1
    - gray-400 #94A3B8
    - gray-500 #64748B
    - gray-600 #475569
    - gray-700 #334155
    - gray-800 #1F2937
    - gray-900 #0B1220
  - 状态色 state
    - success #22C55E、warning #F59E0B、error #EF4444、info #0EA5E9
  - 渐变
    - brand-gradient：45° 从 #2157FF 到 #6C5CE7（用于Hero背景或按钮强调）
  - Webflow落地
    - 用Global Swatches命名：color/brand/primary-500、color/neutral/gray-900、state/success 等
    - 组件仅引用这些色板，避免直接写死色值，便于主题与品牌演进
- 字体与层级命名（Type Scale）
  - 字体栈
    - 中文正文字体：Noto Sans SC；英文字体：Inter；后备：system-ui
  - 层级命名与规格（类名与用途）
    - t/display：56/64，700（重大场景口号；Hero主标）
    - t/h1：44/56，700（页面主标题）
    - t/h2：36/48，700（区块标题）
    - t/h3：28/40，600（子标题/卡片标题）
    - t/h4：22/32，600（小标题）
    - t/h5：18/28，600（分组标题/显著标签）
    - t/body-l：18/28，400（正文大）
    - t/body-m：16/26，400（正文常规）
    - t/body-s：14/22，400（次要说明）
    - t/caption：12/18，500（注释/图注）
    - t/overline：12/16，600，字距0.08em（分节小引导，建议全大写英文时使用）
  - H标签映射
    - H1→t/h1、H2→t/h2、H3→t/h3；正文用 p + t/body-m
  - 其他基础Tokens
    - 间距：space-4/8/12/16/24/32/48/64
    - 阴影：sh/card（柔和24px）/sh/float（中等36px）
    - 层级：z/base 0、z/nav 10、z/sticky 20、z/modal 100、z/toast 200

### 三、品牌语气风格与用词示例
- 语气原则
  - 专业可信：以事实与数据支撑，不夸大其词
  - 活力鼓舞：强调参与价值与行动收益
  - 清晰直接：短句、动词开头、面向“你/您的”利益点
- 用词清单（推荐）
  - 动作：立即、探索、报名、了解更多、预约席位、下载资料
  - 价值：前沿、可信、实战、增长、洞察、高效、加速
  - 社证：行业认可、媒体报道、合作伙伴
- 用词清单（避免）
  - 过度夸张：颠覆、史无前例、唯一、秒变
  - 含糊抽象：创新升级、全面赋能（尽量配以具体成效）
- 文案模板与示例
  - Hero主标（t/display）：面向增长的年度品牌活动
  - Hero副标（t/body-l）：洞察趋势、连接伙伴、加速从灵感到落地
  - 亮点标题（t/h3）：行业领袖分享真知灼见
  - 亮点描述（t/body-s）：从策略到执行的全链路实践
  - CTA（btn/primary）：立即报名｜预约席位｜下载议程
  - 安心文案（辅助）：名额有限｜可获取回看｜支持发票与团体报名

### 四、内容骨架模板（可本地化字段标注）
- Hero
  - 结构：主标题[t/display][L10N]、副标题[t/body-l][L10N]、主CTA[按钮文案L10N+链接]、次CTA（可选）[L10N]、关键信息徽章（日期/城市/线下或线上）
  - 媒体：背景图或短视频；推荐图像1440×640（桌面），移动端换裁4:5
  - 字数建议：主标题18–24字；副标题40–80字；CTA 2–4字
  - 字段
    - hero_title [L10N]
    - hero_subtitle [L10N]
    - hero_primary_cta_label [L10N] + hero_primary_cta_link
    - hero_secondary_cta_label [L10N] + hero_secondary_cta_link（可选）
    - event_date [L10N格式化]、event_city [L10N]、event_mode（online/offline）
    - hero_media（图/视频）与 alt 文本 [L10N]
- 故事（Story）
  - 结构：区块标题[t/h2][L10N]、段落[t/body-m][L10N]、关键数据/引言（可配 cmp/stat 或引号样式）
  - 字段
    - story_title [L10N]
    - story_paragraphs [L10N]（1–3段）
    - key_stats（数值+标签 [L10N]）
    - quote_text [L10N] + quote_author [L10N]
- 亮点（Highlights）
  - 结构：3–6个卡片，图标/插画 + 标题 + 描述；每卡片标题≤14字，描述≤40字
  - 字段（集合列表）
    - highlights[]：icon、highlight_title [L10N]、highlight_desc [L10N]
- CTA
  - 结构：强视觉背景 + 主CTA + 次CTA；可含社证（合作LOGO）
  - 字段
    - cta_title [L10N]、cta_subtitle [L10N]
    - cta_primary_label [L10N] + cta_primary_link
    - cta_secondary_label [L10N] + cta_secondary_link
    - partner_logos[]（带 alt [L10N]）
- SEO/分享
  - meta_title [L10N 50–60字]、meta_description [L10N 120–150字]
  - og_title [L10N]、og_description [L10N]、og_image（1200×630）
- Webflow实现要点
  - 建立 CMS Collection：Events（单页）、Highlights（子集合，或Events内多引用字段）
  - 在模板页（Events Template）用 Collection List 绑定以上字段，所有文案字段启用 Localization
  - 组件（sec/hero 等）转为可复用 Component，属性绑定 CMS 字段

### 五、批量延展到多主题页的命名与复用策略
- 主题与品牌的关系
  - 品牌主色与排版为稳定基线，仅允许“主题修饰符”影响辅色、背景纹理、图形元素与插画风格
- 类命名与主题修饰
  - 基类：btn/primary、cmp/card--highlight、sec/hero
  - 主题修饰：is-theme-[keyword]（应用在 body 或页面根级包装器）
    - 示例：is-theme-summit、is-theme-spring、is-theme-data
    - 修饰符覆盖项：背景色、装饰图形、按钮渐变、卡片边框色
- 色板复用
  - 核心色板固定（brand/、neutral/、state/）
  - 主题色板：theme/accent-500（每主题定义1–2个点缀色，如 theme/spring-accent-500 #FF7A45）
  - 组件只使用 brand/* 与 theme/*，避免直接硬编码
- CMS与路由命名
  - 集合：Events（slug: events），主题键 theme_key（枚举：summit、spring、data）
  - 页面路径：/events/[year]-[theme_key]（例如 /events/2025-summit）
  - 多页面批量创建流程
    - 新建 Events 条目 → 选择 theme_key → 填写 [L10N] 字段 → 选择 highlights → 生成页面
- 组件库与变体
  - 按场景建立变体：sec/hero（图片版/视频版/深色版）、btn/primary（实色/渐变）
  - 高亮卡片 cmp/card--highlight（icon-left、icon-top 两种布局）
- 设计 Token 管理
  - 在项目首页建立“设计规范”样式页，集中展示 color/*、t/*、btn/*、cmp/*，便于团队复用与QA

### 六、性能与可维护性优化（简要）
- 字体：仅加载所需字重（400/600/700）；启用字体子集（中文优先简体）
- 图片：WebP/AVIF优先；启用Webflow Responsive Images；Hero视频≤2–3MB，懒加载非首屏媒体
- 交互：复用交互定义；避免对大量元素逐个绑定动画；使用父级触发器
- SEO：页面唯一H1；语义化标签；结构化数据（Event schema）；OG/Twitter卡片配置完整

## 注意事项
- 品牌一致性
  - 仅通过主题修饰符调整辅色与装饰，不改变 brand/primary 与核心字体层级
  - 所有组件只引用 Global Swatches 与 t/* 类型类，禁止直接写色值与字号
- Webflow实施规范
  - 组件先搭再绑定CMS；尽量使用组合类（基类 + 修饰符），控制类爆炸
  - 在 Body 上应用 is-theme-[keyword] 作为主题入口；深色首屏用 is-dark 修饰局部
- 本地化与合规
  - 严格区分 [L10N] 与非本地化字段；日期与货币按区域格式化
  - 图片与字体版权可用且可商用；品牌与合作LOGO需确认授权
- 交互与无障碍
  - Hover与焦点状态一致；键盘可达；为装饰性图形添加 aria-hidden
- 发布与回归
  - 建立“规范页 + 组件页 + 模板页”三层结构；每次主题更新先在规范页验证
  - 使用备份版本发布；对关键色板与t/*变更进行可视化回归检查

以上方案可在Webflow中直接落地，确保活动专题页在多主题延展下保持品牌一致、结构清晰、内容易于本地化与规模化生产。