improve-website

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Improve a Website

优化网站

An interactive, resumable journey that turns a live-but-underperforming website into a ranked backlog of defensible fixes. Across eight phases it diagnoses why visitors don't convert, then fixes usability, hierarchy, typography, message, speed, memory, and errors — asking you at each decision point and recording results in

docs/

. Each change is tied to a reason; the big ones ship as tests.

这是一个交互式、可续接的流程，能将表现不佳的现有网站转化为一份经过排序、有充分依据的待修复事项清单。它分为八个阶段，诊断访客不转化的原因，然后针对性优化可用性、层级结构、排版、文案、速度、记忆点和容错性——在每个决策点向你提问，并将结果记录在

docs/

文件夹中。每项改动都有对应的理由，重要改动会作为可测试的实验落地。

Core Principle

核心原则

Diagnose, fix, prove: evidence from real visitors decides what changes, and every fix ships as a testable hypothesis. Order is deliberate — research first, then usability, look, message, speed, memory, and error-tolerance, because each phase's output feeds the next.

This skill sequences the phases, asks the decision questions, and records what you decide. The constituent skills carry the method — invoke them rather than improvising their frameworks.

诊断、修复、验证：由真实访客的数据决定要做哪些改动，每项修复都以可测试的假设形式落地。 流程顺序经过精心设计——先调研，再优化可用性、视觉呈现、文案、速度、记忆点和容错性，因为每个阶段的输出都会为下一个阶段提供支撑。

此技能负责编排各阶段流程、提出决策问题并记录你的选择。具体方法由各个子技能实现——请直接调用这些技能，而非自行套用其框架。

Journey Map

流程地图

Phase	Skill	Question it answers	Artifact
1	cro-methodology	Why don't visitors convert, and which fix moves the most money?	Extends docs/METRICS.md, docs/WEBSITE.md, docs/EXPERIMENTS.md — GATE
2	ux-heuristics	Where do visitors stumble before they weigh the offer?	Extends docs/DESIGN.md, docs/EXPERIMENTS.md
3	refactoring-ui	Does the page look as clear as it reads?	Extends docs/DESIGN.md, docs/EXPERIMENTS.md
4	web-typography	Can visitors comfortably read the copy?	Extends docs/DESIGN.md, docs/EXPERIMENTS.md
5	storybrand-messaging	Does a stranger grasp the offer in five seconds?	Extends docs/POSITIONING.md, docs/EXPERIMENTS.md
6	high-perf-browser	Does the page arrive before patience runs out?	Extends docs/METRICS.md, docs/WEBSITE.md, docs/EXPERIMENTS.md
7	made-to-stick	Is the idea memorable enough to survive to the decision?	Extends docs/POSITIONING.md, docs/EXPERIMENTS.md
8	design-everyday-things	Do the visitors who act ever get stuck?	Extends docs/DESIGN.md, docs/EXPERIMENTS.md

阶段	技能	要解决的问题	产出物
1	cro-methodology	访客为何不转化？哪项修复能带来最高收益？	扩展docs/METRICS.md、docs/WEBSITE.md、docs/EXPERIMENTS.md —— 关键节点
2	ux-heuristics	访客在评估产品之前会在哪些环节受阻？	扩展docs/DESIGN.md、docs/EXPERIMENTS.md
3	refactoring-ui	页面视觉呈现是否和文案一样清晰？	扩展docs/DESIGN.md、docs/EXPERIMENTS.md
4	web-typography	访客能否舒适地阅读文案？	扩展docs/DESIGN.md、docs/EXPERIMENTS.md
5	storybrand-messaging	陌生人能否在5秒内理解你的产品？	扩展docs/POSITIONING.md、docs/EXPERIMENTS.md
6	high-perf-browser	页面能否在访客失去耐心前加载完成？	扩展docs/METRICS.md、docs/WEBSITE.md、docs/EXPERIMENTS.md
7	made-to-stick	产品理念是否足够好记，能留存到访客做出决策？	扩展docs/POSITIONING.md、docs/EXPERIMENTS.md
8	design-everyday-things	采取行动的访客是否会遇到阻碍？	扩展docs/DESIGN.md、docs/EXPERIMENTS.md

Operating Rules

操作规则

