website-finishing-director

网站收尾总监

结构化的 5 轮网站收尾审查，从第一印象到上线准备就绪，满分 100 分。如同绘画：底漆、底色、细节、清漆、最终检查。任何网站上线前都必须经过收尾审查。

何时使用此技能

• 上线前把关 — DNS 生效或开始引流前进行最终验证
• 改版后审查 — 视觉改版后，确认没有出现问题回退
• 客户交接 — 生成结构化报告，证明网站符合质量标准
• 季度维护 — 发现累积的 UX 技术债、失效链接和过时内容
• 针对性审查 — 只执行一轮审查（例如性能冲刺后“仅执行第 2 轮”）

方法论基础

资料来源：

• Nielsen Norman Group — 启发式评估框架（10 项可用性启发式）
• Google Web Vitals — LCP、CLS、INP 阈值
• OWASP — 安全响应头基线
• Oli Gardner / Unbounce — 着陆页转化最佳实践
• Don Norman — 情感化设计（本能、行为、反思层面）
• GUIA 生产记忆 — 已上线的 8 个网站，以及 Next.js、Framer Motion、GSAP、Lenis、Railway、Docker 中记录的注意事项

核心原则：通过 Lighthouse 检查且元标签正确的网站，技术上合格，但还称不上完成收尾。收尾是“能用”和“已准备就绪”之间的差距。这要求从访客的体验出发评估网站——循序渐进、关注情感、跨设备体验——而不是逐项核对指标清单。

为何重要：现有工具（Lighthouse、Screaming Frog、Awwwards）各自只审查一个维度。没有工具能以循序渐进、评分式的工作流，将视觉润色、UX 完整性、技术基础、内容质量和品牌契合度结合起来。这项技能正是这样的工具。

---

Claude 负责什么，你来决定什么

“Claude 执行审查。你决定是否上线。”

Claude 负责	你提供
按照清单系统地执行每一轮审查	线上 URL 或代码库访问权限
对每个检查项评分并说明理由	背景信息：品牌定位、目标受众、上线时间安排
将问题划分为 P0/P1/P2	覆盖判定（例如“对 MVP 来说，P1 可以接受”）
生成最终报告并提出修复建议	最终的 Go/No-Go 决策
标记生产记忆中的 GUIA 技术栈注意事项	在真实设备上验证（Claude 无法打开 Safari）

请记住：这是人机协作的工作流。Claude 严谨地组织审查；你则通过在真实设备上亲自查看来验证结论。

---

此技能的功能

1. 5 秒第一印象测试 — 评估最初几秒内的清晰度、情感契合度和 CTA 可见性
2. 技术基础审查 — 性能（Core Web Vitals）、SEO 基础、安全响应头、失效链接
3. UX 完整性检查 — 组件状态、表单行为、动画润色、移动端可用性
4. 内容与品牌验证 — 文案质量、占位内容检测、语气一致性、视觉协调性
5. 跨设备与上线准备就绪情况 — 浏览器测试、OG 预览、分析工具、404 页面、favicon

使用方法

上线前进行完整的网站审查

I'm about to launch [site URL]. Run a full website-finishing-director audit (all 5 passes).
Brand quadrant: [Warm+Calm / Warm+Active / Cold+Active / Cold+Calm].
Target audience: [who].

修复特定问题后执行单轮审查

I just optimized performance on [site URL]. Run Pass 2 only (Technical Foundation).

快速审查着陆页

Audit this landing page: [URL]. Use the Landing Page profile (passes 1, 2, 4).

---

说明

执行此审查时，请按顺序完成 5 轮。每一轮都基于上一轮的结果——先打好基础，再进行润色。为每个检查项评分，按优先级划分问题，然后生成最终报告。

审计配置

并非每个网站都需要完成全部 5 轮。请选择与项目匹配的配置：

配置	轮次	适用场景
落地页	1, 2, 4	单页营销活动或产品页面
完整网站	1, 2, 3, 4, 5	带有导航、表单和内容的多页网站
电子商务	2, 3, 5	带有购物车、结账流程和产品页面的商店

