create-website

创建网站

一张空白页面经过十个按依赖顺序执行的阶段，就能变成一个鲜活且高转化率的网站：先明确传达的信息，再做设计，然后优化转化，最后进行严苛评审。这段旅程具有互动性——Agent 会在每项决策前提问，并且绝不会在信息确定之前开始设计；同时也支持中断后继续，因为每项决策和产物都保存在项目的 docs/ 文件夹中。由你推动各个阶段；各项技能负责提供方法。

核心原则

先明确传达的信息，再做设计，最后优化转化——顺序不可颠倒；看起来还行只是底线，而非目标。 访客会在 5 秒内决定是否留下，而这个决定取决于他们能否立刻明白你做什么，以及这对他们为何重要——所以清晰度优先，设计为其服务。这项技能负责安排各阶段、提出问题并记录决策；各项技能负责提供框架。请调用它们，而不是自行发挥其方法。

流程概览

阶段	技能	要回答的问题	产物
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 — GATE

操作规则

1. 先恢复进度。 先读取 docs/CREATE-WEBSITE-PLAN.md 和 Journey Map 中的每一份产物。如果跟踪文件存在，用 3-5 行总结项目进度，并询问要进入哪个阶段。完成标准：用户已确认起始阶段。已有跟踪文件的项目应恢复进度，绝不重新开始。
2. 仅首次运行时进行信息收集。 如果没有跟踪文件：先执行下方的信息收集，然后创建 docs/CREATE-WEBSITE-PLAN.md，将每个阶段的状态设为 pending | in-progress | awaiting-evidence | done | deferred: reason | skipped: reason。完成标准：跟踪文件已创建，且用户已确认阶段计划。
3. 进入阶段。 说明该阶段的作用、需要做出的决定、将产出的成果以及大致所需投入。提供继续 / 跳过 / 延后选项——标记为 GATE 的阶段可以延后，但不可跳过。用户选择继续后，将阶段标记为 in-progress。完成标准：用户已做出选择。
4. 调用技能与备选方案。 加载并使用该阶段的技能：每个阶段的 Invoke 行都会通过 slug 指明技能——使用该技能执行阶段。如果技能不可用，提供：npx skills add wondelai/skills/<slug> --global。如果用户拒绝，则根据 Brief 执行阶段——采用最低可行方法。说明当前使用哪种模式。
5. 阶段内决策。 询问 "Decide with the user" 下的每个问题，并提供具体选项和你的建议。将选择记录在跟踪文件的 Key Decisions 中。默默做出决定属于缺陷。
6. 退出阶段。 写入前，先展示成果草稿供用户确认。获批后：创建或扩展 docs/ 文件，更新跟踪文件（状态、Key Decisions、Next Actions）。完成标准：文件已写入，且阶段行的状态为 done。
7. 成果管理规范。 写入前先读取；仅当文件不存在时才创建，否则应扩展——添加或更新相应章节，并保留其他人的内容。在 docs/ 中创建的文件名必须使用大写。每条建议都必须成为复选框，或成为包含负责人和优先级的表格行。首次创建 docs/ 文件时，请参阅 references/artifact-templates.md——根据完整骨架创建文件（包含所有章节标题），然后填写该阶段指定的章节。
8. 网站上的每一项稀缺性声明、客户评价和保证都必须属实。 如果某种说服技巧需要编造证据，请改用基于现有证据的技巧。

信息收集

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

1. 产品或服务是什么？面向哪些人？（这会决定阶段 1 的细分市场和用户画像，以及所有文案的表达。）
2. 是否已有 docs/POSITIONING.md 或 docs/CUSTOMER.md，且它们来自 create-business 流程？（如果有，简化阶段 1-2 并复用这些文件；如果定位内容较单薄，则添加明显出色的可选阶段。）
3. 唯一的主要转化目标是什么——开始试用、预约演示、购买，还是参加测验？（这会决定阶段 1、8、9 中的所有 CTA 决策。）
4. 是完整的多页面网站，还是单页落地页？（这会决定站点地图的范围，以及是否适用阶段 8-9。）
5. 使用什么技术栈，代码存放在哪里？（这样设计和文案就能落到实际文件中，而不只是交接文档。）
6. 目前有哪些证明材料——客户评价、成果数据、品牌标识、保证？（这会影响阶段 8 的说服力审查和规则 8。）
7. 对设计质量的重视程度如何——靠设计竞争，还是只需功能可用的网站？（这会决定阶段 4-5 是完整执行还是轻量执行。）

