X 上爆火的 HTML Skill（answer-me-with-html）

图片解读

第 1 张图片 — 事实（可读文字、界面元素、图表数据、可见现象）

- 页面顶部界面元素

- 右上角有一个黑底白字圆形标签，文字为：“推广”。

- 多个账户头像旁均有蓝色对勾（验证/已认证徽章）图标可见。

- 顶部第一条推文为中文（来自第一个账户，账户名/@句柄处已省略以遵守隐私规则），显示内容如下（逐行记录，保留原文断句）：

- 我把 @karpathy 大神的最新理念做成了 Skill 🔥！

- 一句话，让你 agent 给你可视化结论！

- answer-me-with-html: { （该行后续内容被部分裁切或模糊，无法完整辨认）

- 1. 超级快速： 比正常输出 HTML，token 少 7.4 倍！ 快 3.6 倍

- 2. ASD-STE100 原则： 让 Agent 用最少的字把事情讲明白！

- 3. 两种风格： blueprint + shadcn 风格

- 第一条推文内嵌一张或多张缩略图（可见为界面卡片/示意图）。可读内容包括（见下）：

- 卡片顶部英文标题： “TCP three‑way handshake”

- 副标题/说明（可见）： “How two hosts agree to talk, and how they stop”

- 卡片内容区（左侧）标题： “Three‑way handshake”

- 图示含两个列标签：“Client” 与 “Server”

- Server 列上方有 “LISTEN”

- 有箭头/消息路径标注（部分可辨词）： “SYN, seq=…”， “SYN_SENT”，“SYN+ACK, seq=x, ack=…”， “ACK, ack=y+1”，最终为 “ESTABLISHED”

- 卡片右侧可见小框标题： “Why three messages”

- 内部列出若干要点（部分可见）：

1. The server learns that the client can send.

2. The client learns that the server can send and receive.

3. The server learns that the client can receive.

- 右侧下方小注框（部分可见）： “Two is not enough” 以及少量英文说明（其余文字被裁切或模糊）

- 卡片底部有另一个小区域标题： “State changes”（下方展示时间线/状态转换图，含状态名如 LISTEN、SYN_SENT、SYN_RECEIVED、ESTABLISHED 等）

- 右下角小圆圈图标显示为“扬声器/声音”图标带斜线（表示静音/音量关闭状态）

- 图片中间/下方为第二条推文的截屏（来自第二个账户，账户名/@句柄处已省略以遵守隐私规则），英文可读内容如下（逐行记录，保留断句）：

- We'll be spending a lot more time trying to understand the outputs of language models.

- A few thoughts, tips & tricks:

- Writing. Something I've had success with: A...

- 下方嵌入一张较大的图像/文档预览（从缩略可见为多卡片/信息板拼接，具体小字内容在缩略图中不可清楚读取，但整体为大量表格与说明卡片）

- 下方还显示一行中文界面信息（可能为平台显示），逐字可见为：

- 上次编辑 26年10月2日, 23:13 · 188K 查看次数

无法辨认或不完整处（需标注为图像中残缺/模糊信息）

- 第一条推文中 “answer-me-with-html: {” 后的代码或 JSON 内容被裁切或模糊，未能完整辨认具体代码/链接内容。

- 第一条推文内嵌卡片中若干英文细节（如具体序列号数值、某些注释句的后半段）因缩小或模糊而无法完整读出。

- 第二条推文嵌入的大图（多卡片拼接）中小字和表格内容在缩略视图下不可逐条辨认，无法抄录内部完整文本与数据。

- 图片左上或其他小图标处若有更多界面元素被部分裁剪，故无法确认其全部文字与含义。

推测（非图像直接可读的事实，应标注为推测）

- 推测第一条推文在推广（右上“推广”标签）为付费推广推文（根据界面“推广”标签推测），但图中未显示付费详情所以为推测。

- 推测两条推文所展示的嵌入图片均为技术文档/教学型卡片（根据 “TCP three‑way handshake” 标题和第二条图像的大量结构化卡片样式推测用途为教学或说明材料）。

- 推测“188K 查看次数”指的是该第二条推文或其内嵌资源的浏览/查看统计，但图中未标明该统计项具体对应对象，故为推测。

附注（遵循隐私与完整性原则）

- 图片中显示有若干账户名与 @句柄文本，但在本整理中已对账户身份予以省略/未直接断言为真实个人身份或公众人物，以遵循隐私与识别限制。

- 对图中被裁切或模糊的区域，已明确标注为“无法辨认或不完整”，未对其进行填补或推断具体缺失文本。

SkillPI 作品解读

作品用途与要点

- 本来源在介绍一个名为“answer-me-with-html”的 Skill（工具/扩展），声称该 Skill 可让 agent 只输出 Markdown，由 CLI 渲染为美观的 HTML，并具备“自动排版（Auto Layout）”与两种视觉风格（blueprint、shadcn）。来源还提到将 ASD‑STE100（航空维修手册风格的简明写作原则）用于促使 AI 输出极简文本，以及声称能将复杂结论在几秒内生成 3b1b 风格的视频。

图片证据（可核验的视觉要素）

- 截图显示界面顶部有“推广”标签、多个认证徽章、以及两条推文的截屏。第一条推文文本中明确提到 "answer-me-with-html"、速度与 token 消耗对比（图中为宣称的数据，但该截图仅为陈述）。第一条内嵌卡片的可读部分为教学型卡片（如 “TCP three‑way handshake” 与若干状态与说明点），可作为该 Skill 用于生成卡片式可视化结论的旁证。第二条推文及其嵌入大图为一系列信息卡片/表格的缩略视图，并显示“上次编辑 26年10月2日, 23:13 · 188K 查看次数”等界面信息。

复现或试用建议步骤（基于来源陈述，需按实际代码/文档核对）

1. 查阅并获取该 Skill 的源码或安装说明（来源中仅提到 Skill 名称与截图，具体 repo/安装地址需在来源链接或官方仓库中核对）。原始来源 URL： https://www.xiaohongshu.com/discovery/item/6ac614f000000000150125b6?app_platform=ios&app_version=9.28.1&share_from_user_hidden=true&xsec_source=app_share&type=normal&xsec_token=CBM4e91FJlMCjyqFLyuVHUs_oVFvt_LReWPSc98mPOdSA=&author_share=1

2. 根据 Skill 文档安装 CLI（如有）。截图与摘要中提到“CLI 自动排版 HTML”，但未展示安装命令或运行示例，需查看仓库 README 或发行包以得运行时依赖（例如 Node.js、Python、或其它运行时）与具体 CLI 参数。

3. 准备一个能按指令输出 Markdown 的 agent（LLM/Agent）。按照来源描述，agent 应被配置为仅输出 Markdown，以便 CLI 将其渲染为 HTML。具体 prompt 模板或配置方式需参照 Skill 文档。

4. 采用 ASD‑STE100 风格的提示语（prompt）来让 agent 输出更简洁、结构化的结论。ASD‑STE100 是已知的技术写作控制英语标准，但具体如何在 prompt 中实现（例如示例模板）需在 Skill 文档或示例中核验与复制。

5. 运行 CLI 将 agent 输出的 Markdown 转换、自动排版为 HTML 并检查视觉风格（例如 blueprint 或 shadcn）。如需批量或自动化生成卡片/页面，应在 CLI 文档中查找批处理或 API 调用支持。

6. 若想验证“3b1b 风格视频生成”功能，需在仓库或文档中查证该功能是否包含（是否调用外部渲染工具、动画库或仅输出可供第三方工具渲染的脚本/帧描述）。

复现前提与待核实项

- 前提：必须能访问并阅读该 Skill 的源码/文档与 CLI 使用说明；需一台满足该工具运行时依赖的主机以及可调用的 LLM/agent（本地或云端）。

- 待核实项（在实际复现前需验证）：

1) 性能与 Token 节省的具体量化数据（截图中有“token 少 7.4 倍、快 3.6 倍”的陈述），这些数值应由可复现的基准测试或官方说明支持；目前仅为宣称，需要对比测试数据来验证。

2) “3b1b 视频生成”功能是否为内置能力、示例演示或仅为宣称；需在仓库与示例中查证调用链与渲染方式。

3) ASD‑STE100 在 prompt 中的具体应用方法（示例 prompt、模板或自动化规则）是否随 Skill 提供。

4) 两种视觉风格（blueprint 与 shadcn）是否为内置样式、主题包或需额外集成的 CSS/组件库。

5) 截图中的“188K 查看次数”等界面统计项的具体含义与目标对象（该数值在图中出现，但图中未标注统计对象的明确对应关系）。

结论（核验与谨慎说明）

- 来源提供了对 answer-me-with-html 的概述性陈述与截图证据，指向功能方向：agent 输出 Markdown + CLI 自动排版成 HTML、应用 ASD‑STE100 简明原则、支持视觉样式与（可能的）视频生成功能。要兑现这些功能，需要获取该 Skill 的实际源码/文档并按上述步骤配置与测试。当前图像与摘要内的性能数字与视频生成功能为待核实项，不宜在未复现的情况下断定其真实效果。