# 一张图看懂 · 大模型是怎么回答问题的

> 活页公开模板 `sample-knowledge-cards` · 场景: 学习计划 · 资料 · 行业: 教育培训 / 科技互联网
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/JsBqTAthempe · 详情: https://space.24haowan.com/examples/sample-knowledge-cards

## 这是什么

知识卡片 · 把一节课、一本书讲成一组能转发的卡

## 什么时候用

知识博主、老师、培训讲师想把一节课或一个主题拆成 6–10 个概念，每张卡一个概念配一张图解，做成一组在微信里转发、手机上左右滑着看的卡片，还想知道读者哪张没看懂，选它。要按天累计打卡、跟一个备考计划，选 sample-study-plan；只做一个出结果的趣味测试，选 sample-quiz-card；要分章节、一步一步教人操作，选 sample-handbook。

## 用户对助手说的原话

帮我把这节课的笔记做成一组知识卡片，发成一个网页链接，在微信里转发：页头写我的账号名、第几讲、标题、日期和「几张卡、几分钟看完」；正文是 8 张竖版卡片，前 7 张每张讲一个概念——大号编号、概念名和英文、一句话标题、一张会动的矢量图解（比如词一个个落下来、连线一条条亮起、柱子长出来）、两三句讲解、三条要点和一句加粗的「一句话记住」，卡片底部两个按钮「我懂了 / 还不懂」，点了存进数据表并显示这张有百分之几的人懂了；第 8 张是自测 3 题，每题三个短选项，点了马上出对错和解释，答完给总分，再提醒一句收藏和转发。手机上卡片叠成一摞，左右滑动或拖着甩出去换下一张，底下有上一张 / 下一张和页码；电脑上左边是刊头和说明，右边把卡片排成网格，点一张放大看、能左右翻。页末一张横向条形图汇总每张卡「懂了」的比例，画一条 70% 的参考线，低于它的标成提示色并写一句下一讲先补哪几张。杂志感的排版，标题用宋体，配色清爽，支持暗色。

如果你还没有活页连接器（MCP），先读 https://space.24haowan.com/for-agents.md ，照里面的说明接入，或不登录直接发布。

## 照着做一份

1. 读入口文件 https://space.24haowan.com/examples/sample-knowledge-cards/source/index.html（它引用的其他文件见下方列表）。
2. 保留结构、版式和交互，把内容**全部**换成用户自己的；模板里的公司、人名、数字都是虚构的，一样都别留。
3. 交付一个自包含的单文件 HTML：样式写在页面里，不引外部字体 / 脚本 / CDN；手机 375 宽和电脑 1440 宽都要好看，模板有暗色就保留暗色。
4. 要发成微信里能打开、改了链接不变的网页：接入活页（https://space.24haowan.com/for-agents.md）后发布；没有账号也可以让用户在 https://space.24haowan.com/quick 上传这个文件。
5. 没有活页工具、但能发 HTTPS 请求：把做好的 HTML 以 Content-Type: text/html POST 到 https://space.24haowan.com/api/quick?client=template-sample-knowledge-cards ，返回预览链接、7 天分享与认领链接（登录后保留、链接不变）。

## 页面结构

- 8 张知识卡
- 大家懂了多少

## 文件（公开，纯文本）

- https://space.24haowan.com/examples/sample-knowledge-cards/source/index.html（入口）

## 发成活页之后还能做的

- 每张卡底部「我懂了 / 还不懂」是原生表单，写进数据表 marks（列 card / state），页面读回算出每张的「懂了」比例和页末那张对比图
- 手机上 8 张卡叠成一摞，左右滑或拖着甩出去换卡；电脑上摊成网格，点开放大、键盘左右翻
- 每张卡一个内联 SVG 图解动画，只在翻到那张时播一遍；减少动态时直接终态
- 不跑脚本也能用：8 张卡竖排成一列，表单照样能提交，自测题答案直接显示
- 下一讲的卡更新在同一条链接

## 发之前要备好

- 数据表 marks（列 card / state，append_open=true）：每张卡底部的「我懂了 / 还不懂」写进这里（card 是概念名，state 是「懂了」或「还不懂」），页面读回算每张的懂了比例；发布前先用 set_data 建好

## 模板说明（README）

模板市场「学习」那一组的一份（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。
虚构知识博主「周拾一」的账号「拾一的 AI 小课」第 3 讲笔记：「一张图看懂 · 大模型是怎么回答问题的」。博主、账号、人数均为虚构；卡片里的概念讲解是真的（按公开资料整理，只作入门级的简化）。

## 演示哪个特色

**一组知识卡在微信里转发、手机上左右滑着看；每张卡读者点一下「懂了 / 还不懂」，写回同一张数据表，读回成「大家懂了多少」。**

