create-website

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Create a Website

创建网站

A blank page becomes a live, high-converting website through ten phases run in one dependency-respecting order: message, then design, then conversion, then a brutal review. This journey is interactive — the agent asks before every decision and never designs before the message is settled — and resumable, because every decision and artifact lives in the project's

docs/

folder. You drive the phases; the constituent skills carry the method.

本流程会按依赖顺序执行10个阶段，将空白页面转化为上线的高转化网站：先确定核心信息，再进行设计，接着优化转化，最后进行严苛评审。整个流程是交互式的——Agent会在每个决策前发起询问，且绝不会在核心信息确定前开展设计——同时支持断点续建，因为所有决策和产出物都会保存在项目的

docs/

文件夹中。你主导阶段推进，各细分技能负责落地具体方法。

Core Principle

核心原则

Message before design, design before conversion — in that order; looks-fine is the floor, not the goal. A visitor decides in five seconds whether to stay, and that decision rides on whether they instantly understand what you do and why it matters to them — so clarity comes first and design serves it. This skill sequences the phases, asks the questions, and records the decisions; the constituent skills carry the frameworks. Invoke them rather than improvising their method.

**先信息、再设计、后转化——严格遵循此顺序；外观合格只是底线，而非目标。**访客会在5秒内决定是否停留，而这个决策的关键在于他们能否立刻明白你提供的服务及其对自身的价值——因此清晰性是第一位的，设计需为信息传递服务。本流程负责编排阶段顺序、提出问题并记录决策；各细分技能负责落地对应的框架。请调用这些技能而非自行摸索方法。

Journey Map

流程路线图

Phase	Skill	Question it answers	Artifact
1	one-page-marketing	Who is this for, and what is the site's one job?	Creates docs/MARKETING.md; extends docs/CUSTOMER.md
2	storybrand-messaging	What do we say, with the customer as hero?	Creates docs/POSITIONING.md, docs/WEBSITE.md
3	made-to-stick	How do we make the message memorable?	Extends docs/POSITIONING.md, docs/WEBSITE.md
4	top-design	What makes this page unforgettable to look at?	Creates docs/DESIGN.md
5	web-typography	Is the type readable as well as dramatic?	Extends docs/DESIGN.md
6	refactoring-ui	Is the design consistent and systematic?	Extends docs/DESIGN.md
7	ux-heuristics	Can anyone use it without thinking?	Extends docs/DESIGN.md
8	cro-methodology	Why don't visitors convert, and what answers them?	Extends docs/WEBSITE.md, docs/EXPERIMENTS.md
9	scorecard-marketing	How do we capture the not-ready-to-buy majority?	Extends docs/WEBSITE.md, docs/MARKETING.md
10	steve-jobs-design-review	Is it insanely great, or not done?	Extends docs/WEBSITE.md — GATE

阶段	技能	该阶段要解决的问题	产出物
1	one-page-marketing	网站面向谁？核心目标是什么？	创建docs/MARKETING.md；扩展docs/CUSTOMER.md
2	storybrand-messaging	如何以客户为主角传递信息？	创建docs/POSITIONING.md、docs/WEBSITE.md
3	made-to-stick	如何让核心信息更易被记住？	扩展docs/POSITIONING.md、docs/WEBSITE.md
4	top-design	如何让页面视觉上令人难忘？	创建docs/DESIGN.md
5	web-typography	字体是否兼具可读性与视觉冲击力？	扩展docs/DESIGN.md
6	refactoring-ui	设计是否具备一致性与系统性？	扩展docs/DESIGN.md
7	ux-heuristics	页面是否无需思考即可轻松使用？	扩展docs/DESIGN.md
8	cro-methodology	访客为何不转化？如何解决？	扩展docs/WEBSITE.md、docs/EXPERIMENTS.md
9	scorecard-marketing	如何捕获暂无意向购买的大多数访客？	扩展docs/WEBSITE.md、docs/MARKETING.md
10	steve-jobs-design-review	网站是否足够出色？还是仍需完善？	扩展docs/WEBSITE.md —— 评审关卡

Operating Rules

操作规则