跳过阶段的判断标准：如果先前流程已确定细分市场、用户画像和 USP，则跳过阶段 1；对于不用于销售、仅供内部使用或临时使用的页面，如果设计质量无法促进销售，则轻量执行阶段 4-5（绝不跳过 refactoring-ui）；如果一个直接 CTA 已足够，且无需后续培育流程，则跳过阶段 9；只有在时间极其紧迫时才跳过阶段 3——并提醒用户，清晰却令人过目即忘的文案会迅速失去影响力。然后根据模板创建跟踪文件并确认计划。

完成标准：docs/CREATE-WEBSITE-PLAN.md 已创建，其中每个阶段均有状态，且用户已确认计划。

阶段

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

目的： 在创建任何页面之前，确定网站面向谁、独特销售主张（USP）是什么，以及唯一的主要转化目标。

简报（备用）： PVP 指数——从个人成就感（Personal fulfillment）、市场价值（Value to the market）和盈利能力（Profitability）三个方面为候选细分市场打分，然后选定一个。“想对所有人说话，就等于谁也没说。”撰写一个能通过替换测试的 USP：如果竞争对手的名字也适合放进你的标语里，那它就太笼统了。将 Before 和 During 象限对应到具体页面，每个页面只承担一项任务。

调用： 根据 intake 中的产品和目标受众，使用 one-page-marketing 技能。要求提供：（a）2-3 个细分市场的 PVP 分数；（b）一段话描述的客户画像；（c）通过替换测试的 USP；（d）将 Before/During 象限对应到首页、落地页和线索收集页面。

与用户共同决策： 要主攻哪个细分市场（建议选择 PVP 得分最高的）？唯一的主要转化目标是什么——试用、演示、购买还是测验线索？

产出： 创建 docs/MARKETING.md，其中包含 ## Target Market & Avatar（细分市场、客户画像、USP、主要目标）和 ## Before / During / After Grid。在 docs/CUSTOMER.md 中添加 ## Segments & Best-Fit Customer。更新跟踪表。

完成条件： MARKETING.md 写明一个细分市场、一个通过替换测试的 USP 和一个主要目标；CUSTOMER.md 记录最匹配的客户细分；用户确认了细分市场和目标。

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

目的： 写出访客会在 5 秒内评判的文案——客户是英雄，你是向导。

简报（备用）： SB7——一个有目标的角色，一个问题（外部、内部或哲学层面），一个兼具共情与权威的向导，一个计划，一个行动号召，失败的利害关系，以及生动的成功图景。明确说出内部问题（它给人的感受），而不只是外部问题。单句陈述：“我们帮助深受[问题]困扰的[角色]实现[解决方案]，从而获得[结果]。”

调用： 使用 MARKETING.md 中的客户画像和 USP，调用 storybrand-messaging 技能。要求提供完整的 BrandScript、遵循 StoryBrand 线框图的首页文案（页眉、利害关系、价值、向导、计划、CTA），以及 5 个按易复述程度排序的单句陈述变体。

与用户共同决策： 哪个单句陈述最容易在听过一次后复述？确认主角是客户而非品牌——开头不要写“我们……”。

产出： 创建 docs/POSITIONING.md，其中包含 ## Brand Script (StoryBrand)、## One-Liner、## Key Messages。创建 docs/WEBSITE.md，其中包含 ## Sitemap 和 ## Page Briefs（根据线框图整理的文案模块）。更新跟踪表。

完成条件： POSITIONING.md 包含完整的 BrandScript 和最终确定的单句陈述；WEBSITE.md 包含站点地图和首页页面简报；用户批准了单句陈述。

阶段 3 — 让信息深入人心（made-to-stick）

目的： 将清晰的文案变成令人难忘的文案，即使访客关闭标签页后仍能记住并转述。

简报（备用）： SUCCESs——简单（Simple）、意外（Unexpected）、具体（Concrete）、可信（Credible）、情感（Emotional）、故事（Story）。打破知识的诅咒。最能提升效果的是具体化：将每个抽象表述替换成清晰的画面（“报告生成时间从 4 小时缩短到 10 分钟”）。增加一个意外的吸引点、一条通过 Sinatra 测试的证明，以及一个点名客户的故事。

