From dc8bb762663aaa2dccc9ad6712373e307af2b615 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Wed, 8 Jul 2026 14:47:26 +0800 Subject: [PATCH] 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-07T12-40-50Z__src-app-marketing.md | 144 +++++ ...-08-bain-differentiation-implementation.md | 569 ++++++++++++++++++ .../2026-07-08-bain-differentiation-design.md | 204 +++++++ 3 files changed, 917 insertions(+) create mode 100644 .impeccable/critique/2026-07-07T12-40-50Z__src-app-marketing.md create mode 100644 docs/superpowers/plans/2026-07-08-bain-differentiation-implementation.md create mode 100644 docs/superpowers/specs/2026-07-08-bain-differentiation-design.md diff --git a/.impeccable/critique/2026-07-07T12-40-50Z__src-app-marketing.md b/.impeccable/critique/2026-07-07T12-40-50Z__src-app-marketing.md new file mode 100644 index 0000000..484ea89 --- /dev/null +++ b/.impeccable/critique/2026-07-07T12-40-50Z__src-app-marketing.md @@ -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 ``. +- 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 `` 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. diff --git a/docs/superpowers/plans/2026-07-08-bain-differentiation-implementation.md b/docs/superpowers/plans/2026-07-08-bain-differentiation-implementation.md new file mode 100644 index 0000000..5afd529 --- /dev/null +++ b/docs/superpowers/plans/2026-07-08-bain-differentiation-implementation.md @@ -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 + +
用自研产品组合
+
+ 支撑企业核心系统升级 +
+ +``` + +副文案强调“从数据智能到业务协同，每一款产品都经过实战验证”。 + +### 步骤 2：新增套装关系图模块 + +在 Hero 与产品卡片之间新增一个轻量模块 `BundleOverview`： + +- 展示两列：企业套装（6 款产品）与专业产品（独立产品）。 +- 使用小圆点 + 产品名 + 一句定位。 +- 使用 CSS grid 布局，不引入图片/SVG 复杂度。 + +### 步骤 3：改造产品卡片 + +将 `ProductCard` 从图标中心改为以下结构： + +```tsx + +
+
+
{bundleLabel}
+

{product.name}

+
+ {product.bundle === 'enterprise' ? '企业套装' : '专业产品'} +
+

{product.scenario || product.description}

+
+ {product.metrics?.map((m) => ( +
+
{m.value}
+
{m.label}
+
+ ))} +
+
+ {product.capabilities?.map((cap) => ( + {cap} + ))} +
+ +``` + +移除卡片内大图标。 + +### 步骤 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 +

+ 端到端交付可量化的业务成果。 +
+ 基于自研产品矩阵，为制造、零售、教育、医疗、金融、物流六大行业沉淀最佳实践。 +

+``` + +### 步骤 2：改造行业卡片 + +将 `SolutionCard` 改为问题-结果卡： + +```tsx + +
+ +

{solution.industry}

+
+
+
核心痛点
+

{solution.painPoints?.join('、')}

+
+
+ {solution.outcomes?.map((o) => ( +
+
{o.value}
+
{o.label}
+
+ ))} +
+
+
推荐产品组合
+
+ {recommendedProductNames.map((name) => ( + {name} + ))} +
+
+ +``` + +### 步骤 3：运行解决方案页相关 E2E + +运行：`npx playwright test --config=playwright.local.config.ts --grep "解决方案|solution"` +预期：通过。 + +--- + +## 任务 7：服务页 UI 改造 + +**文件：** +- 修改：`src/app/(marketing)/services/services-content-v3.tsx` + +### 步骤 1：改造服务卡片 + +移除大图标居中设计，改为： + +```tsx + +

{service.title}

+

{service.description}

+ +
+ {service.metrics?.map((m) => ( +
+
{m.value}
+
{m.label}
+
+ ))} +
+ +``` + +### 步骤 2：改造流程时间轴 + +将 `SERVICE_PROCESS` 的新结构渲染为时间轴： + +```tsx +
+ {SERVICE_PROCESS.map((step, index) => ( +
+
+
+
+

{step.phase}

+ {step.duration} +
+
阶段产出
+
    + {step.deliverables.map((d) => ( +
  • {d}
    • + ))} +
+
+ ))} +
+``` + +### 步骤 3：运行服务页相关 E2E + +运行：`npx playwright test --config=playwright.local.config.ts --grep "服务|service"` +预期：通过。 + +--- + +## 任务 8：sections.tsx 服务流程时间线改造 + +**文件：** +- 修改：`src/components/content/sections.tsx` + +### 步骤 1：移除 uppercase 标签 + +找到流程时间线卡片中的以下代码： + +```tsx + + {step.phase} + +``` + +改为： + +```tsx + + {`第 ${index + 1} 阶段：${step.phase}`} + +``` + +找到： + +```tsx +
+ 交付物 +
+``` + +改为： + +```tsx +
+ 阶段产出 +
+``` + +### 步骤 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 +
+ {projectDuration &&
项目周期 {projectDuration}
} + {departments &&
涉及部门 {departments.join('、')}
} + {dataScale &&
数据规模 {dataScale}
} + {verified &&
✓ 客户授权公开
} +
+``` + +如 `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 通过。 diff --git a/docs/superpowers/specs/2026-07-08-bain-differentiation-design.md b/docs/superpowers/specs/2026-07-08-bain-differentiation-design.md new file mode 100644 index 0000000..56cbc58 --- /dev/null +++ b/docs/superpowers/specs/2026-07-08-bain-differentiation-design.md @@ -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`