docs(test): 添加设计文档、测试规范与 E2E 测试套件

- 新增 ADR 架构决策记录 (Design DNA 集成与深化)
- 新增 CMS 系统设计文档
- 新增实施计划文档 (Phase1-3)
- 新增 Bain 品牌升级设计规格
- 新增 E2E 分层测试套件 (P1-P4)
- 新增视觉回归测试配置
- 新增光效分析、视觉验证等辅助脚本
- 更新验收测试报告

docs/adr/0003-design-dna-integration-consulting-plus-ink.md

@@ -0,0 +1,159 @@
+# ADR 0003: 设计 DNA 整合方案——咨询为骨，水墨为魂
+
+## 状态
+
+已接受
+
+## 日期
+
+2026-06-28
+
+## 上下文
+
+基于对 Accenture、Bain & Company、Porsche Consulting 三家顶级咨询公司设计体系的深度分析，结合 design-dna 技能的三维度框架（Design System + Design Style + Visual Effects），需要决定 Novalon 睿新致远的设计 DNA 整合方案。
+
+核心问题：
+1. 现有的「水墨雅致」定位与新的「咨询专业风」是什么关系？
+2. 重构的实施路径应该是什么？从零开始还是在现有基础上升级？
+3. 管理咨询风 vs 技术产品风，我们偏向哪边？HSI 架构是否需要调整？
+
+## 决策
+
+### 1. 设计定位：咨询为骨，水墨为魂
+
+**主体骨架：咨询专业风**
+- 墨色为主、留白克制、强对比排版
+- 数据驱动、答案优先的内容策略
+- 模块化网格布局、工业化组件系统
+- 参考对象：Accenture（系统化架构）+ Bain（品牌清晰度）
+
+**文化基因：水墨文化基因（降级为点缀元素）**
+- 从「整体设计风格」降级为「差异化点缀元素」
+- 使用场景（清单式管理，总数 ≤ 6 处）：
+  - Logo（书法睿字 + 印章）
+  - 页面分隔线、装饰纹样
+  - 过渡动画的水墨感
+  - 页脚角落的水墨纹理
+- 设计原则：远看专业沉稳，近看有文化韵味
+
+**品牌色：朱砂点睛**
+- 朱砂红 `#C41E3A` 保持不变
+- 面积占比 ≤ 10%
+- 使用场景：Hero 关键词、CTA 按钮、关键数字、模块标签、链接强调、下划线
+- 用法向 Bain 看齐：精准、克制、有记忆点
+
+**服务区分：编号+色条编码**
+- 主要区分：大号数字编号（01、02、03...）
+- 辅助区分：卡片左侧 4px 细色条
+- 不整卡上色，保持专业感
+
+### 2. 实施路径：三阶段升级（非推倒重来）
+
+**不是从零开始，是「对齐标准 + 清理债务 + 重点升级」**
+
+| 阶段 | 名称 | 核心任务 | 对应设计 DNA 维度 |
+|------|------|---------|-----------------|
+| **Phase 0** | 对齐与清理 | 组件版本统一、死代码清理、设计令牌审计、特效组件盘点 | Design System（打基础） |
+| **Phase 1** | 首页与核心模板升级 | 首页重构、4 类详情页模板标准化、内容叙事优化 | Design Style（立品牌） |
+| **Phase 2** | 动效与体验打磨 | 微动效系统、滚动视差、交互细节、性能优化 | Visual Effects（塑个性） |
+
+Phase 0 是最关键的一步——先统一基座，后面的工作才能高效推进。
+
+### 3. 叙事风格：入口差异化，设计语言统一
+
+**HSI 架构保持不变**（Products / Solutions / Services），但不同入口采用不同叙事风格：
+
+| 入口 | 叙事风格 | 内容侧重 | 参考对象 |
+|------|---------|---------|---------|
+| 首页 | 咨询风 | 价值主张、方法论、客户案例、数据洞察 | Bain + Accenture |
+| Solutions（方案） | 咨询风为主 | 行业痛点 → 方案架构 → 推荐组合 → 案例 | Accenture 行业方案 |
+| Products（产品） | 产品风为主，咨询风为辅 | 功能模块 → 技术规格 → 适用场景 → 相关方案 | 顶级 B2B 软件公司 |
+| Services（服务） | 咨询风 | 服务流程 → 方法论 → 团队 → 交付承诺 | Bain 服务介绍 |
+
+**设计令牌全站统一**（颜色、字体、间距、圆角、阴影），只有内容组织方式不同——骨架是一样的，只是肉的摆放不同。
+
+## 备选方案
+
+### 方案 A：纯水墨雅致路线（维持原定位）
+
+- **优点**：差异化强，有文化辨识度
+- **缺点**：
+  - To B 技术咨询场景下，专业感、可信赖感可能不足
+  - 客户决策链长，第一印象的专业度很重要
+  - 水墨风容易做得"文艺有余、专业不足"
+- **否决原因**：业务属性决定了专业感是第一优先级
+
+### 方案 B：纯咨询公司风（完全丢弃水墨）
+
+- **优点**：专业感强，符合行业惯例
+- **缺点**：
+  - 失去了「睿新致远」这个名字背后的文化内涵
+  - Logo（书法睿字 + 印章）和品牌名不搭
+  - 与 Accenture、Bain 等巨头比，缺乏差异化记忆点
+- **否决原因**：浪费了已有的品牌资产，差异化不足
+
+### 方案 C：水墨为主，咨询为辅
+
+- **优点**：视觉独特，记忆点强
+- **缺点**：
+  - 风险太高，可能显得不够专业
+  - 企业客户的采购决策者可能觉得"不靠谱"
+  - 实施难度大，平衡不好就会变味
+- **否决原因**：与 To B 技术咨询的业务属性不匹配
+
+## 理由
+
+选择「咨询为骨，水墨为魂」的核心论据：
+
+### 1. 业务匹配度最优
+- To B 技术咨询，专业感和可信赖感是第一优先级
+- 客户决策链长，需要用数据、案例、方法论建立信任
+- 咨询风的内容策略（答案优先、数据驱动）天然适配
+
+### 2. 差异化与专业性的平衡
+- 主体用咨询风，确保专业感底线
+- 细节用水墨文化基因，提供差异化记忆点
+- 「远看专业，近看有韵味」——既靠谱，又有品味
+
+### 3. 不浪费现有品牌资产
+- 朱砂红品牌色、书法 Logo、「睿新致远」命名都已确定
+- 不需要推翻重来，只是调整权重和出场方式
+- 风险可控，过渡平滑
+
+### 4. 实施路径务实
+- 不是推倒重来，而是在现有基础上对齐、清理、升级
+- Phase 0 先解决技术债务，为后续升级打基础
+- 每一步都有可量化的成果指标
+
+### 5. HSI 架构复用
+- 已经充分论证过的 HSI 架构保持不变
+- 只是不同入口的叙事风格做区分
+- 设计令牌全站统一，工程效率高
+
+## 后果
+
+### 正面
+- 专业感显著提升，更符合技术咨询公司的定位
+- 保留了文化差异化，不会沦为千篇一律的咨询公司模板
+- 实施路径清晰，风险可控，每一步都有明确的产出
+- 代码库健康度提升（Phase 0 清理债务）
+- 为未来的迭代打好了基础
+
+### 负面
+- 「水墨雅致」的粉丝可能会觉得"不够有特色了"
+- Phase 0 是脏活累活，短期看不到视觉效果
+- 两种风格的融合需要拿捏好分寸，执行不好可能不伦不类
+
+### 风险
+1. **风格融合风险**：咨询风和水墨元素如果融合不好，可能显得割裂
+   - 缓解措施：水墨元素清单式管理（≤ 6 处），严格控制使用场景
+2. **Phase 0 动力风险**：清理工作缺乏视觉成就感，容易半途而废
+   - 缓解措施：用量化指标（组件数量、文件体积、测试覆盖率）衡量进展
+3. **执行走样风险**：开发过程中可能无意识地加水墨特效，偏离主体定位
+   - 缓解措施：建立 Design Review 机制，每个新组件都对照设计 DNA 检查
+
+## 相关决策
+
+- ADR-0001: 重构路径选择——混合方案而非全站 web-design-engineer 替换
+- ADR-0002: 信息架构与叙事模型——HSI 混合架构 + 四层叙事模型
+- CONTEXT.md: 设计 DNA、咨询专业风、水墨文化基因、服务编号+色条编码等术语定义