调用： 使用 WEBSITE.md 的 ## Page Briefs 中的文案和 POSITIONING.md 中的信息，调用 made-to-stick 技能。要求提供 SUCCESs 评分、将每项抽象收益改写得具体、一个出人意料的主视觉吸引点，以及一个简短的客户故事。

与用户共同决策： 批准令人印象深刻的改写并选定主视觉吸引点。哪些数字和说法属实且有依据可引用（这将用于规则 8）？

产出： 扩展 docs/POSITIONING.md 中的 ## Key Messages（令人印象深刻的版本）和 docs/WEBSITE.md 中的 ## Page Briefs（具体文案）。更新跟踪表。

完成条件： 每项抽象收益都改写为带有真实、准确数字的具体成果；已准备好一个意外的吸引点和一个客户故事；文案已获签字确认。

阶段 4 — 设计标志性时刻（top-design）

目的： 从最值得截图的时刻入手，让页面看起来像由设计机构打造，而非套用模板。

简述（备用）： 每个像素都经过精心设计。从标志性时刻（通常是主视觉区）入手，而不是页眉：戏剧性的比例（展示文字与正文至少为 10:1）、不对称构图、精心编排的加载效果，单词依次显现，间隔约 80ms。使用自定义三次贝塞尔曲线（expo-out 0.16,1,0.3,1），只对 transform/opacity 设置动画，使用暖调近黑色（#0a0a0a），而非纯黑色。仅在用户选择启用时使用自定义光标。

调用： 使用 top-design 技能，并提供 POSITIONING.md 和 WEBSITE.md 页面简述。要求设计标志性的主视觉区、自定义配色系统（不要采用 AI 常见的紫蓝渐变），并对字体排印、构图、动效、色彩和细节进行评分审查。

与用户共同决定： 哪个标志性时刻值得截图？批准配色系统。自定义光标——使用还是保留原生光标（除非交互设计本身就是产品，否则建议保留原生光标）？

产出： 创建 docs/DESIGN.md，添加 ## Design Direction（标志性时刻、个性、参考）。更新跟踪器。

完成条件： DESIGN.md 说明了标志性时刻和配色系统，记录了 top-design 审查评分，且用户已批准设计方向。

阶段 5 — 选择并调整字体（web-typography）

目的： 让字体既醒目又易读——这是戏剧性表现背后的设计准则。

简述（备用）： 遵循透明高脚杯原则——字体服务于内容。区分“用于瞬间表达的字体”（标题）和“适合长期阅读的字体”（正文）。与字体选择相比，三个度量标准更重要：正文为 16-18px，行宽为 45-75ch（最佳为 66，max-width: 65ch），正文行高为 1.5-1.7，标题行高为 1.1-1.25。使用 1 到 2 个字体系列。字体资源总大小低于 200KB，使用 WOFF2 和可变字体、clamp() 流式比例，并预加载，设置 font-display: swap。

调用： 使用 web-typography 技能，并提供 DESIGN.md 的 ## Design Direction。要求提供展示字体与正文字体的搭配、完整 CSS（clamp 比例、各场景行高、65ch 行宽），以及总大小低于 200KB、布局偏移为零的字体加载方案。

与用户共同决定： 批准字体搭配；确认性能预算（建议使用单个可变字体，以减少文件数量）。

产出： 扩展 docs/DESIGN.md 的 ## Typography（字体、比例、行宽、行高、加载策略）。更新跟踪器。

完成条件： DESIGN.md 的 ## Typography 指定了字体搭配、比例、行宽和低于 200KB 的加载策略，且用户已批准字体搭配。

阶段 6 — 建立系统化规范（refactoring-ui）

目的： 增加一致性，避免第二和第三个区块的设计效果大打折扣。

简述（备用）： 先用灰度设计，最后再添加颜色。依靠系统，而非天赋：为间距（4、8、16、24、32、48、64）、字体、颜色和阴影设定受限比例。通过组合不同手段建立层级（大、粗或深），将三种手段同时用于同一元素时应格外克制。组与组之间的间距应大于组内间距。使用近黑色（#111827），而非纯黑色 #000，并采用带色调的灰色。使用两层阴影来表示不同的层级。进行模糊测试。