使用精简配置时，请按比例调整总分。通过/不通过门槛适用于百分比得分，而非原始分数。

---

第 1 轮：第一印象（15 分）

“访客在 5 秒内能理解什么，又会有什么感受？”

展示主页（或首屏）5 秒。回答以下 5 个问题——每题 3 分：

## Pass 1 — First Impression (5-Second Test)

### 1. WHAT is this? (3 pts)
Can a visitor identify what the site/product/service IS?
[ ] 3 — Immediately clear, no ambiguity
[ ] 2 — Clear after reading subheadline
[ ] 1 — Vague, requires scrolling to understand
[ ] 0 — No idea what this is

### 2. WHO is it for? (3 pts)
Are there signals identifying the target audience?
[ ] 3 — Obvious demographic/psychographic signals
[ ] 2 — Implied but not explicit
[ ] 1 — Generic ("everyone")
[ ] 0 — Actively confusing (signals wrong audience)

### 3. WHY should I care? (3 pts)
Is the value proposition or benefit visible?
[ ] 3 — Clear benefit, emotionally resonant
[ ] 2 — Feature-focused but understandable
[ ] 1 — Present but buried
[ ] 0 — No value proposition visible

### 4. WHAT do I do next? (3 pts)
Is the primary CTA visible and clear?
[ ] 3 — CTA visible above fold, action-specific text
[ ] 2 — CTA present but generic ("Learn more")
[ ] 1 — CTA below the fold or hard to find
[ ] 0 — No CTA visible

### 5. HOW does it feel? (3 pts)
Does the emotional tone match the brand quadrant?
[ ] 3 — Perfect quadrant match (warm brand = warm design)
[ ] 2 — Mostly aligned, minor dissonance
[ ] 1 — Noticeable mismatch (warm brand + cold design)
[ ] 0 — Opposite quadrant (positioning confusion)

### Pass 1 Score: ___/15

Verdict:
- 12-15: PASS — First impression is clear and emotionally aligned
- 8-11: NEEDS WORK — Visitor gets it, but slowly or with friction
- <8: FAIL — Redesign the above-fold experience

集成：根据 web-design-director 象限系统，对比品牌的情感感受。如果品牌属于 Warm+Calm，但网站给人的感觉是 Cold+Active，那么无论得分如何，这都是 P0 问题。

本轮的 GUIA 注意事项：

• CTA 中硬编码 Calendly URL，而非指向 /contact/ 页面（会破坏分析数据）
• 温暖的文案语气与冷峻的 UI 元素混搭（赤陶色调 + 等宽字体 = 令人困惑）

---

第 2 轮：技术基础（25 分）

“基础设施是否足够稳固，可以据此继续构建？”

## Pass 2 — Technical Foundation

### Performance (10 pts)

| Metric | Target | Score |
|--------|--------|-------|
| LCP (Largest Contentful Paint) | ≤ 2.5s | 0-3 pts |
| INP (Interaction to Next Paint) | ≤ 200ms | 0-2 pts |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | 0-2 pts |
| Lighthouse Performance score | ≥ 85 | 0-3 pts |

Scoring:
- LCP: 3 = ≤2.5s, 2 = ≤4.0s, 1 = ≤6.0s, 0 = >6.0s
- INP: 2 = ≤200ms, 1 = ≤500ms, 0 = >500ms
- CLS: 2 = ≤0.1, 1 = ≤0.25, 0 = >0.25
- Lighthouse: 3 = ≥90, 2 = ≥85, 1 = ≥70, 0 = <70

### SEO Basics (8 pts)

- [ ] (2 pts) Canonical URLs defined + trailing slash consistent
- [ ] (1 pt) Meta titles unique per page (≤60 chars)
- [ ] (1 pt) Meta descriptions present per page (≤160 chars)
- [ ] (1 pt) Sitemap.xml accessible and valid
- [ ] (1 pt) robots.txt present and correct
- [ ] (1 pt) Structured data present (JSON-LD)
- [ ] (1 pt) Alt text on all images