Resume first. Before anything else, read
```
docs/IMPROVE-WEBSITE-PLAN.md
```
and every artifact in the Journey Map. If the tracker exists, summarize the journey state in 3-5 lines and ask which phase to enter. Done when the user has confirmed an entry point. A journey with a tracker is resumed, never restarted.
Intake on first run only. No tracker: run the Intake below, then create
```
docs/IMPROVE-WEBSITE-PLAN.md
```
with every phase statused
```
pending | in-progress | awaiting-evidence | done | deferred: reason | skipped: reason
```
. Done when the tracker exists and the user has confirmed the phase plan.
Phase entry. Announce: what the phase does, the decision it forces, the artifact it produces, rough effort. Offer proceed / skip / defer — phases marked GATE may be deferred, never skipped. Mark the phase
```
in-progress
```
on proceed. Done when the user chose.
Skill invocation and fallback. Load the phase's skill and use it: each phase's Invoke line names the skill by slug — use that skill to run the phase. If it is not available, offer:
```
npx skills add wondelai/skills/<slug> --global
```
. If the user declines, run the phase from its Brief — the minimum viable method. State which mode you are in.
In-phase decisions. Ask every question under "Decide with the user" — with concrete options and your recommendation. Record the choice in the tracker's Key Decisions. A decision made silently is a defect.
Phase exit. Present the draft artifact content for sign-off before writing. On approval: write or extend the docs/ files, update the tracker (status, Key Decisions, Next Actions). Done when the files are written and the phase row shows
```
done
```
.
Artifact discipline. Read before writing; create a file only if missing, otherwise extend — add or update your sections, preserve everyone else's. Files are UPPERCASE in
```
docs/
```
. Every recommendation lands as a checkbox or a table row with owner and priority. See references/artifact-templates.md when creating a docs/ file for the first time — create it from the full skeleton (all section headings), then fill the sections your phase names.
Diagnose before redesigning. No visual or copy change ships before the Phase 1 diagnosis produces evidence for it, and every change lands in EXPERIMENTS.md with a pre-committed metric. A fix with no Phase 1 finding behind it goes back to Phase 1; a bold change with no test attached stays in the backlog until it has one.

优先续接流程：在开始任何操作前，先读取
```
docs/IMPROVE-WEBSITE-PLAN.md
```
和流程地图中的所有产出物。如果存在跟踪文件，用3-5行总结当前流程状态，并询问进入哪个阶段。当用户确认进入节点后，此步骤完成。已有跟踪文件的流程只能续接，不能重启。
仅首次运行时进行初始调研：若没有跟踪文件，先完成下方的初始调研，然后创建
```
docs/IMPROVE-WEBSITE-PLAN.md
```
，将每个阶段标记为
```
pending | in-progress | awaiting-evidence | done | deferred: reason | skipped: reason
```
。当跟踪文件创建完成且用户确认阶段计划后，此步骤完成。
进入阶段：告知用户该阶段的作用、需要做出的决策、产出的文档以及大致工作量。提供继续/跳过/延后选项——标记为关键节点的阶段可延后，但不可跳过。若用户选择继续，将阶段标记为
```
in-progress
```
。当用户做出选择后，此步骤完成。
调用技能与备选方案：加载对应阶段的技能并使用：每个阶段的调用行都以短名称指定技能——请使用该技能完成阶段任务。如果技能不可用，提供方案：
```
npx skills add wondelai/skills/<slug> --global
```
。若用户拒绝，使用该技能的简要说明完成阶段任务——即最小可行方法。需说明当前使用的模式。
阶段内决策：询问“与用户共同决策”下的所有问题——提供具体选项和你的建议。将选择记录在跟踪文件的关键决策部分。未明确做出的决策视为缺陷。
退出阶段：在写入前展示产出物草稿供用户确认。获得批准后：写入或扩展docs/文件夹中的文件，更新跟踪文件（状态、关键决策、下一步行动）。当文件写入完成且阶段状态显示为
```
done
```
时，此步骤完成。
文档规范：先读取再写入；仅在文件不存在时创建，否则进行扩展——添加或更新你的部分，保留其他内容。docs/文件夹中的文件均为大写。每项建议需以复选框或包含负责人和优先级的表格行形式呈现。首次创建docs/文件时，请参考references/artifact-templates.md——从完整框架（所有章节标题）创建文件，然后填充当前阶段涉及的章节。
先诊断再重构：在阶段1的诊断提供数据支撑前，不得进行任何视觉或文案改动，且每项改动都需记录在EXPERIMENTS.md中，并预设衡量指标。没有阶段1诊断依据的修复需返回阶段1；未附加测试的重大改动需留在待办清单中，直到添加测试为止。

Intake

初始调研

Ask these before creating the tracker:

What page or flow are we improving, and what is the ONE action it should drive? (Scopes every phase; gates Phase 1 — a page with three CTAs has no goal.)
What is the conversion problem in your words, and what evidence do you have — analytics, bounce rate, drop-off? (Feeds the Phase 1 funnel diagnosis.)
Do you have real visitor input — exit surveys, reviews, support tickets, recordings — or can you get it? (Phase 1's counter-objections must use the customer's own words.)
Roughly how much traffic per week? (Decides whether A/B tests can reach significance; low traffic leans on the qualitative and heuristic phases.)
Which complaint do you hear most — "looks unprofessional," "nobody understands what we do," "it's slow," "the text is hard to read"? (Routes which fix phase to front-load, per the guide FAQ.)
Do you have existing positioning or brand docs (POSITIONING.md)? (Phase 5 and 7 build on them.)
Can you paste real assets — URLs, live copy, CSS, analytics screenshots? (The skills are only as good as the evidence you feed them.)