调用： 使用 refactoring-ui 技能，并提供 DESIGN.md。要求进行灰度层级审查，制定一套受限设计令牌（间距、包含 9 种色阶且带色调灰色的调色板、字体比例、阴影比例），并重构按钮、表单和卡片组件，确保每个区块只有一个主要操作。

与用户共同决定： 批准设计令牌比例；确认主要、次要和第三级按钮的层级。

产出： 扩展 docs/DESIGN.md 的 ## Tokens（间距、调色板、阴影）和 ## Components（各组件的设计决策）。更新跟踪器。

完成条件： DESIGN.md 定义了设计令牌比例和组件设计决策；每个区块的按钮都有一个明确的主要按钮；用户已批准设计令牌。

阶段 7 — 让使用变得毫不费力（ux-heuristics）

目的： 消除让访客费神思考的障碍。

简述（备用）： 页面必须一目了然；用户会快速浏览、满足于够用的结果，并设法应付。进行「干测」：如果用户毫无准备地进入任意页面，他们能否回答这是哪个网站、当前是什么页面、有哪些版块，以及接下来该去哪里？执行「删掉一半文字」。使用通俗易懂的 CTA。失焦时进行内联验证，将非必填字段标记为选填而非必填，点击目标至少为 44x44px，并清晰显示系统状态（「正在保存…」/「已保存」、骨架屏、确认提示）。

调用： 使用 ux-heuristics 技能，结合 WEBSITE.md 和 DESIGN.md。请其依据 Krug 定律和 Nielsen 的 10 项启发式原则进行可用性审计，为每个问题评定 0-4 级，并改写错误消息和 CTA 标签。

与用户共同决策： 批准按优先级排列的修复清单，优先处理灾难性（4 级）问题；确认哪些修复在发布前完成，哪些留待之后。

产出： 扩展 docs/DESIGN.md 中的 ## UX Audit Findings（Issue | Heuristic | Severity | Fix | Status）。更新跟踪表。

完成条件： 每个页面都通过「干测」，灾难性问题均已修复，UX Audit Findings 中记录了问题及其严重程度，且用户已批准修复顺序。

阶段 8 — 精心设计转化流程（cro-methodology）

目的： 将清晰易用的页面打造成能够回应访客未转化真实原因的页面。

简述（备用）： 不要猜测，要去发现。针对五大异议（信任、价格、匹配度、时机、投入）制作「异议／应对」表；在阻碍发生之处给出应对措施，绝不把它们藏在 FAQ 中；对访客不愿承认的异议使用「仅限 CO」。证据层级：有具体背景的明确结果 > 署名推荐语 > 案例研究 > 单纯展示 Logo。采用证据夹心法；使用具体数字（「47,832」而非「约 50,000」）。

调用： 使用 cro-methodology 技能，结合 WEBSITE.md 和接收信息时收集的证明材料。请其提供五大异议的「异议／应对」表及其放置位置、按证据层级排序的说服材料审计、缺失证明材料清单，以及 A/B 测试假设。

与用户共同决策： 哪些应对措施现在上线，哪些要等到获取必要证明材料后再上线？确认没有任何应对措施编造证据（规则 8）。

产出： 扩展 docs/WEBSITE.md 中的 ## Conversion Elements（Objection | Counter | Placement | Status）。扩展 docs/EXPERIMENTS.md 中的 ## Experiment Cards 和 ## Experiment Backlog。更新跟踪表。

完成条件： 五大异议表中的每项异议都有基于证据的应对措施及放置位置；缺失的证明材料已列为行动项；测试假设已有记录；没有任何应对措施依赖编造的证据。

阶段 9 — 添加潜在客户获取测评（scorecard-marketing）

目的： 以较低承诺的优惠吸引约 97% 今天还没准备好购买的人。

简述（备用）： 一切都始于潜在客户获取；测评的转化率为 30-50%，而静态 PDF 为 3-10%。分为四个步骤：落地页（概念钩子 + 3C——清晰度、可信度、连接感）、在提问前收集邮箱的问卷、分级结果页，以及细分跟进流程。「朝着目标前进」的钩子比基于恐惧的钩子更有效。面向冷流量时，题目控制在 8-15 道。