Resume first. Before anything else, read
```
docs/CREATE-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/CREATE-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.
Every scarcity claim, testimonial, and guarantee on the site must be true. When a persuasion tactic needs inventing evidence, replace it with a tactic that uses evidence you have.

优先续建。在开展任何工作前，先读取
```
docs/CREATE-WEBSITE-PLAN.md
```
及流程路线图中的所有产出物。若存在进度跟踪文件，用3-5行总结当前进度，并询问用户进入哪个阶段。当用户确认进入节点后，此步骤完成。已有进度跟踪的流程需续建，不得重启。
仅首次运行时收集信息。若不存在进度跟踪文件：先执行下方的信息收集环节，然后创建
```
docs/CREATE-WEBSITE-PLAN.md
```
，并为每个阶段标记状态：
```
pending | in-progress | awaiting-evidence | done | deferred: reason | skipped: reason
```
。当进度跟踪文件创建完成且用户确认阶段计划后，此步骤完成。
阶段启动。告知用户：该阶段的作用、需要做出的决策、产出的文件、大致工作量。提供继续/跳过/延后选项——标记为关卡（GATE）的阶段可延后，但不得跳过。若用户选择继续，将阶段状态标记为
```
in-progress
```
。当用户做出选择后，此步骤完成。
技能调用与备选方案。加载对应阶段的技能并使用：每个阶段的调用行以短名称（slug）指定技能——请使用该技能推进阶段。若技能不可用，提示用户：
```
npx skills add wondelai/skills/<slug> --global
```
。若用户拒绝，使用该技能的极简方案（Brief）推进阶段，并说明当前使用的模式。
阶段内决策。询问“与用户共同决策”下的所有问题——提供具体选项及你的推荐。将选择记录到进度跟踪文件的“关键决策”部分。不得擅自做出决策。
阶段收尾。在写入文件前，先展示产出物草稿供用户确认。获得批准后：写入或扩展docs/下的文件，更新进度跟踪文件（状态、关键决策、下一步行动）。当文件写入完成且阶段状态标记为
```
done
```
后，此步骤完成。
产出物规范。先读取再写入；仅当文件不存在时创建，否则仅扩展内容——添加或更新你的章节，保留其他人的内容。docs/下的文件均为大写。所有建议需以复选框或包含负责人及优先级的表格行形式呈现。首次创建docs/文件时，请参考references/artifact-templates.md——先创建完整的框架（所有章节标题），再填充当前阶段对应的内容。
网站上的所有稀缺性声明、客户证言及保证必须真实。当某个说服策略需要虚构证据时，替换为使用现有真实证据的策略。

Intake

信息收集

Ask these before creating the tracker:

What is the product or service, and who is it for? (Gates Phase 1's niche and avatar, and every word of the message.)
Do
```
docs/POSITIONING.md
```
or
```
docs/CUSTOMER.md
```
already exist from a create-business run? (If yes, lighten Phases 1-2 and reuse them; if positioning is thin, add the obviously-awesome optional phase.)
What is the single primary conversion goal — start a trial, book a demo, purchase, or take a quiz? (Gates every CTA decision in Phases 1, 8, 9.)
Full multi-page site or a single landing page? (Gates sitemap scope and whether Phases 8-9 apply.)
What is the tech stack and where does the code live? (So design and copy land in real files, not a hand-off doc.)
What proof assets exist today — testimonials, results, logos, guarantees? (Gates the Phase 8 persuasion audit and Rule 8.)
How much does craft matter — competing on design, or a functional site? (Gates whether Phases 4-5 run fully or lightly.)

Skip heuristics: skip Phase 1 when a prior run already fixed the niche, avatar, and USP; run Phases 4-5 lightly for an internal or throwaway page where craft does not sell (never skip refactoring-ui); skip Phase 9 when one direct CTA suffices and there is no nurture motion; skip Phase 3 only under a brutal timeline — and warn that clear-but-forgettable copy evaporates. Then create the tracker from the template and confirm the plan.

Done when

docs/CREATE-WEBSITE-PLAN.md

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

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

产品或服务是什么？面向哪些用户？（决定阶段1的细分市场与用户画像，以及所有信息内容。）
是否已存在来自create-business流程的
```
docs/POSITIONING.md
```
或
```
docs/CUSTOMER.md
```
？（若存在，可简化阶段1-2并复用内容；若定位内容不足，需添加obviously-awesome可选阶段。）
核心转化目标是什么——开启试用、预约演示、完成购买，还是参与测试？（决定阶段1、8、9中的所有CTA决策。）
是搭建多页面网站还是单着陆页？（决定站点地图范围及阶段8-9是否适用。）
使用的技术栈是什么？代码存储在哪里？（确保设计与文案能落地到真实文件，而非仅交付文档。）
当前有哪些证明素材——客户证言、成果数据、品牌Logo、服务保证？（决定阶段8的说服审计及规则8的执行。）
对设计工艺的要求如何——是靠设计竞争，还是仅需功能性网站？（决定阶段4-5是完整执行还是简化执行。）

跳过规则：若之前的流程已确定细分市场、用户画像及独特卖点（USP），可跳过阶段1；若为内部页面或一次性页面（设计工艺不影响销售），可简化执行阶段4-5（但绝不能跳过refactoring-ui）；若仅需单一直接CTA且无需线索培育流程，可跳过阶段9；仅在时间极其紧迫时才可跳过阶段3——需提醒用户：清晰但易被遗忘的文案会很快失效。然后根据模板创建进度跟踪文件并确认计划。

当

docs/CREATE-WEBSITE-PLAN.md

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

Phases

各阶段详情

Phase 1 — Frame the strategy and pick one niche (one-page-marketing)

阶段1 — 制定策略并选定细分市场（one-page-marketing）

Purpose: Decide who the site is for, the USP, and the single primary conversion goal before any page exists.

Brief (fallback): PVP Index — score candidate niches on Personal fulfillment, Value to the market, and Profitability, then pick one. "Speak to everyone, speak to no one." Write a USP that passes the swap test: if a competitor's name fits your tagline, it is too generic. Map the Before and During squares to concrete pages, each with one job.

Invoke: Use the

one-page-marketing

skill with the product and target from intake. Ask for (a) PVP scores for 2-3 niches, (b) a one-paragraph avatar, (c) a swap-test USP, (d) the Before/During squares mapped to homepage, landing, and lead-capture pages.

Decide with the user: Which niche to dominate (recommend the highest PVP score)? What is the single primary conversion goal — trial, demo, purchase, or quiz lead?

Artifact: Create docs/MARKETING.md with

## Target Market & Avatar

(niche, avatar, USP, primary goal) and

## Before / During / After Grid

. Extend docs/CUSTOMER.md with

## Segments & Best-Fit Customer

. Update the tracker.

Done when: MARKETING.md names one niche, a swap-test USP, and one primary goal; CUSTOMER.md records the best-fit segment; the user confirmed the niche and goal.

目标： 在页面创建前，确定网站的目标用户、独特卖点（USP）及核心转化目标。

极简方案（备选）： PVP指数——从个人成就感、市场价值、盈利能力三个维度为候选细分市场打分，然后选定一个。“面向所有人，等于无人问津。”撰写符合替换测试的USP：若竞争对手的名称能适配你的标语，则说明过于通用。将“之前”与“期间”场景映射到具体页面，每个页面仅承担一个核心任务。

调用： 使用

one-page-marketing

技能，结合信息收集环节的产品与目标用户信息。需获取：(a) 2-3个细分市场的PVP得分；(b) 一段用户画像描述；(c) 通过替换测试的USP；(d) 将“之前/期间”场景映射到首页、着陆页及线索捕获页。

与用户共同决策： 选定哪个细分市场作为核心（推荐PVP得分最高的选项）？核心转化目标是什么——试用、演示、购买，还是测试线索？

产出物： 创建docs/MARKETING.md，包含

## 目标市场与用户画像

（细分市场、用户画像、USP、核心目标）及

## 之前/期间/之后场景矩阵

。扩展docs/CUSTOMER.md，添加

## 用户细分与最佳匹配客户

。更新进度跟踪文件。

完成标志： MARKETING.md明确一个细分市场、通过替换测试的USP及一个核心目标；CUSTOMER.md记录了最佳匹配用户群体；用户确认细分市场与目标。

Phase 2 — Write the message with StoryBrand (storybrand-messaging)

阶段2 — 用StoryBrand撰写核心信息（storybrand-messaging）

Purpose: Write the words the visitor judges in five seconds — customer as hero, you as guide.

Brief (fallback): SB7 — a Character who wants something, a Problem (external/internal/philosophical), a Guide with empathy and authority, a Plan, a call to Action, the stakes of Failure, a vivid Success. Name the internal problem (how it feels), not just the external one. One-liner: "We help [character] who struggle with [problem] to [solution] so they can [result]."

Invoke: Use the

storybrand-messaging

skill with the avatar and USP from MARKETING.md. Ask for a full BrandScript, homepage copy following the StoryBrand wireframe (header, stakes, value, guide, plan, CTA), and five one-liner variations ranked by repeatability.

Decide with the user: Which one-liner is most repeatable after a single hearing? Confirm the customer, not the brand, is the hero — no opening "We…".

Artifact: Create docs/POSITIONING.md with

## Brand Script (StoryBrand)

## One-Liner

## Key Messages

. Create docs/WEBSITE.md with

## Sitemap

and

## Page Briefs

(wireframe-derived copy blocks). Update the tracker.

Done when: POSITIONING.md holds a complete BrandScript and a locked one-liner; WEBSITE.md has a sitemap and a homepage page brief; the user approved the one-liner.

目标： 撰写访客在5秒内会评判的文案——以客户为主角，你作为引导者。

极简方案（备选）： SB7框架——一个有需求的角色、一个问题（外部/内部/理念层面）、一位兼具同理心与权威性的引导者、一套解决方案、一个行动号召、失败的代价、清晰的成功愿景。明确内部问题（用户的感受），而非仅关注外部问题。一句话总结：“我们帮助[角色]解决[问题]，实现[解决方案]，达成[成果]。”

调用： 使用

storybrand-messaging

技能，结合MARKETING.md中的用户画像与USP。需获取完整的BrandScript、遵循StoryBrand线框图的首页文案（标题、代价、价值、引导者、方案、CTA），以及5个按易记性排序的一句话总结变体。

与用户共同决策： 哪个一句话总结最易被记住？确认以客户而非品牌为主角——开头不得使用“我们……”。

产出物： 创建docs/POSITIONING.md，包含

## 品牌脚本（StoryBrand）

、

## 一句话总结

、

## 核心信息

。创建docs/WEBSITE.md，包含

## 站点地图

及

## 页面 brief

（基于线框图的文案模块）。更新进度跟踪文件。

完成标志： POSITIONING.md包含完整的BrandScript及确定的一句话总结；WEBSITE.md包含站点地图及首页brief；用户批准一句话总结。

Phase 3 — Make the message stick (made-to-stick)

阶段3 — 让核心信息更易记忆（made-to-stick）

Purpose: Turn clear copy into memorable copy that survives the closed tab and gets repeated.

Brief (fallback): SUCCESs — Simple, Unexpected, Concrete, Credible, Emotional, Story. Fight the Curse of Knowledge. Highest leverage is Concrete: replace every abstraction with a picture ("report generation from 4 hours to 10 minutes"). Add one unexpected hook, one Sinatra-test proof, and one named-customer story.

Invoke: Use the

made-to-stick

skill with the copy in WEBSITE.md

## Page Briefs

and the messages in POSITIONING.md. Ask for a SUCCESs score, concrete rewrites of every abstract benefit, one unexpected hero hook, and a short customer story.

Decide with the user: Approve the sticky rewrites and pick the hero hook. Which numbers and claims are true and citable (this feeds Rule 8)?

Artifact: Extend docs/POSITIONING.md

## Key Messages

(sticky versions) and docs/WEBSITE.md

## Page Briefs

(concrete copy). Update the tracker.

Done when: every abstract benefit is a concrete outcome with a real, true number, one unexpected hook and one customer story exist, and the copy is signed off.

目标： 将清晰的文案转化为令人难忘的内容，即使访客关闭页面后仍能记住并传播。

极简方案（备选）： SUCCESs框架——简洁（Simple）、意外（Unexpected）、具体（Concrete）、可信（Credible）、情感（Emotional）、故事（Story）。避免“知识诅咒”。最高效的是具体性：将所有抽象表述替换为具象场景（比如“报告生成时间从4小时缩短至10分钟”）。添加一个意外钩子、一个符合Sinatra测试的证明、一个真实客户故事。

调用： 使用

made-to-stick

技能，结合WEBSITE.md

## 页面 brief

中的文案及POSITIONING.md中的核心信息。需获取SUCCESs评分、所有抽象利益点的具象化改写、一个意外钩子、一个简短客户故事。

与用户共同决策： 批准改写后的易记文案并选定钩子。哪些数据与声明是真实可引用的（需符合规则8）？

产出物： 扩展docs/POSITIONING.md

## 核心信息

（易记版本）及docs/WEBSITE.md

## 页面 brief

（具象化文案）。更新进度跟踪文件。

完成标志： 所有抽象利益点均转化为带有真实数据的具体成果；存在一个意外钩子与一个客户故事；文案获得用户确认。

Phase 4 — Design the signature moment (top-design)

阶段4 — 设计标志性视觉瞬间（top-design）

Purpose: Make the page look agency-built, not template-built — starting from the one screenshot-worthy moment.

Brief (fallback): Every pixel intentional. Start with the signature moment (usually the hero), not the header: dramatic scale (min 10:1 display-to-body), an asymmetric composition, a choreographed load with ~80ms staggered word reveals. Custom cubic-beziers (expo-out

0.16,1,0.3,1

), animate only

transform

opacity

, warm off-blacks (

#0a0a0a

) not pure black. Custom cursor only if the user opts in.

Invoke: Use the

top-design

skill with POSITIONING.md and the WEBSITE.md page briefs. Ask for the signature hero design, a custom color system (no AI purple-to-blue gradient), and a scored audit across typography, composition, motion, color, and details.

Decide with the user: What is the signature moment worth screenshotting? Approve the color system. Custom cursor — yes, or native (recommend native unless craft is the product)?

Artifact: Create docs/DESIGN.md with

## Design Direction

(signature moment, personality, references). Update the tracker.

Done when: DESIGN.md names the signature moment and color system, the top-design audit scores are recorded, and the user approved the direction.

目标： 让页面看起来像专业机构出品，而非模板搭建——从一个值得截图的视觉瞬间开始。

极简方案（备选）： 每个像素都有意义。从标志性瞬间（通常是Hero区）而非页眉开始设计：采用大比例（至少10:1的展示区与正文区比例）、不对称构图、约80ms的逐字渐入动画。使用自定义三次贝塞尔曲线（expo-out

0.16,1,0.3,1

），仅对

transform

opacity

属性添加动画，使用暖色调近黑色（

#0a0a0a

）而非纯黑色。仅当用户主动选择时才使用自定义光标。

调用： 使用

top-design

技能，结合POSITIONING.md及WEBSITE.md的页面brief。需获取标志性Hero区设计、自定义配色系统（禁止AI生成的紫蓝渐变）、以及针对排版、构图、动效、色彩、细节的评分审计报告。

与用户共同决策： 哪个视觉瞬间值得截图？批准配色系统。是否使用自定义光标（推荐默认光标，除非设计本身是产品卖点）？

产出物： 创建docs/DESIGN.md，包含

## 设计方向

（标志性瞬间、风格定位、参考案例）。更新进度跟踪文件。

完成标志： DESIGN.md明确标志性瞬间与配色系统；记录top-design审计评分；用户批准设计方向。

Phase 5 — Choose and tune the type (web-typography)

阶段5 — 选择并优化字体（web-typography）

Purpose: Make the type readable as well as dramatic — the discipline behind the drama.

Brief (fallback): Clear-goblet principle — type serves content. "Type for a moment" (headlines) versus "type to live with" (body). Three measures beat typeface choice: 16-18px body, 45-75ch measure (66 optimal,

max-width: 65ch

), line height 1.5-1.7 body / 1.1-1.25 headings. One to two families. Under 200KB payload, WOFF2, variable fonts,

clamp()

fluid scale, preload +

font-display: swap

Invoke: Use the

web-typography

skill with DESIGN.md

## Design Direction

. Ask for a display+body pairing, full CSS (clamp scale, per-context line heights, 65ch measure), and a font-loading plan under 200KB with zero layout shift.

Decide with the user: Approve the pairing; confirm the performance budget (recommend a single variable font to cut the file count).

Artifact: Extend docs/DESIGN.md

## Typography

(typefaces, scale, measure, line height, loading strategy). Update the tracker.

Done when: DESIGN.md

## Typography

specifies the pairing, scale, measures, and a sub-200KB loading strategy, and the user approved the pairing.

目标： 让字体兼具可读性与视觉冲击力——在视觉效果背后体现专业性。

极简方案（备选）： 透明酒杯原则——字体为内容服务。“用于瞬间吸引注意力的字体”（标题）与“用于长期阅读的字体”（正文）区分开来。三个关键指标比字体选择更重要：正文字号16-18px、每行字符数45-75（最优66，

max-width: 65ch

）、行高正文1.5-1.7 / 标题1.1-1.25。使用1-2种字体家族。文件大小控制在200KB以内，采用WOFF2格式、可变字体，使用

clamp()

实现流体缩放，预加载并设置

font-display: swap

。

调用： 使用

web-typography

技能，结合DESIGN.md

## 设计方向

。需获取标题+正文的字体组合、完整CSS代码（流体缩放、各场景行高、65ch宽度限制）、以及文件大小低于200KB且无布局偏移的字体加载方案。

与用户共同决策： 批准字体组合；确认性能预算（推荐使用单一可变字体以减少文件数量）。

产出物： 扩展docs/DESIGN.md

## 排版

（字体、缩放规则、宽度限制、行高、加载策略）。更新进度跟踪文件。

完成标志： DESIGN.md

## 排版

明确字体组合、缩放规则、宽度限制，以及文件大小低于200KB的加载策略；用户批准字体组合。

Phase 6 — Make it systematic (refactoring-ui)

阶段6 — 实现设计系统化（refactoring-ui）

Purpose: Add the consistency that keeps the wow from collapsing on the second and third sections.

Brief (fallback): Design in grayscale first, add color last. Systems over talent: constrained scales for spacing (4, 8, 16, 24, 32, 48, 64), type, color, and shadow. Hierarchy from combining levers (large OR bold OR dark), saving all three for one element. Space between groups exceeds space within. Near-black (

#111827

) not pure

#000

, tinted grays. Two-layer shadows mapped to elevation. Run the blur test.

Invoke: Use the

refactoring-ui

skill with DESIGN.md. Ask for a grayscale hierarchy audit, a constrained token set (spacing, a 9-shade palette with tinted grays, a type scale, a shadow scale), and refactored button/form/card components with one primary action per section.

Decide with the user: Approve the token scales; confirm the primary/secondary/tertiary button hierarchy.

Artifact: Extend docs/DESIGN.md

## Tokens

(spacing, palette, shadows) and

## Components

(per-component decisions). Update the tracker.

Done when: DESIGN.md defines the token scales and component decisions, buttons show one clear primary per section, and the user approved the tokens.

目标： 增加设计一致性，避免视觉冲击力在后续页面区域流失。

极简方案（备选）： 先以灰度设计，最后添加色彩。系统化优于创意：为间距（4、8、16、24、32、48、64）、字体、色彩、阴影设定受限的尺度标准。通过组合不同维度（大尺寸/粗体/深色）构建层级，仅对一个元素同时使用三个维度。组间间距大于组内间距。使用近黑色（

#111827

）而非纯

#000

，使用带色调的灰色。阴影分为两层，对应不同层级。执行模糊测试。

调用： 使用

refactoring-ui

技能，结合DESIGN.md。需获取灰度层级审计报告、受限的设计令牌集（间距、9色调色板含带色调灰色、字体尺度、阴影尺度）、以及重构后的按钮/表单/卡片组件（每个区域仅保留一个核心操作）。

与用户共同决策： 批准设计令牌尺度；确认主/次/三级按钮层级。

产出物： 扩展docs/DESIGN.md

## 设计令牌

（间距、调色板、阴影）及

## 组件

（各组件决策）。更新进度跟踪文件。

完成标志： DESIGN.md定义了设计令牌尺度与组件决策；每个区域的按钮有明确的核心操作；用户批准设计令牌。

Phase 7 — Make it effortless to use (ux-heuristics)

阶段7 — 实现无思考式使用体验（ux-heuristics）

Purpose: Remove the friction of making a visitor think.

Brief (fallback): Pages must be self-evident; users scan, satisfice, and muddle through. Trunk Test — dropped onto any page cold, can they answer what site, what page, what sections, and where to go next? Run "get rid of half the words." Plain-language CTAs. Inline validation on blur, mark optional not required fields, 44x44px tap targets, visible system status ("Saving…"/"Saved", skeletons, confirmations).

Invoke: Use the

ux-heuristics

skill with WEBSITE.md and DESIGN.md. Ask for a usability audit against Krug's laws and Nielsen's 10 heuristics, each issue rated 0-4, plus rewritten error messages and CTA labels.

Decide with the user: Approve the prioritized fix list starting with catastrophic (4) issues; confirm which fixes ship before launch versus later.

Artifact: Extend docs/DESIGN.md

## UX Audit Findings

(Issue | Heuristic | Severity | Fix | Status). Update the tracker.

Done when: every page passes the Trunk Test, catastrophic issues are fixed, UX Audit Findings are logged with severities, and the user approved the fix order.

目标： 消除访客使用时的思考摩擦。

极简方案（备选）： 页面必须直观易懂；用户只会快速浏览、寻求满意解、摸索操作。主干测试——若访客首次进入任意页面，能否立刻回答这是什么网站、当前在哪个页面、有哪些板块、下一步该去哪里？执行“砍掉一半文字”的操作。使用直白的CTA文案。输入框失焦时即时验证，标记可选字段而非必填字段，点击目标尺寸不小于44x44px，显示系统状态（“保存中…”/“已保存”、骨架屏、确认信息）。

调用： 使用

ux-heuristics

技能，结合WEBSITE.md与DESIGN.md。需获取基于Krug可用性原则与Nielsen十大启发式的可用性审计报告（每个问题按0-4评分），以及改写后的错误提示与CTA标签。

与用户共同决策： 批准按优先级排序的修复列表（从严重程度4的问题开始）；确认哪些修复需在上线前完成，哪些可延后。

产出物： 扩展docs/DESIGN.md

## UX审计结果

（问题 | 启发式原则 | 严重程度 | 修复方案 | 状态）。更新进度跟踪文件。

完成标志： 所有页面通过主干测试；严重问题已修复；UX审计结果已记录严重程度；用户批准修复顺序。

Phase 8 — Engineer the conversion (cro-methodology)

阶段8 — 转化优化工程（cro-methodology）

Purpose: Turn a clear, usable page into one that answers the real reasons visitors don't convert.

Brief (fallback): Don't guess — discover. Build an Objection/Counter table for the Big 5 (Trust, Price, Fit, Timing, Effort); place each counter at the point of friction, never buried in an FAQ; use "CO Only" for objections a visitor won't admit. Proof hierarchy: specific results with context > named testimonials > case studies > bare logos. Proof sandwich; specific numbers ("47,832" not "about 50,000").

Invoke: Use the

cro-methodology

skill with WEBSITE.md and the proof assets from intake. Ask for a Big-5 Objection/Counter table with placements, a persuasion-asset audit ranked by the proof hierarchy, a wish list of missing proof, and A/B test hypotheses.

Decide with the user: Which counters ship now versus await proof you must acquire? Confirm no counter invents evidence (Rule 8).

Artifact: Extend docs/WEBSITE.md

## Conversion Elements

(Objection | Counter | Placement | Status). Extend docs/EXPERIMENTS.md

## Experiment Cards

and

## Experiment Backlog

. Update the tracker.

Done when: the Big-5 table has an evidence-backed counter and placement per objection, missing proof is listed as actions, test hypotheses are logged, and no counter relies on invented evidence.

目标： 将清晰易用的页面转化为能解决访客真实转化障碍的页面。

极简方案（备选）： 不要猜测——要探索。针对五大核心异议（信任、价格、适配性、时机、成本）构建“异议/应对”表格；将应对内容放置在摩擦点，而非隐藏在FAQ中；对访客不愿承认的异议使用“仅内部使用（CO Only）”策略。证明素材优先级：带上下文的具体成果 > 署名客户证言 > 案例研究 > 纯Logo。采用证明三明治结构；使用具体数字（比如“47,832”而非“约50,000”）。

调用： 使用

cro-methodology

技能，结合WEBSITE.md与信息收集环节的证明素材。需获取五大核心异议的“异议/应对”表格及放置位置、按优先级排序的说服素材审计报告、缺失素材清单、A/B测试假设。

与用户共同决策： 哪些应对内容需立即落地，哪些需等待素材补充？确认所有应对内容均不使用虚构证据（符合规则8）。

产出物： 扩展docs/WEBSITE.md

## 转化元素

（异议 | 应对方案 | 放置位置 | 状态）。扩展docs/EXPERIMENTS.md

## 实验卡片

及

## 实验待办

。更新进度跟踪文件。

完成标志： 五大核心异议表格中每个异议都有基于证据的应对方案与放置位置；缺失素材已列为行动项；测试假设已记录；所有应对内容均未使用虚构证据。

Phase 9 — Add a lead-generating quiz (scorecard-marketing)

阶段9 — 添加线索生成测试（scorecard-marketing）

Purpose: Capture the ~97% not ready to buy today with a lower-commitment offer.

Brief (fallback): Everything is downstream from lead generation; a quiz converts 30-50% versus 3-10% for a static PDF. Four steps: a landing page (concept hook + the 3 Cs — Clarity, Credibility, Connection), a questionnaire that captures the email before the questions, a tiered results page, and a segmented follow-up. "Moving toward" hooks beat fear-based ones. Keep it to 8-15 questions for cold traffic.

Invoke: Use the

scorecard-marketing

skill with the primary goal and avatar. Ask for a concept hook and landing page, 10-12 scored questions in 3-4 categories, three result tiers with dynamic copy and a CTA each, and a follow-up sequence segmented by tier.

Decide with the user: Does the site need a lead-nurture motion? If one direct CTA suffices, skip this phase. Otherwise approve the concept hook.

Artifact: Extend docs/WEBSITE.md

## Lead Capture

(quiz funnel design). Extend docs/MARKETING.md

## Nurture Sequences

(tiered follow-up). Update the tracker.

Done when: WEBSITE.md

## Lead Capture

specifies a hook, ≤15 questions with email captured first, and tiered results; MARKETING.md holds the segmented follow-up; the hook promises only what the assessment delivers.

目标： 用低承诺的捕获方式获取约97%暂无意向购买的访客。

极简方案（备选）： 一切业务都依赖线索生成；测试的转化率为30-50%，而静态PDF仅为3-10%。分为四个步骤：着陆页（概念钩子 + 三要素——清晰性、可信度、关联性）、先收集邮箱再提问的问卷、分层结果页、按细分群体跟进的序列邮件。“正向引导”钩子优于“恐惧驱动”钩子。冷流量场景下控制在8-15个问题。

调用： 使用

scorecard-marketing

技能，结合核心目标与用户画像。需获取概念钩子与着陆页设计、3-4类共10-12个计分问题、三个结果层级及对应的动态文案与CTA、按层级细分的跟进邮件序列。

与用户共同决策： 网站是否需要线索培育流程？若仅需单一直接CTA，可跳过此阶段。否则批准概念钩子。

产出物： 扩展docs/WEBSITE.md

## 线索捕获

（测试漏斗设计）。扩展docs/MARKETING.md

## 培育序列邮件

（分层跟进内容）。更新进度跟踪文件。

完成标志： WEBSITE.md

## 线索捕获

明确钩子、≤15个问题且先收集邮箱、分层结果页；MARKETING.md包含分层跟进内容；钩子仅承诺评估能实现的内容。

Phase 10 — Hold it to an insanely-great bar (steve-jobs-design-review) — GATE

阶段10 — 按极致标准评审（steve-jobs-design-review）—— 评审关卡

Purpose: Subject the finished site to one brutal, honest review before a single visitor sees it.

Brief (fallback): "Start with the customer experience and work backwards." Experience it cold as a stranger. State the One Thing in a single sentence. Count steps-to-value (three, not nine). Walk the slow paths — empty form, error state, failed payment, mobile cold-start. Check the back of the fence — 404, error copy, confirmation email. The verdict is binary: insanely great, or not done. Focusing is saying no.

Invoke: Use the

steve-jobs-design-review

skill with the live site or full page set. Ask for a cold first impression, the One Thing, a steps-to-value count, a walk of the failure/empty states and the back of the fence, a binary verdict, and a ranked cut list plus fix list.

Decide with the user: Act on the cut list — what to delete to protect the single primary goal? If the verdict is NOT DONE, which fixes are blocking launch?

Artifact: Extend docs/WEBSITE.md

## Audit Findings

(Issue | Severity | Fix | Status) with the cut list and fix list. Update the tracker.

Done when: the verdict is INSANELY GREAT (not "pretty good"), the cut list is applied, the back of the fence is checked, and blocking fixes are closed — only then does the site launch.

目标： 在访客看到网站前，对完成的网站进行一次严苛、诚实的评审。

极简方案（备选）： “从客户体验出发，反向推进。”以陌生人的视角首次体验网站。用一句话总结核心价值。统计获取价值所需步骤（控制在3步，而非9步）。测试异常路径——空表单、错误状态、支付失败、移动端冷启动。检查“幕后”内容——404页面、错误文案、确认邮件。评审结果只有两种：极致出色，或仍需完善。聚焦意味着学会拒绝。

调用： 使用

steve-jobs-design-review

技能，结合已上线网站或完整页面集合。需获取首次冷体验反馈、核心价值总结、获取价值步骤统计、异常/空状态及“幕后”内容检查报告、二元评审结论、按优先级排序的删减列表与修复列表。

与用户共同决策： 执行删减列表——删除哪些内容以保护核心目标？若评审结论为“仍需完善”，哪些修复是上线的前置条件？

产出物： 扩展docs/WEBSITE.md

## 评审结果

（问题 | 严重程度 | 修复方案 | 状态），包含删减列表与修复列表。更新进度跟踪文件。

完成标志： 评审结论为“极致出色”（而非“还不错”）；删减列表已执行；“幕后”内容已检查；阻塞上线的修复已完成——此时网站才可上线。

Optional Phases

可选阶段

Skill	Add when	Artifact
obviously-awesome	`docs/POSITIONING.md` does not exist yet and the messaging has nothing to stand on	Creates docs/POSITIONING.md
influence-psychology	Pricing or signup pages need persuasion-principle audits	Extends docs/WEBSITE.md
high-perf-browser	Core Web Vitals or load speed threaten conversions	Extends docs/WEBSITE.md
design-everyday-things	Forms or flows confuse users despite clean visuals	Extends docs/DESIGN.md
microinteractions	The site needs interaction polish beyond static design	Extends docs/DESIGN.md

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.

技能	适用场景	产出物
obviously-awesome	`docs/POSITIONING.md` 不存在且核心信息无支撑	创建docs/POSITIONING.md
influence-psychology	定价或注册页面需要基于说服原则的审计	扩展docs/WEBSITE.md
high-perf-browser	Core Web Vitals或加载速度影响转化	扩展docs/WEBSITE.md
design-everyday-things	表单或流程视觉简洁但用户仍感到困惑	扩展docs/DESIGN.md
microinteractions	网站需要超越静态设计的交互细节优化	扩展docs/DESIGN.md

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

Common Mistakes

常见错误

Mistake	Fix
Designing before you have a message	Run Phase 2 (storybrand) and Phase 3 before Phase 4 (top-design); design serves the words, never the reverse.
Making your brand the hero	In storybrand, open with the customer's problem and desired outcome; if the first sentence starts with "We," rewrite it.
Stacking competing calls to action	Keep one direct CTA and one transitional; refactoring-ui and the Jobs review both enforce one primary action per section.
Confusing clear with sticky	Run the made-to-stick pass — concrete numbers, one unexpected hook, one customer story — so the message survives the closed tab.
Testing button colors instead of objections	Build the Objection/Counter table in cro-methodology first; "meek tweaks" rarely move conversion.
Polished happy path, broken everywhere else	In the Jobs review, walk the empty state, form error, 404, confirmation email, and mobile cold-start — the back of the fence.

错误	修复方案
在核心信息确定前开展设计	先执行阶段2（storybrand）与阶段3，再执行阶段4（top-design）；设计为文案服务，而非相反。
将品牌作为主角	在storybrand中，以客户的问题与期望结果开头；若第一句以“我们”开头，需重写。
设置多个相互竞争的CTA	仅保留一个直接CTA与一个过渡CTA；refactoring-ui与Jobs评审均要求每个区域仅一个核心操作。
将清晰与易记混淆	执行made-to-stick环节——添加具体数字、一个意外钩子、一个客户故事，让信息在页面关闭后仍能被记住。
测试按钮颜色而非解决异议	先在cro-methodology中构建“异议/应对”表格；“微小调整”几乎无法提升转化率。
仅优化正常路径，忽略异常场景	在Jobs评审中，测试空状态、表单错误、404页面、确认邮件、移动端冷启动——即“幕后”场景。

Completing the Journey

流程收尾

Exit checklist:

POSITIONING.md holds a BrandScript, a repeatable one-liner, and key messages consistent across surfaces
WEBSITE.md has a sitemap, page briefs with copy, an Objection/Counter table, and (if in scope) a lead-capture design
DESIGN.md defines direction, typography, tokens, components, and a passed UX audit
The Steve Jobs review returned INSANELY GREAT — not "pretty good" — and the cut list is applied
Every scarcity claim, testimonial, and guarantee on the page is true

Close the tracker: every phase

done

skipped: reason

, with any remaining Next Actions carried into the artifacts as checkboxes. Then route forward: when the site is live and conversion data starts arriving, continue with the

improve-website

skill to turn today's assumptions into tested wins. When the website sells a product that now needs building, continue with the

create-app

skill.

退出检查清单：

POSITIONING.md包含BrandScript、易记的一句话总结，且各渠道核心信息一致
WEBSITE.md包含站点地图、带文案的页面brief、“异议/应对”表格，以及（若适用）线索捕获设计
DESIGN.md定义了设计方向、排版、设计令牌、组件，且通过UX审计
Steve Jobs评审结论为“极致出色”——而非“还不错”——且删减列表已执行
页面上的所有稀缺性声明、客户证言及保证均真实

关闭进度跟踪文件：所有阶段标记为

done

或

skipped: reason

，剩余的下一步行动以复选框形式记录到产出物中。后续推进方向：网站上线并产生转化数据后，使用

improve-website

技能将当前假设转化为经测试的优化方案；若网站用于销售需构建的产品，使用

create-app

技能继续推进。