将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
电商规格表必须用，因缺乏行列语义导致屏幕阅读器无法建立名称-值对应、seo解析困难，而天然支持无障碍导航与结构化数据提取。
电商规格表必须用 <table>，别用 <code><dl></dl> 或 div 布局
语义上 <dl></dl> 看似贴切（<dt></dt> 是参数名，<dd></dd> 是值），但实际会导致屏幕阅读器无法建立“名称-值”对应关系，SEO 也抓不准结构。搜索引擎和辅助技术依赖表格的行列关系来解析参数逻辑，而 <dl></dl> 是扁平列表，缺乏二维语义。更关键的是，所有主流电商落地页（京东、天猫、拼多多商品详情页源码）都用 <table>，不是巧合——它天然支持按行隔离、按列对齐、无障碍导航。
<h3>每个参数占一行，<code><th scope="row"> + <code><td> 是唯一合规写法
<p>常见错误是把“颜色”“尺寸”“重量”全塞进一个 <code><tr>，左边 <code><th> 右边 <code><td>，结果多值参数一加就乱套。正确做法是：每个参数独占 <code><tr>，名称用 <code><th scope="row">，值统一用 <code><td>。
<ul><li>
<code>scope="row" 必须写，否则 VoiceOver、NVDA 等读屏软件不知道这个 <th> 对应哪一列的值
<li>不要用 <code>colspan 或 rowspan 合并单元格——它破坏行列映射，让 JS 拿不到“重量”对应的值单元格
<caption></caption>、<thead>、<code><tfoot> 全部禁用：电商参数表不是报表，不需要标题汇总或分组摘要，加了反而干扰解析
<h3>多值参数（如颜色/尺寸）必须用 <code><data value="xxx"></data> 分隔
直接写 <td>红色, 蓝色, 黑色</td> 看着省事，但复制会粘成“红色, 蓝色, 黑色”，翻译工具当整句处理，JS 也得靠字符串拆分——脆弱且不可靠。
- 每个选项单独包一层
<data value="red">红色</data>，value存标准编码（英文或 SKU），方便后续过滤、筛选、埋点 - 多个
<data></data>并列，中间用 • 连接：<td> <data value="red">红色</data> • <data value="blue">蓝色</data> </td> - 禁用
<br>、<p></p>、<div> 嵌套在 <code><td> 里——它们打断表格流，CSS 对齐失效，打印样式错位 <h3>移动端折叠用 <code>aria-hidden="true"+inert，别抽离 DOM用
<details><summary></summary></details>或 JS 动态插入<div> 包裹参数组，看似灵活，实则切断表格语义：爬虫看不到折叠内容，打印时空白，屏幕阅读器跳过整个区块。 <ul><li>用 <code><tbody class="spec-group"> 包一组参数（如“包装清单”），初始设 <code>aria-hidden="true"和inert - 展开时只移除这两个属性，不移动 DOM 位置——保证
<table> 结构完整 <li>同步控制 <code>aria-expanded和aria-controls，否则 VoiceOver 用户点击无反馈
真正难的不是写对标签，而是克制——忍住不用 colspan、忍住不塞 <div>、忍住不抽 DOM。表格的语义力量，全在它“不动”的结构里。</div>
