精心打造，而非自动生成：网站设计速成课
15 个概念 · 你的第一个真实项目
右侧的网站属于一位室内设计师，这里只用来展示差异。本课程稍后将为另一位客户构建网站：来自拉合尔的会计师 Ayesha Rehman。
让 AI 为你构建网站，你确实会得到一个。它能加载，也能滚动，但看起来和其他所有 AI 网站一样。
这种网站你已经见过很多次：顶部一张大图，中间一句大号文字，一排 3 个小方框，一个彩色按钮，再配上「彻底改变你的工作流」之类的标题。
大多数 AI 网站都是这个样子。它们没有坏，却有一个更严重的问题：千篇一律。
有一个词可以概括这种差别，也正是本课程名称的由来。有些网站经过精心打造，大多数却只是自动生成。没人引导计算机时，得到的就是自动生成的网站；有人做出真实选择，才算精心打造。
本课程教你构建经过精心打造的网站。
你不必成为设计师，也不必手写代码。只需掌握 Agentic Coding 速成课 中的工具，再结合本页的理念。学完后，你将构建一个真正的网站：有故事、有真实照片、有适配手机的版本，还有一个全球任何人都能打开的网址。
理解一个理念，后面的内容就会变得很容易。 过去，优秀设计只存在于昂贵工具或才华出众的人脑中。如今已不再如此。区分「精心打造」与「自动生成」的规则可以写进文件，任何 AI 都能读取并遵循。
因此，这门课可以用一句话概括：
品味现在可以存进文件。
品味就是知道什么好看。文件只是计算机上的一份文档。把两者结合起来，就得到完整理念：关于「什么好看」的知识可以保存成文档，AI 在构建前先读取它。
Claude Code 与 OpenCode 速成课。 那门课教你使用工具，本课程则用这些工具构建真实项目。如果你还不熟悉「技能」「计划模式」或「规则文件」等术语，请先阅读那门课，之后学习本课程会轻松很多。
本书有清晰的结构，了解本课程在其中的位置会很有帮助。前面的课程教你使用工具，后面的课程讲解让工作在规模化之后依然可靠的工程方法。本课程正好位于中间：你不再只学习机器本身，而是开始让它处理真实任务。
这个顺序是有意安排的。亲手发布一个网站并体会工作究竟会在哪里出错后，规范、循环和检查器都会变得更容易理解。
学习本课程不需要技术背景。不过有些词会反复出现，下面用简单语言解释它们。需要时随时回来查看。
| 术语 | 在这里的含义 |
|---|---|
| 模型 | AI 本身，也就是编写文字和代码的东西。Claude 和 Kimi K3 都是模型。 |
| 工具（也称 harness） | 让 AI 在你的计算机上工作的程序，可以打开和修改文件、运行命令。本课程使用 Claude Code 和 OpenCode 两款工具。 |
| 技能 | 一份只需保存一次的指令文件。AI 会读取并遵循它，就像食谱卡或员工手册。 |
| 提示词 | 你输入给 AI 的内容。 |
| 上下文 | AI 此刻能看到的一切，包括你的消息和它打开的文件。上下文有上限，就像桌面空间有限。 |
| AI 俗套设计 | 看起来只是自动生成、没有精心打造的设计，也就是每个 AI 都容易采用的平庸平均样式。 |
| 代码 | 编写网站所用的指令。你不需要输入代码，由 AI 编写，你负责检查结果。 |
| 部署 | 把网站放到互联网上，让其他人能够打开。 |
| CLI | 通过输入命令而不是点击按钮来运行的程序。 |
| API | 让一个程序自动与另一个程序通信的方式。 |
| 检查（或 hook） | 一个小程序，用「是」或「否」判断工作是否合格；答案为「否」时会阻止你继续。 |
| 域名 | 某人拥有的网址，例如 ayesharehman.pk。 |
| DNS | 把网址连接到网站实际所在位置的系统。 |
| 分享卡片（OG 图片） | 把链接粘贴到 WhatsApp 或社交应用时出现的图片和标题。 |
| ::: |
开始设计前要相信的 3 件事
本页其他所有内容都建立在 3 个理念之上。掌握它们，其余内容自然会变得清晰。
1. 每个 AI 都有偏爱的样式。
AI 从数百万个网站中学习。因此，当你说「让它好看」时，它会给出最常见的答案：最常见的颜色、最常见的布局和最常见的字体。
这不是 AI 偷懒，而是它变得平庸，因为学到的正是平均值。社区把这种结果称为 AI 俗套设计。
证据就在这里。Anthropic 为 Claude Code 发布了官方 frontend-design 插件。该文件列出无人约束时 Claude 容易采用的 3 种样式，并要求 Claude 不要使用它们。AI 制造商专门写了一份文件来反驳自家 AI 的习惯。这足以证明，那些习惯确实存在。
（它是一款插件，只需通过 Claude Code 的插件系统安装一次。此后处理设计工作时，Claude 会自动调用它。）
2. 检查设计要靠亲眼观察。
Agentic Coding 速成课讲过本书最重要的规则：对 AI 的信任不能超出你能够检查其工作的范围。
代码容易检查，因为运行测试就会得到通过或失败的结果。设计似乎更难，因为计算机无法直接回答「这好看吗？」
因此，本课程把「观察」变成「检查」。先给页面截图，让 AI 查看；再用一份已知坏习惯清单进行核对；最后请另一个 AI 审查。当「它看起来对不对」变成可以实际测试的问题时，AI 就能像修复代码一样修复自己的设计。
3. 品味可以通过文件从一个 AI 转移到另一个 AI。
AI 已经知道如何构建网页，不知道的是你的判断：哪些布局很无聊、哪些字体适合搭配，以及页面何时才算完成。
把这些判断写进文件，任何 AI 都能读取。同一份文件今天适用于 Claude 和 Kimi K3，明年也适用于新出现的 AI。AI 会更换，文件会留下。
因此，即使这些工具名称早已更换，本课程仍然有用。
你将使用的 3 款工具
其中两款你已经熟悉，第 3 款是新的：
| Claude Code | OpenCode | Kimi K3 | |
|---|---|---|---|
| 它是什么 | Anthropic 推出的工具，让 AI 能在你的计算机上工作 | 同类工具，但它是开源的，而且适用于任何 AI | Moonshot AI 公司推出的 AI 模型 |
| 在这里的任务 | 运行工作 | 运行工作，同时提供更多模型选择 | 特别擅长设计的 AI |
| 使用理由 | 与 Claude 配合得最好 | 使用其他 AI 模型成本最低的方式 | 目前最擅长设计网页，而且价格不高 |
可以这样理解：Claude Code 和 OpenCode 就像工作坊，Kimi K3 是可以带进任一工作坊的工人。工作坊保持不变，工人可以更换。
为什么使用 Kimi K3 做设计？ 测试人员把多个 AI 模型生成的网页展示给真实开发者，却不告诉他们每个页面来自哪个 AI。开发者最常选择 Kimi K3 的页面，原因有两个：
- 它能看。 构建页面后，它可以查看页面截图，并修复看起来不对的地方。大多数 AI 模型从未见过自己的作品，只能根据代码猜测。能够观察是一项巨大优势。
- 价格实惠。 成本只相当于美国顶级模型的一小部分，因此可以尝试 10 个设计版本，不必担心账单。
在喜欢上它之前，请记住一个警告。 「最佳」AI 每隔几个月就会变化，很快会有其他模型超过 Kimi K3。因此，不要记住名字，要记住习惯：检查当前哪个 AI 最擅长设计，就把设计工作交给它。今天的答案是 Kimi K3，所以本课程使用它。
信息更新至 2026 年 7 月。模型、价格和竞技场排名经常变化。制定任何预算前，请查看 LMArena 和各提供商的实时定价页面。
这里介绍的安装命令、CLI 标志、文件路径和文件夹结构都在一台干净的计算机上执行过，并非从文档中复制。实时工具与自家营销页面不一致时，本课程以工具为准。仍有两项内容会持续变化：版本号和价格。如果命令的行为与本页描述不同，请相信终端输出，并查看工具的最新文档。
与 Agentic Coding 速成课一样，Claude Code 与 OpenCode 不同的章节都提供切换器。选择一款工具后，本页所有切换器都会同步。
本课程涵盖的内容
| 部分 | 主题 | 学习内容 |
|---|---|---|
| 1 | 基础 | AI 网站为何相似、四件式技术栈，以及设计模型的选择与连接 |
| 2 | 把品味变成技能 | Hallmark 技能、向欣赏的网站学习，以及准确还原客户品牌 |
| 3 | 构建 | 一个故事、一次滚动，媒体流水线（从免费到付费），移动优先，多页网站与路由 |
| 4 | 设计验证 | 如何检查设计是否优秀，以及如何获得第二意见 |
| 5 | 交付 | 把网站发布到网上、与客户合作、控制成本 |
| 6 | 完整实战示例 | 使用两款工具，从零开始构建 Ayesha 的事务所网站并发布到实际 URL |
喜欢边做边学？ 先跳到 第 6 部分，之后再回来。
📚 教学辅助材料
查看完整演示文稿：网站设计速成课
第 1 部分：基础
1. 为什么 AI 网站看起来都一样
向任何 AI 输入「为我构建一个落地页」，看看返回的结果：顶部横跨一张大图，中间是大号标题，其中一个词通常采用醒目的颜色；一排 3 个方框，每个带一个小图标；一段满意客户的引语；底部再放一个页脚；某处总会出现紫色或蓝绿色。
它并不难看，令人困惑的正是这一点。它只是 AI 看过的所有网页的平均值，而平均值没有个性。
为什么会这样？AI 不会选择，只会预测。面对「给我做一个漂亮的网站」这样的开放问题，它会回答最可能的内容，也就是训练数据中最常见的内容。每个人每次提问，它都会这样做。因此，许多 AI 网站看起来一模一样，数百万人得到的是同一个平均值。
你在编程速成课中见过相同行为。让 AI 连续 5 次「整理这份文字记录」，会得到 5 种略有不同的方法，所以需要保存技能文件来固定方法。设计完全一样，唯一的区别在于每个人都能直接看出设计的问题。
证据：AI 公司自己也承认。 Anthropic 为 Claude Code 发布了一款官方设计插件，其中列出无人约束时 AI 设计会采用的 3 种样式，甚至精确写出了奶油色的色值 (#F4F1EA)：
- 柔和的奶油色背景、醒目的大号衬线标题，以及橙棕色按钮
- 近乎黑色的背景，搭配一处明亮的酸绿色或红色点缀
- 报纸风格：细线、直角和密集的文本分栏
该技能称它们为「默认值，而非主动选择」，并要求模型只有在简报明确指定时才能使用这些样式。
再读一遍。构建 AI 的公司专门写了一份文件来反驳自家 AI。 这份文件就是整门课程的起点。
还要注意它的原话，其中包含的重要信息比表面更多。文件并没有说 Claude 会落入 3 种样式，而是说当前 AI 生成的设计会落入 3 种样式。这些习惯不是某一家公司的怪癖，而是整个领域从同一片网络中学到的共同倾向。
由此产生两个结果，它们决定了后面的所有内容：
- 习惯会在 AI 模型之间传播，因此第二意见不一定等于第二双眼睛。 Anthropic 的文件把这 3 种样式描述为整个 AI 设计领域的常见落点，而不只是自家模型的倾向。不同公司都从大致相同的网络内容中训练模型，因此会趋向相似的平均值。这一点稍后非常重要：让第 2 个 AI 审查第 1 个 AI 的工作（概念 12）时，只能希望两者没有相同的盲点。两个模型差异越大，这种希望越可靠。只有规则文件才能稳定地切断这条链。
- 解决办法绝不是「把提示词写得更用力」。 「让它独一无二」本身就是非常常见的请求，所以仍会得到非常常见的答案。真正的修复是结构性的：用一份品味文件禁止特定模式、强制结构多样化，并在交付前通过关卡检查输出。这正是第 2 部分的内容。
2. 四件式技术栈
本课程中的每个网站都由 4 个部分构成。掌握这 4 个部分，就能把课程中的其他所有内容放到对应位置：
| 部分 | 作用 | 使用的工具 |
|---|---|---|
| 模型 | 编写生成页面的代码 | 用 Kimi K3 设计，用 Claude 审查 |
| 品味 | 阻止 AI 使用无聊的默认样式 | Hallmark 技能文件，加上 Anthropic 的 frontend-design 插件 |
| 媒体 | 提供真实照片和视频，因为方框与文字无法构成品牌 | 4 条轨道，从免费照片到付费视频（概念 9） |
| 托管 | 把页面放到互联网上的实际网址中 | Vercel，AI 可以自行控制 |
注意这份列表中没有什么：没有网站构建器，没有模板商店，也没有拖放编辑器。你已经掌握的工具可以完成全部工作。
可以想象一个小型工作坊：模型是工人，品味文件是交给工人的手册，媒体是材料柜，托管服务则是成品走向外界的大门。
这 4 个方框也能用来给工作定价。 为付费客户构建网站时，可以逐一查看每个方框来报价：这项工作需要哪个 AI？客户品牌需要多少设计研究？照片或视频预算是多少？网站将托管在哪里？
4 个方框，对应发票上的 4 个项目。
3. 选择设计模型
编程速成课给出了一条简单规则：用强大的 AI 决定做什么，用便宜的 AI 执行。设计为这张表增加了第 3 行。
| 工作 | 选择 |
|---|---|
| 规划、架构，以及调试令人困惑的问题 | 你能使用的最强模型 |
| 执行已批准的计划：常规编辑、格式调整、测试 | 更便宜或免费的模型 |
| 视觉设计与前端打磨 | 本季度设计竞技场中的领先者 |
为什么设计需要单独一行？因为擅长设计并不等同于整体上更聪明，而是来自另外两项能力：
- 实践量。 有些 AI 公司训练模型时采用的网页设计作品就是比其他公司更多。
- 视觉能力。 能查看自家页面截图的 AI 与人类设计师的工作方式相同：构建、观察、修复。只读取自身代码的 AI 则是在盲目设计。Kimi K3 能看，这正是人们更喜欢其页面的主要原因。
养成 3 个习惯，就不会盲目追逐热潮：
- 相信盲测，而不是宣传。 在 LMArena 等网站上，真实用户在不知道作者模型的情况下比较不同 AI 生成的页面，然后投票。这比公司夸赞自家产品更有说服力。2026 年 7 月，Kimi K3 在网页设计中排名第 1，整体排名却低于 Claude 和 GPT。这种差距正是关键：最擅长设计与综合能力最强，是两场不同的比赛。
- 让一个 AI 构建，再让另一个 AI 评判。 Kimi K3 构建页面，Claude 负责审查。概念 12 会讲解具体方法。
- 预期领先者会更换，并留意切换成本有多低。 下个季度无论哪个强大模型领先，只需交给它同一份品味文件，就能得到同等优秀的作品。因为区分精心打造与自动生成页面的大部分因素，如今存在于文件中，而不是模型里。这就是本课程的完整论点，也是你的保险。 排行榜顶部的名字恰恰是最不需要依赖的部分。
Kimi K3 有两个真实缺点。 它默认会深入思考，因此速度较慢，输出也比预期更长。设计时这没有问题，处理小任务时却很烦人。此外，它的低价依赖一种折扣，只有对话保持整洁时才适用，概念 15 会进一步说明。
4. 在工具中运行任意模型
编程速成课讲过如何在工具中运行不同的 AI。Kimi K3 也采用相同方法。这是 Claude Code 与 OpenCode 真正存在差异的少数环节之一，请选择对应标签页。
设置之前，先用一句话说明实际操作。工具通常把问题发送给某家公司的 AI。现在只是更改发送地址，让问题转而发给 Kimi K3，工具的其他部分不变。
Claude Code 默认与 Claude 通信。不过 Moonshot 的服务可以接受 Claude Code 发送的同一格式，因此无需额外软件，Claude Code 就能与 Kimi K3 通信。
你需要从 platform.kimi.ai 获取密钥。密钥类似密码，让计算机可以使用对方的 AI，并且与账户绑定。开始前要了解两点：
- 先向账户充值少量资金。余额为空时，密钥无法使用
- 最低付费等级每分钟允许的消息很少，AI 会显得像是坏了，而不只是速度较慢。先充值到足以超过第 1 级，再判断效果
把以下内容粘贴到要使用 Kimi K3 的项目文件夹中的 .claude/settings.json。（请与日常工作放在不同文件夹中，这样其他项目仍会使用 Claude。）
{
"env": {
"ANTHROPIC_BASE_URL": "https://api.moonshot.ai/anthropic",
"ANTHROPIC_AUTH_TOKEN": "YOUR_MOONSHOT_API_KEY",
"ANTHROPIC_MODEL": "kimi-k3[1m]",
"ANTHROPIC_DEFAULT_OPUS_MODEL": "kimi-k3[1m]",
"ANTHROPIC_DEFAULT_SONNET_MODEL": "kimi-k3[1m]",
"ANTHROPIC_DEFAULT_HAIKU_MODEL": "kimi-k3[1m]",
"ANTHROPIC_DEFAULT_FABLE_MODEL": "kimi-k3[1m]",
"CLAUDE_CODE_SUBAGENT_MODEL": "kimi-k3[1m]",
"CLAUDE_CODE_AUTO_COMPACT_WINDOW": "1048576",
"ENABLE_TOOL_SEARCH": "false"
}
}
这段配置看起来很长，其实只说明 3 件事：消息发往哪里、使用什么密码、使用哪个 AI。下面 5 条警告都来自真实教训：
- 设置每一行模型配置，而不只是第 1 行。 Claude Code 会在后台悄悄为不同小任务使用不同的 AI 模型。如果只更改主模型，后台任务仍会请求 Moonshot 没有的 Claude 模型，随后以令人困惑的方式失败。因此，每一行
ANTHROPIC_DEFAULT_*都不可少，包括人们经常忘记的 Fable 配置。 - 如果以前使用过 Claude Code，请删除
ANTHROPIC_API_KEY。 遗留的旧密钥会与上面的ANTHROPIC_AUTH_TOKEN冲突，错误消息却不会指出这一点。对并非从干净计算机开始的用户而言，这是最常见的设置失败原因。 - 用
/status检查设置，不要用/model。/model菜单只会显示 Claude 自家的模型，Kimi 永远不会出现。这是正常现象，并非 bug。请改为输入/status，其中应显示kimi-k3和 Moonshot 地址。 - 密钥现在以纯文本形式存在于文件中。 绝不能把该文件上传到公共位置。把
.claude/settings.json添加到.gitignore文件，避免意外共享。 - 通过这条路径无法使用网页获取。 Moonshot 端点暂未提供该功能，其他功能均可正常使用。
最后一项设置 CLAUDE_CODE_AUTO_COMPACT_WINDOW 值得理解，而不是直接复制。对话接近容量上限时，Claude Code 会自动整理，但前提是告诉它「满」究竟有多大。1048576 是 Kimi K3 的 100 万 token 窗口写成的完整数字。省略它，整理要么过早触发，要么完全不触发。
还有一项需要坦诚说明。Moonshot 支持这种设置，Anthropic 不支持。 Anthropic 已表示，不会检查或支持把 Claude Code 消息发送给其他公司的 AI 模型。因此，如果 Claude Code 更新后导致设置失效，没有人承诺会修复。你用官方支持换取了自由选择 AI 的权利。只要清楚自己做出的选择，这是一项合理交换。
OpenCode 从一开始就为适配任意 AI 而设计，所以这条路径更简单，也是 OpenRouter 最有帮助的场景。
OpenRouter 是一项统一服务，几乎能连接所有 AI 模型，包括 Kimi K3、GPT、Gemini 以及许多免费模型。你不必在每家公司分别注册账户，只需一个账户、支付一张账单。可以把它想成一把能打开多扇门的钥匙。
设置大约需要 1 分钟：
- 在 openrouter.ai/keys 创建密钥，并充值少量预付余额
- 运行
opencode，输入/connect，选择openrouter，然后粘贴密钥 - 输入
/models，选择moonshotai/kimi-k3（以选择器列出的准确 ID 为准，ID 会变化，请相信菜单）
这样就完成了。已掌握的所有操作仍然有效，Kimi K3 只是列表中新增的一个选项。
本课程推荐这样设置：用 Kimi K3 构建设计，用便宜模型处理小任务，同时连接 Claude 或 GPT，以便在概念 12 的审查步骤中获得第二意见。
需要留意两点。OpenRouter 负责替你建立连接，因此收费略高于直接使用 Moonshot；学习阶段可以接受。此外，Kimi K3 的回答很长，请留意工具显示的用量数字。回答越长，成本越高。
无论选择哪条路径，都要围绕工具和文件培养习惯，绝不能围绕某个 AI 模型。排行榜首位的 AI 戴着一顶租来的王冠，迟早会交给其他模型，而你的文件会一直留下。
第 2 部分：把品味变成技能
5. Hallmark：有执行力的品味文件
第 1 部分介绍了问题，一份免费文件就能解决大部分问题。
Hallmark 是 Hassan El Mghari 创作、以 Together AI 名义发布的设计技能。它完全免费，任何人都能使用，并成为 2026 年最受欢迎的技能文件之一。它用一句话描述自己的任务：让 AI 构建的页面看起来经过精心打造，而不是自动生成。
它也是本书中最清楚地展示技能文件作用的例子。还记得编程速成课中的承诺吗？AI 带来通用知识，技能则带来你的具体判断。Hallmark 把这项承诺变成了成品，由专家构建并免费交给你。
在任一工具中用现代方式安装：
npx skills add Nutlope/hallmark
这会打开交互式选择器：它找到技能，列出计算机上安装的 agent，并询问要安装到哪些 agent。Claude Code、OpenCode 和 Codex 通常已预先选中，因此大多数读者只需按 Enter。完全不想看到提示时，需要了解两个标志：-g 执行全局安装（用户级，可用于所有项目），-y 跳过确认。因此，npx skills add Nutlope/hallmark -g -a claude-code -y 是单行版本。随时重新运行即可更新，npx skills list 会显示已安装的技能。
文件会保存到 ~/.claude/skills/hallmark/ 文件夹。OpenCode 读取同一文件夹，因此安装一次即可供两款工具使用。
打开文件夹查看一次，它的组织方式本身就是一课。其中有一份简短的主文件 SKILL.md，旁边的 references 文件夹存放其他所有内容：58 项检查的清单、字体文件、颜色文件、间距文件、21 种页面形状以及主题。
为什么这样拆分？因为 AI 只在真正需要时读取额外文件。主文件保持精简，持续加载几乎不占成本。这正是编程速成课的理念，只不过别人已经替你构建好，可以直接借鉴。
安装过程本身还揭示了一项重要事实：工具会提醒你，技能以 agent 的完整权限运行，使用前应该审查。这个提醒完全正确，必须认真对待。技能就是 agent 将要遵循的指令。无论来自本课程还是其他地方，安装任何内容前都要阅读其 SKILL.md。
文件中包含什么。 Hallmark 不是一组漂亮图片，而是一套可以工作的部件：
- 先选择页面形状。 选择任何颜色前，它会从 21 种不同形状中为页面挑选一种结构。这正是 Hallmark 的特别之处。大多数「让它与众不同」的尝试只会更改颜色，Hallmark 改变的却是骨架。它为两个不同客户构建的页面不应采用相同的章节顺序。给同一副骨架换个颜色，恰恰是它要解决的问题。
- 20 个具名主题，外加 Custom。 每个主题都形成完整统一的身份，包括色板、字体搭配和间距特征（目录包含 Specimen、Atelier、Brutal、Newsprint、Studio、Manifesto、Terminal、Midnight、Almanac、Garden、Riso、Sport、Bloom、Coral、Cobalt、Aurora、Editorial、Carnival、Lumen 和 Hum）。它不会随意选择：轮换规则会在适合简报类型的主题范围内切换，避免所有项目都落入同一个主题。如果简报的创意意图不适合任何目录主题，它会切换到 Custom，从零定制色板和字体搭配。使用的关卡相同，但底层没有模板。处理普通简报时，这个分支完全不可见，你不会看到 catalog 或 custom 等字样。
- 交付前运行一份很长的清单。 技能会用已知坏习惯清单测试成品页面，再自我批评一次，然后才展示结果。（有个小细节值得注意：项目首页写着 57 项检查，而实际安装的清单文件标题却是 58。文档中的数字会漂移。页面与工具不一致时，请相信工具。）这就是编程速成课换了一身外衣：保存一次的严格清单，胜过疲惫时临时输入的懒散请求。
- 一条安全规则。 如果把 Hallmark 指向已有网站，它不会在未告知并获得批准的情况下删除文件或移除章节。设计技能不等于获准破坏他人的网站。
4 种模式。 Hallmark 可以完成 4 种不同任务。第 1 种是请求新页面时的默认行为，另外 3 种需要明确说出名称。学会在恰当时机选择合适模式，就掌握了这项技能的大半：
| 命令 | 作用 | 使用时机 |
|---|---|---|
| default | 构建新页面：选择形状、应用规则、运行 58 项检查 | 开始构建新内容时 |
| audit | 查看已有页面并列出问题，不做任何修改 | 需要诚实审查时（概念 11） |
| redesign | 抛弃旧形状，保留文字和品牌，以不同方式重新构建 | 页面能用但看起来像自动生成时 |
| study | 查看你欣赏的网站，并写下它有效的原因 | 想向优秀网站学习时（概念 6） |
Hallmark 并非凭空出现。它自己的文件说明了理念来源，其中之一就是 Claude Code 的 Anthropic frontend-design 插件。
这两份文件值得比较，因为它们用不同方法解决同一个问题。
Anthropic 的技能教授判断力。其中包含这样的要求：像小型工作室的设计师一样工作；让页面顶部表达真实内容；用字体承载个性；只在一处大胆，其余地方保持克制；宣布完成前，先查看自己作品的截图。
Hallmark 提供机制：页面形状清单、具名主题、编号检查，以及强制自我审查。
两者都很有用，而且可以协同工作。安装 Anthropic 的插件后，它会自动协助日常设计工作；需要完整处理时，则明确说出 Hallmark 的名称。请注意：使用 Kimi K3 等非 Claude 模型时，AI 自动调用技能的可靠性较低。因此，每次都要输入 Hallmark 的名称，不要只靠期待。
技能会让 AI 每次生成相同页面吗？不会。 AI 始终存在一定随机性，技能只会缩小行动范围，而不会消除随机性。Hallmark 阻止它反复使用同一种陈旧形状，但不会让两次尝试完全相同。对于每次都必须成立的事项，需要一条 AI 无法忽略的规则。概念 11 会讲解如何构建这种规则。
6. 学习，不要克隆
改进设计最快的方法，是指着喜欢的作品说：「让它有那种感觉。」
毁掉声誉最快的方法，则是原样复制那个网站。
Hallmark 的 study 命令很好地处理了这项任务，其工作方式也会教你许多设计知识。
向 study 展示一个你欣赏的网站，甚至只给一张截图，它就会写下网站有效的原因：页面形状、字体搭配、主色和留白程度。所有内容都会保存到名为 design.md 的文件中。
它不会复制网站，只提取理念，不复制像素。两个网站可以共享理念，就像两名学生可以师从同一位老师：能看出关联，却不是同一个人。
复制既不道德，也可能引发法律问题。此外，还有 3 个同样重要的实际原因：
- 文件可以流转。
design.md是写下来的品味。把它交给不同 AI、不同工具、队友，或交由客户批准，设计方向在交接后仍会保留。 - 它会训练你的眼光。 阅读 3 个喜爱网站对应的 3 份文件后，你会开始在各处留意结构和字体。技能一边工作，一边教会你观察。
- 它解决初学者最难的问题。 大多数人无法描述想要的样式，但每个人都能指出喜欢的网站。
study把指向网站的动作转化为指令。
一条值得遵循的规则： 每个项目研究 2–3 个网站，绝不能只研究 1 个。
一个示例会把你拉向复制，3 个示例则迫使你组合理念：从第 1 个获取形状，从第 2 个获取字体，从第 3 个获取克制感。组合之后，作品才会显得原创。
7. 品牌提取：客户的 DNA 已经在网上
概念 6 讨论的是你欣赏的网站，客户工作则恰好相反。必须尊重的设计已经存在，因为那就是客户的品牌：标志、颜色、字体和表达方式。如果这些内容出错，其他构建成果对客户都没有意义。
这里的核心理念是：请求具体内容，不要索取一切。
如果把 AI 指向整个网页，就是交给它一堆混乱的代码、脚本和 Cookie 弹窗。埋在混乱信息中时，它会自信地编造一个实际不存在的颜色。AI 模型经常如此：不确定时，会给出听起来很自信的猜测。你的任务是让猜测无处容身。
路径 1：询问 AI，但要精确提问（免费）。 让它打开客户网站，索取带有证据的准确内容：
从这个页面中列出使用次数最多的 3 种品牌颜色的准确色值、字体名称和标志文件地址。每一项都要引用发现它的代码行。
最后一句最重要。单独的色值只是猜测，附带来源代码行的色值才可以自行检查。始终要求提供凭据。
路径 2：使用专用工具（付费，更干净）。 Firecrawl 等服务专门把混乱网页转化为干净、有组织、适合 AI 使用的信息。有些服务会直接返回品牌标志、颜色和字体。只服务一位客户时，路径 1 已经足够。如果每周都要处理，付费工具可以消除一整类错误，足以收回成本。（需要说明：本课程所依据的视频收取了此类工具的推广费用。理念本身可靠，具体品牌由你结合当前价格自行选择。）
路径 3：直接询问客户，绝不能跳过。 真实企业拥有真实文件：正确的标志、官方颜色，有时还有品牌文档。前面的所有方法都只用于初稿。上线前一定要索取真实文件。凭肉眼重建的标志迟早会被发现，到时会非常尴尬。
无论通过哪种方式获得，答案都要写入同一份 design.md 文件，并明确标记为规则，而非建议。
两者确实不同。概念 6 中欣赏的网站代表方向，也就是可以借鉴的理念；客户的品牌颜色则是规则，不能因为找到更漂亮的颜色就擅自更改。品味技能必须在这些规则范围内完成设计。
第 3 部分：构建
8. 一个故事，一次滚动
打开你见过的优秀网站，会发现它们有一个共同点：页面不是一堆章节的堆叠，而是一个按照滚动顺序讲述的故事。
每屏一个理念，每一屏都让人想看下一屏。滚动就是故事向前推进的方式。
这是本课程中让页面显得经过主动设计的最有力理念，而且很容易规划：
- 开始构建前先写故事。 安排 5–8 个步骤，每个步骤一行。我们称它们为节拍，就像电影中的情节节拍。对蜂蜜公司而言，可以先展示野生蜂巢，接着蜂蜜滴落、装满罐子、展示内容物、介绍制作者，最后购买。对稍后要构建网站的会计师而言，可以先展示一鞋盒收据，接着分类、账户自行平衡、清晰的月度结果、背后的人，最后预约会面。构建任何内容前，先写出节拍、讨论、达成一致，再保存到文件。
- 每屏一个理念。 如果一屏试图表达两个重点，最终一个也表达不清。把它拆成两屏。
- 页面顶部必须展示真实内容，而不是「为现代企业提供创新解决方案」之类的口号。蜂蜜网站开场就让蜂蜜滴落，会计师网站则用每位小企业主都能立刻认出的收据鞋盒开场。
- 选择一个大胆时刻，其余内容保持平静。 它应该是访客事后可以向朋友描述的一个亮点，例如动画、滚动时产生反应的内容，或引人注目的字体运用。只在一处大胆显得自信，处处大胆则显得混乱。
故事主线也是响应式契约和媒体镜头清单。 请妥善保留：概念 9 会按节拍生成图像，概念 10 则为不同屏幕形状重新拍摄同一条主线。一份产物承担 3 项任务，正因如此，必须写下来，而不能只放在脑中。
最后一个节拍必须真正执行操作。 每个故事都以一个动作结束：预约、购买、发送消息或订阅。
几乎每个初次构建的网站都会掉进一个陷阱。简单网站只是一些文件，背后没有能接收消息的系统。因此，除非明确选择工作方式，否则故事结尾的漂亮按钮完全不起作用。下面是 3 个务实选项，按成本从低到高排列：
选项 1：WhatsApp 链接。 它不需要任何额外内容，对大多数小企业而言也是最佳答案。使用如下链接：
https://wa.me/923001234567?text=Hello,%20I%20would%20like%20to%20book%20a%20consultation
会打开 WhatsApp，并预先填好消息。无需构建系统、无需表单，也没有额外内容要检查。更重要的是，消息会直接到达企业主整天回复客户的地方。大多数网站模板都附带一份无人查看的联系表单，WhatsApp 按钮轻松胜过它。
选项 2：表单服务。 Formspree 等公司允许在页面放置普通表单，并通过电子邮件发送用户提交的内容。免费方案足以满足小企业需求。客户确实想要表单时再使用。
选项 3：服务器上的小程序。 Vercel（概念 13）可以在网站旁运行小程序。项目规模大到真正需要时，AI 就能构建完整系统。这是前两个选项发展后的方向，而不是起点。
无论选择哪一项，都要在规划阶段写入故事。「节拍 6：预约咨询，WhatsApp 链接指向 +92 300……」是一条可以围绕其规划并在之后检查的内容。你也确实会检查它：概念 11 会讲解如何确保完成并上线的页面真正包含有效链接。
以无效按钮结尾的故事不是网站，只是一张海报。
关于顺序还要说明一点：先学习单页网站。本课程的一切都更适合在单个页面上学习。不过真实客户项目最终会超出单页，因此课程也会涵盖相关内容：第 3 部分末尾的多页网站小节 会说明网站需要更多「房间」时会发生哪些变化。
9. 媒体流水线
每个让你停下来观看的网站背后都有一个真实秘密：图片承担了一半工作。
优秀字体和结构能让作品超越平均水平，但只有彩色方框和文字的页面仍像一份文档，而不像一个真实场所。真正的照片和视频才能让页面产生身临其境的感觉。
因此，图片是本课程的必备部分，而不是最后补上的装饰。
这也是金钱真正会改变能力范围的唯一部分。因此，我们按从免费到昂贵分成 4 条轨道。每条轨道都能产出真正优秀的网站。请为每个项目选择轨道，并明确了解它能提供什么。
轨道 1：真实照片（永久免费）。 Unsplash 和 Pexels 拥有庞大的专业照片库，可以免费使用，也可以用于付费客户。（请阅读规则页面：可以使用照片，但不能转售照片本身。）
两个习惯可以避免免费照片显得廉价：
- 匹配光线。 整个页面选择采用同类光线和相同氛围的照片。混杂的光线会让页面显得由互不相关的图片拼凑而成。
- 有意裁剪。 不要直接接受原始照片，要通过裁剪突出想展示的内容。
也别忘了一个几乎没人使用的选项：对本地企业而言，在良好傍晚光线下用手机拍摄，每次都能胜过通用图库照片。 客户真实办公室的照片是任何 AI 都无法生成的。
轨道 2：免费 AI 图片（但有一个限制）。 有时需要的图片根本不存在，例如罕见的插画风格，或尚未拍摄的产品。AI 可以生成它。
不过整条轨道都受一个限制支配：免费时，质量与便利只能二选一。
最优秀的图像 AI 只有在亲手点击时才免费；AI 能自动调用的服务则较弱或不够可靠。请按项目选择：
2a. 手动使用最佳 AI：ChatGPT 免费方案。 OpenAI 的图像 AI 目前是广泛可用的最强选项之一。它能准确遵循指令，可以在图片中生成清晰文字（大多数模型做不到），还能让一组图像保持一致风格，使整页图片显得属于同一套作品。
chatgpt.com 可以免费使用，但每天的图片数量有限。OpenAI 不公布固定数量，而且配额会变化，请以自己的账户显示为准。它没有免费的自动版本，因此这条路径必须手动完成。
下面的工作流能把手动操作变成优势，而不是负担：AI 编写指令，你负责按按钮。
故事板已经为每个节拍提供一段描述。让 AI 润色这些描述，亲自逐条粘贴到 chatgpt.com，把结果保存到 assets/ 文件夹，并使用 01-shoebox.png 等名称，再由 AI 放入页面。只需复制粘贴 10 分钟，就能免费获得当前最佳图像质量。
每日限制甚至会帮助你。每天几张图片大致符合有计划的构建节奏，也能避免养成一次生成 40 张、再指望其中一张可用的坏习惯。
2b. 自动但较弱：AI 可以自行调用的免费服务。 需要工作在无人参与时继续推进，例如制作草稿、占位图或课堂项目，可以选择 3 种方案。Pollinations.ai 最接近真正免费的自动图像服务，无需账户。Cloudflare Workers AI 每天提供实际免费额度。Google 免费方案也曾在不同时期提供免费图片。
最后一项带来一个教训。仅在 2026 年，Google 就多次更改当前图像 AI 是否免费。因此，要记住的不是公司名称，而是：免费方案就像天气。 构建当天查看最新页面，绝不能向客户承诺依赖免费额度的内容，因为额度可能下个月就消失。
两者可以这样配合：先用 2b 制作草稿并确定内容位置，再用 2a 正式重做获批图片。草稿便宜，成品精良。
轨道 3：每张图片支付几美分。 项目只要有一点预算，轨道 2 的限制就会消失。
2a 中同一款优秀图像 AI 也能自动调用，并按图片付费：低质量约半美分，中等质量几美分，高质量约 20 美分。（价格会变化，请及时查看。）
以这些价格，可以同时获得质量和便利。AI 会自行以最高质量生成故事板中的每张图片，整个网站的图片成本不到 1 美元。大多数真实客户工作都在这条轨道完成。
fal.ai 和 Replicate 等服务可以通过一个账户连接多家公司的图像 AI，就像概念 4 中 OpenRouter 为文本模型所做的那样。
保持低成本的习惯已经很熟悉：以低质量制作草稿，所有人对图片达成一致后，再为高质量版本付费。
轨道 4：用点数付费的视频（惊艳全场）。 滚动时沿屏幕流下的蜂蜜滴就来自这条轨道。它确实需要花钱，但使用得当时物有所值。
Higgsfield 通过一个账户提供 30 多种图像、视频和声音 AI 模型，包括 Gemini Omni Flash、Seedance、Veo、Kling 等。这里需要关注 3 点：
-
AI 可以直接使用它。 用
npm install -g @higgsfield/cli安装一次，再通过higgsfield auth login登录一次。此后，制作视频就像编辑文件一样，成为 AI 在普通会话中执行的操作。它会提交任务、等待完成，然后带回结果。 -
不必亲自选择模型。 描述想要的镜头，例如「特写，蜂蜜滴落在玻璃上，背后是暖光，适合手机的竖幅，4 秒」，服务就会从 30 多个模型中选择最合适的一个。这样就少学一件事。
-
花钱前可以查询价格。
higgsfield generate cost命令无需生成视频，就能告诉你可能的成本。描述镜头的方式与实际生成时相同，真实命令如下：higgsfield generate cost workflow draw_to_video --duration 8.2 --resolution 720p这是整个媒体章节中最有用的命令，因为它把「花钱前先规划」从建议变成可执行操作：为故事板中的每个镜头定价、计算总额、做出决定，然后才开始创建。让 AI 养成先报价、后拍摄的习惯。
Higgsfield 只是多家公司中的一家。fal.ai、Replicate 和各 AI 公司自身都提供类似服务。这里展示它，是因为目前它最容易连接你的工具。与前面一样需要坦诚说明：它为许多推广这套工作流的视频提供了赞助。请学习理念，也就是把视频制作变成 AI 会话中的普通步骤。具体公司可以更换。
应该指定哪个视频 AI？ 服务可以代为选择，但网页工作几乎只需两个模型，而且它们承担不同任务：
- Google 的 Gemini Omni Flash（目前是预览模型，可能在没有通知的情况下更改或迁移）负责寻找镜头。可以像与人交谈一样告诉它「相同场景，倒得更慢，光线更暖」。它会改进之前的视频，而不是从零开始，并在迭代过程中保持光线和场景一致。仍在决定镜头内容时使用它。
- ByteDance 的 Seedance 2.0（名称显示为
seedance_2_0）负责锁定镜头。最多可以提供 9 张参考图片，包括品牌图像、获批照片和标志。它生成平滑动作时最稳定。稳定性在这里非常重要：与滚动绑定的视频循环播放时不能闪烁或晃动。最终版本使用它。
两个模型遵循同一个习惯：用第 1 个寻找，用第 2 个锁定。 还要注意，质量等级不属于模型名称，而是通过单独的 --resolution 设置传入，就像上面的定价命令。这就是预算控制旋钮，而且在两处完全相同：按 720p 为镜头定价，向客户展示 720p 草稿，得到确认后才为完整质量付费。
始终记住一项警告：视频 AI 的变化速度比本课程中的其他任何内容都快。上述模型是 2026 年 7 月的最佳选择，构建当天请再次确认。
所有轨道都遵循一条规则： 根据故事制作图片，每个节拍一张，以清晰名称保存到 assets/ 文件夹，并且必须在构建最终布局之前完成。
最后为了填补空白而加入的图片，看起来永远像是最后为了填补空白才加入的。
一条实用建议：需要搜索大量照片时，让辅助 AI 在单独对话中处理，只带回最好的几张。在主对话中加载 40 张照片会堵塞上下文，正如编程速成课所警告的那样。
关于许可的简短说明，因为为客户工作属于商业用途。
免费照片网站有使用规则，你已经知道要阅读。AI 生成图片也有规则。目前，大多数公司允许把生成内容用于商业用途，但不同公司的规则不同，免费与付费方案的规则也不同，而且会随时间变化。有些免费方案完全禁止商业用途，这也是应该只把免费方案当作草稿工具的另一个原因。
几乎所有服务都禁止几类内容：真实人物的面孔、其他公司的标志，以及模仿一位具名在世艺术家的风格。
4 个简单习惯可以保障安全：
- 阅读最终图片所用服务的当前规则
- 记录生成内容，包括使用的描述、服务和日期。故事板已经保存了其中大部分信息
- 绝不要在客户作品中加入可识别的真实人物或其他公司的标志
- 告知客户哪些图片由 AI 生成。交接说明中的一句话可以避免日后的所有尴尬对话
这不是法律建议。客户属于受监管行业时，应当咨询真正的律师。不过，这 4 个习惯是专业工作的常规标准。
10. 手机是主要设备
你看过的所有 AI 网站演示几乎都录制在宽大的计算机屏幕上，而访问网站的大多数人手里拿着手机。
对本书面向的绝大多数读者而言，手机不是第二屏幕，而是主要屏幕。 只在笔记本电脑上好看的网站，只能打动构建者本人。
一个理念能简化两种屏幕的设计：
同一个故事，为不同形状重新拍摄。
电影导演制作手机版本时不会重写故事，场景保持不变，改变的是每个场景的取景方式。实际操作如下：
- 故事不变。 鞋盒、分类、平衡、清晰、人物、预约会面，这 6 个节拍在所有设备上都要保留。还可以用一项实用测试来判断：如果某个节拍可以从手机上删除，它就是装饰，而不是故事，也应从计算机版本中删除。
- 重新拍摄图片。 宽幅视频要变成相同主题的竖幅视频，而不是挤压原来的宽幅画面。在付费轨道上，这意味着制作并支付两种形状，请计入预算；在免费轨道上，则要从一开始就选择两种形状。
- 有意决定布局在哪里变化。 明确告诉 AI：「在宽度小于 768 像素的屏幕上使用竖幅视频，让每个章节占据整个宽度，并大幅放大平衡动画，因为它在手机上就是整场表演。」然后测试：把浏览器窗口拖窄再拉宽，观察切换瞬间。平滑还是难看可以直接看到，因此属于概念 11 的工作。
- 拇指不是鼠标指针。 按钮必须大到足以让拇指点击。重要功能不能依赖悬停，因为手机上没有悬停。文字必须无需双指缩放就能阅读。任何一项失败都不是样式问题，而是网站对大多数访客而言已经损坏。
关于何时制作手机版本，还有一条实用建议：必须与计算机版本放在同一个工作会话中，紧接着完成，此时 AI 还记得每项决定。不要改天，也不要先处理一周的其他工作。两个独立会话会产生两个略有差异的网站，直到客户发现时，你可能都没有注意。
它位于整个构建流程的什么位置？设计确定之后，检查开始之前：
computer version → phone version → screenshots at both widths → audit → second opinion → publish
采用这个顺序的原因很简单：检查步骤应该覆盖两个版本。如果把手机版本留到审查之后，就只审查了一半网站。
从一个页面到多个页面：多页网站与路由
此前的所有内容都特意通过单个页面讲解，因为在单页上最容易学习这些习惯。
不过，真实客户工作会不断扩展。Ayesha 最终会需要服务页面、文章章节，也可能为每项专业服务单独建立页面。
好消息是，已学内容完全不变。多页网站不是一种新事物，只是把相同工作在每个页面执行一次，再增加 3 条新规则。
规则 1：每个页面都需要独立的存在理由和自己的故事。
添加页面的错误方式是把一个故事拆碎，最终得到一个只有两段孤零零文字的「关于」页面，而那些文字本该属于滚动故事。
正确方式是把「每屏一个理念」的测试提升一级。当访客需要完成不同任务时，才应该存在新页面。 详细比较服务、阅读她的文章、寻找办公室是 3 项不同任务，因此可以成为 3 个页面。
通过测试的每个页面都要拥有自己的故事，完全按照概念 8 的方式撰写并达成一致，最后以自己的动作结束。
先把所有内容写入一份计划：每个页面、页面任务及其节拍。构建第 2 个页面前先批准这份计划。
菜单应直接来自这份计划，而不是作为装饰临时编造。保持简短，用访客想完成的任务为菜单项命名，并确保每个页面上的菜单完全一致。
还有一个小细节能区分认真与草率：也要设计「找不到页面」屏幕。它同样是页面，理应获得同等关注。
规则 2：整个网站保持一种样式。
Hallmark 的核心理念在这里会反转，很容易让人困惑，请慢慢阅读。
在不同客户之间，技能要抵抗雷同。两个客户的网站不应该共享同一副骨架。
在同一位客户的网站内，一致性恰恰是目标。5 个页面应该像同一栋建筑中的 5 个房间：颜色相同、字体相同、间距相同，并由同一份 design.md 管理。
大胆时刻必须保持独特，放在首页即可。如果在每个页面都以同样强度重复，它就不再特别，而会沦为墙纸。
实际操作中，先构建首页以确定样式。之后用同一方式请求其他页面：「使用相同设计文件和相同样式，讲述新的故事。」
让第 2 个 AI 审查网站时（概念 12），要明确询问各页面是否保持一致。页面之间的细微差别正是构建者身在其中时无法发现的内容。
规则 3：在复制成为问题之前，网址只是文件。
下面的内容听起来复杂，其实并不难。对简单网站而言，文件就是地址：
index.html是首页services.html位于/services.htmlarticles/index.html位于/articles
链接把它们连接起来，托管服务则按原样把文件夹放到网上。这里没有需要学习的系统，始终从这种方式开始。
有一项保持地址整洁的小设置值得了解：如果更喜欢 /services 而不是 /services.html，可以在页面旁添加名为 vercel.json 的文件，其中包含 { "cleanUrls": true }。随后 Vercel 会从地址中去掉 .html。此功能默认关闭，从不设置也不会导致任何问题。
多页网站真正的困难不在地址，而在复制。菜单和页脚现在以副本形式存在于每个文件中。一份菜单复制 5 次，就有 5 次机会产生细微差异。总有一天，某个页面会保留一条没人注意到的旧链接。
你在编程速成课中见过这种感觉：同一件事解释到第 3 次时，这份知识就应该集中存放在一个位置。
有两种答案，从轻量到重量级：
- 轻量答案： 保留简单文件，再增加一项自动检查。如果各页面菜单不完全相同，就拒绝保存工作。这样，漂移不再只是可能性很低，而是根本无法发生。
- 重量级答案： 网站超过少量页面，或定期新增文章时，迁移到只写一次菜单并重复使用的系统。Astro 很适合这类网站，AI 可以通过一条指令完成设置，并把现有页面迁入其中。
判断标准与编程速成课对工具的一般建议相同：只有真实问题证明重量级系统确有必要时才采用，不能提前引入。
其他所有内容只需在每个页面重复一次：两种宽度的截图、审计、手机版本、站点地图条目、大小限制，以及成本估算中的一行。页面增加意味着需要覆盖的范围扩大，而不是要学习更多理念，这正是我们从单页开始的原因。
第 4 部分：设计验证
11. 视觉验证循环
本书最重要的模式是一个循环：尝试、检查、修复、重复。 AI 执行工作，某项机制负责检查。如果检查失败，失败消息就会成为 AI 的下一条指令。AI 持续执行，直到检查通过，中间无需人工参与。
在编程速成课中，检查器就是测试。设计似乎始终无法采用这种检查方式，因为计算机不能把「看起来正确」判定为通过或失败。
这个概念解决了问题。下面是 3 种检查器，从最宽松到最严格排列：
检查器 1：截图。给 AI 一双眼睛。
这是本课程价值最高的单个习惯，而且非常简单。每轮构建后，AI 都为完成的页面截图并查看图片，而不是查看代码。
为什么如此重要？只读取自身代码的 AI 无法发现两段文字相互重叠，也无法发现视频加载失败、按钮颜色与背景相同，或布局在窄屏上崩坏。
只看一眼截图，就能立刻发现这 4 类问题。
这正是 Kimi K3 赢得设计对比的原因。Anthropic 自己的设计技能用一句值得借用的话概括了它：「一张图片抵得上 1000 个 token。」 token 是 AI 阅读内容时支付的成本。因此，这句话不是谚语，而是在说明观察不仅比阅读代码效果更好，而且成本更低。
把它写进规则文件，实现自动化：
每次重大更改后，分别以 1440 像素和 390 像素宽度为页面截图。查看两张截图后，才能宣布完成。
两款工具都能做到。让所用工具设置名为 Playwright 的程序，它会自行处理。整个程序只有大约十几行代码，而且只需编写一次：打开浏览器，以每种宽度加载页面，保存截图，然后关闭。
两个细节能让截图真正有用。要捕获整个页面，而不只是最先看到的部分，因为滚动故事存在于下方。网站上线后（概念 13），要为线上页面截图，而不是计算机中的本地副本。
检查器 2：审计。把品味变成清单。
Hallmark 的 audit 命令读取页面并返回一份具体问题清单。它不会修改任何内容，只负责告知问题。
清单正是循环所需的形式，因为其中每一项都会成为下一条指令。构建、审计、修复清单、再次审计，直到清单为空。
看看刚才发生了什么。「让它不那么千篇一律」是一条永远不会失败的指令，因此也无法驱动任何工作。「修复这 7 个具体问题」则可以完成并检查。整个诀窍就是把第 1 类句子转化为第 2 类。
检查器 3：自动规则。保证必须始终成立的事项。
有些事情完全不能交给 AI 判断，必须每次都成立。编程速成课教过如何识别并自动强制执行这类事项，让 AI 即使想跳过也做不到。
网站中的典型规则包括：
- 每张图片都附带文字说明，让使用屏幕阅读器的人知道图片内容
- 任何文件都不能超过大小限制
- 保存任何内容前，网站必须无错误地完成构建
再次强调编程速成课中的一项警告：请自行编写这些检查，不要让 AI 编写。让 AI 针对自身习惯构建测试时，它会「热心地」把测试设计得很容易通过。
很多人会在这里欺骗自己，请仔细阅读。 在规则文件中写下「每张图片必须有说明」，只是 AI 通常会遵循的指令，不等于 AI 无法违反的规则。只有它忘记的那一天，两者差异才会显现。
真正的检查是一个回答「是」或「否」的小程序。把下面内容保存为项目中的 check-site.mjs。它使用 Node.js；由于 npx 和 Vercel 都需要 Node.js，你已经拥有它。因此，这个程序在 Windows、macOS 和 Linux 上的运行方式完全相同：
import { readdirSync, statSync, readFileSync } from "fs";
import { join, extname } from "path";
const MAX = 500 * 1024; // 500KB
const MEDIA = [
".png",
".jpg",
".jpeg",
".webp",
".avif",
".svg",
".gif",
".mp4",
".webm",
];
const problems = [];
function walk(dir) {
// look in every folder, not just this one
let out = [];
for (const name of readdirSync(dir)) {
if (name === "node_modules" || name.startsWith(".")) continue;
const full = join(dir, name);
out = statSync(full).isDirectory()
? out.concat(walk(full))
: out.concat(full);
}
return out;
}
const files = ["site", "assets"].flatMap(walk); // only what actually publishes
for (const f of files.filter((f) => extname(f) === ".html")) {
const html = readFileSync(f, "utf8");
for (const tag of html.match(/<img\b[\s\S]*?>/gi) || []) {
// even across line breaks
if (!/\balt\s*=/i.test(tag)) problems.push(`MISSING DESCRIPTION ${f}`);
}
}
for (const f of files.filter((f) => MEDIA.includes(extname(f).toLowerCase()))) {
if (statSync(f).size > MAX)
problems.push(`TOO BIG ${f} ${Math.round(statSync(f).size / 1024)}KB`);
}
if (problems.length) {
console.error(problems.join("\n"));
process.exit(1);
}
console.log("All checks passed.");
使用 node check-site.mjs 运行。如果出现问题，它会打印文件名并以失败状态停止；如果一切正常，也会明确说明。
两种情况都要尝试，因为看到失败正是重点。在正常页面上运行，它会显示 All checks passed。现在删除一处 alt="..."，然后再次运行：
MISSING DESCRIPTION site/index.html
正是这个失败让循环能够工作。AI 运行脚本，读取 MISSING DESCRIPTION: services.html，修复对应文件，再次运行。无需任何人主动发现，也无需任何人记住。
不需要理解脚本的每一行，只需理解它揭示的差别：规则文件负责请求，脚本负责裁决。
随着发现作品容易出错的地方，继续添加规则。例如，菜单在每个页面都必须相同；页面必须真正包含有效的联系链接；标题不能仍然是「Home」。下载包中的版本包含 6 条规则，每一条都源于曾经发生过的一次错误。
还要了解它无法捕获什么。 在完成的 Ayesha 项目中，节拍 3 的账簿总额为 PKR 217,950，而节拍 4 显示 PKR 217,930。这可是会计师的网站。审计、审查 AI 和截图都没有发现，因为它们检查的是页面看起来是否正确，而页面确实看起来正确。最后，一名亲自相加 3 个数字的人发现了问题。
因此，要自动化所有可以检查的内容，再把节省的注意力用于永远无法自动检查的部分。这不是退而求其次，而是工作的本质。
从第 1 次构建就值得采用的两组规则。
第 1 组：所有人都能使用网站。 文字与背景必须有足够的对比度，确保可以阅读。使用键盘而不是鼠标导航的人必须能看到当前焦点。访客在设备中选择减少动态效果时，动画应当停止，因为动态效果会让一些人感到不适。Anthropic 的设计技能把它描述为默默达到、不必炫耀的底线。这种态度完全正确：它是最低标准，而不是功能亮点。
第 2 组：页面足够轻，能够顺利加载。 在世界大多数地区，尤其是巴基斯坦，许多访客使用中端手机，并按 MB 支付流量费用。一个漂亮的 40 MB 视频不会让他们赞叹，只会成为离开的理由。
因此，请设置限制并自动执行：
- 视频到达前，第 1 屏的加载内容应控制在大约 1 MB 以内
- 每个视频背后都要有静态图片，让页面在视频加载前就显得美观
- 页面下方的图片只有在访客滚动到相应位置时才加载
- 任何自动播放的视频都必须静音，因为突如其来的声音会让人关闭标签页
网站在你的高速网络上非常惊艳，却在访客手机上失败，就等于辜负了大多数受众。与品味不同，上述每一项都可以由计算机检查。
你仍然不可替代的位置。 循环会收敛到正确且不俗套，却不会自行收敛到适合这位客户。页面是否像 Ayesha、大胆时刻是否产生效果、故事节拍是否有呼吸空间，这些判断从来无法委派。课程开头的第 3 个信念已经说明原因：信任范围必须与可检查范围完全一致。循环的价值在于，只在真正需要判断的地方消耗你的判断力。
12. 跨模型设计审查
编程速成课给出了一条规则：制作某项内容的 AI，最不适合审查该内容。
设计让这条规则更加重要，概念 1 说明了原因：AI 看不见自己的习惯。 从内部来看，它偏爱的样式根本不像习惯，而像是「网站本来就该这样」。训练方式不同的另一个 AI 则能立刻发现这些习惯。
设置方法如下：
- 由一个 AI 构建。 Kimi K3（或 Claude）制作页面
- 由另一家公司的 AI 审查。 不能把同一个 AI 问两次，也不能使用同一家公司的同系列模型，而要选择真正不同的模型。向审查者提供 3 项内容：原始简报、
design.md和截图。截图非常重要，因为只读取代码的设计审查只是表演。随后提出严格问题，例如：把页面与简报对比；指出 3 处看起来由 AI 制作的地方并解释原因；检查故事在手机版本上是否仍然有效；检查颜色和字体是否与 design.md 完全一致；把发现写入文件，不要修改任何内容 - 构建者读取并修复发现的问题。 如果两个 AI 模型意见不一致，由你决定
为什么坚持选择不同公司？因为概念 1 提到的测试发现，Kimi K3 页面表现出另一个 AI 的习惯，很可能是从对方那里学来的。即使来自不同公司，两个 AI 模型也可能共享同一盲点。选择其他来源的审查者，是发现构建者无法自察问题的最低成本方法。
还有一项额外好处：审查保存为文件后，可以展示给客户。能够说出「独立审查发现了这 5 个问题，现在已经全部修复」，会非常有说服力。
第 5 部分：交付
13. 部署：从文件夹到 URL
存在于计算机文件夹中的网站只是彩排。另一座城市的人能在手机上打开它时，真正的演出才算开始。
过去，把网站放到网上足以单独开设一门课程：服务器、地址、安全证书。如今，AI 可以代你完成。
Vercel 是本课程使用的服务。其免费方案足以满足学习项目和向客户展示作品的需求，而且 AI 可以直接控制。注册一次账户，然后告诉 AI：
Connect to Vercel via the CLI and deploy this project.
AI 会安装所需内容，打开一次浏览器供你登录，然后把网站发布到网上。
需要掌握两条命令，它们之间的差别就是彩排与正式演出的差别：
vercel创建预览：一个临时网址，非常适合发给客户并说「请看看这个」vercel --prod把网站放到真实地址，也就是属于该企业的地址
每次更改都会获得新的预览。因此，与客户合作会形成舒适节奏：构建、发送预览、收集反馈、再次构建、发送新预览。客户批准前，真实网站始终不受影响。
掌握 3 个习惯就足够：
- 预览用于修改，真实地址用于成品。 绝不要通过真实地址展示进行中的工作，也不要让客户一直查看旧预览
- 在上线页面而不是计算机上执行最终检查。 网站上线后，字体、视频和链接会找到新的失败方式。任何人查看前，把概念 11 的截图操作指向线上预览地址，并检查两种宽度
- 其他服务也能完成相同工作。 Netlify、Cloudflare Pages 和 GitHub Pages 的工作方式都相同。这里学习的技能是让 AI 代你发布，具体公司只是一项偏好
自己的网址才是真正的终点线。
如果网站地址以 .vercel.app 结尾，没有客户会认为它已经完成。他们是对的，因为地址属于品牌的一部分。
获取专属地址只需几个步骤：
- 从任意销售商购买地址。在巴基斯坦，
.pk地址来自 PKNIC，.com则可以从任意国际销售商购买 - 在 Vercel 项目的设置中添加地址
- Vercel 会显示 2–3 个值，需要复制到销售商的设置页面。完成复制即可，AI 可以逐屏指导操作
生效时间从几分钟到几小时不等。
这一步还应配合两个专业习惯。以客户名义购买地址，并放在客户控制的账户中。 自由职业者如果拥有客户的网址，即使出于好意，也会无意间扣住客户的资产。网站安全锁标志会在这里自动配置，因此浏览器发出安全警告时，问题出在地址设置，而不是网站本身。
确保人们能找到网站。 无人发现的网站会悄无声息地失败。一次简短检查就能覆盖基础内容，并长期带来回报：
- 真实的页面标题。 使用「Ayesha Rehman，拉合尔特许会计师」，而不是「Home」。它会出现在搜索结果和浏览器标签页中
- 一句页面描述，面向正在浏览搜索结果列表的人来写
- 分享图片。 大多数教程都会跳过它，但它在这里最重要。有人通过 WhatsApp 分享链接时，会出现一张包含图片和标题的小卡片。变成漂亮卡片的链接会被打开，孤零零的灰色链接则不会。这张图片只是媒体流水线中的另一项任务：以 1200 × 630 像素导出页面顶部，并保存为
og.png - 供搜索引擎使用的页面列表，AI 几秒内就能生成；此外，还要通过客户自己的账户向 Google 注册网站
用最真实的方式测试分享卡片：把预览链接粘贴到 WhatsApp 聊天中，看看会出现什么。
14. 客户工作流
此前的所有工作都是为自己构建。一旦有人付费，同样的工作就需要一套专业习惯来支撑。
这个概念会通过第 6 部分的项目介绍这些习惯：来自拉合尔的会计师 Ayesha Rehman 将为自己的事务所推出网站。
共 6 个步骤：
- 构建前以书面形式达成一致。 一页就足够：网站面向谁、访客应该执行的唯一动作、双方同意的故事节拍，以及「完成」具体包括什么，例如页面数量、是否包含手机版本、发布位置和照片提供方。6 周后，如果有人对协议产生不同记忆，就由这一页来裁决。记忆不是合同
- 找到品牌，然后确认。 使用概念 7，并记住其规则：网上找到的内容是草稿，客户发送的内容才是最终版本。Ayesha 的旧网站提供了品牌颜色，但电话沟通发现她正在更换标志。仅这一通电话，就避免了把整个第 1 版构建错误
- 销售故事，而不是成品页面的图片。 构建任何内容前，先发送 6 个节拍，每个一行。批准故事的客户会对实质内容提供反馈；先看到成品设计的客户则会讨论蓝色的具体色调。展示内容的顺序是最容易被低估的工具
- 让客户在自己的手机上审查。 不要只把截图粘贴到聊天中。发送预览链接，并说「请在手机上打开」。他们自己的客户使用的正是这种设备，这一刻也会让手机版本的全部工作悄然证明自身价值
- 使用 4 个方框为工作定价。 模型：成本几乎可以忽略，直接吸收，不要在发票上列出几分钱。品味：这是你的时间，也是主要项目。媒体：这里要进行坦诚沟通，例如「图库照片包含在内，像示例这样的定制视频需要额外支付 X」。因为生成前可以查询价格，所以 X 是一个能够自信报出的数字，而不是猜测。托管：目前免费，交接时迁移到客户自己的账户和网址
- 正确交接。 交给客户所有内容：文件、发布在其控制账户下的网站、以其名义持有的网址、
design.md，以及客户需要时提供的简单访客统计
还要再添加一项：用一页内容说明如何让 AI 对网站进行小改动。
最后一项是这个时代的新事物，客户会记住。你交付的不只是网站，还有维护网站的能力。
具有复利效应的行动：完成第 1 位客户后，把整个流程保存为技能文件，包括协议模板、寻找品牌的方法、故事格式、审查问题、发布步骤和交接清单。随后，第 2 位客户只需要第 1 位一半的工作量；到第 5 位时，文件已经完成大部分工作。
这就是一名自由职业者规模下的 本书核心理念：长久存在的从来不是网站，而是制造网站的系统。
15. 成本纪律
编程速成课讲过如何降低 AI 对话成本。网站又增加了两类成本：图片按张定价，使用不同公司的 AI 也会改变可获得的折扣。3 个习惯可以应对。
制作图片前先定价。
令人意外的是，在 Kimi K3 构建中，整个网站的全部代码成本比一杯茶还低。一个定制视频的成本可能超过其他所有内容之和。预算重点是图片，而不是 AI。
幸好，花钱前可以查询价格。higgsfield generate cost 命令无需制作视频，就能告诉你成本。于是，故事板会变成报价单：6 个节拍、6 个价格、1 个总额，在支付任何费用前做出决定。
把它写入规则文件，确保永远不会忘记：
制作任何图片或视频前，估算每个计划镜头的成本，并告诉我总额。
在所有地方遵循相同纪律：制作任何内容前，列出每个节拍、所属轨道和形状，审查整套方案，然后才为最终质量付费。最昂贵的错误从来不是一张图片，而是在从未事先写清需求的情况下生成 30 张图片，慢慢摸索自己想要什么。手机版本会让清单数量翻倍，请把它计入报价，而不是留作之后的意外。
使用另一家公司的 AI 会让对话成本重新成为问题。 Kimi K3 对已经看过的文本收费约为首次阅读文本的十分之一。这项折扣正是它显得便宜的主要原因，而且只有对话开头保持不变时才适用。重新开始对话，或编辑靠近顶部的内容，就会重新按全价支付所有文本成本。
由此产生两个习惯。按照概念 4 的说明设置 CLAUDE_CODE_AUTO_COMPACT_WINDOW，让自动整理真正知道模型的记忆容量。还要继续采用已经学过的方法：观察用量数字，在自然停止点整理，并先把重要事实保存到文件，因为文件不会在整理中消失。
了解一个项目的实际成本。
完成第 1 个网站后，记录真实数字：AI 花费、图片花费，以及工作小时数。
第 6 部分中的 Ayesha 网站只花费几美元的 AI 时间，再加上图片预算。后者可能是 0 美元、不到 1 美元，或一个提前查询过的视频价格。
这个数字会改变一切。「我负担得起这种练习吗？」会变成「可以，每周都能做」。客户询问网站成本时，你也能报出一个数字，而不是猜测。
第 6 部分：完整实战示例，在两款工具中各做一次
现在把所有内容组合起来。我们会从空文件夹开始，一直做到真实上线网址，并分别在 Claude Code 和 OpenCode 中完成一次。两款工具不同的地方会明确标出。
下面介绍的所有内容都以真实文件存在，而不是对文件的描述：正常运行的网站及其专门设计的 404 页面、分享卡片、两张照片、包含 6 个节拍的故事主线、记录品牌规则的 design.md、规则文件、Hallmark 审计（先发现 7 项问题，最后归零）、另一家公司 AI 给出的独立审查、成本记录、检查器、截图脚本，以及从真实页面获取的两种宽度全页截图。
下载 Ayesha 项目 · 解压后运行 npm run check。删除一处 alt="..."，再运行一次，观察它如何失败。
请先阅读 docs/defect-log.md。其中列出项目曾经发布过的全部 8 个缺陷，并注明每项缺陷由什么发现。最严重的一项是会计师账簿加总错误，却没有任何自动检查发现，最后由一名亲自算数的人找出。这正是整门课程所主张的人机分工比例。
构建任务
客户： Ayesha Rehman，来自拉合尔的会计师。她正使用 AI 工具重新推出事务所，而当前网站只有一个旧页面和过时标志。
她希望访客，也就是同城的小企业主，在滚动页面时产生两种感受：「这个人理解我的混乱」，以及「这个人已经解决过这种问题」。
双方同意的故事主线（概念 8，与 Ayesha 共同起草，共 6 个节拍）：
- 鞋盒：收据，每个人心虚的秘密，用温暖且富有人情味的方式拍摄
- 分类：混乱变成清晰类别
- 自动对账的账簿：大胆时刻，一行账目随着滚动以动画形式实现平衡
- 每月清晰结果：一份整洁报表，一个平静数字
- 人物：Ayesha、她的办公室、专业资质和真实的拉合尔光线
- 预约咨询：一个动作，一个按钮
交付内容：
- 来自同一个故事的计算机版本和手机版本
- 准确使用她的品牌颜色与字体
- 把节拍 6 连接到真实 WhatsApp 链接，并预先填好消息
- 完成基本可发现性设置：页面标题、描述，以及她通过 WhatsApp 发送链接时显示美观的分享卡片
- 先提供预览链接供她批准，交接时再使用她自己的
.pk网址
图片： 节拍 1、2、4 和 5 使用轨道 1，也就是真实照片。节拍 1、2 和 4 来自免费图库；节拍 5 使用在她真实办公室中用手机拍摄的两张照片。节拍 3 的平衡动画用代码构建，不使用视频。轨道 4 的定制开场视频作为可选附加项报价，提前查询价格，并由她做出决定。这就是概念 14 的实际应用：图片预算需要与客户沟通，而不是由你独自决定。
8 个步骤
步骤 1：Web 项目的规则文件
在 Claude Code 中： 运行 /init，再把生成的文件精简到只保留模型无法通过观察推断的内容：
# ayesha-practice-site
## Layout
- `site/`: the website source. Single HTML file with embedded CSS/JS until told otherwise.
- `assets/`: all media, named by story beat (e.g. `03-ledger-*`), optimized before use.
- `design.md`: brand constraints and design direction. Read before any design work.
- `docs/plans/story-spine.md`: the approved six-beat spine. The build implements this.
## Critical rules
- Brand constraints in design.md are a spec, not a mood. Never substitute colors or fonts.
- Every image ships with an alt attribute. No asset over 500KB.
- After significant changes, screenshot at 1440px and 390px and review both before reporting done.
- The story spine's beats may not be reordered or dropped without asking.
为什么重要： 截图规则意味着 AI 每次都会检查自身工作，而不是只在你想起来询问时才检查。design.md 规则则意味着 AI 不能悄悄「改进」品牌颜色。
在 OpenCode 中： 把相同内容写入 AGENTS.md。
步骤 2：安装品味层
两款工具中的操作完全相同：
npx skills add Nutlope/hallmark
在 Claude Code 中，还要通过插件系统安装 Anthropic 的 frontend-design 插件。之后，它会自动协助设计工作。需要完整处理时，再明确调用 Hallmark。两者可以协同工作。
如果使用 Kimi K3，请记住概念 5 的警告：其他公司的 AI 模型不太可靠，未必会自行调用技能。因此，每个设计步骤都要说出 Hallmark 的名称，不要只靠期待。
步骤 3：提取品牌，研究方向
先应用概念 7：把 AI 指向 Ayesha 的旧网站，索取准确颜色、字体和标志，并要求为每一项提供对应代码行作为证据。它会返回深绿色、金色和衬线字体，每项都附带凭据。
然后拨打绝不能跳过的电话。Ayesha 说明她正在更换品牌：保留绿色，把金色改为更温暖的琥珀色，并正式发送新标志。
接着应用概念 6：对她欣赏的两个网站运行 Hallmark 的 study。加上她自己的品牌，共有 3 个参考，恰好足以迫使你组合理念，而不是复制。
所有内容都写入 design.md，并把她的品牌明确标记为规则，而不是建议。
两款工具中的操作完全相同。
步骤 4：计划模式，从主线到结构
切换到计划模式，AI 可以查看但不能修改任何内容（Claude Code 中按两次 Shift+Tab，OpenCode 中按 Tab）。描述任务：6 个节拍、design.md、手机最重要，以及哪个时刻应该大胆。
AI 会返回一份计划，这时可以零成本发现错误。它的第 1 份计划是普通页面：顶部一张大图，然后把节拍挤成普通章节。这只是无聊的默认骨架披上了故事外衣。
因此，请明确反对：
滚动就是故事。每屏一个节拍。平衡动画独占整个屏幕。任何地方都不要出现成排的功能框。
它会更新计划。现在批准计划，并保存到文件。
步骤 5：使用设计模型构建
在 Claude Code 中： 此文件夹的设置按照概念 4 指向 Kimi K3。使用 /status 确认，不要使用 /model。随后退出计划模式，让它开始构建，并在过程中明确提到 Hallmark。留意用量：K3 输出很长，而且这是构建中耗时最长的一步。
在同一个会话中构建两个版本。 先用计算机版本确定设计，再趁 AI 仍记得所有决定时紧接着制作手机版本。每个节拍都会重新排列，平衡动画在手机上占据整个屏幕。把浏览器拖窄再拉宽，观察切换，并为 Ayesha 录下来。
在 OpenCode 中： 输入 /models，通过 OpenRouter 选择 Kimi K3，然后构建。同样要明确说出 Hallmark，并留意用量。
Kimi K3 会深入思考，因此比 Claude 会话更慢、输出更多。不过，结果明显不再平庸。滚动时，会计账目会自行绘制，整个页面没有一排功能框。
步骤 6：媒体处理
辅助 AI 按照故事板，在免费图库中搜索节拍 1、2 和 4 所需的图片，并保持一种光线和一种氛围。（辅助 AI 在单独对话中完成，因为 40 张照片缩略图会堵塞主对话。）用手机拍摄的两张办公室照片放入 assets/，用于节拍 5。每个文件都以节拍命名，并控制在大小限制以内。
如果某个节拍需要虚构图片，可以在轨道 3 花几美分生成，或在 chatgpt.com 免费生成。
如果 Ayesha 同意制作视频，也会在此处完成。通过与 Gemini Omni Flash 对话寻找镜头，再用 Seedance 以 720p 锁定最终版本供她审查。批准后，才按照已经报出的价格为宽幅和竖幅的完整质量版本付费。
两款工具中的操作完全相同。
步骤 7：验证，截图、审计、跨模型审查
按顺序使用概念 11 中的 3 种检查器。
截图规则一直在安静地工作。现在运行 Hallmark 的 audit。第 1 次会发现 7 个问题，其中一项只有鼠标悬停时才有效，在手机上完全失效。修复清单，再次运行，直到清单为空。
随后应用概念 12：把简报、design.md 和截图交给另一家公司的 AI。这里由 Claude 审查 Kimi K3 的工作。它把发现写入文件，不修改任何内容。
审查者发现了构建者无法自察的两个问题：节拍 4 的照片光线比其他照片更冷，琥珀色按钮在绿色背景上难以阅读。
构建者修复两项问题。这次无需解决意见分歧，但仍要阅读全部内容，因为最终判断权依然属于你。
在 Claude Code 中： 按照编程速成课的方式，让审查者在第 2 个 worktree 中运行。在 OpenCode 中： 审查者只是同一项目中连接的第 2 个提供商。
步骤 8：发布并保存流程
手机版本已经在步骤 5 中完成，紧接在计算机版本之后，并位于同一会话，完全符合概念 10 的要求。因此，步骤 7 的检查覆盖了两种宽度。
这里剩下的是发布。现在完成可发现性工作：标题、描述、页面列表和分享卡片。用真实方式测试卡片：把预览链接粘贴到 WhatsApp 聊天中，查看显示结果。
然后运行 vercel 获取预览地址，为线上页面拍摄两种宽度的最终截图，再把链接发给 Ayesha，只附一句话：「请在手机上打开。」
她批准后，运行 vercel --prod，通过她自己的账户连接专属 .pk 地址，通过她的账户向 Google 注册网站，再交付概念 14 中的完整包。
最后，执行产生复利的行动。把整个流程保存为技能文件：故事模板、品牌问题、先审计后审查的顺序，以及发布清单。
Ayesha 的表亲经营纺织品出口业务。明天开始构建第 2 个网站，只需一半时间。
刚才发生了什么
数一数来自编程速成课的内容：规则文件、计划模式、技能、辅助 AI 模型、自动检查、获取第二意见，以及保存工作以便复用。
再数一数这里的新内容：品味文件、获取图片的方法、用作测试的截图，以及作为成品的线上网址。
这种比例就是全部重点。你没有成为设计师，而是把检查机器指向了一种新工作，剩下的由机器和一份优秀品味文件完成。
两款工具之间的差异再次非常小：连接 Kimi K3 的设置不同，进入计划模式的按键不同，审查者运行的位置不同。思考方式完全相同。
思考才是真正的工具，设置只是装饰。
如何真正掌握这项能力
规则与编程速成课相同：只阅读本页几乎没有作用，亲手构建才能带来真正进步。
你一定会遇到问题。这很正常，也是学习发生的方式。每个问题都会指向本页的某个概念：
| 遇到的问题 | 修复方法 |
|---|---|
| 「我做的每个网站看起来都一样」 | 没有加载品味文件，或没有明确说出它的名称（概念 5） |
| 「AI 忽略了品牌颜色」 | 没有 design.md，或没有把颜色明确标记为规则（概念 7） |
| 「在笔记本电脑上很好看，在手机上却坏了」 | 只构建了一个版本并强行压缩。重新拍摄故事（概念 10） |
| 「页面很漂亮，但没人知道该做什么」 | 没有故事，或两个理念在一屏内相互争夺（概念 8） |
| 「我一直说『让它不那么千篇一律』，却没有变化」 | 这条指令永远不会失败，所以无法改变任何内容。改为运行审计并修复清单（概念 11） |
| 「图片账单让我意外」 | 规划前就开始制作图片（概念 9 和 15） |
| 「我和 AI 都错过了一个明显错误」 | 需要让另一家公司的 AI 查看（概念 12） |
| 「到一天后半段，Kimi K3 变得混乱而昂贵」 | 这条路径中只有你会整理对话（概念 4 和 15） |
| 「网站已上线，但按钮没有作用」 | 最后一个节拍从未连接任何机制（概念 8 和 11） |
| 「它在我的笔记本电脑上很漂亮，对访客而言却太重」 | 设置大小限制，在视频背后添加静态图片，延迟加载下方图片（概念 11） |
| 「我的 5 个页面像 5 个不同网站」 | 必须由一份 design.md 管理全部页面（多页网站小节） |
每周做一个网站，胜过每天读 8 个概念。
选择真实项目：把自己的简历做成网页、朋友的商店、家庭企业或学校社团。执行全部 8 个步骤，并记录成本。
做到第 3 个网站时，这些步骤不再像额外步骤，而会变成自然的工作方式。 这项技能会分阶段成长。了解当前阶段，就知道下一步应该练习什么。 大多数人卡在阶段 1 和 2 之间。他们发布能用的页面，收集各种聪明提示词，却没有加载一次品味文件，让它长期工作。 无论今天处于哪个位置，只要向上提升一个阶段，本课程就已经值回投入。你位于阶梯的哪一级：掌握这项能力的 8 个阶段（点击展开）
阶段 表现 对应内容 0. 思维方式 理解 AI 有设计习惯，设计需要通过观察来检查，品味可以存入文件 课程开头的 3 个理念 1. 第 1 个网站上线 一个真实页面、免费图片，并发布到其他人能在手机上打开的地址 概念 2、9、10、13 2. 已加载品味 安装 Hallmark，阅读自己页面的问题清单并全部修复 概念 5 和 11 3. 每次都把故事放在最前 故事尚未写好并达成一致时绝不开始构建，包括最终动作 概念 8 4. 检查自动运行 每次构建都有 3 种检查器工作：截图、审计和自动规则 概念 11 5. 为他人构建 寻找并确认品牌、获取第二意见、在客户手机上审查，并用 4 个方框定价 概念 7、12、14 6. 流程变成文件 整个流程保存为技能，第 2 位客户确实只需一半时间 概念 14 和第 6 部分步骤 8 7. 流程变成业务 客户不断到来，用 4 个方框定价，从一个设计系统构建多页网站，并获得转介绍 概念 2、14，以及多页网站小节
快速参考
用一句话概括 15 个概念
- AI 俗套设计来自数学，而不是懒惰。 每个 AI 都有偏爱的样式，因为它会用学到的最常见内容回答。甚至 Anthropic 也编写了文件，要求 Claude 避免自身习惯
- 4 个部分构建每个网站。 模型、品味、媒体、托管。每项决定都属于一个方框，工作也用这些方框定价
- 最擅长设计的 AI 不等于综合能力最强的 AI。 这是两场不同比赛。查看盲测网站，再把设计工作交给领先者
- 任何 AI 都能在工具内运行。 更改 Claude Code 设置中的地址，或从 OpenCode 列表中选择。始终用
/status检查，不要使用/model。最佳 AI 戴着租来的王冠，真正属于你的是工具和文件 - Hallmark 是文件中的品味。 4 条命令（build、audit、redesign、study）、58 项检查，每次采用不同的页面形状。任何人都能免费使用
- 向网站学习，不要复制。
study把网站有效的原因写入design.md。使用 3 个参考，因为一个参考会诱使你复制 - 先准确还原品牌。 索取准确颜色和字体，并要求提供来源证据，再用客户的真实文件确认。品牌颜色是规则，不是建议
- 一个故事，一次滚动。 构建前先写故事，每屏一个理念，顶部展示真实内容，只在一处大胆。最后一个节拍必须真正有效，可以使用 WhatsApp 链接、表单或小程序，绝不能留下无效按钮
- 获取图片有 4 种方式。 真实照片（免费）、免费 AI 图片（手动获得质量，或自动获得便利，不能兼得）、几美分一张的 AI 图片（两者兼得），以及真正需要付费的视频。故事就是镜头清单
- 手机是主要屏幕。 为竖幅重新拍摄同一个故事，并有意决定布局变化的位置
- 3 种检查器让设计可以测试。 截图给 AI 一双眼睛，审计把品味变成清单，自动规则则保障基础要求：可读对比度、键盘操作，以及足够轻、能通过移动数据加载的页面
- 从另一家公司的 AI 获取第二意见。 AI 看不见自己的习惯。发送简报、设计文件和截图，把发现写入文件
- 发布只需两条命令。
vercel创建可分享的预览，vercel --prod将其变成真实网站。随后连接客户自己的网址，并完成可发现性基础设置：标题、描述和分享链接时出现的卡片。检查线上页面，而不是计算机中的副本 - 与客户合作有 6 个步骤。 以书面形式达成一致、寻找并确认品牌、在图片之前销售故事、让客户在手机上审查、用 4 个方框定价，并交付维护网站的能力
- 了解各项成本。 制作图片前先定价，保持对话整洁，并了解整个项目的实际成本
设置快速参考（点击展开）
| 想要…… | Claude Code | OpenCode |
|---|---|---|
| 运行 Kimi K3 | 在 .claude/settings.json 中加入 Moonshot 环境块，用 /status 验证 | /connect openrouter → /models → K3 |
| 安装品味层 | npx skills add Nutlope/hallmark，再安装 Anthropic 的 frontend-design 插件 | npx skills add Nutlope/hallmark |
| 在会话中生成媒体 | Higgsfield CLI/MCP，或通过获取和 API 使用轨道 1–2 | 相同 |
| 为渲染结果截图 | 让它设置 Playwright 截图 | 相同 |
| 部署 | 「Connect to Vercel via the CLI and deploy」 | 相同 |
| 观察 K3 上下文 | 把 CLAUDE_CODE_AUTO_COMPACT_WINDOW 设置为 1048576，然后自行观察 | TUI 中的 token 读数 |
用一棵决策树概括构建流程
New page or site?
→ Spine first (plan mode) → Hallmark default → media per beat → verify
Page exists but looks generated?
→ Hallmark audit → fix the list → if the skeleton itself is slop, redesign
Client has a brand?
→ Extract with quoted sources → confirm real assets → design.md as constraints
Admire a site?
→ Hallmark study → design.md as direction (never a clone)
Site outgrown one page?
→ A spine per page, one design.md for all → files as routes →
framework with layouts only when repetition earns it
Before anyone sees it?
→ Screenshot both widths on the deployed URL → cross-family review → then the human
抽认卡学习辅助
小测验：关于 15 个概念的 42 道题
测试所学内容。每次会话都会显示一组新的 15 道题。