将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
figure和figcaption是语义契约而非排版工具；figcaption必须为figure首或尾的直接子元素，alt描述图像内容，figcaption说明上下文，二者缺一不可且不可互换。
figure 和 figcaption 不是“给图加标题”的快捷写法，而是语义契约——用错位置或结构不合规，读屏器会跳过说明，搜索引擎也收不到图文关联信号。
figcaption 必须是 figure 的首或尾直接子元素
这是 W3C 强制规范，不是样式建议。浏览器和屏幕阅读器靠 DOM 位置判断归属关系：figcaption 在第一个或最后一个位置，才能被识别为“这张图的说明”。中间插一个 <p></p>、<div> 或按钮，语义就断了。
<ul>
<li>✅ 正确：<code><figure><figcaption>图1:后台界面布局</figcaption><img src="admin.png" alt="左侧导航含用户管理菜单..."></figure>
<figure><img src="admin.png" alt="左侧导航含用户管理菜单..."><figcaption>图1:后台界面布局</figcaption></figure>
<figure><img><div class="wrapper"><figcaption></figcaption></div></figure>（figcaption 不是直接子元素）<figure><img><p>说明文字</p></figure>（<p></p> 不是 <figcaption></figcaption>，无法被识别为图注）alt 和 figcaption 分工必须明确，不能互换或省略
alt 是图像内容的替代文本，回答“图里有什么”；figcaption 是上下文解释，回答“为什么放这里、意味着什么”。两者信息维度不同，重复或空洞都会削弱可访问性。
- ❌ 错误：
<img alt="后台管理界面"><figcaption>图1:后台管理界面布局</figcaption>（alt没讲清内容，figcaption又没补充新信息） - ✅ 推荐：
<img alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项,主区域显示带搜索框的用户列表表格"><figcaption>图1:后台管理界面布局(v2.4.0 版本)</figcaption> - ⚠️ 注意：
alt=""表示纯装饰图，此时绝不应加<figcaption></figcaption>——语义矛盾
哪些图不该塞进 figure？判断标准只有一条
删掉整个 <figure></figure> 块，正文主干逻辑是否依然通顺？不通顺，说明它本就不该存在。
- 不该用：
<figure></figure>包轮播图单帧、产品主图、“点击查看大图”文字、头像旁昵称、按钮图标、纯装饰分隔线 - 该用：
<figure></figure>包可独立引用的图表、代码块截图（如<pre class="brush:php;toolbar:false;"><code></code>）、信息图、流程图（如“图3:用户登录流程”）</pre> - 轮播图每帧要各自独立用一个
<figure></figure>，不能共用一个<figcaption></figcaption> - 多段说明？拆成多个
<figure></figure>，比如分步操作截图 → 每张图一个 + 独立<figcaption></figcaption>
响应式排版别硬改 HTML 结构
设计稿要求标题在上、图在下，但语义上又要求 <figcaption></figcaption> 放前面？用 CSS 控制渲染流，DOM 顺序保持合规即可。
- 左图右文：
figure { display: flex; align-items: flex-start; gap: 16px; }，再约束img宽度（如max-width: 50%），figcaption用margin-left: 1em分隔 - 小屏回退垂直流：
@media (max-width: 768px) { figure { flex-direction: column; } } - 务必加
figure img { display: block; }，否则图片下方因基线对齐产生空白间隙 - 避免给
figcaption设固定宽或white-space: nowrap，窄屏下极易溢出或换行错乱
真正容易被忽略的是：所谓“图文混排”，90% 的实际需求其实不需要 <figure></figure> ——它只服务于可引用、可抽离的图元。混用语义标签和布局需求，最后往往要花三倍时间修 bug，而不是写功能。
