give-me-htmllisted

# give-me-html — 直接产出精致的 HTML 产出物 = 一个自包含的 `.html` 文件。**内容的载体就是网页本身**，网页即文档。 输入两种情况，处理方式相同： - 给了文档或素材 → 重构它的信息结构，不要照搬原文段落顺序 - 只给主题或口述需求 → 你就是内容作者，先组织信息结构再动笔 ## 核心原则（违反任何一条即失败） 1. **禁止两道工序**：不许先写 Markdown 再转 HTML；不许把 md 源码、`#` 标题、`-` 列表直接塞进 `<p>` 或 `<pre>`。HTML 元素就是内容的表达方式本身。 2. **先设计后填写**：第一步规划信息架构（这份内容分几个模块、模块间什么关系），第二步选版式原型，第三步用组件填充。禁止从上到下 `<p>` 堆砌。 3. **单文件零依赖**：所有样式内联在 `<style>`；不引外部 CSS/JS/字体/图片（用户明确要求除外）；断网双击可打开。 4. **每个章节至少一个非文字模块**：通篇段落加 bullet 的章节，说明内容还没结构化完，回去拆成表格、卡片、步骤条或字段表。特别小的章节（一两句话的补充说明）可以用简略文字，不必硬凑模块。 ## 第一步：选版式原型 根据内容类型选主版式（可混搭，但要有一个主原型）。**布局质量的源头在这里，选错原型后面无法补救**： | 内容类型 | 原型 | 布局要点 | | --- | --- | --- | | 说明/需求/设计/规范/实现文档 | 阅读型 | 左侧固定锚点目录（≥3 个二级标题时必须）+ 右侧正文限宽 | | 汇报/总结/方案宣讲 | 汇报卡片型 | 顶部概览条（关键结论或指标卡）+ 分区块卡片流，不做侧栏目录 | | 流程/时序/步骤/操作指引 | 时间线型 | 垂直步骤条 + 阶段分组，每步一屏内说清 | | 对比/选型/评审 | 对比型 | 双栏对照卡或对照表，差异点高亮 | | 数据/统计 | 看板型 | 指标卡网格 + 表格或图示区（纯 CSS 图即可，不引图表库） | ## 第二步：内容用组件表达 | 内容 | 用什么 | 不允许 | | --- | --- | --- | | 章节标题 | 编号分节（01 / 02 …）+ 锚点 id | 裸 `h2` | | 全文结论、一句话总纲 | 封面下的高亮摘要块 | 埋在第一段里 | | 关键结论、指标 | 概览卡、指标卡（大号数字 + 标签 + 小字说明） | 埋在长段落里 | | 并列要点、模块清单 | 要点卡网格 | 段落式"一是…二是…三是…" | | 一组"标签 + 说明"的字段 | 字段表（左标签右内容的两列网格） | 段落里塞冒号 | | 一个环节的完整说明 | 环节卡（带徽标的标题条 + 卡内字段表） | 一大段文字 | | 条件 → 结果 的判断规则 | 斑马纹表格，第一列放主键 | "如果……那么……"的叙述 | | 对比 | 双栏对照卡或对照表 | 文字描述对比 | | 线性流程 | 流程链（节点 + 箭头，节点下可挂小字） | 大段文字 | | 分步操作 | 步骤条、时间线 | 手写"1. 2. 3." | | 补充说明、注意、风险、取舍 | 提示块（左侧色条 + 图标 + 标题），四种语义分开用 | 括号套括号 | | 状态、分类 | 徽章 | 纯文本【标注】 | | 可逐项验证的清单 | 带 checkbox 的验收清单 | 普通列表 | | 文件路径、字段名、类名 | 行内 `code` 样式