### Security & Links (7 pts)

- [ ] (2 pts) HTTPS enforced (no mixed content)
- [ ] (2 pts) Security headers present (CSP, X-Frame-Options, HSTS, X-Content-Type-Options)
- [ ] (1 pt) No broken internal links (404s)
- [ ] (1 pt) No broken external links
- [ ] (1 pt) No exposed source maps or debug endpoints in production

### Pass 2 Score: ___/25

Verdict:
- 21-25: SOLID — Ship it
- 16-20: ACCEPTABLE — Fix P0s, ship with P1 backlog
- 11-15: FRAGILE — Significant technical debt
- <11: BROKEN — Do not launch

本轮的 GUIA 注意事项：

• next.config.js 中缺少 trailingSlash: true（导致 Rental-CRM 于 2026 年 1 月被取消索引）
• 在 'use client' 组件中使用 export const metadata（元数据不会在服务器端渲染）
• 在模块级别初始化 SDK（Supabase/Stripe）时，如果缺少环境变量，构建会失败——应在函数内部延迟初始化
• Vercel 环境变量末尾带有 echo 添加的换行符——请改用 printf
• 在 Nixpacks 构建期间无法访问 Railway 的 *.railway.internal 主机名——请使用公共 URL

---

第 3 轮：UX 完整性（25 分）

“网站能否应对真实使用场景，而不只是理想情况？”

## Pass 3 — UX Completeness

### Component States (8 pts)

For EACH interactive component (buttons, cards, forms, modals, lists):
- [ ] (2 pts) Loading state — skeleton, spinner, or progressive render
- [ ] (2 pts) Error state — clear message + recovery action
- [ ] (2 pts) Empty state — helpful message, not blank screen
- [ ] (2 pts) Success state — confirmation feedback

Score: deduct per missing state across all components.
8 pts = all states covered. -1 per missing state (cap at 0).

### Forms (6 pts)

- [ ] (1 pt) Client-side validation with clear error messages
- [ ] (1 pt) Server-side validation (not just client)
- [ ] (1 pt) Success feedback after submission (toast, redirect, or inline)
- [ ] (1 pt) Submit button disabled during processing (no double-submit)
- [ ] (1 pt) Spam protection (honeypot, reCAPTCHA, or rate limiting)
- [ ] (1 pt) Privacy policy link near form (GDPR)

### Animation Polish (6 pts)

- [ ] (1 pt) `viewport={{ once: true }}` on scroll animations (no replay on scroll-back)
- [ ] (1 pt) `useGSAP` hook used (not `useEffect`) for GSAP animations
- [ ] (1 pt) `prefers-reduced-motion` respected (disable or reduce animations)
- [ ] (1 pt) No animation blocks content access (content visible even if animation fails)
- [ ] (1 pt) Lenis initialized correctly (not Locomotive Scroll)
- [ ] (1 pt) Exit animations don't cause layout shift

### Mobile Usability (5 pts)

- [ ] (1 pt) Touch targets ≥ 44px (iOS HIG standard)
- [ ] (1 pt) No horizontal overflow / horizontal scroll
- [ ] (1 pt) Font sizes ≥ 16px for body text (prevents iOS zoom)
- [ ] (1 pt) Sticky/fixed elements don't overlap content
- [ ] (1 pt) Scroll behavior works correctly (no scroll-jacking that traps users)

### Pass 3 Score: ___/25

Verdict:
- 21-25: COMPLETE — Real-world usage covered
- 16-20: MOSTLY THERE — Edge cases need attention
- 11-15: INCOMPLETE — Users will hit dead ends
- <11: UNFINISHED — UX not production-ready

本轮的 GUIA 注意事项：

• GSAP + React 18 Strict Mode 会在开发环境中触发动画两次（使用 useGSAP，而非 useEffect）
• 全局 CSS a { color: var(--color-coral) } 会覆盖锚点 CTA 上的 Tailwind text-white——请使用内联 style={{ color: 'white' }}
• Framer Motion 的 AnimatePresence 退出动画在 Next.js App Router 中会失效
• 同时运行过多 ScrollTrigger 实例会严重影响移动设备性能
• Lenis 包名称：npm install lenis（而非 @studio-freight/lenis）

