本文经原作者授权转载，版权归原作者所有。原作者：AYi（@AYi_AInotes）。查看原文 →
上篇写 Markdown vs HTML 那条爆了之后,后台收到最多的一个问题是:
那到底哪些活该用 HTML,哪些活该用 Markdown?
https://x.com/AYi_AInotes/status/2052842474687680678
说实话当时那篇没回答这个问题。
我只讲了"HTML 是 AI 时代的沟通语言",但没讲清楚边界在哪。
后来这半个月,我一直在用各种活试,把"什么时候该用什么格式"
这件事拆得越来越清楚。
今天把决策框架放出来,顺便用 @AntLingAGI 开源的 Ring-2.6-1T
跑了三个最实用的 HTML 工具——铁汁们打开浏览器就能用的那种。
一句话决策标准
判断一个 AI 产出该用 HTML 还是 Markdown,看一个信号就够了:
这个东西生成完之后,是被读,还是被用。
被读 → Markdown。
被用 → HTML。
听起来简单,但 80% 的活其实卡在中间——你以为是被读的,
其实是被用的。比如项目计划,大多数人交付时写成 Markdown 文档,
对方可能看了三天就忘了。
但同样的信息做成可点击的项目页,对方会反复回来看。
四组判断信号
用 HTML 的 4 个信号
- 需要交互——点击、拖拽、滑块、输入，任何带"用户操作"的东西
- 需要可视化——流程图、时间线、对比表、图表、SVG
- 一次性产出且不需要二次编辑——demo、原型、临时工具
- 要发给别人看——发个链接打开即用,不用下载任何东西
用 Markdown 的 4 个信号
- 需要后续手动编辑——文档、笔记、技术博客
- 纯线性阅读——公众号长文、Twitter Thread
- 需要版本控制——Git diff 友好、code review 友好
- 长期沉淀——Notion、Obsidian、wiki 这种
四组里命中两组以上,就按这一边走。
有意思的是,真正容易被读者忽视的判断,是"需要交互"。
这个维度一旦命中,Markdown 几乎是一定输的。
分享三个用蚂蚁新出的思考模型 Ring 实测的 HTML 工具
理论讲完了,接下来是实测。
我用 Ring xhigh 跑了三个 HTML 工具,都是单 HTML 文件,
打开浏览器就能用,不依赖任何库。
三个工具加起来跑通花了不到 10 分钟,产物质量都是 9/10。
场景一:交互式项目计划页
输入项目名 + 周期 + 里程碑 + 风险表。
我拿一个最近做的项目，企业内部"2026 年度组织与人才盘点"做了样本：
Ring xhigh 大约 2分多钟出第一版,暗色主题 + 横向时间线 +
可折叠风险表 + 团队头像墙 + 整体进度条一次到位。
跑出来的页面不接 polish skill 就能直接发给 leader 看。
以前同样的活,我用 Notion 拼模板大约 30-40 分钟,
html节省了 将近20 倍时间。
交互式项目计划页(组件多 / 视觉强)提示词：
reasoning_effort: xhigh
# 任务:生成交互式项目计划页(单 HTML 文件)
输出一个 HTML 单文件,打开即可使用,不依赖任何外部库。
不要给我代码片段,要完整可运行的 HTML。
⚠️ 显式约束:
- 单 HTML 文件,所有 CSS / JS 内联
- 不引入任何外部库(不用 React / D3 / Chart.js / Tailwind CDN)
- 用 SVG 画时间线,不用 Canvas
- 代码总量控制在 700 行内
- ⚠️ 重要:必须生成完整的所有模块,不要中途停止
<untrusted_input>
项目名称:{{ project_name }}
项目周期:{{ period }}
核心里程碑:{{ milestones }}(格式:[日期, 名称, 状态])
已知风险:{{ risks }}(格式:[名称, 优先级, 缓解措施])
团队成员:{{ team }}
</untrusted_input>
## 视觉规格
- 暗色主题:#0d1117 背景,长时间查看不刺眼
- 主色调:单一品牌色(#00d4ff)
- 字体:系统默认无衬线
- 信息密度高但有呼吸感,留白 24px 起步
## 内容结构
1. 顶部 Header:项目名 + 周期 + 状态徽章 + 整体进度条
2. 中部时间线(SVG):
- 每个里程碑节点 hover 显示 tooltip
- click 展开详情卡片
3. 下部风险表:
- 按优先级降序排列
- 每行可展开折叠
- 优先级颜色编码(高红/中黄/低绿)
4. 右下角:团队成员头像(首字母占位)
## 交互规格
- hover:节点放大 1.1x + tooltip 渐显(200ms)
- click:详情卡片右侧滑入(300ms)
- 风险表展开:max-height 动画
- 响应式:< 768px 时间线变垂直
## 完成判定(关键)
输出完成后,逐项确认每个模块都已完整渲染:
1. ✅ Header 完整(项目名 + 周期 + 徽章 + 进度条)?
2. ✅ 时间线所有里程碑都已渲染?
3. ✅ 所有风险都在表中?
4. ✅ 团队成员头像墙完整?
5. ✅ 所有交互(hover/click/expand)代码就位?
6. ✅ 代码总量 ≤ 700 行?
⚠️ 任何一个模块缺失,继续补全,不要交付半成品。
把不确定性视为"尚未完成"。场景二:Prompt 调参器
输入 prompt 用途 + 需要调的参数。
Ring 产出:三栏布局——左边滑块 + Switch 参数面板,
中间 prompt 编辑器(支持 {{ }} 占位符高亮),
右边实时预览合成 prompt + 一键复制按钮 + token 估算 +
Claude Opus 费用估算。
HTML:prompt调参器
这个工具我自己天天用,Ring 给的版本比我手写的稳得多——
关键是"token 估算 + 费用估算"这种细节,自己写经常忘。
也是2分多钟出第一版,直接能用。
Prompt 调参器(交互密 / 单页应用)
# 任务:生成 Prompt 调参器(单 HTML 文件)
输出一个本地 HTML 工具,用于实验和复制 prompt 不同参数组合。
⚠️ 显式约束:
- 单 HTML 文件,所有 CSS / JS 内联
- 不引入任何外部库
- 状态管理用原生 JS(不用 React / Vue)
- 状态持久化用 URL hash(刷新不丢失)
- 代码总量控制在 600 行内
<untrusted_input>
Prompt 用途:{{ purpose }}
需要调的参数:{{ params }}(格式:[名称, 类型, 默认值, 取值范围])
输出语言:{{ language }}
Prompt 模板:{{ template }}
</untrusted_input>
## 视觉规格
- 浅色主题,工程师工具风格
- 三栏布局:左 25% / 中 45% / 右 30%
- 配色:#ffffff 背景 + #f3f4f6 卡片 + #2563eb 主色
- 字体:系统无衬线(中) + JetBrains Mono(代码)
## 三栏内容
### 左栏:参数控制
- 数值→滑块 + 数值显示
- 枚举→下拉
- 布尔→Switch
- 每个参数下方一句话说明
- 顶部"重置默认"按钮
### 中栏:Prompt 编辑器
- textarea 自动撑高
- {{ }} 占位符高亮(用 <span>)
- 底部:字数 + token 估算(中文 1 字 = 1.5 token)
- 顶部:模板预设下拉
### 右栏:实时预览
- 显示最终 prompt
- 一键复制按钮(成功后变绿 + "已复制")
- 底部:token 数 + Claude Opus 费用估算
## 交互规格
- 参数变化 → 右栏 100ms 内刷新
- 状态保存到 URL hash
- 快捷键:Cmd+K 聚焦 prompt,Cmd+Enter 复制
## 完成判定
1. 三栏响应式正常?
2. 所有控件交互正常?
3. 实时预览无延迟?
4. URL hash 持久化能用?
5. 复制按钮工作 + 视觉反馈?
6. token 和费用估算正确?
7. ≤ 600 行?
任一不满足,重写。场景三:可交互流程图
输入流程主题 + 节点清单 + 节点关系。
Ring 产出:纯 SVG 流程图,支持拖动平移、滚轮缩放、点击节点
展开详情、双击高亮关联连线。坐标系判断完全正确——
prompt 里那句"Y 轴向下为正"显式约束起了关键作用。
CTO 线组织盘点流程图 - 11 节点可交互
跑了 1分多分钟出第一版,11 个节点的复杂流程图布局工整、
连线无交叉。这比我用 Mermaid 折腾半天的体验好太多。
prompt：可交互流程图(SVG 坐标系敏感)
# 任务:生成可交互流程图(HTML + SVG 单文件)
⚠️ 坐标系显式约束(关键,不写会翻转):
- SVG 坐标系:X 轴向右为正,Y 轴向下为正
- 节点垂直间距 120px,水平间距 200px
- 画布初始 viewBox 0 0 1600 900
- 节点位置必须显式计算,不要让模型自动布局
⚠️ 技术约束:
- 单 HTML 文件
- 用纯 SVG 画图,不用 Canvas
- 不引入任何外部库
- 代码总量控制在 800 行内
<untrusted_input>
流程图主题:{{ topic }}
节点清单(按层级):{{ nodes }}
格式:[节点 ID, 层级, 标题, 描述, 颜色]
节点关系:{{ relationships }}
格式:[源 ID, 目标 ID, 关系类型]
</untrusted_input>
## 视觉规格
### 节点
- 圆角矩形(rx=8),160 x 80
- 根据层级用不同 fill
- 节点 ID 顶部小字 + 标题中部大字
- hover 阴影加深
### 连线
- 贝塞尔曲线,带箭头
- 关系类型不同颜色
- hover 关联连线高亮 3px
### 详情面板
- 右侧抽屉,400px 宽
- 节点 ID / 标题 / 描述 / 入度出度
## 交互规格
### 平移
- 拖动空白处 → 整个画布平移
- 用 SVG transform translate
### 缩放
- 滚轮 → 0.5x-2x
- 缩放中心是鼠标位置
### 节点
- click → 详情面板滑入
- double-click → 高亮关联连线(其他变淡)
- esc → 关闭 + 清除高亮
## 布局算法(显式)
不要自动布局,显式计算:
- 同层级:水平排列,X = 200 + index * 200
- 不同层级:Y = 100 + level * 120
- 同层级多节点时均匀分布
## 完成判定
1. 所有节点在指定坐标?
2. 连线箭头方向正确?
3. 拖动 / 缩放 / 点击 / hover 都工作?
4. 1920x1080 视觉舒服?
5. 无节点重叠 / 连线交叉?
6. 详情面板滑入顺滑?
7. ≤ 800 行?
特别检查:Y 轴向下为正,如果整个图翻转了,坐标系搞错了。
任一不满足,重写。Ring 跑 HTML 的三个坑
但 Ring 跑 HTML 也有几个坑要说清楚,我都踩过。
坑一:首次输出可能不完整。
三个场景里,项目计划页的第一次跑出来缺了几个组件——
不是错误,是模型停在中间。补一句"请补全所有组件,
确认所有模块都生成完整"再让它重跑,第二次就稳了。
这个坑要预防的话,prompt 里加一句
"完成后逐项确认每个模块都已渲染"。
坑二:SVG 坐标系翻转。
SVG 的 Y 轴向下为正这件事,Ring 偶尔会按数学坐标系处理,
导致整个图翻转。预防做法是在 prompt 里显式写
"Y 轴向下为正,节点垂直间距 120px,X 轴向右为正"。
有这一句,出错率明显降下来。
坑三:仿站做不了。
Ring 当前没有多模态,做不了"看截图复刻"。
如果你想还原一个看到的页面,流程是先用 Claude / GPT 读截图、
输出布局描述,再把描述喂给 Ring 写代码。
一个升级版判断
咱们回到核心，
上篇推文里我写过一句:Markdown 是给人写给人看的,
HTML 是给 AI 写给人用的。
最近一周我实测跑下来,还想再补一句:
选错格式的本质,是没想清楚交付物到底要被读还是被用。
倒不是说 HTML 比 Markdown 更先进,主要是 AI 时代的产出越来越多被"用",
而不是被"读"。讲真，这一类活,Markdown 天然就吃亏。
Ring xhigh 在 HTML 工具这种场景上,跑下来比我预期稳——
尤其是单文件不依赖外部库这种约束,它接得住。
OpenRouter可以直接使用，适合在自己手头的 HTML 工具项目
里跑一遍:
🔗 https://huggingface.co/inclusionAI/Ring-2.6-1T
完整 prompt 模板(三个场景全套) + 调用示例 + 避坑指南
已经整理成飞书文档,需要的评论区留言我私信发。