docs/adr/0004-design-dna-deepening-accenture-bain-porsche.md

@@ -0,0 +1,261 @@
+# ADR 0004: 设计 DNA 深化方案——Accenture 骨架 + Bain 血肉 + Porsche 点睛
+
+## 状态
+
+已接受
+
+## 日期
+
+2026-06-29
+
+## 上下文
+
+ADR-0003 确立了「咨询为骨，水墨为魂」的总体设计方向，但缺乏对三家参考公司（Accenture / Bain & Company / Porsche Consulting）的深度拆解，也没有明确具体的落地路径和设计令牌细节。
+
+当前项目状态：
+- 设计令牌系统有基础（颜色/排版/间距/阴影/动效），但缺乏系统化的三级结构
+- 组件库有 91 个组件，但版本混乱（V1/V2/V3 并存）
+- 品牌红贯穿规则已建立，但执行不统一
+- 动效有基础，但缺乏统一语言和品质感
+- 内容策略有四层叙事模型，但深度不足，缺乏「答案优先」的冲击力
+
+核心问题：
+1. 三家参考公司的设计精髓分别是什么？我们具体借鉴哪些？
+2. 设计令牌系统如何从「有基础」升级到「工业化水准」？
+3. 动效品质如何从「基础」升级到「体验级」，同时保持咨询业的稳重感？
+4. 内容策略如何借鉴 Bain 的「答案优先」，首屏就抓住用户？
+
+## 决策
+
+### 1. 三维设计 DNA 整合模型
+
+基于 design-dna 技能框架，确认三个维度的整合策略：
+
+| 维度 | 主导参考 | 核心借鉴点 | 当前状态 → 目标 |
+|------|---------|-----------|----------------|
+| **Design System（设计系统）** | Accenture | 工业化令牌体系、模块化组件、服务网格、数据条 | 基础令牌 → 三级令牌体系（base/semantic/component） |
+| **Design Style（设计风格）** | Bain | 品牌色极致运用、答案优先内容策略、极简留白 | 有规则执行不一 → Bain 级品牌清晰度 |
+| **Visual Effects（视觉效果）** | Porsche Consulting | 滚动视差、数字滚动、错峰入场、Ken Burns、动效叙事 | 基础动效 → 体验级动效（克制但精致） |
+
+### 2. 四个关键设计决策（已确认）
+
+#### 决策一：颜色策略 —— 编号为主，色条为辅
+
+**保持当前方案不变**，与 ADR-0003 一致：
+- 服务线区分：大号数字编号（主要识别） + 卡片左侧 4px 细色条（辅助识别）
+- 不整卡上色，保持专业感
+- 服务色：蓝（软件）/青（数据）/琥珀（咨询）/紫（解决方案）
+- 品牌红朱砂点睛原则不变（面积 ≤ 10%）
+
+**理由**：
+- 纯颜色编码在咨询场景下显得不够专业
+- 纯编号又缺乏快速识别的视觉锚点
+- 编号+色条平衡了专业感和识别效率
+
+#### 决策二：内容策略 —— 强借鉴 Bain 「答案优先」
+
+**首页首屏直接给出核心价值主张**：
+- Hero 区域直接展示量化成果（如「服务 50+ 企业客户」「平均效率提升 30%」）
+- 每个 Section 标题改为结论句（如「成本降低 40%」而非「我们的优势」）
+- 案例研究采用 Bain 式三段式：挑战 → 方案 → 成果（成果量化展示）
+- 关键数据超大字号展示，第一眼就抓住注意力
+
+**理由**：
+- To B 决策者时间宝贵，3 秒内看懂价值才会继续往下看
+- Bain 的「答案优先」策略经过验证，专业感和说服力最强
+- 与咨询公司的「用数据说话」定位高度契合
+
+#### 决策三：动效强度 —— 体验级全场景动效叙事
+
+**Porsche Consulting 水准，但克制不炫技**：
+
+| 动效类型 | 是否启用 | 强度 | 使用场景 |
+|---------|---------|------|---------|
+| 滚动显现（Scroll Reveal） | ✅ | 中 | 全站通用 |
+| 错峰入场（Staggered Reveal） | ✅ | 中 | 卡片列表、服务网格 |
+| 视差滚动（Parallax） | ✅ | 弱（5-15% 偏移） | Hero 背景、数据条图标 |
+| 数字滚动（Number Ticker） | ✅ | 中 | Stats Bar、案例成果、Hero 指标 |
+| Ken Burns 效果 | ✅ | 极弱（scale 1.0→1.1，10-15s） | Hero 背景图、案例封面 |
+| 粒子效果 | ❌ | - | 不使用（避免视觉噪音） |
+| 光标跟随 | ❌ | - | 不使用（咨询网站不适合） |
+| WebGL/3D | ❌ | - | 现阶段不引入（保持性能和可维护性） |
+
+**动效四原则**（保持 ADR-0003 定义）：
+1. Purposeful（有目的）：每个动效服务于内容传达
+2. Fast（快节奏）：入场 200-300ms，hover 150ms，反馈 100ms
+3. Natural（自然）：统一 `ease-ink` [0.22, 1, 0.36, 1] 缓动曲线
+4. Layered（分层）：子元素 stagger 30-60ms，Section 间 100-150ms
+
+**理由**：
+- 用户明确选择「体验级」，希望用动效提升品质感
+- Porsche Consulting 用动效讲述「变革」故事，与「技术驱动变革」的品牌理念契合
+- 所有动效都支持 `prefers-reduced-motion` 降级，无障碍友好
+
+#### 决策四：排版方向 —— 三家融合方案
+
+**Accenture 信息密度 + Bain 标题对比 + Porsche 图文节奏**：
+
+- **主体排版**：Accenture 式高信息密度、数据驱动、强对比
+  - 12 级字号尺度，从 0.6875rem 到 8rem
+  - 字重从 400 到 900 的完整谱系
+  - 数据可视化驱动内容呈现
+
+- **标题和关键数据**：Bain 式超大字号 + 强对比
+  - Hero 标题：clamp(2.5rem, 5vw, 4.5rem)，字重 800
+  - 关键数字：超大字号 + 品牌色 + tabular-nums
+  - 标题/正文比例 ≥ 3:1，制造视觉张力
+
+- **图文组合和节奏**：Porsche 式电影感
+  - 分屏布局（左图右文 / 左文右图交替）
+  - 大图占比高（50-60% 视口宽度）
+  - 滚动节奏：信息密度 → 大留白 → 再信息密度，形成呼吸感
+
+**理由**：
+- 纯 Accenture 太「工业化」，缺乏品牌温度
+- 纯 Bain 太「极简」，承载不了技术咨询的信息密度
+- 纯 Porsche 太「设计感」，可能显得不够专业稳重
+- 三者融合：信息效率 + 品牌清晰度 + 品质感
+
+### 3. 三阶段落地路径
+
+| 阶段 | 名称 | 核心借鉴 | 预计工作量 | 完成度目标 |
+|------|------|---------|-----------|-----------|
+| **第一阶段** | 打好地基（Accenture 骨架） | 工业化令牌体系、模块化组件、服务网格、数据条 | 2-3 周 | 65/100 |
+| **第二阶段** | 确立品牌（Bain 血肉） | 答案优先内容、品牌红贯穿、案例三段式、极简留白 | 2-3 周 | 80/100 |
+| **第三阶段** | 塑造个性（Porsche 点睛） | 滚动视差、数字滚动、错峰入场、Ken Burns、动效叙事 | 3-4 周 | 95/100 |
+
+#### 第一阶段：打好地基（Accenture 骨架）
+
+核心任务：
+1. **设计令牌体系完善**：三级令牌命名规范（base → semantic → component），补充组件令牌
+2. **组件库系统化**：清理 V1/V2/V3 版本混乱，统一组件命名和分类
+3. **服务网格模块**：Accenture 式模块化服务卡片 + 编号 + 4px 色条
+4. **数据条组件**：Hero 下方 Stats Bar，数字滚动动画（基础版）
+5. **页面布局规范**：12 列网格系统落地，Section 间距统一
+
+验收标准：
+- 所有页面使用统一的设计令牌
+- 组件库版本统一，无重复组件
+- 服务网格和数据条组件可复用
+- TypeScript 类型检查通过，构建无错误
+
+#### 第二阶段：确立品牌（Bain 血肉）
+
+核心任务：
+1. **首页 Hero 重构**：答案优先——首屏直接给出核心价值主张 + 量化成果
+2. **品牌红贯穿优化**：每页 ≥ 3 处品牌红触达点，确保识别一致性
+3. **案例卡片重构**：Bain 式「挑战→方案→成果」三段式，超大数字展示成果
+4. **内容策略优化**：Section 标题改为结论句，答案优先的文案结构
+5. **极简留白优化**：关键区域（Hero、CTA、案例详情）增加留白，内容中心化聚焦
+
+验收标准：
+- 首页首屏 3 秒内看懂核心价值
+- 每页品牌红触达点 ≥ 3 个且 ≤ 10% 面积
+- 案例卡片采用 Bain 式三段式结构
+- 关键页面留白比例符合 Bain 式极简美学
+
+#### 第三阶段：塑造个性（Porsche 点睛）
+
+核心任务：
+1. **滚动显现系统**：全站统一 scroll reveal，错峰入场
+2. **视差滚动效果**：Hero 背景微视差，装饰元素错峰位移
+3. **数字滚动动画**：数字进入视口时计数动画，支持多种格式
+4. **Ken Burns 效果**：大图缓慢缩放，增加质感
+5. **动效语言统一**：全站缓动曲线统一为 ease-ink，时长规范落地
+6. **交互动效品质**：卡片 hover 精致化，按钮按压回弹，链接下划线展开
+
+验收标准：
+- 滚动体验流畅，60fps
+- 动效有目的性，不炫技
+- 支持 prefers-reduced-motion 降级
+- Lighthouse 性能分数 ≥ 90
+
+## 备选方案
+
+### 方案 A：克制动效级（放弃 Porsche 体验级）
+
+- **内容**：只保留滚动显现和 hover 微动效，不做视差和数字滚动
+- **优点**：开发成本低，性能好，风险小
+- **缺点**：缺乏差异化，与普通咨询网站拉不开差距
+- **否决原因**：用户明确选择「体验级」，希望打造 Porsche 级别的品质感
+
+### 方案 B：纯 Bain 极简路线（放弃 Accenture 信息密度）
+
+- **内容**：全站大留白、少文字、单栏聚焦
+- **优点**：高级感强，品牌记忆点清晰
+- **缺点**：承载不了技术咨询的大量内容，信息效率低
+- **否决原因**：技术咨询公司需要展示方法论、案例、技术栈等大量信息，纯极简不够用
+
+### 方案 C：全 Porsche 设计感路线（放弃咨询稳重感）
+
+- **内容**：大图分屏、电影感、强动效，走设计公司路线
+- **优点**：视觉冲击力强，差异化极度明显
+- **缺点**：可能显得不够专业稳重，To B 客户信任度可能下降
+- **否决原因**：技术咨询的核心是专业可信赖，设计感是加分项不是核心
+
+## 理由
+
+### 1. 与业务定位高度匹配
+
+- **Accenture 骨架**：确保工业化、可扩展、专业感底线
+- **Bain 血肉**：确保品牌清晰度、说服力、答案优先的内容策略
+- **Porsche 点睛**：提供差异化品质感，用动效讲述「技术驱动变革」
+
+三者形成互补：系统 + 清晰 + 个性，覆盖了技术咨询公司的核心需求。
+
+### 2. 实施路径务实可控
+
+- 从地基到点睛，每一步都建立在前一步的基础上
+- 每阶段都有明确的验收标准和可量化成果
+- 风险层层递进：第一阶段风险最低（工程性工作），第三阶段风险最高（设计品质要求）
+- 可以在任意阶段暂停，都能获得一个「可用且专业」的网站
+
+### 3. 资源投入合理
+
+- 第一阶段 2-3 周：解决技术债务，建立基础
+- 第二阶段 2-3 周：品牌升级，内容优化
+- 第三阶段 3-4 周：体验打磨，品质提升
+
+总周期 7-10 周，对于一个企业官网的设计升级来说是合理的。
+
+### 4. 性能与体验的平衡
+
+- 所有动效优先使用 CSS transform + opacity，GPU 加速
+- 支持 `prefers-reduced-motion` 无障碍降级
+- 不引入 WebGL/粒子等重效果，保持页面轻量
+- 目标 Lighthouse 性能分数 ≥ 90
+
+## 后果
+
+### 正面
+
+1. **专业度大幅提升**：从「有基础」升级到「工业化水准」的设计系统
+2. **品牌清晰度增强**：Bain 式的品牌色运用和答案优先策略，提升品牌记忆点
+3. **体验品质升级**：Porsche 级动效提供差异化竞争优势
+4. **可扩展性增强**：Accenture 式模块化系统支持未来业务扩张
+5. **内容说服力提升**：答案优先 + 数据驱动，提升转化率
+
+### 负面
+
+1. **开发周期较长**：7-10 周的三阶段路径，需要耐心
+2. **设计品质要求高**：Porsche 级动效对细节要求极高，做不好反而减分
+3. **内容重构工作量大**：Bain 式答案优先需要重新组织所有文案
+4. **性能维护成本**：动效越多，性能调优工作量越大
+
+### 风险
+
+1. **动效过度风险**：动效做太多太炫，显得不专业
+   - 缓解措施：动效四原则严格执行，每个动效都要有明确的目的性
+2. **内容质量风险**：答案优先需要高质量的量化数据，初创公司可能数据不足
+   - 缓解措施：用「方法论 + 框架」替代部分量化数据，真实案例优先
+3. **性能退化风险**：动效增加导致页面卡顿
+   - 缓解措施：优先 CSS 动画，IntersectionObserver 懒触发，性能基准测试
+4. **风格融合风险**：三家风格融合不好，显得不伦不类
+   - 缓解措施：设计评审机制，每个新组件都对照设计 DNA 检查
+
+## 相关决策
+
+- ADR-0001: 重构路径选择——混合方案而非全站 web-design-engineer 替换
+- ADR-0002: 信息架构与叙事模型——HSI 混合架构 + 四层叙事模型
+- ADR-0003: 设计 DNA 整合方案——咨询为骨，水墨为魂
+- CONTEXT.md: 设计 DNA、咨询专业风、水墨文化基因、服务编号+色条编码、动效四原则等术语定义