---

第 4 轮：内容与品牌（20 分）

“内容是否完善、一致且符合品牌调性？”

## Pass 4 — Content & Brand

### Copy Quality (8 pts)

- [ ] (2 pts) No placeholder text detected ("Lorem ipsum", "[Your Name]", "Coming soon",
      "example.com", "TODO", empty sections)
- [ ] (1 pt) No spelling or grammar errors
- [ ] (1 pt) Link text is descriptive (not "click here" or naked URLs)
- [ ] (1 pt) CTA copy is specific ("Start free trial" not "Submit")
- [ ] (1 pt) Heading hierarchy is logical (H1 → H2 → H3, one H1 per page)
- [ ] (1 pt) Alt text is descriptive (not "image1.png" or empty)
- [ ] (1 pt) Phone numbers, emails, addresses are real (not placeholder)

### Brand Voice (6 pts)

- [ ] (2 pts) Tone matches brand positioning (warm/cold, formal/casual)
- [ ] (2 pts) Voice is consistent across all pages (same person "speaking")
- [ ] (1 pt) No AI-smoothing markers ("Don't hesitate to contact us",
      "In today's fast-paced world", "It's important to note that")
- [ ] (1 pt) CTAs match the emotional quadrant (warm brand = inviting CTA, not aggressive)

### Visual Consistency (6 pts)