调用： 使用 scorecard-marketing 技能，结合主要目标和用户画像。请其提供概念钩子和落地页、分为 3-4 个类别的 10-12 道计分问题、包含动态文案且各自配有 CTA 的三个结果等级，以及按等级细分的跟进序列。

与用户共同决策： 网站是否需要潜在客户培育流程？如果一个直接 CTA 已足够，则跳过此阶段。否则，批准概念钩子。

产出： 扩展 docs/WEBSITE.md 中的 ## Lead Capture（测评漏斗设计）。扩展 docs/MARKETING.md 中的 ## Nurture Sequences（分级跟进）。更新跟踪表。

完成条件： WEBSITE.md 的 ## Lead Capture 中明确规定了钩子、≤15 道问题、先收集邮箱以及分级结果；MARKETING.md 包含细分跟进流程；钩子承诺的内容不超出测评实际能提供的内容。

阶段 10 — 按极高标准审视（steve-jobs-design-review）— GATE

目的： 在任何访客看到网站之前，对已完成的网站进行一次严苛、坦诚的审视。

简述（备用）：“从客户体验出发，逆向推演。”以陌生人的身份，在不了解背景的情况下体验网站。用一句话说清核心要点。计算实现价值所需的步骤（3 步，而不是 9 步）。走查缓慢路径——空表单、错误状态、支付失败、移动端冷启动。检查围栏背面——404 页面、错误提示文案、确认邮件。结论非此即彼：极其出色，或尚未完成。专注，就是学会说不。

调用： 对在线网站或完整页面集使用 steve-jobs-design-review 技能。要求其给出初次冷体验的印象、核心要点、实现价值所需的步骤数，走查失败／空状态和围栏背面，给出二元结论，以及按优先级排序的删减清单和修复清单。

与用户共同决定： 按删减清单采取行动——要保护唯一的首要目标，应删除什么？如果结论是尚未完成，哪些修复会阻碍上线？

产出： 在 docs/WEBSITE.md 的 ## Audit Findings（问题 | 严重程度 | 修复 | 状态）中补充删减清单和修复清单。更新跟踪表。

完成条件： 结论为极其出色（而不是“还不错”），删减项已落实，围栏背面已检查，阻碍上线的修复已完成——只有这样才能上线。

可选阶段

技能	添加时机	产出
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

可选阶段遵循相同的执行规则——像处理核心阶段一样，准确加载并使用所列技能；在“添加时机”条件首次成立时插入相应阶段。

常见错误

错误	修正方法
还没有明确的信息传达内容就开始设计	在阶段 4（top-design）之前先执行阶段 2（storybrand）和阶段 3；设计服务于文字，而不是反过来。
把品牌塑造成主角	在 storybrand 中，从客户的问题和期望结果切入；如果第一句话以“We”开头，就重写。
堆叠互相竞争的行动号召	保留一个直接 CTA 和一个过渡性 CTA；refactoring-ui 和 Jobs 审查都要求每个版块只有一个主要操作。
把清晰易懂和令人印象深刻混为一谈	执行 made-to-stick 检查——具体数字、一个出人意料的吸引点、一个客户故事——让信息在用户关闭标签页后仍留在他们心中。
测试按钮颜色，而不是用户疑虑	先在 cro-methodology 中构建“疑虑／应对”表；“微调”很少能提升转化率。
正常流程打磨精致，其他地方却处处出错	在 Jobs 审查中走查空状态、表单错误、404 页面、确认邮件和移动端冷启动——也就是围栏背面。

完成旅程

退出检查清单：

• POSITIONING.md 包含 BrandScript、一句可重复使用的定位语，以及在各个渠道保持一致的关键信息
• WEBSITE.md 包含站点地图、附有文案的页面简介、异议/回应表格，以及（如在范围内）潜在客户信息收集设计
• DESIGN.md 定义了设计方向、字体排印、设计令牌、组件，并通过了 UX 审核
• Steve Jobs 审核的结果是“极其出色”——而不是“还不错”——并且已落实删减清单
• 页面上的所有稀缺性声明、推荐语和保证都属实

关闭跟踪表：每个阶段都标记为 done 或 skipped: reason，并将任何剩余的 Next Actions 作为复选框纳入相关文档。然后继续推进：网站上线并开始收到转化数据后，继续使用 improve-website 技能，将今天的假设转化为经测试的成果。当网站开始销售一个现在需要开发的产品时，继续使用 create-app 技能。