fix(e2e): remove stale hero-product-visual assertions from uj-11
v15 removed the product mockup; assert hero-section visibility instead. 7/7 pass chromium. docs: add impeccable AI-slop audit for Hero + FounderQuoteSection (18/20, no tells).
This commit is contained in:
@@ -0,0 +1,99 @@
|
||||
# Impeccable 去 AI 味审计 · Hero 与创始团队观点区
|
||||
|
||||
审计日期：2026-09-01
|
||||
审计范围：`src/app/(marketing)/home-content-v15.tsx` 中本次会话新增/改动的 **HeroSection（156–268）+ HeroStatsBand（273–304）+ FounderQuoteSection（623–667）**
|
||||
方法论：impeccable skill v2.0.0（官方 BuiltinMarket 安装，已通过安全审计：P2/安全，纯 markdown 设计指导，无外联/凭证/破坏性指令）
|
||||
设计上下文：品牌红 `#C41E3A`、ease-ink 缓动、浅色 Hero（用户硬主张）、设计令牌体系（IMPECCABLE_AUDIT.md 已建立 17/20 基线）
|
||||
|
||||
> 说明：全站已在 IMPECCABLE_AUDIT.md 完成 9 轮审计（17/20）。本审计**仅针对本次新增/改动的两块**，验证是否在「去 AI 味」上回归或引入新套路。
|
||||
|
||||
---
|
||||
|
||||
## 一、审计健康分（5 维度 /20）
|
||||
|
||||
| # | 维度 | 分值 | 关键发现 |
|
||||
|---|:---:|:---:|---|
|
||||
| 1 | Accessibility | **3** | 对比度全达标；但 Hero 入场动画未接 reduced-motion 守卫（见 P2-1） |
|
||||
| 2 | Performance | **4** | 仅 transform/opacity 动画；粒子场 reduced-motion 降级静态帧；聚光层只写 2 个 CSS 变量，无 canvas/逐帧 JS |
|
||||
| 3 | Theming | **4** | 全程设计令牌（`bg-brand-section`/`text-brand`/`text-ink`/`text-text-secondary`/`bg-bg-primary`），无硬编码色值 |
|
||||
| 4 | Responsive | **4** | 间距/字号均响应式断点（`px-4 sm:px-6 lg:px-10`、`text-2xl sm:text-3xl md:text-4xl`）；卡片 `max-w-3xl` 居中收敛 |
|
||||
| 5 | Anti-Patterns | **3** | 无 AI 套路痕迹；仅 1 处轻微通用卡片阴影（P3-1） |
|
||||
| **合计** | | **18/20** | **Excellent 档（18–20）** |
|
||||
|
||||
---
|
||||
|
||||
## 二、Anti-Patterns 判定（先读这一节）
|
||||
|
||||
**结论：PASS —— 无 AI 生成观感，设计独特且有意图。**
|
||||
|
||||
逐条比对 impeccable 的 DON'T 指纹：
|
||||
|
||||
| AI 套路指纹 | 本代码 | 判定 |
|
||||
|---|---|:---:|
|
||||
| 渐变文字（`bg-clip-text`） | 0 处 | ✅ 无 |
|
||||
| 毛玻璃滥用（`backdrop-blur` 光罩） | 卡片用 `bg-bg-primary/95` 实底 + `shadow-xl`，**非** backdrop-blur | ✅ 无 |
|
||||
| Hero 4 格指标卡模板 | 指标下沉为单条横向带（`HeroStatsBand`），3 项 `font-mono tabular-nums`，克制 | ✅ 已规避 |
|
||||
| 通用字体（Inter/Roboto/Arial） | geist-sans/geist-mono + 系统 CJK 栈 + 楷体品牌字 | ✅ 无 |
|
||||
| 回弹/弹性缓动（spring/bounce） | 仅 `EASE_OUT`（ease-out），无 spring | ✅ 无 |
|
||||
| AI 配色（青+深底发光 / 紫蓝渐变 / 霓虹） | 品牌红 + 墨色，无青/紫霓虹 | ✅ 无 |
|
||||
| 一切居中 | Hero 左对齐（`max-w-4xl`），仅引言块居中（引言语义合理） | ✅ 合理 |
|
||||
|
||||
> 用户担心的「深红底 + 浅色居中卡片」确实是常见 AI 模板形态，但本实现通过**极淡白点阵纹理（opacity 0.05）+ 品牌红 hairline 分隔 + 墨色引言正文**做了品牌化改造，属 Bain 式编辑性深红区块的刻意选择，不是裸模板。
|
||||
|
||||
---
|
||||
|
||||
## 三、执行摘要
|
||||
|
||||
- **审计健康分：18/20（Excellent）**
|
||||
- **问题计数**：P0 ×0 / P1 ×0 / P2 ×1 / P3 ×1
|
||||
- **核心结论**：本次 Hero 浅色化 + 创始团队观点区修复**未引入任何 AI 套路**；唯一实质性改进点是 reduced-motion 守卫一致性（P2-1）。
|
||||
- **Top 问题**：
|
||||
1. [P2] Hero 入场动画未受 `prefers-reduced-motion` 守卫（与项目 ScrollReveal 模式不一致）
|
||||
2. [P3] 引言卡片 `rounded-2xl + shadow-xl` 属轻微通用阴影套路
|
||||
|
||||
---
|
||||
|
||||
## 四、按严重度详列
|
||||
|
||||
### [P2-1] Hero 入场动画未守卫 reduced-motion
|
||||
- **位置**：`home-content-v15.tsx:210-262`（slogan/h1/subheading/CTA 的 `motion.*`）
|
||||
- **类别**：Accessibility
|
||||
- **证据**：
|
||||
- Hero 用 framer-motion `animate={{opacity,y}}` 直接驱动，**未读 `reduceMotion`**（仅 `showCursorGlow` 在 198 行接了 `!reduceMotion`）。
|
||||
- 全局规则 `globals.css:721-730` 只把 CSS `animation/transition-duration` 压到 `0.01ms`，**拦截不了 framer-motion 的 JS 动画**（WAAPI/rAF 驱动）。
|
||||
- 项目已具备 `useReducedMotion()` hook 与 `ScrollReveal`（其 `initial/whileInView` 在 reduced 下置 `{}`）两种成熟守卫模式，Hero 未复用，造成不一致。
|
||||
- **影响**：`prefers-reduced-motion: reduce` 用户仍会看到 Hero 内容 0.35–0.45s 内 `y:20-40px` 滑入。transform/opacity 前庭风险低，但违背项目既定的 reduced-motion 纪律，且触发 WCAG 2.3.3（AAA）关切。
|
||||
- **建议**：在 `HeroSection` 内将 `motion.*` 的 `initial/animate` 按 `reduceMotion` 条件化（reduced 时 `initial={}`/`animate={}`），或外层包 `<MotionConfig reducedMotion="user">`。与 `ScrollReveal` 保持同一范式。
|
||||
- **命令建议**：`/polish`（收尾一致性）
|
||||
|
||||
### [P3-1] 引言卡片通用阴影
|
||||
- **位置**：`home-content-v15.tsx:640`（`rounded-2xl ... shadow-xl`）
|
||||
- **类别**：Anti-Pattern
|
||||
- **影响**：`圆角 + 通用阴影` 是 impeccable 点名的轻量套路；此处为引言卡，语义可接受，但可更克制。
|
||||
- **建议**：将 `shadow-xl` 降级为 `shadow-sm` 或改用品牌红 hairline 边框（`border border-brand/10`），减少「悬浮卡片」观感。可选，不阻塞。
|
||||
- **命令建议**：`/quieter` 或 `/polish`
|
||||
|
||||
---
|
||||
|
||||
## 五、正面发现（应保持）
|
||||
|
||||
1. **工程网格是刻意的技术质感**：`hero-grid-overlay--light/dark` 为 44px hairline 线 + 径向遮罩聚焦版心（`globals.css:803-818`），零 JS 自动反色；聚光层只写 `--spot-x/--spot-y` 两变量，无 canvas/逐帧 JS —— 这是「有意图的精致」，不是套路。
|
||||
2. **指标带做了减法**：硬指标从首屏下沉为独立 `HeroStatsBand`，首屏只留「一句话声明 + 一个行动」，符合 Accenture single-stream 落地，也规避了 Hero 指标网格套路。
|
||||
3. **令牌化彻底**：两块区域零硬编码色，对比度全 AA（brand 5.84:1、ink 19:1、secondary 10:1）。
|
||||
4. **零编造纪律到位**：`DEFAULT_EARLY_ACCESS_STATUS` 如实标注「共创进行中/内测中」，不虚构客户案例；与项目 zero-fabrication 原则一致。
|
||||
|
||||
---
|
||||
|
||||
## 六、推荐动作（优先级）
|
||||
|
||||
1. **[P2] `/polish`** — 给 Hero 入场动画补 `reduceMotion` 守卫，与 ScrollReveal 范式对齐（唯一实质性闭环项）。
|
||||
2. **[P3] `/quieter`（可选）** — 引言卡片阴影降级或改品牌红 hairline 边框。
|
||||
|
||||
> 你可让我逐条执行、一次性全做、或按你指定的顺序。修复后重跑本审计即可看分数提升。
|
||||
|
||||
---
|
||||
|
||||
## 七、与全站基线的关系
|
||||
|
||||
- 全站基线（IMPECCABLE_AUDIT.md）：17/20，已清零渐变文字/spring/bounce/毛玻璃/越界色/悬空 CSS 变量，WCAG AA 对比度违规 0。
|
||||
- 本次新增两块在基线上**未回归**，且在「去 AI 味」维度上保持 Excellent（18/20）。主要可改进项是 reduced-motion 守卫一致性这一工程纪律点，不影响「观感 AI 味」判定。
|
||||
@@ -42,17 +42,9 @@ test.describe('UJ-11a: 首屏说服链路（Hero → 信任 → 叙事 → CTA
|
||||
await page.waitForTimeout(2500);
|
||||
await closeCookieBanner(page);
|
||||
|
||||
// === L1 Hero：产品视觉 Mockup 可见（设计优化核心交付） ===
|
||||
const productVisual = page.locator('[data-testid="hero-product-visual"]').first();
|
||||
await expect(productVisual).toBeVisible({ timeout: 15000 });
|
||||
|
||||
// 诚实标签「产品界面示意」「示例数据」存在（零编造原则）
|
||||
const visualText = await productVisual.textContent();
|
||||
expect(visualText).toContain('产品界面示意');
|
||||
expect(visualText).toContain('示例数据');
|
||||
|
||||
// 产品视觉含可识别产品模块命名
|
||||
expect(visualText).toContain('经营驾驶舱');
|
||||
// === L1 Hero：浅色工程网格 Hero 可见（v15 已移除产品 Mockup，改为声明先行 + 单一 CTA）===
|
||||
const heroSection = page.locator('[data-testid="hero-section"]').first();
|
||||
await expect(heroSection).toBeVisible({ timeout: 15000 });
|
||||
|
||||
// === 单一主 CTA ===
|
||||
const primaryCta = page.locator('[data-testid="hero-primary-cta"]').first();
|
||||
@@ -167,9 +159,9 @@ test.describe('UJ-11c: 移动端首屏转化旅程', () => {
|
||||
const primaryCta = page.locator('[data-testid="hero-primary-cta"]').first();
|
||||
await expect(primaryCta).toBeVisible({ timeout: 15000 });
|
||||
|
||||
// 产品视觉渲染正常
|
||||
const productVisual = page.locator('[data-testid="hero-product-visual"]').first();
|
||||
await expect(productVisual).toBeVisible();
|
||||
// 首屏 Hero 区块可见（v15 已移除产品 Mockup）
|
||||
const heroSection = page.locator('[data-testid="hero-section"]').first();
|
||||
await expect(heroSection).toBeVisible();
|
||||
});
|
||||
|
||||
test('@mobile @journey @critical 移动端信任层与叙事区单列堆叠无溢出', async ({ page }) => {
|
||||
|
||||
Reference in New Issue
Block a user