- [ ] (1 pt) Color palette used consistently (no off-brand colors)
- [ ] (1 pt) Typography hierarchy clear (display, heading, body, caption — max 2-3 fonts)
- [ ] (1 pt) Spacing rhythm consistent (not random padding between sections)
- [ ] (1 pt) Icon style uniform (don't mix outline, filled, and emoji)
- [ ] (1 pt) Image treatment consistent (all photos same filter/tone, or all illustrations)
- [ ] (1 pt) Component style consistent (cards, buttons, inputs follow same pattern)

### Pass 4 Score: ___/20

Verdict:
- 17-20: POLISHED — Content is finished and on-brand
- 13-16: GOOD — Minor inconsistencies, shippable
- 9-12: ROUGH — Content needs editing pass
- <9: UNFINISHED — Major content gaps or brand mismatch

本轮的 GUIA 注意事项：

• Calendly URL 必须对应正确的专业人士（Valeria、Matthieu 或客户）
• 温暖的文案（“我们理解您的挑战”）与冷峻的 UI（深色模式、等宽字体、尖锐边角）混搭
• AI 生成文案检测：发布前删除双换行（这是 LinkedIn 上的 AI 特征）
• credou.bzh 文案方向：机制优先，不写简历，不写职业经历/时间线

---

第 5 轮：跨设备与上线（15 分）

“网站能否在所有设备上正常运行，是否已做好上线准备？”

## Pass 5 — Cross-Device & Launch

### Browser Testing (5 pts)

Test on the 3 major browsers. Score per browser:
- [ ] (2 pts) Safari — renders correctly, animations work, fonts load
- [ ] (2 pts) Chrome — renders correctly, animations work, fonts load
- [ ] (1 pt) Firefox — renders correctly, no major breaks

Per browser, check: layout, animations, fonts, forms, scroll behavior.
Deduct 1 pt per browser with visual bugs. Deduct 2 pts per browser with functional bugs.

### Device Testing (4 pts)

- [ ] (2 pts) Mobile (375px) — full site usable, no content cut off
- [ ] (1 pt) Tablet (768px) — layout adapts, no awkward breakpoints
- [ ] (1 pt) Desktop (1440px) — content doesn't stretch or float in empty space

### Launch Readiness (6 pts)

- [ ] (1 pt) Analytics installed and firing (GA4, Plausible, or equivalent)
- [ ] (1 pt) OG image renders correctly (test with opengraph.xyz or Twitter card validator)
- [ ] (1 pt) 404 page exists and is styled (not default browser/framework error)
- [ ] (1 pt) Favicon present in all sizes (16, 32, 180, 192, 512 — or SVG adaptive)
- [ ] (1 pt) Google Search Console configured (or equivalent)
- [ ] (1 pt) Social preview correct on LinkedIn, Twitter, WhatsApp

### Pass 5 Score: ___/15

Verdict:
- 12-15: LAUNCH READY — Ship it
- 9-11: ALMOST — Fix critical device/browser issues
- <9: NOT READY — Cross-device experience is broken

本轮的 GUIA 注意事项：

• Lenis 平滑滚动在 Safari 上存在已知问题——请仔细测试
• Vercel 环境变量末尾的换行符会导致 OG 图片 URL 失效
• Docker 健康检查必须通过，CI/CD 才会报告成功
• deploy.sh 使用 flock——VPS 上不会同时进行多个部署
• Resend 子域名 DNS：send.send.<zone> 看起来不太对，但这是正确的（Resend 会添加 send. 前缀）

---

第 6 步：生成最终报告

完成所有适用轮次后，汇总报告：

## Final Report Template

# Website Finishing Audit: [Site Name]

**URL:** [https://...]
**Date:** [YYYY-MM-DD]
**Profile:** [Landing Page / Full Website / E-commerce]
**Auditor:** [Name] + Claude (website-finishing-director)

---

## Score Summary

| Pass | Name | Score | Max | Status |
|------|------|-------|-----|--------|
| 1 | First Impression | __/15 | 15 | [PASS/NEEDS WORK/FAIL] |
| 2 | Technical Foundation | __/25 | 25 | [SOLID/ACCEPTABLE/FRAGILE/BROKEN] |
| 3 | UX Completeness | __/25 | 25 | [COMPLETE/MOSTLY/INCOMPLETE/UNFINISHED] |
| 4 | Content & Brand | __/20 | 20 | [POLISHED/GOOD/ROUGH/UNFINISHED] |
| 5 | Cross-Device & Launch | __/15 | 15 | [READY/ALMOST/NOT READY] |
| **TOTAL** | | **__/100** | **100** | |

---

## Verdict

| Score Range | Verdict |
|-------------|---------|
| 85-100 | LAUNCH READY |
| 70-84 | CONDITIONAL — fix P0s then ship |
| 50-69 | NEEDS WORK — significant issues |
| <50 | NOT READY — major gaps |

**Override rule:** 1 unresolved P0 = NOT READY, regardless of total score.

**VERDICT: [LAUNCH READY / CONDITIONAL / NEEDS WORK / NOT READY]**

---

## Issues

### P0 — Blockers (must fix before launch)

| # | Pass | Issue | Location | Fix |
|---|------|-------|----------|-----|
| 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] |

### P1 — Important (fix within 1 week of launch)

| # | Pass | Issue | Location | Fix |
|---|------|-------|----------|-----|
| 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] |

### P2 — Nice-to-have (backlog)

| # | Pass | Issue | Location | Fix |
|---|------|-------|----------|-----|
| 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] |

---

## Strengths

- [What the site does well — acknowledge good work]
- [Specific design/technical/content wins]

## Recommendations

1. [Highest-priority improvement]
2. [Second priority]
3. [Strategic suggestion for next iteration]

---

## Sign-off

- [ ] All P0s resolved
- [ ] P0 + P1 resolved (optimal)
- [ ] Stakeholder review completed
- [ ] Go-live date confirmed: ____________

---

示例

示例 1：完整网站审计 — credou.bzh

背景：顾问的个人品牌网站。Warm+Calm 象限。使用 Next.js 16、Framer Motion、Lenis。刚完成第 3 版文案并已部署。

输入：

对 credou.bzh 执行一次完整的网站完善度审计。品牌象限：Warm+Calm。目标受众：在 AI 集成方面遇到困难的决策者。

输出：

网站收尾审计：credou.bzh

URL： https://credou.bzh 日期： 2026-02-12 配置： 完整网站 审计者： Matthieu + Claude（website-finishing-director）

