docs(planning): add Bain differentiation plan, spec and design critique

- Document design audit findings and recommended direction - Add implementation plan for Bain-aligned content differentiation
2026-07-08 14:47:26 +08:00
parent a6ea2cc72c
commit dc8bb76266
3 changed files with 917 additions and 0 deletions
@@ -0,0 +1,144 @@
+---
+target: current UI/UX design vs Bain
+total_score: 24
+p0_count: 1
+p1_count: 4
+p2_count: 1
+timestamp: 2026-07-07T12-40-50Z
+slug: src-app-marketing
+---
+Method: dual-agent (A: design review · B: detector + browser evidence)
+
+## Design Health Score
+
+| # | Heuristic | Score | Key Issue |
+|---|-----------|-------|-----------|
+| 1 | Visibility of System Status | 2 | Active nav exists; homepage crashes with only “出错了” + toast, no useful status |
+| 2 | Match System / Real World | 3 | Chinese enterprise context fits, but terms like “数据中台” / “全链路” are jargon for non-technical buyers |
+| 3 | User Control and Freedom | 3 | Standard back/forward works; error page only offers “重试”, no escape path |
+| 4 | Consistency and Standards | 3 | Tokens are consistent, but product/solution/service pages use nearly identical card templates → monotony |
+| 5 | Error Prevention | 2 | Form labels present, yet the homepage crashes before any prevention can happen |
+| 6 | Recognition Rather Than Recall | 3 | Mega dropdown + labeled icons help, but too many cards strain working memory |
+| 7 | Flexibility and Efficiency | 2 | No search, no shortcuts, no recent items; power users must browse level by level |
+| 8 | Aesthetic and Minimalist Design | 2 | White space is generous, but repeated eyebrow labels, big numbers, and zero imagery create noise + monotony |
+| 9 | Error Recovery | 1 | Error boundary text is vague, no diagnosis or recovery guidance |
+| 10 | Help and Documentation | 1 | No FAQ, no contextual help, no whitepaper download; pages must self-explain |
+| **Total** | | **24 / 40** | **Acceptable — significant improvements needed** |
+
+## Anti-Patterns Verdict
+
+**LLM assessment: Yes, the site reads as AI-generated.**
+
+Tells found across the marketing surface:
+- Repeated `01/02/03…` card numbering on product, solution, and service grids — used as decoration, not real sequence.
+- Tiny uppercase eyebrow labels (“Product Matrix”, “Industry Expertise”, “Our Process”, etc.) above nearly every section.
+- Identical card templates reused across three different business pages: icon + number + title + description + tag + link.
+- Side-stripe borders on cards (colored left/right bars on hover) — explicitly banned in the Impeccable register.
+- Generic hero metrics (“6+ 产品线 / 100% 自研率 / 全栈技术覆盖”) — the SaaS cliché.
+- Zero real photography or screenshots; every page is icons + text.
+- Tight Chinese typography with `leading-[0.88–0.92]` and `tracking-tighter`, harming readability.
+
+**Deterministic scan (Assessment B):**
+- CLI detector hit 2 warnings: `bounce-easing` in `detail.test.tsx` (test file — noise/false positive) and `layout-transition` (`transition: width`) in `src/components/ui/scroll-progress.tsx` (real).
+- Browser overlay on 5 pages found: `layout-transition: width/height`, `low-contrast 2.6:1` for `#94a3b8` text on white (WCAG AA failure), `single-font: pingfang sc` (likely false positive from fallback resolution), and `image-hover-transform` on `<img>`.
+- Console shows repeated Framer Motion `useScroll` hydration errors on the homepage: `Target ref is defined but not hydrated`.
+
+**Visual overlays:** Assessment B injected the detector overlay successfully via Playwright headless; screenshots are saved in `/private/tmp/impeccable-screenshots/`. No persistent user-visible overlay is active in the IDE browser.
+
+## Overall Impression
+
+The site has a disciplined token system and a clear four-layer narrative structure, but it currently ships as a generic AI-template consulting landing page. The biggest single issue is that the homepage does not render — it collapses with a React error boundary. Even if that were fixed, the lack of real imagery, repeated card templates, and weak proof points leave it far behind Bain’s editorial confidence.
+
+## What’s Working
+
+1. **Token and design-system discipline** — colors, typography, spacing, and shadows are fully variable-driven in `globals.css`; the cinnabar red `#C41E3A` is used with restraint.
+2. **Four-layer narrative is consistent** — every detail page follows Hero → Value → Trust → CTA, giving visitors a stable mental model.
+3. **Responsive and motion-respect basics are in place** — `prefers-reduced-motion`, focus-visible, 44×44 touch targets, and mobile safe-area handling show engineering care.
+
+## Priority Issues
+
+### [P0] Homepage crashes on load
+- **What**: `http://localhost:3000/` renders an error boundary with heading “出错了” and a “4 errors” toast. Console points to `HeroSection` in `home-content-v13.tsx` throwing `Target ref is defined but not hydrated` from Framer Motion `useScroll`.
+- **Why it matters**: For a B2B consulting site, the homepage is the trust front door. A crashing first impression is catastrophic for CEO/CIO/CTO visitors.
+- **Fix**: Guard the scroll ref in `HeroSection`; add a robust fallback UI for empty or malformed CMS data; log the error source.
+- **Suggested command**: `$impeccable harden`
+
+### [P1] Zero real imagery across the entire site
+- **What**: No photography, team portraits, client scenes, or product screenshots anywhere; every page relies on Lucide icons and geometric decoration.
+- **Why it matters**: Brand consulting sites are judged first on credibility. Icons alone read as template work and undermine the “沉稳 · 精致 · 可信赖” brand promise.
+- **Fix**: Introduce 1–3 high-quality real images on the hero, case-study, and about/team sections. Avoid replacing photography with colored blocks or icon grids.
+- **Suggested command**: `$impeccable shape`
+
+### [P1] Product / solution / service pages are the same template
+- **What**: All three listing pages use identical “icon + big number + title + description + tag + link” cards. Visitors cannot visually distinguish what type of offering they are looking at.
+- **Why it matters**: It reinforces the AI-template feel and causes reading fatigue; it also fails to match the different mental models for products (features), solutions (industry pain), and services (process).
+- **Fix**: Give each listing page a distinct module language — product cards can carry feature screenshots, solution cards can lead with industry pain + outcome, service cards can show process steps and deliverables.
+- **Suggested command**: `$impeccable distill`
+
+### [P1] Uppercase eyebrow labels repeat on every section
+- **What**: Sections are prefaced with labels like “Product Matrix”, “Industry Expertise”, “Professional Services”, “Our Process”.
+- **Why it matters**: This is one of the strongest AI-landing-page grammar markers of 2023–2026 and strips away brand uniqueness.
+- **Fix**: Keep at most one deliberate label system; otherwise use short Chinese section introductions or let typography alone create hierarchy.
+- **Suggested command**: `$impeccable distill`
+
+### [P2] Low-contrast helper text fails WCAG AA
+- **What**: Detector measured `2.6:1` for `#94a3b8` text on white; WCAG AA requires `4.5:1` for body text.
+- **Why it matters**: Small muted labels and placeholders become unreadable for users with low vision or on bright screens, and it feels cheap.
+- **Fix**: Bump helper/muted text to at least `#64748B` on white, or darken the body text toward `--color-text-primary`.
+- **Suggested command**: `$impeccable audit`
+
+## Persona Red Flags
+
+**Jordan（首次访问者）**
+- 首页直接看到“出错了”，5 秒内无法判断是公司问题还是自己的问题，极大概率离开。
+- 即便首页正常，面对 6 个产品卡片和“数据中台”“全链路”等术语，没有解释入口。
+- 没有明确的“从这里开始”引导，CTA 多但目的不清晰。
+
+**Riley（压力测试者）**
+- 首页崩溃且错误信息模糊，无诊断细节。
+- 案例使用匿名客户（“某上市制造企业”），无法验证真实性。
+- “500+ 项目验证”与关于页 2014 起步的时间线存在可信度张力。
+- 联系表单未展示对 XSS、超长输入、特殊字符等边界情况的处理。
+
+**Casey（移动用户）**
+- 主要 CTA“立即咨询”在顶部导航，单手拇指难以触及。
+- 联系表单字段多，无智能默认值或自动填充优化。
+- 长页面依赖汉堡菜单，无底部快捷导航。
+- 首页崩溃在移动端更容易直接返回搜索结果。
+
+**Wei（中国 Fortune 500 CIO，重视结果证明与文化可信度）**
+- 首页崩溃是首要红旗——对大型采购决策者不可接受。
+- 看不到任何 Fortune 500 级客户名称、具体项目负责人、可验证的业务成果。
+- 团队页无真实高管/顾问照片与背景介绍，难以建立“同行者”信任。
+- 没有行业认证、合作伙伴背书、白皮书下载等深度信任资产。
+
+## Minor Observations
+
+- Cards use side-stripe borders on hover (`border-left/right` colored accent) — banned decorative pattern.
+- `scroll-progress.tsx` animates `width`, causing layout thrash; should use `scaleX` on a transform layer.
+- Several H1/H2 lines use `leading-[0.88–0.92]` and `tracking-tighter`; Chinese dense strokes become hard to read.
+- Image hover transforms are applied directly to `<img>` elements; if used, keep subtle and respect reduced motion.
+- The homepage Framer Motion `useScroll` error repeats 6+ times and is caught by the global error tracker.
+- Footer ICP/公安备案 and WeChat QR code are good local trust signals, but buried deep.
+- Mixed English eyebrows with Chinese headings make the brand voice feel less decisive.
+
+## Questions to Consider
+
+- If the homepage cannot render in dev, what is the current production deployment status, and is the crash already live?
+- Do you have real team photos, client logos, or case-study imagery that can replace the icon grids, or should we source credible stock first?
+- Are “01/02/03” numbering and uppercase eyebrows a deliberate brand system, or inherited scaffolding that can be removed?
+
+## Gap vs Bain & Company
+
+| Dimension | Bain | Novalon current | Gap |
+|---|---|---|---|
+| Imagery | Real people, client scenes, team photography | Zero photography; only Lucide icons | Large |
+| Client proof | Named clients, specific business outcomes, quantified impact | Anonymous “某上市制造企业”, generic percentages | Large |
+| Data proof | Concrete figures ($300M saved, 2.5× stock price, 90% FTE reduction) | “40% 效率提升 / 3× 决策效率” without source | Medium |
+| Interactive entry | “Answer two questions” industry/problem funnel | No personalization; only fixed browse | Medium |
+| Thought leadership | Latest briefs, client results, insights on homepage | No recurring insights/research module | Medium |
+| Team credibility | Advisor photos, author bylines, team bios | About page lacks real portraits | Large |
+| Module diversity | Hero, case carousel, Q&A funnel, article cards, CTA | Three listing pages use the same card grid | Large |
+| Stability | No visible crashes | Homepage crashes on load | Critical |
+
+**Core conclusion**: Novalon is currently a feature-list template site; Bain is a trust-building editorial platform. Closing the gap requires, in order: fix the homepage crash, introduce real imagery, replace anonymous proof with verifiable case studies, and diversify the page modules beyond the single card-grid template.
@@ -0,0 +1,569 @@
+# Bain 对标深化实现计划
+
+> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
+
+**目标：** 在不引入外部图片的前提下，通过数据可视化、结构化文案、页面模块差异化，消除产品/解决方案/服务三页的 AI 模板同质化痕迹，提升案例可信度，并确保所有测试通过。
+
+**架构：** 数据层（`products.ts`、`solutions.ts`、`services.ts`、`cases.ts`、`cms/types.ts`）新增差异化字段；UI 层（三个列表页、`sections.tsx`、案例详情页）按新数据结构重新组织卡片布局；测试层同步更新选择器与断言。
+
+**技术栈：** Next.js 14 App Router、React 18、TypeScript 5、Tailwind CSS 3、Framer Motion、Lucide React。
+
+---
+
+## 文件清单
+
+| 文件 | 职责 |
+|---|---|
+| `src/lib/constants/products.ts` | 扩展 `Product` 接口与数据：场景定位、能力指标、套装分组、核心能力 pills |
+| `src/lib/constants/solutions.ts` | 扩展 `Solution` 接口与数据：痛点、可量化结果、推荐产品组合 |
+| `src/lib/constants/services.ts` | 调整服务数据，补充能力条目；改造流程常量结构 |
+| `src/lib/constants/cases.ts` | 扩展 `CaseStudy` 接口与数据：项目周期、涉及部门、数据规模、业务问题、verified 标记 |
+| `src/lib/cms/types.ts` | 同步扩展 `CaseStudyData`，与 `cases.ts` 字段保持一致 |
+| `src/app/(marketing)/products/products-content-v3.tsx` | 产品页新布局：套装关系图 + 指标驱动卡片 |
+| `src/app/(marketing)/solutions/solutions-content-v3.tsx` | 解决方案页新布局：问题-结果卡 + 产品组合 pills |
+| `src/app/(marketing)/services/services-content-v3.tsx` | 服务页新布局：能力清单卡片 + 中文流程时间轴 |
+| `src/components/content/sections.tsx` | 改造服务流程时间线：移除 uppercase 英文标签 |
+| `src/components/sections/case-detail-page.tsx` | 案例详情页展示新增可验证维度 |
+| `src/lib/cms/mock-data.ts`（如存在案例相关 mock） | 同步更新 CMS mock 数据，与 `cases.ts` 字段一致 |
+| `e2e/` 相关测试 | 更新选择器，确保不因 DOM 结构变化失败 |
+| `src/**/*.test.ts{,x}` | 更新单元测试，覆盖新字段与组件渲染 |
+
+---
+
+## 任务 1：扩展产品数据层
+
+**文件：**
+- 修改：`src/lib/constants/products.ts`
+
+### 步骤 1：扩展 Product 接口
+
+在 `Product` 接口中新增以下字段：
+
+```typescript
+export interface Product {
+  id: string;
+  name: string;
+  subtitle: string;
+  description: string;
+  features: string[];
+  benefits: string[];
+  // ... 已有字段
+  scenario?: string;
+  metrics?: { value: string; label: string }[];
+  bundle: 'enterprise' | 'standalone';
+  capabilities?: string[];
+}
+```
+
+### 步骤 2：为每个产品填充新字段
+
+为 6 款企业产品补充 `scenario`、`metrics`（3 项）、`bundle: 'enterprise'`、`capabilities`（3-4 项）。
+为独立产品（如 NovaVis）补充 `bundle: 'standalone'`。
+
+示例（ERP）：
+
+```typescript
+scenario: '面向中大型制造与零售企业的核心运营系统',
+metrics: [
+  { value: '10 万级', label: 'SKU 支撑' },
+  { value: '200+', label: '标准报表模板' },
+  { value: '99.5%', label: '数据准确率' },
+],
+bundle: 'enterprise',
+capabilities: ['财务核算', '采购管理', '生产计划', '库存控制'],
+```
+
+### 步骤 3：运行相关产品单元测试
+
+运行：`npx jest --testPathPatterns=products`
+预期：如测试依赖旧字段，按失败提示更新断言，不修改业务语义。
+
+---
+
+## 任务 2：扩展解决方案数据层
+
+**文件：**
+- 修改：`src/lib/constants/solutions.ts`
+
+### 步骤 1：扩展 Solution 接口
+
+```typescript
+export interface Solution {
+  id: string;
+  title: string;
+  industry: string;
+  description: string;
+  // ... 已有字段
+  painPoints?: string[];
+  outcomes?: { value: string; label: string }[];
+  recommendedProducts?: string[];
+}
+```
+
+### 步骤 2：为每个解决方案填充新字段
+
+为 6 个行业解决方案补充：
+- `painPoints`：1-2 个核心痛点（中文）
+- `outcomes`：1-2 个可量化结果
+- `recommendedProducts`：推荐产品 ID 数组（如 `['erp', 'crm', 'bi']`）
+
+### 步骤 3：运行相关测试
+
+运行：`npx jest --testPathPatterns=solutions`
+预期：通过或按提示更新测试。
+
+---
+
+## 任务 3：调整服务数据层
+
+**文件：**
+- 修改：`src/lib/constants/services.ts`
+
+### 步骤 1：为每个服务补充能力条目
+
+在 `Service` 接口中确保有 `features` 字段用于能力清单展示。如缺少，新增 `capabilities?: string[]`。
+
+为每个服务填充 3-4 个能力条目，例如咨询服务：
+
+```typescript
+capabilities: [
+  '现状诊断与数字化成熟度评估',
+  '业务流程重构与路线图设计',
+  '技术架构选型与投资回报测算',
+  '变革管理与落地陪跑',
+],
+```
+
+### 步骤 2：调整服务流程常量
+
+将现有流程数组：
+
+```typescript
+const SERVICE_PROCESS = [
+  { step: '01', title: '需求分析', desc: '...' },
+  // ...
+];
+```
+
+改造为：
+
+```typescript
+const SERVICE_PROCESS = [
+  {
+    phase: '需求分析',
+    duration: '2-3 周',
+    deliverables: ['业务痛点清单', '现状评估报告', '项目范围说明书'],
+  },
+  {
+    phase: '方案设计',
+    duration: '4-6 周',
+    deliverables: ['系统架构设计', '实施路线图', '投资测算模型'],
+  },
+  {
+    phase: '敏捷交付',
+    duration: '3-6 个月',
+    deliverables: ['分阶段上线版本', '用户培训材料', '数据迁移方案'],
+  },
+  {
+    phase: '持续支持',
+    duration: '长期',
+    deliverables: ['运维监控体系', '迭代优化计划', '知识转移文档'],
+  },
+];
+```
+
+---
+
+## 任务 4：扩展案例数据层
+
+**文件：**
+- 修改：`src/lib/constants/cases.ts`
+- 修改：`src/lib/cms/types.ts`
+
+### 步骤 1：扩展 CaseStudy 接口
+
+```typescript
+export interface CaseStudy {
+  id: string;
+  slug: string;
+  client: string;
+  industry: string;
+  companySize: string;
+  title: string;
+  subtitle: string;
+  challenge: string;
+  solution: string;
+  result: string;
+  metrics: CaseMetric[];
+  timeline: CaseTimelinePhase[];
+  services: CaseService[];
+  testimonial?: CaseTestimonial;
+  color: 'brand' | 'blue' | 'teal' | 'amber' | 'purple';
+  featured?: boolean;
+  // 新增
+  projectDuration?: string;
+  departments?: string[];
+  dataScale?: string;
+  businessProblem?: string;
+  verified?: boolean;
+}
+```
+
+### 步骤 2：为每个案例填充可验证维度
+
+为 `CASE_STUDIES` 中每个案例补充：
+- `projectDuration`
+- `departments`
+- `dataScale`
+- `businessProblem`（比 `challenge` 更具体的一句话）
+- `verified: false`（预留字段，当前未公开验证）
+
+### 步骤 3：同步 CMS 类型
+
+在 `src/lib/cms/types.ts` 的 `CaseStudyData` 中新增相同字段：
+
+```typescript
+export interface CaseStudyData {
+  client: string;
+  industry: string;
+  companySize: string;
+  subtitle: string;
+  challenge: string;
+  solution: string;
+  result: string;
+  metrics: CaseMetric[];
+  timeline: CaseTimelinePhase[];
+  services: CaseService[];
+  testimonial?: CaseTestimonial;
+  color: 'brand' | 'blue' | 'teal' | 'amber' | 'purple';
+  featured?: boolean;
+  projectDuration?: string;
+  departments?: string[];
+  dataScale?: string;
+  businessProblem?: string;
+  verified?: boolean;
+}
+```
+
+### 步骤 4：同步 CMS mock 数据
+
+如果 `src/lib/cms/mock-data.ts` 或相关文件包含案例 mock 数据，同步添加新字段。
+
+### 步骤 5：运行案例相关测试
+
+运行：`npx jest --testPathPatterns=cases`
+预期：通过或按提示更新。
+
+---
+
+## 任务 5：产品页 UI 改造
+
+**文件：**
+- 修改：`src/app/(marketing)/products/products-content-v3.tsx`
+
+### 步骤 1：改造 Hero 文案
+
+将标题中的“产品矩阵”改为问题-结果叙事。例如：
+
+```typescript
+<motion.h1 ...>
+  <div className="block">用自研产品组合</div>
+  <div className="block mt-5">
+    <span className="text-brand font-extrabold">支撑企业核心系统升级</span>
+  </div>
+</motion.h1>
+```
+
+副文案强调“从数据智能到业务协同，每一款产品都经过实战验证”。
+
+### 步骤 2：新增套装关系图模块
+
+在 Hero 与产品卡片之间新增一个轻量模块 `BundleOverview`：
+
+- 展示两列：企业套装（6 款产品）与专业产品（独立产品）。
+- 使用小圆点 + 产品名 + 一句定位。
+- 使用 CSS grid 布局，不引入图片/SVG 复杂度。
+
+### 步骤 3：改造产品卡片
+
+将 `ProductCard` 从图标中心改为以下结构：
+
+```tsx
+<motion.a href={`/products/${product.id}`} ...>
+  <div className="flex items-start justify-between mb-4">
+    <div>
+      <div className="text-xs text-text-muted mb-1">{bundleLabel}</div>
+      <h3 className="text-lg font-bold text-text-primary">{product.name}</h3>
+    </div>
+    <span className="px-2 py-1 text-xs bg-brand/10 text-brand">{product.bundle === 'enterprise' ? '企业套装' : '专业产品'}</span>
+  </div>
+  <p className="text-sm text-text-secondary mb-4 leading-relaxed">{product.scenario || product.description}</p>
+  <div className="grid grid-cols-3 gap-2 mb-4">
+    {product.metrics?.map((m) => (
+      <div key={m.label} className="text-center p-2 bg-bg-secondary">
+        <div className="text-lg font-bold text-text-primary">{m.value}</div>
+        <div className="text-xs text-text-muted">{m.label}</div>
+      </div>
+    ))}
+  </div>
+  <div className="flex flex-wrap gap-2">
+    {product.capabilities?.map((cap) => (
+      <span key={cap} className="px-2 py-1 text-xs border border-border-primary text-text-secondary">{cap}</span>
+    ))}
+  </div>
+</motion.a>
+```
+
+移除卡片内大图标。
+
+### 步骤 4：运行产品页相关 E2E
+
+运行：`npx playwright test p6-missing-paths.spec.ts --config=playwright.local.config.ts --grep "产品"`
+预期：通过。如因 DOM 结构变化失败，更新测试中的选择器。
+
+---
+
+## 任务 6：解决方案页 UI 改造
+
+**文件：**
+- 修改：`src/app/(marketing)/solutions/solutions-content-v3.tsx`
+
+### 步骤 1：改造 Hero 文案
+
+在副文案中增加结果承诺，例如：
+
+```typescript
+<p ...>
+  端到端交付可量化的业务成果。
+  <br className="hidden sm:block" />
+  基于自研产品矩阵，为制造、零售、教育、医疗、金融、物流六大行业沉淀最佳实践。
+</p>
+```
+
+### 步骤 2：改造行业卡片
+
+将 `SolutionCard` 改为问题-结果卡：
+
+```tsx
+<motion.a href={`/solutions/${solution.id}`} ...>
+  <div className="flex items-center gap-3 mb-4">
+    <Icon className="w-5 h-5 text-text-muted" />
+    <h3 className="text-lg font-bold text-text-primary">{solution.industry}</h3>
+  </div>
+  <div className="mb-4">
+    <div className="text-xs text-text-muted mb-2">核心痛点</div>
+    <p className="text-sm text-text-secondary leading-relaxed">{solution.painPoints?.join('、')}</p>
+  </div>
+  <div className="grid grid-cols-2 gap-2 mb-4">
+    {solution.outcomes?.map((o) => (
+      <div key={o.label} className="p-2 bg-bg-secondary">
+        <div className="text-base font-bold text-brand">{o.value}</div>
+        <div className="text-xs text-text-muted">{o.label}</div>
+      </div>
+    ))}
+  </div>
+  <div className="pt-4 border-t border-border-primary">
+    <div className="text-xs text-text-muted mb-2">推荐产品组合</div>
+    <div className="flex flex-wrap gap-2">
+      {recommendedProductNames.map((name) => (
+        <span key={name} className="px-2 py-1 text-xs bg-bg-secondary text-text-secondary">{name}</span>
+      ))}
+    </div>
+  </div>
+</motion.a>
+```
+
+### 步骤 3：运行解决方案页相关 E2E
+
+运行：`npx playwright test --config=playwright.local.config.ts --grep "解决方案|solution"`
+预期：通过。
+
+---
+
+## 任务 7：服务页 UI 改造
+
+**文件：**
+- 修改：`src/app/(marketing)/services/services-content-v3.tsx`
+
+### 步骤 1：改造服务卡片
+
+移除大图标居中设计，改为：
+
+```tsx
+<motion.a href={`/services/${service.id}`} ...>
+  <h3 className="text-lg font-bold text-text-primary mb-2">{service.title}</h3>
+  <p className="text-sm text-text-secondary mb-4 leading-relaxed">{service.description}</p>
+  <ul className="space-y-2 mb-4">
+    {service.capabilities?.slice(0, 4).map((cap) => (
+      <li key={cap} className="flex items-start gap-2 text-sm text-text-secondary">
+        <CheckCircle2 className="w-4 h-4 text-brand shrink-0 mt-0.5" />
+        {cap}
+      </li>
+    ))}
+  </ul>
+  <div className="flex gap-4 pt-4 border-t border-border-primary">
+    {service.metrics?.map((m) => (
+      <div key={m.label}>
+        <div className="text-base font-bold text-text-primary">{m.value}</div>
+        <div className="text-xs text-text-muted">{m.label}</div>
+      </div>
+    ))}
+  </div>
+</motion.a>
+```
+
+### 步骤 2：改造流程时间轴
+
+将 `SERVICE_PROCESS` 的新结构渲染为时间轴：
+
+```tsx
+<div className="relative">
+  {SERVICE_PROCESS.map((step, index) => (
+    <div key={step.phase} className="relative pl-8 pb-12 last:pb-0">
+      <div className="absolute left-0 top-0 w-px h-full bg-border-primary" />
+      <div className="absolute left-0 top-1 w-2 h-2 -translate-x-1/2 rounded-full bg-brand" />
+      <div className="flex items-center gap-3 mb-2">
+        <h4 className="text-base font-bold text-text-primary">{step.phase}</h4>
+        <span className="text-xs text-text-muted">{step.duration}</span>
+      </div>
+      <div className="text-xs text-text-muted mb-2">阶段产出</div>
+      <ul className="space-y-1">
+        {step.deliverables.map((d) => (
+          <li key={d} className="text-sm text-text-secondary">{d}</li>
+        ))}
+      </ul>
+    </div>
+  ))}
+</div>
+```
+
+### 步骤 3：运行服务页相关 E2E
+
+运行：`npx playwright test --config=playwright.local.config.ts --grep "服务|service"`
+预期：通过。
+
+---
+
+## 任务 8：sections.tsx 服务流程时间线改造
+
+**文件：**
+- 修改：`src/components/content/sections.tsx`
+
+### 步骤 1：移除 uppercase 标签
+
+找到流程时间线卡片中的以下代码：
+
+```tsx
+<span className="text-xs font-bold tracking-[0.2em] uppercase" style={{ color: accentColor }}>
+  {step.phase}
+</span>
+```
+
+改为：
+
+```tsx
+<span className="text-xs font-bold text-text-muted">
+  {`第 ${index + 1} 阶段：${step.phase}`}
+</span>
+```
+
+找到：
+
+```tsx
+<div className="text-xs text-text-muted mb-3 font-medium uppercase tracking-wider">
+  交付物
+</div>
+```
+
+改为：
+
+```tsx
+<div className="text-xs text-text-muted mb-3 font-medium">
+  阶段产出
+</div>
+```
+
+### 步骤 2：运行相关测试
+
+运行：`npx jest --testPathPatterns=sections`
+预期：通过。
+
+---
+
+## 任务 9：案例详情页展示可验证维度
+
+**文件：**
+- 修改：`src/components/sections/case-detail-page.tsx`
+- 修改：`src/app/(marketing)/cases/[slug]/client.tsx`
+
+### 步骤 1：传递新增字段
+
+在 `client.tsx` 的 `detailData` 中新增字段：
+
+```typescript
+const detailData = {
+  // ... 已有字段
+  projectDuration: data.projectDuration,
+  departments: data.departments,
+  dataScale: data.dataScale,
+  businessProblem: data.businessProblem,
+  verified: data.verified,
+};
+```
+
+### 步骤 2：改造 CaseDetailPage 组件
+
+在案例详情页顶部（Hero 区域）增加可验证维度条：
+
+```tsx
+<div className="flex flex-wrap gap-6 text-sm text-text-secondary border-y border-border-primary py-4 mb-8">
+  {projectDuration && <div><span className="text-text-muted">项目周期</span> {projectDuration}</div>}
+  {departments && <div><span className="text-text-muted">涉及部门</span> {departments.join('、')}</div>}
+  {dataScale && <div><span className="text-text-muted">数据规模</span> {dataScale}</div>}
+  {verified && <div className="text-brand">✓ 客户授权公开</div>}
+</div>
+```
+
+如 `businessProblem` 存在，在 challenge 前增加“具体业务问题”小模块。
+
+### 步骤 3：运行案例页相关 E2E
+
+运行：`npx playwright test --config=playwright.local.config.ts --grep "案例|case"`
+预期：通过。
+
+---
+
+## 任务 10：全量验证
+
+### 步骤 1：运行功能 E2E
+
+运行：`cd e2e && npx playwright test --config=playwright.local.config.ts --project=chromium --grep-invert "visual-regression"`
+预期：**171 passed**
+
+### 步骤 2：运行单元测试
+
+运行：`npm run test:unit`
+预期：**718 passed**
+
+### 步骤 3：类型检查与 Lint
+
+运行：`npm run type-check && npm run lint`
+预期：无错误。
+
+### 步骤 4：构建检查
+
+运行：`npm run build`
+预期：成功。
+
+---
+
+## 自检清单
+
+- [ ] `products.ts` 中每个产品都有 `bundle`、`scenario`、`metrics`、`capabilities`。
+- [ ] `solutions.ts` 中每个方案都有 `painPoints`、`outcomes`、`recommendedProducts`。
+- [ ] `services.ts` 中流程常量已改为 `{ phase, duration, deliverables[] }` 结构。
+- [ ] `cases.ts` 与 `cms/types.ts` 的 `CaseStudyData` 字段保持一致。
+- [ ] 三个列表页卡片不再以大图标为中心。
+- [ ] `services-content-v3.tsx` 中不再出现 `01/02/03/04`。
+- [ ] `sections.tsx` 中不再出现 `uppercase` 阶段标签和“交付物”uppercase 标签。
+- [ ] 全量 E2E、单元测试、type-check、lint 通过。
@@ -0,0 +1,204 @@
+# Bain 对标深化设计规格：页面差异化与可信度升级
+
+## 概述
+
+基于 `impeccable` 评估报告与已完成的第一轮 Bain 化改造，当前网站在代码层面已移除大部分 AI 模板痕迹（大写 eyebrow 标签、装饰性编号、侧边条纹边框），但仍有以下内容与信任层面的差距未闭环：
+
+1. **列表页模板同质化**：产品、解决方案、服务三页使用同一套“图标 + 标题 + 描述”卡片语言。
+2. **残余 AI 痕迹**：服务页流程仍使用 `01/02/03/04` 编号；`sections.tsx` 服务流程时间线仍有 `uppercase` 英文标签。
+3. **案例可信度不足**：案例客户均为匿名描述，缺乏可审计的业务维度。
+4. **零视觉资产**：全站无产品截图、团队照片、客户场景图。
+
+本规格确定在不引入外部摄影图片的前提下，通过**数据可视化、结构化文案、页面模块差异化**提升 Bain 式的“编辑式信任平台”质感。
+
+---
+
+## 设计目标
+
+1. **产品 / 解决方案 / 服务三页具有明显不同的信息架构**，让访问者一眼识别所处页面类型。
+2. **从“功能列表”转向“问题-结果叙事”**：每页都回答“客户遇到什么 → 我们怎么做 → 得到什么结果”。
+3. **移除所有残余 uppercase / 装饰编号**：统一使用中文标签系统。
+4. **案例数据可验证化**：即使客户匿名，也提供行业、规模、周期、部门、数据规模等可审计维度。
+5. **零新增图片依赖**：所有视觉增强通过 CSS / SVG / 数据图实现，为后续替换真实图片预留数据接口。
+
+---
+
+## 设计原则
+
+- **Consulting Professional 审美**：参考 Bain、McKinsey 的排版驱动、数据前置、模块克制。
+- ** purposeful 动效**：仅保留必要动画，不引入新装饰性动效。
+- **可访问性优先**：颜色对比度维持 WCAG AA，不降低现有可访问性。
+- **测试前置**：修改前先补充/更新相关 E2E 与单元测试，确保改造后验证通过。
+
+---
+
+## 任务 1：产品页差异化改造
+
+**文件**：`src/app/(marketing)/products/products-content-v3.tsx`
+
+### 当前问题
+- Hero 标题含“产品矩阵”一词，偏功能列表。
+- 产品卡片以 Lucide 图标为中心，6 张卡片视觉重复。
+- 缺少产品组合关系说明。
+
+### 改造后结构
+
+1. **Hero**：标题改为问题-结果叙事，例如“用自研产品组合，支撑企业核心系统升级”。
+2. **套装关系图**：在 Hero 下方或产品列表上方，增加一个轻量模块，展示 6 款产品如何组成“企业套装”与“专业产品”。
+3. **产品卡片新结构**：
+   - 第一行：产品名 + 一句场景定位（如“面向中大型制造与零售企业的核心运营系统”）。
+   - 第二行：3 个量化能力指标（如“10 万级 SKU / 200+ 报表模板 / 99.5% 数据准确率”）。
+   - 第三行：所属套装标签（企业套装 / 专业产品）+ 核心能力 pills。
+   - 移除：大图标居中的设计。
+
+### 数据结构
+- 在 `src/lib/constants/products.ts` 的 `Product` 接口中新增可选字段：
+  - `scenario?: string` — 一句话场景定位
+  - `metrics?: { value: string; label: string }[]` — 能力指标
+  - `bundle: 'enterprise' | 'standalone'` — 所属套装
+  - `capabilities?: string[]` — 核心能力 pills
+
+---
+
+## 任务 2：解决方案页差异化改造
+
+**文件**：`src/app/(marketing)/solutions/solutions-content-v3.tsx`
+
+### 当前问题
+- 卡片使用行业图标 + 标题 + 描述，与其他页面同质化。
+- 缺少“痛点 → 结果”的叙事。
+
+### 改造后结构
+
+1. **Hero**：保留“深耕行业场景”定位，但增加一句结果承诺。
+2. **行业卡片新结构（问题-结果卡）**：
+   - 顶部：行业名 + 1 个核心痛点（如“库存周转慢、线上线下数据不同步”）。
+   - 中部：1-2 个可量化结果（如“库存周转提升 30% / 全渠道库存准确率 99%”）。
+   - 底部：推荐产品组合（以小型 pills 呈现，如 ERP + CRM + BI）。
+   - 移除：大图标居中的设计，改用小型行业标识。
+
+### 数据结构
+- 在 `src/lib/constants/solutions.ts` 的 `Solution` 接口中新增可选字段：
+  - `painPoints?: string[]` — 核心痛点
+  - `outcomes?: { value: string; label: string }[]` — 可量化结果
+  - `recommendedProducts?: string[]` — 推荐产品 ID 列表
+
+---
+
+## 任务 3：服务页差异化改造
+
+**文件**：`src/app/(marketing)/services/services-content-v3.tsx`
+
+### 当前问题
+- 服务卡片使用图标 + 描述。
+- 流程部分使用 `01/02/03/04` 装饰编号。
+
+### 改造后结构
+
+1. **Hero**：保留“从规划到运维全程陪伴”的情感定位。
+2. **服务卡片新结构**：
+   - 服务名 + 一句话价值主张。
+   - 3-4 个能力条目（以勾选清单形式）。
+   - 2 个关键指标（如“90%+ 方案落地率 / 50+ 咨询项目”）。
+   - 移除：大图标居中的设计。
+3. **流程时间轴**：
+   - 移除 `01/02/03/04` 编号。
+   - 改为中文阶段名：“需求分析 → 方案设计 → 敏捷交付 → 持续支持”。
+   - 每个阶段显示：阶段名、周期、3-4 个具体交付物（清单形式）。
+
+### 数据结构
+- 服务数据结构已基本完整，本次主要调整 UI 呈现。
+- `SERVICE_PROCESS` 常量从 `{ step, title, desc }` 改为 `{ phase, duration, deliverables[] }`。
+
+---
+
+## 任务 4：sections.tsx 服务流程时间线改造
+
+**文件**：`src/components/content/sections.tsx`
+
+### 当前问题
+- 流程时间线卡片使用 `STEP 1` 等 `uppercase` 英文标签。
+- “交付物”使用 `uppercase` 标签。
+
+### 改造后结构
+- 阶段标签改为中文，如“第一阶段：诊断评估”。
+- “交付物”改为“阶段产出”。
+- 移除 `tracking-[0.2em] uppercase` 和 `uppercase tracking-wider` 样式。
+- 保持时间轴视觉，但降低装饰性。
+
+---
+
+## 任务 5：案例数据可信度升级
+
+**文件**：`src/lib/constants/cases.ts`
+
+### 当前问题
+- 客户名均为“某上市制造企业”、“某区域零售龙头”等匿名描述。
+- 缺少项目周期、涉及部门、数据规模等可审计维度。
+
+### 改造后结构
+
+为每个案例增加以下字段（可选，但推荐填充）：
+
+- `projectDuration?: string` — 项目周期（如“8 个月”）
+- `departments?: string[]` — 涉及部门（如“生产、财务、供应链”）
+- `dataScale?: string` — 数据规模（如“10 万级 SKU、日均 50 万笔订单”）
+- `businessProblem?: string` — 更具体的业务问题描述
+- `verified?: boolean` — 是否可公开验证（为后续真实客户背书预留）
+
+同时，在案例详情页展示上述维度，形成“行业 → 规模 → 问题 → 方案 → 结果 → 周期 → 涉及部门”的可审计叙事链。
+
+---
+
+## 任务 6：视觉呈现规范
+
+### 不引入外部图片
+- 本次不使用 AI 生成图、图库摄影或客户提供照片。
+- 所有视觉增强通过以下方式实现：
+  - **数据指标**：大号数字 + 中文标签。
+  - **套装关系图**：使用 SVG 或 CSS 布局展示产品组合。
+  - **时间轴**：纯 CSS 线条与节点。
+  - **Pills / 标签**：小型中文标签展示产品组合、能力、交付物。
+
+### 颜色与排版
+- 维持现有设计令牌系统。
+- 品牌红 `#C41E3A` 仅用于：Hero 关键词、CTA 按钮、关键数字、模块标签、链接强调。
+- 标题行高不低于 `leading-[0.92]`，避免 `leading-[0.88]` 等过度紧凑的排版。
+- 中文标签不使用 `uppercase`、`tracking-wider`。
+
+---
+
+## 任务 7：测试与验证
+
+### 改造前
+- 更新相关 E2E 测试，确保选择器不因结构变化失效。
+- 更新相关单元测试，确保数据结构和组件渲染正确。
+
+### 改造后
+- 运行全量 E2E（排除视觉回归）：171 项必须通过。
+- 运行单元测试：718 项必须通过。
+- 运行 `npm run type-check` 与 `npm run lint`：无错误。
+
+---
+
+## 成功标准
+
+1. 产品、解决方案、服务三页在信息架构上可明显区分。
+2. 所有 `uppercase` eyebrow 标签与装饰性编号（`01/02/03/04`）被移除。
+3. 案例数据包含至少 3 个可验证维度（周期、部门、数据规模）。
+4. 全量功能 E2E、单元测试、type-check、lint 全部通过。
+5. 不引入任何外部图片资产。
+
+---
+
+## 参考文件
+
+- `src/app/(marketing)/products/products-content-v3.tsx`
+- `src/app/(marketing)/solutions/solutions-content-v3.tsx`
+- `src/app/(marketing)/services/services-content-v3.tsx`
+- `src/components/content/sections.tsx`
+- `src/lib/constants/products.ts`
+- `src/lib/constants/solutions.ts`
+- `src/lib/constants/services.ts`
+- `src/lib/constants/cases.ts`
+- `docs/superpowers/specs/2026-07-03-phase2-bain-depth-upgrade-plan-c.md`