Skip heuristics: skip Phase 4 if body text already meets 16px / ~66ch / 1.5-1.7 line height; skip Phase 6 if Core Web Vitals are already green (but triage a fast LCP fix first if the page barely renders); skip Phase 5 or 7 if messaging is already validated and clear. Never skip Phase 1 — it aims every other phase.

Then create

docs/IMPROVE-WEBSITE-PLAN.md

from the template and confirm the plan. Done when

docs/IMPROVE-WEBSITE-PLAN.md

exists with every phase statused and the user has confirmed the plan.

创建跟踪文件前需询问以下问题：

我们要优化哪个页面或流程？它应该引导访客完成哪一项核心操作？（限定所有阶段的范围；是阶段1的关键节点——有三个CTA的页面没有明确目标。）
你认为当前的转化率问题是什么？有哪些证据——分析数据、跳出率、流失率？（为阶段1的漏斗诊断提供信息。）
你是否有真实访客的反馈——退出调查、评论、支持工单、录屏？或者能否获取这些反馈？（阶段1的异议反驳必须使用客户的原话。）
每周大致有多少流量？（决定A/B测试能否达到统计显著性；低流量场景需依赖定性和启发式评估阶段。）
你最常听到的抱怨是什么——“看起来不专业”、“没人懂我们做什么”、“速度太慢”、“文字难以阅读”？（根据指南FAQ确定优先处理哪个修复阶段。）
你是否已有定位或品牌文档（POSITIONING.md）？（阶段5和7会基于这些文档展开。）
你能否提供真实资产——URL、现有文案、CSS、分析截图？（技能的效果取决于你提供的证据质量。）

可跳过的启发式检查：如果正文字体已满足16px / ~66ch / 1.5-1.7行高，可跳过阶段4；如果Core Web Vitals已达绿色标准，可跳过阶段6（但如果页面几乎无法渲染，需优先修复LCP）；如果文案已验证清晰，可跳过阶段5或7。阶段1不可跳过——它是所有其他阶段的方向指引。

然后根据模板创建

docs/IMPROVE-WEBSITE-PLAN.md

并确认计划。当

docs/IMPROVE-WEBSITE-PLAN.md

创建完成，所有阶段已标记状态且用户确认计划后，此步骤完成。

Phases

各阶段详情

Phase 1 — Diagnose why visitors don't convert (cro-methodology) — GATE

阶段1 — 诊断访客不转化的原因（cro-methodology）—— 关键节点

Purpose: Find where and why the page loses visitors before any pixel changes. Phases 2-8 may only fix problems traceable to a Phase 1 finding.

Brief (fallback): Don't guess — discover. Map the funnel for blocked arteries (underperforming high-traffic stages) and missing links (stages that don't exist). Name the ONE action each page drives. Build the O/CO table for the Big 5 (Trust, Price, Fit, Timing, Effort) in the customer's words, each counter at friction. Rank by ICE.

Invoke: Use the

cro-methodology

skill with the target page/flow, the ONE action, and real visitor input. Ask for a funnel map, an O/CO table, missing persuasion assets, and an ICE-ranked hypothesis list.

Decide with the user: (1) Confirm the ONE action per page; cut competing CTAs. (2) Attack the highest-money blocked artery or a missing link first? (3) Low traffic: accept qualitative + heuristic evidence.

Artifact: Extend docs/METRICS.md

## Funnel

and

## Stage & One Metric That Matters

; docs/WEBSITE.md

## Conversion Elements

and

## Audit Findings

(issue | severity 0-4 | fix | status); docs/EXPERIMENTS.md

## Experiment Backlog

(ICE-ranked). Update the tracker.

Done when: the funnel is mapped, the ONE action set per page, every researched objection has a counter, the backlog is ICE-ranked, and Phase 1 shows done — only then are Phases 2-8 unlocked.

目标： 在进行任何像素级改动前，找出页面流失访客的环节和原因。阶段2-8只能修复可追溯到阶段1发现的问题。

备选方法： 不要猜测——要探索。绘制漏斗图，找出阻塞点（表现不佳的高流量环节）和缺失环节（不存在的必要步骤）。明确每个页面的核心操作。用客户原话构建五大异议（信任、价格、适配性、时机、成本）的正反方表格，每个异议对应一个摩擦点。用ICE评分对修复方案排序。

调用技能： 使用

cro-methodology

技能，提供目标页面/流程、核心操作和真实访客反馈。要求生成漏斗图、正反方表格、缺失的说服性资产以及ICE排序的假设清单。