---

评分摘要

轮次	名称	得分	满分	状态
1	第一印象	13/15	15	通过
2	技术基础	19/25	25	可接受
3	UX 完整性	18/25	25	基本到位
4	内容与品牌	17/20	20	精心打磨
5	跨设备与发布	11/15	15	接近达标
总计		78/100	100

---

结论

有条件通过——得分 78/100。修复 P0 问题后即可发布。

---

问题

P0 — 阻塞项

#	轮次	问题	位置	修复方法
1	2	缺少安全标头（没有 CSP、没有 X-Frame-Options）	next.config.js	添加包含 CSP、X-Frame、HSTS、X-Content-Type 的 headers() 配置
2	5	404 页面使用 Next.js 默认错误页	/app/not-found.tsx	创建与 Papier/Encre 主题相符的自定义 404 页面

P1 — 重要

#	轮次	问题	位置	修复方法
1	2	缺少 eslint.config.js	项目根目录	添加 ESLint 扁平配置
2	3	未处理 prefers-reduced-motion	globals.css	添加 @media (prefers-reduced-motion: reduce) 以禁用动画
3	3	缺少跳转到内容的链接	layout.tsx	添加视觉上隐藏的跳转链接
4	5	未在 WhatsApp 上测试社交媒体预览	OG 图片	验证分享至 WhatsApp 时 OG 图片的呈现效果

P2 — 加分项

#	轮次	问题	位置	修复方法
1	4	“Le plan”板块的卡片间距可以更丰富多样	HomeContent.tsx	调整不同卡片行之间的垂直内边距

---

优势

• 文案 v3（围绕表达瓶颈）简洁有力——以机制为先，不用履历充数
• Papier/Encre 双主题协调统一，契合品牌
• 颗粒纹理与无边框卡片营造出真实的温暖感（而非模板化设计）
• 边缘渲染的 OG 图片为 SEO 带来显著优势

建议

1. 修复安全标头（P0）——15 分钟的工作，却能显著提升安全性
2. 创建自定义 404 页面（P0）——让失效链接页面也保持品牌体验
3. 添加 prefers-reduced-motion（P1）——满足无障碍合规要求

---

为何有效：这次审计发现了“技术上已部署”与“真正完成”之间的差距。网站在第一印象和内容方面得分不错，但基础设施仍有缺口（安全标头、404 页面）。单独进行 Lighthouse 审计时也会发现这些问题，但不会对它们进行优先级排序。

---

示例 2：落地页审计——SaaS 产品发布

背景：面向效率工具的新 SaaS 落地页。冷启动+主动型象限。单页，无表单，行动号召链接至候补名单。

输入：

使用落地页配置（第 1、2、4 轮）审计此落地页：taskflow.app。象限：冷启动+主动型。受众：工程经理。

输出：

网站收尾审计：TaskFlow

URL： https://taskflow.app 日期： 2026-02-12 配置： 落地页（第 1、2、4 轮） 审计者： 产品团队 + Claude（website-finishing-director）

---

评分摘要

轮次	名称	得分	满分	状态
1	第一印象	9/15	15	需要改进
2	技术基础	22/25	25	扎实
4	内容与品牌	11/20	20	粗糙
总计		42/60	60	（70%）

---

结论

有条件通过——得分 70%。第 1 轮中存在需要处理的 P0 问题。

---

问题

P0 — 阻塞项

#	轮次	问题	位置	修复方法
1	1	“这是什么？”得分 1/3——首屏未能说清产品类别	首屏区域	在标语上方添加一句：“面向工程团队的项目跟踪工具”
2	4	有 3 条使用图库照片的占位客户评价	社会认同板块	整个移除该板块，或替换为真实测试用户的评价

P1 — 重要

#	轮次	问题	位置	修复方案
1	1	CTA 写着“Get Started”——对候补名单来说过于笼统	首屏 CTA	改为“Join the Waitlist”或“Request Early Access”
2	4	检测到 AI 润色痕迹：“In today's fast-paced engineering landscape...”	首屏副标题	重写：直接、具体，不要填充内容
3	4	功能图标混用了实心和描边样式	功能网格	统一使用一种图标样式

