answer-me-with-html

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Answer me with HTML：用一页 HTML 回答复杂问题

Answer Me with HTML: Answer Complex Questions with a One-Page HTML

你只写内容稿（扩展 Markdown）。排版、配色、暗黑模式、图形坐标全部由

am

CLI 完成。不要手写 HTML / CSS / SVG。

Write only the content draft (extended Markdown). The

am

CLI handles all layout, colors, dark mode, and graphic coordinates. Do not hand-write HTML / CSS / SVG.

0. 用户要改配置时

0. When the User Wants to Change the Configuration

本次调用参数：

$ARGUMENTS

参数以

config

开头时（如

/answer-me-with-html config open off

），这一轮只处理配置，不出页面：

```
config
```
：运行
```
am config
```
显示当前配置，然后问用户想改哪一项。

config <键> <值>

：运行

am config set <键> <值>

。

```
config reset [键]
```
：运行
```
am config reset [键]
```
。

用户用自然语言提出时（"别再自动弹浏览器了""关掉高频模式""默认用卡片主题"），同样换算成

am config set

。可配置项：

open

（自动打开浏览器）、

always

（高频模式）、

theme

、

mode

、

style

，运行

am config

可看全部说明。

Invocation arguments:

$ARGUMENTS

When the arguments start with

config

(for example,

/answer-me-with-html config open off

), handle only the configuration in this turn and do not generate a page:

```
config
```
: Run
```
am config
```
to display the current configuration, then ask the user which setting they want to change.

config <key> <value>

: Run

am config set <key> <value>

```
config reset [key]
```
: Run
```
am config reset [key]
```
.

When the user makes the request in natural language ("Stop automatically opening the browser" "Turn off always-on mode" "Use the card theme by default"), convert it to

am config set

in the same way. Available settings:

open

(open the browser automatically),

always

(always-on mode),

theme

mode

, and

style

. Run

am config

to see all descriptions.

1. 判断：要不要出页面

1. Decision: Whether to Generate a Page

满足任一条就出页面：

有 ≥3 个相互关联的概念，读者需要看到它们的关系。
有流程、协议、调用链、状态迁移（尤其带分支或多个参与者）。
有 ≥3 个维度的对比、方案取舍、"能 / 不能"清单。
有层级结构或时间演进。

不满足就用普通文字回答。拿不准时，问题越"要看图才懂"，越该出页面。

Generate a page if any of the following applies:

There are ≥3 interrelated concepts, and readers need to see how they relate.
There is a flow, protocol, call chain, or state transition, especially with branches or multiple participants.
There is a comparison or trade-off across ≥3 dimensions, or a "can / cannot" checklist.
There is a hierarchical structure or a timeline of evolution.

If none applies, answer with ordinary text. When in doubt, the more a question requires a diagram to be understood, the more likely it should be a page.

高频模式

Always-On Mode

如果上下文里出现

[answer-me-with-html always-on]

提醒（用户装了 answer-me-with-html-always 插件，或在规则文件里开启了高频模式），门槛放低：

只要这一轮给出了结论、总结、方案、对比、评审或讲解，就附一页。
不要因为"答案不长"就跳过。有结论就出页。
日常结论用 2～4 个面板的小页面：一个 callout 放结论，再配一张表或一张图。不要为了凑数加面板。
渲染时加
```
--no-open
```
，不要弹浏览器打断用户。用户点回复末尾的路径就能打开。
终端里照常先给文字结论，最后一行附页面路径。
闲聊、没有结论的一两句话、纯命令输出、用户要求纯文本时不出页面。

If the context contains an

[answer-me-with-html always-on]

reminder (the user has installed the answer-me-with-html-always plugin or enabled always-on mode in a rules file), lower the threshold:

Whenever this turn provides a conclusion, summary, proposal, comparison, review, or explanation, attach a page.
Do not skip it merely because the answer is short. Any conclusion warrants a page.
For routine conclusions, use a small 2–4-panel page: one callout for the conclusion, plus one table or diagram. Do not add panels merely to fill space.
When rendering, add
```
--no-open
```
so the browser does not open and interrupt the user. The user can click the path at the end of the response to open it.
In the terminal, still lead with the textual conclusion, then add the page path on the final line.
Do not generate a page for small talk, one- or two-sentence responses with no conclusion, pure command output, or when the user requests plain text.

2. 工作流（一次 Bash 调用）

2. Workflow (One Bash Call)

CLI 已经打包在本 skill 目录里：

scripts/am.mjs

，单文件、无需安装依赖，只要有 Node.js 20+。下文的

am

都指：

bash

node "${CLAUDE_SKILL_DIR}/scripts/am.mjs"