与用户共同决策： (1) 确认每个页面的核心操作；移除竞争CTA。(2) 优先解决最高收益的阻塞点还是缺失环节？(3) 低流量场景：接受定性+启发式评估证据。

产出物： 扩展docs/METRICS.md的

## Funnel

和

## Stage & One Metric That Matters

部分；扩展docs/WEBSITE.md的

## Conversion Elements

和

## Audit Findings

部分（问题 | 严重程度0-4 | 修复方案 | 状态）；扩展docs/EXPERIMENTS.md的

## Experiment Backlog

部分（ICE排序）。更新跟踪文件。

完成标志： 漏斗图已绘制，每个页面的核心操作已确定，所有调研到的异议都有对应反驳方案，待办清单已按ICE排序，阶段1状态显示为done——此时阶段2-8才会解锁。

Phase 2 — Remove the usability friction (ux-heuristics)

阶段2 — 消除可用性摩擦（ux-heuristics）

Purpose: Find where visitors stumble — the friction that makes them quit before they weigh the offer.

Brief (fallback): Don't make me think. Users scan, satisfice, and muddle through. Run a heuristic evaluation against Nielsen's 10 heuristics; rate each issue 0-4 by frequency, impact, and persistence so catastrophes outrank cosmetics. Apply the Trunk Test to interior pages (what site, page, options, where am I, where's search?). Cut half the words, then half again; kill mystery-meat icon navigation.

Invoke: Use the

ux-heuristics

skill with the page/flow and the Phase 1 findings. Ask for a severity-rated evaluation, a Trunk Test result per key page, and rewritten error and label copy.

Decide with the user: Which severity-4 and -3 issues get fixed now versus backlogged? Confirm fixes run by severity, not by ease.

Artifact: Extend docs/DESIGN.md

## UX Audit Findings

(issue | heuristic | severity 0-4 | fix | status); append each fix to docs/EXPERIMENTS.md

## Experiment Backlog

with ICE. Update the tracker.

Done when: every issue carries a 0-4 severity, the Trunk Test passes on each key page or is logged, and severity-4 issues have an owner.

目标： 找出访客受阻的环节——即导致他们在评估产品前放弃的摩擦点。

备选方法： 不要让访客思考。用户只会快速浏览、勉强接受并摸索操作。对照尼尔森十大启发式原则进行评估；按频率、影响和持续性将每个问题评为0-4级，确保严重问题优先于 cosmetic问题。对内部页面进行主干测试（这是什么网站？什么页面？有哪些选项？我在哪里？搜索框在哪里？）。砍掉一半文字，再砍掉一半；移除表意模糊的图标导航。

调用技能： 使用

ux-heuristics

技能，提供页面/流程和阶段1的发现。要求生成按严重程度评级的评估结果、每个关键页面的主干测试结果，以及重写后的错误提示和标签文案。

与用户共同决策： 哪些严重程度为4和3的问题需要立即修复，哪些留到以后？确认按严重程度而非难易度排序修复。

产出物： 扩展docs/DESIGN.md的

## UX Audit Findings

部分（问题 | 启发式原则 | 严重程度0-4 | 修复方案 | 状态）；将每个修复方案添加到docs/EXPERIMENTS.md的

## Experiment Backlog

部分并标注ICE评分。更新跟踪文件。

完成标志： 每个问题都有0-4级的严重程度评级，每个关键页面的主干测试已通过或已记录，严重程度为4的问题已指定负责人。

Phase 3 — Fix the visual hierarchy (refactoring-ui)

阶段3 — 修复视觉层级（refactoring-ui）

Purpose: Make the page look as clear as it reads — one obvious focal point, not everything competing.

Brief (fallback): Great UI is systems, not talent. Design in grayscale first: establish hierarchy with size, weight, and contrast before any color — combine levers, don't multiply (all three only for the hero element). Enforce a spacing scale (4/8/16/24/32/48/64) where gaps between groups exceed gaps within them. Constrain text to 45-75 chars. Add color last: 5-9 shades per hue, grays tinted, not #000.

Invoke: Use the

refactoring-ui

skill with the page, the Phase 2 findings, and the CSS framework. Ask for a grayscale hierarchy pass, spacing-scale corrections, a systematic palette, and exact class/CSS changes.

Decide with the user: Fix within the current design system or introduce new tokens? Confirm color work waits until the grayscale layout reads.

Artifact: Extend docs/DESIGN.md

## Tokens

(spacing scale · palette shades · shadows) and

## Components

(component | decision | status); append fixes to docs/EXPERIMENTS.md

## Experiment Backlog

. Update the tracker.

Done when: the layout reads in grayscale, the spacing scale is applied, one primary CTA dominates, and the token decisions are recorded.

目标： 让页面视觉呈现和文案一样清晰——有一个明确的焦点，而非所有元素都在竞争注意力。

备选方法： 优秀的UI是系统设计，而非天赋。先以灰度设计：在添加颜色前，用尺寸、字重和对比度建立层级——组合使用这些手段，而非单独叠加（仅英雄元素可同时使用三种）。遵循间距规范（4/8/16/24/32/48/64），组间间距需大于组内间距。将文本宽度限制在45-75字符。最后添加颜色：每个色调使用5-9种渐变，灰色需带色调，而非纯#000。

调用技能： 使用

refactoring-ui

技能，提供页面、阶段2的发现和CSS框架。要求生成灰度层级优化方案、间距规范修正、系统化调色板以及具体的类/CSS改动。

与用户共同决策： 在现有设计系统内修复还是引入新的设计令牌？确认颜色调整需等到灰度布局清晰后再进行。

产出物： 扩展docs/DESIGN.md的

## Tokens

部分（间距规范 · 调色板渐变 · 阴影）和

## Components

部分（组件 | 决策 | 状态）；将修复方案添加到docs/EXPERIMENTS.md的

## Experiment Backlog

部分。更新跟踪文件。

完成标志： 灰度布局清晰可读，间距规范已应用，有一个主导的主CTA，设计令牌决策已记录。

Phase 4 — Make the words readable (web-typography)

阶段4 — 提升文字可读性（web-typography）

Purpose: Fix the measurements that decide whether visitors can comfortably read the copy.

Brief (fallback): Size, line length, and line height matter more than the typeface. Fix three: body ≥16px (18px for reading-heavy pages); line length 45-75 chars (~66 sweet spot) via ch or max-width; line height 1.5-1.7 body, 1.1-1.25 headings. Build a modular scale; load fonts with swap, preload one, subset, <200KB.

Invoke: Use the

web-typography

skill with the reading-heavy templates and the DESIGN.md type decisions. Ask for corrected CSS with a fluid clamp() scale and a font-loading plan.

Decide with the user: Keep the current typefaces or repair the pairing? Confirm the font-loading budget (<200KB) that Phase 6 will verify.

Artifact: Extend docs/DESIGN.md

## Typography

(typefaces · scale · measure · line height · loading strategy); append fixes to docs/EXPERIMENTS.md

## Experiment Backlog

. Update the tracker.

Done when: body size, measure, and line height meet targets on the key templates, the scale is defined, and the loading strategy is recorded.

目标： 修复影响访客舒适阅读文案的各项参数。

备选方法： 字号、行宽和行高比字体本身更重要。修复三个核心参数：正文字号≥16px（阅读密集型页面为18px）；行宽45-75字符（约66字符为最佳），通过ch单位或max-width实现；正文字行高1.5-1.7，标题行高1.1-1.25。构建模块化字号比例；使用swap加载字体，预加载一个核心字体，进行子集化处理，总大小<200KB。

调用技能： 使用

web-typography

技能，提供阅读密集型模板和DESIGN.md中的字体决策。要求生成包含流体clamp()比例的修正CSS以及字体加载方案。

与用户共同决策： 保留现有字体还是调整字体搭配？确认字体加载预算（<200KB），阶段6会对此进行验证。

产出物： 扩展docs/DESIGN.md的

## Typography

部分（字体 · 字号比例 · 行宽 · 行高 · 加载策略）；将修复方案添加到docs/EXPERIMENTS.md的

## Experiment Backlog

部分。更新跟踪文件。

完成标志： 关键模板上的正文字号、行宽和行高达到目标，字号比例已定义，加载策略已记录。

Phase 5 — Sharpen the message (storybrand-messaging)

阶段5 — 打磨文案（storybrand-messaging）

Purpose: Make a stranger understand what you do and why it matters in five seconds.

Brief (fallback): The customer is the hero; your brand is the guide (Yoda, not Luke). Run SB7: a Character wanting one thing, a Problem at three levels (external / internal / philosophical — most brands miss the internal), a Guide with empathy and authority, a Plan of 3-4 safe steps, one Direct plus one Transitional CTA, and Failure/Success stakes. Write the "We help [X] who struggle with [Y] to [Z]" one-liner.

Invoke: Use the

storybrand-messaging

skill with the current copy, POSITIONING.md if it exists, and the internal problems from the Phase 1 objections. Ask for above-the-fold rewrites, a BrandScript, and one-liners.

Decide with the user: Which one-liner passes the repeat-after-one-hearing test? Confirm the internal problem the copy must name.

Artifact: Extend docs/POSITIONING.md

## Brand Script (StoryBrand)

## One-Liner

, and

## Key Messages

(surface | message | status); append copy tests to docs/EXPERIMENTS.md

## Experiment Backlog

. Update the tracker.

Done when: the one-liner is chosen, above-the-fold copy names the internal problem with one Direct and one Transitional CTA, and the messages are logged by surface.

目标： 让陌生人在5秒内理解你做什么以及为什么重要。

备选方法： 客户是英雄；你的品牌是导师（尤达，而非卢克）。执行SB7框架：一个有明确需求的角色，三个层面的问题（外部/内部/哲学——大多数品牌忽略内部问题），一个兼具同理心和权威性的导师，3-4个安全步骤的计划，一个直接CTA加一个过渡CTA，以及失败/成功的后果。撰写“我们帮助[X]解决[Y]问题，实现[Z]目标”的一句话介绍。

调用技能： 使用

storybrand-messaging

技能，提供现有文案、POSITIONING.md（如果存在）以及阶段1异议中的内部问题。要求生成首屏文案重写、BrandScript和一句话介绍。

与用户共同决策： 哪一句介绍能通过“听一遍就能复述”测试？确认文案必须点明的内部问题。

产出物： 扩展docs/POSITIONING.md的

## Brand Script (StoryBrand)

、

## One-Liner

和

## Key Messages

部分（展示场景 | 文案 | 状态）；将文案测试添加到docs/EXPERIMENTS.md的

## Experiment Backlog

部分。更新跟踪文件。

完成标志： 已选定一句话介绍，首屏文案点明内部问题并包含一个直接CTA和一个过渡CTA，文案已按展示场景记录。

Phase 6 — Make the page fast (high-perf-browser)

阶段6 — 提升页面速度（high-perf-browser）

Purpose: Ensure a slow load doesn't waste the clarity work — the page must arrive before patience runs out.

Brief (fallback): Latency, not bandwidth, is the bottleneck — cut round trips. Target Core Web Vitals: LCP <2.5s, INP <200ms, CLS <0.1, TTFB <800ms. Preload the LCP hero element; reserve space (width/height or aspect-ratio) to stop CLS; defer non-critical JS; inline critical CSS; cache immutable; on HTTP/2 undo sharding.

Invoke: Use the

high-perf-browser

skill with the page URL and a performance trace or Lighthouse run if available. Ask for the LCP element, layout-shift sources, blocking resources, and a prioritized fix list.

Decide with the user: If the page barely renders, triage a fast LCP fix before the rest? Which fixes ship now versus need a test?

Artifact: Extend docs/METRICS.md

## Baselines & Targets

(CWV metric | baseline | target | miss response) and docs/WEBSITE.md

## Audit Findings

; append fixes to docs/EXPERIMENTS.md

## Experiment Backlog

. Update the tracker.

Done when: CWV baselines and targets are recorded, every fix has an owner, and any HTTP/1.1 workaround still active on HTTP/2 is flagged.

目标： 确保缓慢的加载速度不会浪费之前的清晰度优化——页面必须在访客失去耐心前加载完成。

备选方法： 延迟而非带宽是瓶颈——减少往返次数。以Core Web Vitals为目标：LCP <2.5s，INP <200ms，CLS <0.1，TTFB <800ms。预加载LCP英雄元素；预留空间（width/height或aspect-ratio）以避免CLS；延迟非关键JS；内联关键CSS；缓存不可变资源；在HTTP/2环境下取消分片。

调用技能： 使用

high-perf-browser

技能，提供页面URL以及性能追踪或Lighthouse报告（如果有）。要求找出LCP元素、布局偏移来源、阻塞资源以及优先级排序的修复清单。

与用户共同决策： 如果页面几乎无法渲染，是否优先快速修复LCP？哪些修复立即落地，哪些需要测试？

产出物： 扩展docs/METRICS.md的

## Baselines & Targets

部分（CWV指标 | 基准值 | 目标值 | 未达标应对方案）和docs/WEBSITE.md的

## Audit Findings

部分；将修复方案添加到docs/EXPERIMENTS.md的

## Experiment Backlog

部分。更新跟踪文件。

完成标志： 已记录CWV基准值和目标值，每个修复方案已指定负责人，HTTP/2环境下仍在使用的HTTP/1.1 workaround已标记。

Phase 7 — Make the core idea stick (made-to-stick)

阶段7 — 强化核心记忆点（made-to-stick）

Purpose: Make the offer memorable enough to survive the gap between the visit and the decision.

Brief (fallback): Beat the Curse of Knowledge. Score key messages on SUCCESs (Simple, Unexpected, Concrete, Credible, Emotional, Stories). Concrete: replace abstraction with sensory specifics ("order in 30 minutes, still hot"; "save 16 hours a month"). Simple: the Commander's Intent — the one thing visitors must remember. Make statistics human-scale (Sinatra Test); prefer specific over round figures.

Invoke: Use the

made-to-stick

skill with the headline, value prop, and key features plus the Phase 5 one-liner. Ask for a SUCCESs score per message with concrete rewrites, the Commander's Intent, and a human-scale stat.

Decide with the user: What is the single Commander's Intent message? Which abstractions become which concrete specifics?

Artifact: Extend docs/POSITIONING.md

## Key Messages

with SUCCESs scores and concrete rewrites; append copy tests to docs/EXPERIMENTS.md

## Experiment Backlog

. Update the tracker.

Done when: each key message has a SUCCESs score and a concrete rewrite, the Commander's Intent is named, and the key statistic is human-scale.

目标： 让产品理念足够好记，能留存到访客做出决策的时刻。

备选方法： 打破知识诅咒。用SUCCESs框架（Simple简洁、Unexpected意外、Concrete具体、Credible可信、Emotional情感、Stories故事）为关键文案评分。具体性：用感官细节替代抽象描述（“30分钟内送达，仍热乎”；“每月节省16小时”）。简洁性：明确核心意图——访客必须记住的一件事。让统计数据贴近生活（Sinatra测试）；优先使用具体数字而非约数。

调用技能： 使用

made-to-stick

技能，提供标题、价值主张、核心功能以及阶段5的一句话介绍。要求生成每个文案的SUCCESs评分和具体重写版本、核心意图以及贴近生活的统计数据。

与用户共同决策： 核心意图文案是什么？哪些抽象描述要替换为具体细节？

产出物： 扩展docs/POSITIONING.md的

## Key Messages

部分，添加SUCCESs评分和具体重写版本；将文案测试添加到docs/EXPERIMENTS.md的

## Experiment Backlog

部分。更新跟踪文件。

完成标志： 每个关键文案都有SUCCESs评分和具体重写版本，核心意图已明确，关键统计数据已贴近生活。

Phase 8 — Design out the errors (design-everyday-things)

阶段8 — 设计容错机制（design-everyday-things）

Purpose: Protect the visitors who decided to act — make the wrong action impossible, not just warned against.

Brief (fallback): There is no human error, only bad design. Bridge two gulfs: Execution ("how do I do this?") with clear signifiers (pressable buttons, editable fields) and constraints (date picker over free text, Submit disabled until valid); Evaluation ("what happened?") with feedback within 0.1s. Fix slips with undo and separated destructive actions; error messages say what went wrong and how to fix, no blame.

Invoke: Use the

design-everyday-things

skill with the conversion-critical flows (signup, checkout, account setup). Ask for weak signifiers, where constraints make errors impossible, feedback gaps, and message rewrites.

Decide with the user: Where should a constraint replace an error message? Where should undo replace an are-you-sure confirmation?

Artifact: Extend docs/DESIGN.md

## UX Audit Findings

(issue | heuristic = Norman gulf | severity 0-4 | fix | status); append fixes to docs/EXPERIMENTS.md

## Experiment Backlog

. Update the tracker.

Done when: each conversion flow has signifier/constraint/feedback fixes logged, error messages meet the checklist, and destructive actions offer undo.

目标： 保护已决定采取行动的访客——让错误操作成为不可能，而非仅仅发出警告。

备选方法： 不存在人为错误，只有糟糕的设计。填补两个鸿沟：执行鸿沟（“我该怎么做？”）——通过明确的标识（可点击按钮、可编辑字段）和约束（日期选择器而非自由文本、表单验证通过前禁用提交按钮）；评估鸿沟（“发生了什么？”）——在0.1秒内给出反馈。用撤销功能和分离的破坏性操作修复失误；错误提示需说明问题和解决方法，不得指责用户。

调用技能： 使用

design-everyday-things

技能，提供转化率关键流程（注册、结账、账户设置）。要求找出弱标识、可通过约束避免错误的环节、反馈缺口以及提示文案重写。

与用户共同决策： 哪些地方应该用约束替代错误提示？哪些地方应该用撤销功能替代“你确定吗”的确认框？

产出物： 扩展docs/DESIGN.md的

## UX Audit Findings

部分（问题 | 启发式原则=诺曼鸿沟 | 严重程度0-4 | 修复方案 | 状态）；将修复方案添加到docs/EXPERIMENTS.md的

## Experiment Backlog

部分。更新跟踪文件。

完成标志： 每个转化流程都已记录标识/约束/反馈修复方案，错误提示符合规范，破坏性操作提供撤销选项。

Optional Phases

可选阶段

Skill	Add when	Artifact
influence-psychology	objection points need ethical persuasion assets (social proof, authority, real scarcity)	Extends docs/WEBSITE.md `## Conversion Elements`
microinteractions	interactions feel dead or unresponsive	Extends docs/DESIGN.md `## Microinteraction Inventory`
top-design	the redesign warrants a signature moment, not just fixes	Extends docs/DESIGN.md `## Design Direction`
steve-jobs-design-review	before relaunch, for a brutal end-to-end verdict	Extends docs/WEBSITE.md `## Audit Findings`

Optional phases follow the same operating rules — load and use each listed skill exactly as a core phase would; insert where the Add-when condition first becomes true.

技能	适用场景	产出物
influence-psychology	需要为异议点添加符合伦理的说服资产（社交证明、权威背书、真实稀缺性）	扩展docs/WEBSITE.md的 `## Conversion Elements` 部分
microinteractions	交互体验生硬或无响应	扩展docs/DESIGN.md的 `## Microinteraction Inventory` 部分
top-design	重构需要标志性亮点，而非仅做修复	扩展docs/DESIGN.md的 `## Design Direction` 部分
steve-jobs-design-review	重新上线前，进行全面严格的端到端评审	扩展docs/WEBSITE.md的 `## Audit Findings` 部分

可选阶段遵循相同的操作规则——完全按照核心阶段的方式加载和使用每个列出的技能；在适用场景首次出现时插入。

Common Mistakes

常见错误

Mistake	Fix
Redesigning before researching — a prettier page on the same unaddressed objections converts identically.	Run Phase 1 (cro-methodology) first; no visual or copy change ships without a Phase 1 finding behind it.
Testing meek tweaks (button colors, font nudges) too small to ever reach significance.	Use ICE scoring to pick bold changes; ask "could this 10x results?" before you test it (cro-methodology).
Adding color before the grayscale layout works.	Grayscale first, color last; if the page fails desaturated, no palette saves it (refactoring-ui).
Optimizing speed in a vacuum, ahead of the clarity work.	Sequence speed after clarity (Phase 6); exception — triage a fast LCP fix if the page barely renders (high-perf-browser).
Treating "user error" as the user's fault and adding more warnings.	Prevent errors with constraints and forgive them with undo, not dialogs (design-everyday-things).
Confusing clarity with stickiness — a clear message can be instantly forgotten.	Run both Phase 5 and Phase 7; StoryBrand makes you understood, Made to Stick makes you remembered.

错误	修复方案
未调研就重构——在未解决核心异议的情况下，更美观的页面转化率不会有变化。	先运行阶段1（cro-methodology）；没有阶段1的诊断依据，不得进行任何视觉或文案改动。
测试过于微小的调整（按钮颜色、字体微调），永远无法达到统计显著性。	用ICE评分选择重大改动；测试前问自己“这能让结果提升10倍吗”（cro-methodology）。
灰度布局未优化就添加颜色。	先做灰度设计，最后加颜色；如果灰度页面效果不佳，任何调色板都无法挽救（refactoring-ui）。
脱离清晰度优化单独优化速度。	速度优化放在清晰度优化之后（阶段6）；例外情况——如果页面几乎无法渲染，优先修复LCP（high-perf-browser）。
将“用户错误”归咎于用户，添加更多警告。	用约束避免错误，用撤销功能原谅错误，而非弹出确认框（design-everyday-things）。
将清晰度和记忆点混淆——清晰的文案可能会被立即遗忘。	同时运行阶段5和阶段7；StoryBrand让你被理解，Made to Stick让你被记住。

Completing the Journey

完成流程

Exit checklist:

Every phase in

docs/IMPROVE-WEBSITE-PLAN.md

done

skipped: reason

WEBSITE.md, DESIGN.md, POSITIONING.md, and METRICS.md carry every fix as a table row with owner and priority.
Each high-ICE change is a designed A/B test in EXPERIMENTS.md
```
## Experiment Cards
```
with a pre-committed metric.
The ONE action per key page is unambiguous and competing CTAs are removed.

Close the loop by re-invoking

cro-methodology

to design the bold tests for the high-ICE backlog: size the sample up front, run one full business cycle, require 95% confidence, never peek early — then promote them from

## Experiment Backlog

## Experiment Cards

, and close the tracker with Next Actions carried into the artifacts.

Forward routing: when the site converts and needs more qualified traffic, continue with the

grow-website

skill. When the friction lives in the product, not the marketing site, continue with the

improve-app

skill.

退出检查清单：

docs/IMPROVE-WEBSITE-PLAN.md

中的每个阶段都标记为

done

或

skipped: reason

。

WEBSITE.md、DESIGN.md、POSITIONING.md和METRICS.md中记录了所有修复方案，每个方案都有负责人和优先级。
每个高ICE评分的改动都已在EXPERIMENTS.md的
```
## Experiment Cards
```
部分设计为A/B测试，并预设衡量指标。
每个关键页面的核心操作明确，竞争CTA已移除。

通过重新调用

cro-methodology

为高ICE评分的待办事项设计重大测试来收尾：提前确定样本量，运行一个完整的业务周期，要求95%的置信度，中途不得查看结果——然后将这些测试从

## Experiment Backlog

移至

## Experiment Cards

，并在跟踪文件中记录下一步行动，完成流程。

后续指引：当网站转化率达标且需要更多精准流量时，继续使用

grow-website

技能。当问题出在产品而非营销网站时，继续使用

improve-app

技能。