P2 — 可选改进

#	轮次	问题	位置	修复方案
1	2	缺少结构化数据（没有 Product 或 SoftwareApplication schema）	<head>	添加 JSON-LD SoftwareApplication schema
2	4	页脚版权年份为 2025	页脚	更新为 2026

---

优势

• 技术基础扎实（22/25）——速度快，优化完善
• 深色 UI + 渐变点缀与 Cold+Active 象限完美契合
• 响应式布局在各断点下表现良好

建议

1. 明确首屏内容——访客需要在 3 秒内了解产品类别
2. 移除虚假用户评价——留白也好过虚假的社会认同
3. 重写 CTA，使其与实际操作相符（加入候补名单，而不是“开始使用”）

---

为何有效：Landing Page 配置会跳过 UX 完整性（第 3 轮）和跨设备检查（第 5 轮），重点关注单页最重要的方面：信息是否清晰传达、技术是否扎实、内容是否真实？70% 的分数表明该页面经过修复后即可发布——P0 问题出在文案，而非工程实现。

---

技能边界（边界识别）

此技能擅长：

• 对任何网站（静态、动态、SPA、SSR）进行发布前验证
• 生成结构化审查报告，以便移交给客户
• 发现技术上可运行与真正准备就绪之间的“收尾差距”
• 使用 GUIA 技术栈（Next.js、Framer Motion、GSAP、Lenis）的团队——常见问题已纳入检查

此技能不适合：

• 深度性能工程——直接使用 Lighthouse、WebPageTest 或 Chrome DevTools
• 无障碍审查（WCAG 合规性）——此技能覆盖基础内容，但不是完整的无障碍审查。请使用 axe-core 或 WAVE。
• 安全渗透测试——此技能检查响应标头，而非漏洞。请使用 OWASP ZAP。
• 转化率优化——CRO 请使用 landing-page-optimizer。此技能检查 CTA 是否存在，而不检查其转化效果。
• 设计方向——选择视觉方向请使用 web-design-director。此技能验证执行情况。

质量检查点

接受审查结果前，请确认：

• 所有 5 轮（或符合配置的轮次）都已评分
• 总分计算正确（完整审查为 15 + 25 + 25 + 20 + 15 = 100）
• 每个 P0 都有具体的修复方案（不只是“改进此项”）
• 结论遵循覆盖规则（1 个 P0 = 尚未就绪）
• 优势部分肯定了真正的亮点（而不只是指出问题）

---

迭代指南

“第一轮发现明显问题，第二轮发现细微问题。”

推荐的迭代模式

轮次	重点	要提出的问题
第 1 次审查	全面检查	“有什么问题？缺少什么？有什么不符合品牌风格？”
第 2 次审查（修复后）	验证 P0	“阻塞问题是否确实已修复？修复是否引入了回归问题？”
第 3 次审查（发布前）	打磨	“我是否愿意自豪地公开分享这个 URL？”

实用的后续提示词

• “仅重新执行第 2 轮——我修复了安全响应标头和 404 页面。”
• “首页和关于页面的品牌语气似乎不一致。请深入检查第 4 轮。”
• “按照电子商务配置为此页面评分——我们添加了结账流程。”
• “将这次审查与上次进行比较，并告诉我有哪些改进。”

---

学习曲线

使用次数	你将体验到什么
第 1 次审核	你会发现自己从未意识到的缺漏（尤其是各种状态和移动端）
第 3 次审核	你会开始将收尾工作融入工作流，而不是最后才临时补上
第 10 次审核	你会逐渐将检查清单融会贯通，交付的网站也会减少问题

专业提示：在完成度达到 50% 时运行第 1 轮（第一印象），不要等到最后。尽早发现定位不匹配，可以节省重新设计的时间。

---

检查清单与模板

快速上线前检查清单（5 分钟）

## Quick Check (non-negotiable minimums)