在 Claude Code 里，上面的路径会自动替换成本 skill 的目录。如果你看到的是没有替换的变量（其他 Agent），请换成这个 SKILL.md 所在目录的绝对路径。用户全局安装了

am

命令时，也可以直接用

am

。

先在心里列出 3～8 个面板。每个面板只回答一个子问题。
按信息形状选组件（见第 4 节）。
用 heredoc 一次性渲染：

bash

node "${CLAUDE_SKILL_DIR}/scripts/am.mjs" render - <<'AM_EOF'
---
title: 标题
---

The CLI is already bundled in this skill’s directory:

scripts/am.mjs

. It is a single file, requires no dependency installation, and only needs Node.js 20+. All references to

am

below mean:

bash

node "${CLAUDE_SKILL_DIR}/scripts/am.mjs"

In Claude Code, the path above is automatically replaced with this skill’s directory. If you see an unreplaced variable (in another Agent), replace it with the absolute path to the directory containing this SKILL.md. If the user has installed

am

globally, they can also invoke

am

directly.

First, mentally outline 3–8 panels. Each panel should answer only one sub-question.
Choose a component based on the shape of the information (see Section 4).
Render everything in one heredoc:

bash

node "${CLAUDE_SKILL_DIR}/scripts/am.mjs" render - <<'AM_EOF'
---
title: 标题
---

A 面板标题

flow

A -> B: 标签

AM_EOF


4. 读输出：
   - `✓ <路径>`：成功。是否自动打开浏览器由用户配置决定（`am config`）；加 `--no-open` 只影响这一次。
   - `✗ L<行号> [组件] …` + 正确示例：照示例改那一行，再渲染一次。
   - `STE n 条警告`：按建议改写对应行，再渲染一次。最多重试 2 轮，仍有警告就保留页面并说明。
5. 在终端只回 2～3 行：一句核心结论 + 页面路径。不要把稿件或 HTML 贴回终端。

flow

A -> B: 标签

AM_EOF


4. Read the output:
   - `✓ <路径>`: Success. Whether the browser opens automatically depends on the user’s configuration (`am config`); adding `--no-open` affects only this run.
   - `✗ L<行号> [组件] …` plus a correct example: Follow the example to correct that line, then render again.
   - `STE n 条警告`: Rewrite the corresponding line as suggested, then render again. Retry at most 2 rounds; if warnings remain, keep the page and explain them.
5. Reply in the terminal with only 2–3 lines: one core conclusion and the page path. Do not paste the draft or HTML back into the terminal.

3. 稿件格式速查

3. Draft Format Quick Reference

markdown

---
template: sheet     # sheet 图纸板（默认，一屏总览）| doc 线性讲解（逐步阅读）
theme: blueprint    # blueprint 图纸风（默认）| shadcn 卡片风
title: 标题
subtitle: 一句话说明     # 可选
cols: 3             # sheet 列数，默认 3；面板用 span / rows 跨列跨行
source: RFC 9293    # 其他任意键显示在页头元信息行
---
导语：一两句核心结论（可选）。

markdown

---
template: sheet     # sheet 图纸板（默认，一屏总览）| doc 线性讲解（逐步阅读）
theme: blueprint    # blueprint 图纸风（默认）| shadcn 卡片风
title: 标题
subtitle: 一句话说明     # 可选
cols: 3             # sheet 列数，默认 3；面板用 span / rows 跨列跨行
source: RFC 9293    # 其他任意键显示在页头元信息行
---
导语：一两句核心结论（可选）。

A 面板标题 {span=2 meta="右上角小字"}

普通 Markdown：段落、列表、表格、引用。表格状态词：ok / no / warn（可带文字："ok 已批准"）→ ✓ / ✗ / ! 徽章。

B {bare} ← bare：无标题栏（适合放 kv 标题栏块）


- 面板字母 ID 可省略，自动分配。
- ```html / ```svg 围栏块原样嵌入，**只在组件确实表达不了时使用**。
- 完整说明：`am help format`；组件语法：`am help <组件名>`；组件列表：`am list`。


- Panel letter IDs are optional and are assigned automatically.
- ```html / ```svg fenced blocks are embedded verbatim, **and should be used only when a component truly cannot express the content**.
- Full documentation: `am help format`; component syntax: `am help <component>`; component list: `am list`.

4. 按信息形状选组件

4. Choose a Component Based on the Information Shape

