账本落地页

---
name: ledger-landing
description: 用一份锁定的 HTML 模板做单页产品网站，不管什么产品，成品都和预览图一个样。暖色纸底、超大衬线标题、唯一的赤陶色、细账本线、代码绘制的产品面板、克制的动效。当有人要做落地页、产品页或发布页，并且想要醒目的编辑感，或者直接点名这个风格时使用。
version: 1.0.0
---

# 账本落地页

样子全在 `assets/template.html` 里，你只负责写字。复制模板，填好标记的槽位，版式、字号体系、动效和账本线一律不动。`scripts/check.mjs` 会逐项核对。

需要确切的数值，或者想知道某条规则的来由，就看 `references/style.md`。

## 要问清楚的信息

需求里没给的才问，一条消息问完。

必需：
1. 产品名称。
2. 一句话说清它是什么、给谁用。
3. 它解决什么问题。
4. 怎么用，拆成三步。
5. 价格。没有价格就给一个能顶替的短词或数字，比如“免费”。
6. 主按钮跳到哪里：网址、邮箱或页内锚点。

可选：
7. 账目区的四条简短事实。没给就从上面的回答里整理。
8. 提示语。页面是示例、试点或预览版时需要。
9. 页面语言，英文以外都要说明。

## 步骤

1. 把 `assets/template.html` 复制到输出路径，比如 `index.html`。不要凭记忆重写。
2. 按下面的表填满所有槽位。只替换带 `data-slot` 的元素标签之间的文字，以及带 `data-slot-content` 的 meta 标签的 `content`、带 `data-slot-href` 的链接的 `href`。
3. 保留所有 `<!-- SLOT:... -->` 注释和所有属性。
4. 有理由才改允许改的变量：`--accent`、`--stamp-tilt`、`--headline-scale`，可选值见 `references/style.md`。页面不是英文时，改 `<html>` 的 `lang`，比如 `zh-CN`。
5. 用本技能里的脚本运行 `node scripts/check.mjs 输出文件路径`。报什么错就改什么，直到通过。
6. 在 375、768、1440 三个宽度下打开页面，看标题怎么断行，看面板。读着别扭就改文案，不要改 CSS。

## 槽位

上限按字符算，中日韩文字每个算 2。每个槽位的上限都写在它的 `data-max` 上。

| 槽位 | 上限 | 填什么 |
|---|---|---|
| `page-title`、`page-description` | 80、170 | 浏览器标题和页面描述 |
| `brand`、`brand-foot` | 18 | 产品名称 |
| `notice` | 30，可选 | 品牌名旁的短提示，留空就不显示 |
| `nav-why`、`nav-how`、`nav-price` | 12 | 导航文字 |
| `headline` | 40 | 页面唯一的主张，其中恰好一个词放进 `<em>` |
| `lede` | 130 | 它是什么、给谁用、做什么 |
| `hero-price` | 26，可选 | 用文字写的价格 |
| `cta`、`cta-href` | 24 | 主按钮文字和跳转目标 |
| `panel-title`、`panel-tag` | 24、18 | 手绘账页的名字，以及“手绘示意”这样的标签 |
| `panel-col-a`、`panel-col-b`、`panel-col-c` | 14、14、10 | 列标题 |
| `row1-label` 至 `row3-label` | 22 | 产品主要工作的三个阶段，不是数据 |
| `row1-status` 至 `row3-status` | 10 | 每个阶段的状态，一个词。第三行是强调行 |
| `stamp` | 16 | 盖在第三行上的印章，最多两个词 |
| `panel-caption` | 80 | 说明面板是手绘示意 |
| `why-label`、`how-label`、`terms-label` | 16 | 各区块的小标签 |
| `why-body`、`why-turn` | 100、46 | 先写问题，再写产品的回答 |
| `step1-title` 至 `step3-title` | 30 | 步骤名称 |
| `step1-body` 至 `step3-body` | 90 | 每步一句话 |
| `terms-head` | 34 | 账目区标题 |
| `fact1-label` 至 `fact4-label` | 16 | 事实的标签 |
| `fact1-value` 至 `fact4-value` | 36 | 事实的内容 |
| `total-label`、`total-figure`、`total-unit` | 16、7、14 | 结尾的大数字，比如“价格”“¥39”“每月” |
| `close-line` | 34 | 收尾的一句话 |
| `close-cta`、`close-cta-href` | 24 | 收尾按钮文字和跳转目标 |
| `foot-note` | 130，可选 | 脚注，留空就不显示 |

## 写字的规矩

- **绝不编造客户、数字、用户评价、评分、奖项或成效。** 页面上的每句话都要能在需求里找到出处。缺信息就去问，或者换个说法绕开。
- 面板故意不放数字。每行写的是阶段，笔画代表数据。不要往里加人名、日期或金额。
- 如果页面介绍的东西是虚构的或还没发布，要在 `notice` 和 `foot-note` 里写明。
- 句子要短、要直白。整页靠标题撑着，最多的功夫花在标题上。

## 交付物

- 一个自包含的 HTML 文件，放在用户指定的路径，没指定就叫 `index.html`。
- `scripts/check.mjs` 的通过结果。
- 一段简短说明：哪些需求信息没放进去，哪个按钮目标还待提供。

## 交付前检查

- [ ] 文件是从 `assets/template.html` 复制出来的。
- [ ] 最终文件跑 `node scripts/check.mjs` 退出码为 0。
- [ ] 没有残留占位文字，标题和页面描述都已写好。
- [ ] 页面上每个说法都能追溯到需求。
- [ ] 标题恰好有一个 `<em>`，在 375、768、1440 下断行都好看。
- [ ] 375、768、1440 下都没有横向溢出。
- [ ] 面板说明写明了这是示意图。
- [ ] 两个按钮都有真实的跳转目标。
- [ ] 产品是虚构的、未发布的或示例时，页面上有提示语。

## 什么时候不要用

- 产品已有必须遵守的品牌规范。
- 页面需要表单、结账、图库、价格对比表或多个套餐。模板没有这些槽位。
- 页面必须放照片或产品截图。
- 对方想换颜色、要深色版或换版式。这个风格不改这些。
- 内容是长文、文档或多页网站。
- 受众需要活泼、童趣的语气。

## 需求太短或无人值守时

- 没人能回答问题时，继续做，并在回复里列出所有假设。
- 事实不够填满某个位置时，用用户自己的事实平实复述。绝不为了填空增加说法，并列出你推断的每一行，让用户确认。
- 没有真实的按钮链接时，指向页面内的锚点，并说明这一点。
- 每个位置的字数上限写在旁边的注释里，写文案前先读。