- [ ] Site loads in < 4s on mobile
- [ ] CTA visible above the fold
- [ ] No placeholder text anywhere
- [ ] No broken links on main pages
- [ ] HTTPS enforced
- [ ] 404 page exists
- [ ] OG image renders

If ALL checked → safe to soft-launch
If ANY unchecked → run full audit

GUIA 技术栈检查清单（Next.js + Framer + GSAP）

## GUIA Stack Finishing Checklist

### Next.js Config
- [ ] trailingSlash: true in next.config.js
- [ ] export const metadata on server components (not 'use client')
- [ ] Lazy SDK init (getSupabase(), getStripe()) — not module-level
- [ ] sitemap.ts + robots.ts present

### Animation
- [ ] useGSAP (not useEffect) for GSAP
- [ ] viewport={{ once: true }} on scroll animations
- [ ] prefers-reduced-motion media query
- [ ] Lenis (not Locomotive Scroll)

### CSS
- [ ] Global a{color} doesn't override CTA text — use inline style if needed
- [ ] No horizontal overflow on mobile
- [ ] Touch targets ≥ 44px

### Deploy
- [ ] Env vars set with printf (no trailing newline)
- [ ] Docker healthcheck passes before success report
- [ ] deploy.sh flock prevents concurrent deploys

危险信号检查清单

## Warning Signs in Your Audit

- [ ] Score is 85+ but something still "feels off" → trust your gut, re-examine Pass 1
- [ ] All passes score well except one pass scores <50% → that pass is a blocker
- [ ] P0 list has more than 3 items → the site isn't ready, period
- [ ] Multiple P2s in the same area → that's actually a P1 (systemic issue)
- [ ] "It works on my machine" for any browser test → test on real devices

---

与其他 ClawFu 技能集成

技能	集成点
web-design-director	构建前使用——确定情感象限。第 1 轮会据此进行验证。
design-trends-2026	第 4 轮的视觉一致性检查可参考当前趋势的契合度
minimalist-image-director	第 4 轮的图像处理一致性检查
landing-page-optimizer	本次审核通过后再进行转化优化——CRO 假定基础已就绪
landing-page-copy	第 4 轮的文案质量检查——如果文案不合格，请转用此技能进行重写

工作流顺序：

web-design-director → [build site] → website-finishing-director → [fix issues] → landing-page-optimizer
(direction)            (code)         (QA/finishing)               (iterate)      (CRO/optimization)

---

参考资料

• Nielsen, Jakob. “用户界面设计的 10 项可用性启发式原则”（1994 年，2020 年更新）——UX 完整性检查的基础
• Google. “Web Vitals”——LCP、CLS、INP 阈值定义
• OWASP. “Secure Headers Project”——安全标头建议
• Gardner, Oli. “101 条着陆页优化技巧”（Unbounce）——上线前转化检查清单
• Norman, Don. “情感化设计”（2004 年）——本能、行为与反思层面的设计评估
• GUIA Production Memory——.claude/memory/agents/webdesign.md、seo.md、devops.md、gotchas.md

相关技能

• web-design-director——视觉方向框架（使用此技能前先使用）
• design-trends-2026——用于第 4 轮验证的当前视觉趋势
• minimalist-image-director——用于保持图像一致性的 AI 摄影方向
• landing-page-optimizer——转化优化（使用此技能后再使用）
• ai-video-qa——视频内容的同类 QA 技能（采用相同的评分理念）

---

技能元数据

name: website-finishing-director
category: ai-design
subcategory: quality-assurance
version: 1.0
author: GUIA
source_expert: Nielsen Norman Group + Google Web Vitals + OWASP + GUIA Production Memory (8 shipped sites)
source_work: null
difficulty: intermediate
mode: centaur
estimated_value: QA/finishing audit engagement (~1500-3000 EUR per site)
tags: [web-design, qa, audit, finishing, pre-launch, ux, performance, seo, brand, cross-device, scoring]
created: 2026-02-12
updated: 2026-02-12

---

此技能属于 GUIA Premium Marketing Skills Library——连接 AI 基础知识与技术实施的 201 层。