信息形状	组件	最小写法
谁连向谁、架构、决策分支	`flow [LR]`	`A -> B: 标签` ， `A --> C` 虚线， `A -> B & C` 扇出， `{判断?}` `(开始)` `[(数据库)]` ， `*重点` ， `group 名: A, B`
参与者之间按时间的消息	`sequence [num]`	`A -> B: 请求` ， `B --> A: 响应` ， `note A, B: 说明` ， `== 阶段 ==`
层级 / 目录 / 分类	`tree [list]`	缩进表达层级， `标签 \| 说明` ， `编号` 标签
历史 / 阶段	`timeline [v]`	`时间 \| 标题 \| 说明` ， `*` 高亮
数值与上限	`limits`	`标签 \| 13 / 20 \| 单位` ，只写上限： `标签 \| max 20`
逐词点评一句话	`annot`	`# 小标题 \| 右注` ， `[片段]{注释}` ， `[错词]{!红色注释}` ， `> 底注`
元信息 / 标题栏	`kv [cols=2]`	`键: 值` ， `* 宽格: 值`
结论 / 警告	`callout <info\|ok\|warn\|err> 标题`	正文 Markdown
多维对比、能 / 不能清单	Markdown 表格	状态列写 ok / no / warn

选型原则：

先放结论。第一个面板或导语给出核心答案，后面的面板给证据。
一个面板一个问题。超过 8 个面板就拆页或删减。
用
```
span
```
给信息最密的面板更多宽度；等宽句子（annot）至少给 span=2。
不编数据。没有真实数字就不用 limits；示意数据要在说明里写明"示意"。

Information shape	Component	Minimal syntax
Connectivity, architecture, decision branches	`flow [LR]`	`A -> B: label` , `A --> C` for a dashed line, `A -> B & C` for fan-out, `{decision?}` , `(start)` , `[(database)]` , `*key point` , `group name: A, B`
Messages between participants over time	`sequence [num]`	`A -> B: request` , `B --> A: response` , `note A, B: explanation` , `== phase ==`
Hierarchy / directory / taxonomy	`tree [list]`	Use indentation for hierarchy, `label \| description` , `id` label
History / stages	`timeline [v]`	`time \| title \| description` , `*` for highlighting
Numerical values and limits	`limits`	`label \| 13 / 20 \| unit` ; for a limit only: `label \| max 20`
Line-by-line commentary on a sentence	`annot`	`# heading \| note` , `[fragment]{note}` , `[wrong term]{!red note}` , `> footnote`
Metadata / title bar	`kv [cols=2]`	`key: value` , `* wide cell: value`
Conclusion / warning	`callout <info\|ok\|warn\|err> title`	Markdown body
Multidimensional comparison, can / cannot checklist	Markdown table	Write `ok / no / warn` in the status column

Selection principles:

Put the conclusion first. Use the first panel or introduction for the core answer, and use subsequent panels for evidence.
Ask one question per panel. If there are more than 8 panels, split the page or remove some.
Use
```
span
```
to give the information-dense panel more width; equal-width sentences (
```
annot
```
) need at least
```
span=2
```
.
Do not fabricate data. If there are no real numbers, do not use
```
limits
```
; label illustrative data as "illustrative" in the description.

5. STE 受控写作（稿件里的文字）

5. STE Controlled Writing (Text in the Draft)

am render

会自动检查，默认只警告（

style: 80

）；

style: strict

不达标不生成；

style: off

关闭。

一句话只说一件事。
用主动语态。步骤用祈使句（"关闭阀门"，不写"阀门应被关闭"）。
一词一义。同一个东西全文用同一个叫法。
句长上限：步骤（有序列表）英文 20 词 / 中文 35 字；描述英文 25 词 / 中文 45 字。
每段不超过 6 句。复杂内容用列表。
英文用常见短词：use 不用 utilize，start 不用 commence，before 不用 prior to。
中文不用虚动词（"进行优化"→"优化"，"加以说明"→"说明"），不连用三个以上"的"，不用套话（赋能、闭环、至关重要……）。
故意展示的反例用
```
~~删除线~~
```
，或放进状态为
```
no
```
的表格行，检查会跳过它们。

am render

checks the draft automatically. It only issues warnings by default (

style: 80

);

style: strict

prevents generation when the standards are not met;

style: off

disables the checks.

Use one idea per sentence.
Use active voice. Write steps as imperatives ("Close the valve," not "The valve should be closed").
Use one term for one meaning. Refer to the same thing by the same name throughout the document.
Sentence-length limits: steps (ordered lists) 20 words in English / 35 characters in Chinese; descriptions 25 words in English / 45 characters in Chinese.
Keep each paragraph under 6 sentences. Use lists for complex content.
In English, use common, short words: use instead of utilize, start instead of commence, and before instead of prior to.
In Chinese, avoid empty verbs ("perform optimization" → "optimize," "provide an explanation" → "explain"), do not use more than three consecutive "的" characters, and avoid clichés ("empower," "close the loop," "crucial," and so on).
Mark intentional counterexamples with
```
~~strikethrough~~
```
, or place them in a table row with status
```
no
```
; the checker skips them.