- **记忆点**是那一摞卡：手机上 8 张竖版卡叠在一起（后面两张露出边），左右滑或按住拖着甩出去换下一张（左 = 下一张，右 = 上一张），底下有上一张 / 下一张、页码和小圆点，换卡时 `navigator.vibrate` 轻震（不支持就跳过）。电脑上左栏是刊头、说明和汇总图，右边把 8 张摊成 4×2 网格，点一张放大，放大后键盘 ← → 翻页、Esc 关闭。
- 每张概念卡一个内联 SVG 图解，翻到那张（电脑上进入视野）时播一遍：分词卡的词元一个个落下并亮出编号、向量卡的词从中心飞回各自的簇、注意力卡的连线一条条亮起（「它」→「小猫」最粗）、下一个词卡的概率条长出来、上下文窗口卡的 token 带往左推并冒出新写的词、训练卡三步依次点亮、幻觉卡两条路依次走完。`prefers-reduced-motion` 时直接停在终态；没有循环动画。
- 发出去之后：每张卡底部「我懂了 / 还不懂」是原生表单 `<form method="post" action="./_data/marks">`，写进数据表 `marks`（一次一行 `{card, state}`）；脚本在时页内提交、按钮就地变成「已记下」，并读 `./_data/marks.json` 加上页面里写的起始数，算出每张卡的「懂了」比例和页末那张横向条形图（70% 参考线，低于它的标成琥珀色，下面那句「下一讲先补哪几张」跟着变）。同一次打开每张卡只记一次。
- 第 8 张是「自测 3 题」：每题三个短选项，点了马上出对错和一句解释，答完给总分；末尾一句收藏、转发和下一讲的更新时间。自测结果只在本机显示，不写表。
- 脚本不跑时：8 张卡竖排成一列、全部文字和图解可读，每张的表单照样能提交，自测题答案直接显示。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `header` | `.who` 账号名与第几讲、`h1` 标题（两个 `<span>` 控制手机上在哪折行）、`.meta` 作者 / 日期 / 几张卡几分钟；`.intro` 与 `.tips` 只在电脑上显示 |
| 每张卡 `<article class="card" data-card="…">` | `data-card` 就是写进表里的 `card` 值，和卡里 `.ratio` 的 `data-ratio`、表单里 `name="card"` 的 `value` 三处同名；`.no` 编号、`.kw` 概念名、`.en` 英文、`h3` 一句话标题、`figure` 图解、`.def` 讲解、`ul` 三条要点、`.rem` 一句话记住 |
| 图解动画 | 给 SVG 里的元素加类就会动：`drop`（落下）、`fade`（淡入）、`home`（从 `--x/--y` 偏移处归位）、`draw`（路径描边，路径要写 `pathLength="1"`）、`grow`（条形长出）、`pop`（弹出）、`slide`（整组左移）、`up`（上浮），用 `style="--i:n"` 错开先后；会位移的 `<g>` 再加 `an` |
| 起始数 | 脚本开头 `counts`（每张 `[懂了, 还不懂]`）；不跑脚本时显示的是每张卡 `.ratio` 里写的数和页末图里的条长，三处一起改。参考线是 `LINE = 70` |
| 自测 `.quiz` | 每题一个 `.q`，正确选项加 `data-ok`，`.ans` 是答案和解释；`.score` 的三档评语在 `renderQuiz` 里；`.keep` 是收藏 / 下一讲那句 |
| 页末 `#board` | `#rows` 里每张一行 `.row[data-card]`，条长 = 百分比 × 2（0–100% 对应 x 80–280）；`#boardNote` 那句由脚本按低于 70% 的卡重写 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的卡时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字） |

卡片张数可以加减：网格是 `repeat(4,1fr)`，手机卡堆、页码和圆点由脚本按卡数生成；概念卡加减时同改 `counts` 和 `#rows`。

## 数据表

「我懂了 / 还不懂」写进数据表 `marks`（一次一行，`append_open=true`）。发之前先建表：

```
set_data  proposal_id: <id>  table: "marks"  columns: ["card","state"]  rows: []  append_open: true  revision: 0
```

`card` 是概念名（与 `data-card` 同名），`state` 是「懂了」或「还不懂」。用 `list_data_rows table=marks` 读回。本地 `space-cli serve` 会把提交写进包里的 `_data/marks.json`，试完记得改回 `[]`。

## 怎么发出去

```bash
export SPACE_TOKEN=sk-space-…            # MCP create_cli_token
node core/space/cli/space-cli.mjs push core/space/examples/sample-knowledge-cards \
  --proposal <proposal_id> --manifest core/space/examples/sample-knowledge-cards/manifest.json --hold
```

没有终端时也可以 MCP `publish_file`（`filename: "index.html"`、`content` 为全文、`manifest` 为 manifest.json 去掉 entry、`hold: true`），再按上面建表。
给谁看：默认仅自己可见；要让读者转发就 `set_visibility` 设为 `public`（先问作者）。下一讲的卡更新在同一个页面，链接不变。

## 素材

- 没有位图：图解、图标、标志都是内联 SVG；字体用系统字体栈（标题宋体）。
- `thumb.webp` / `phone.webp`：画廊缩略图与手机首屏，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。