AYi@AYi_AInotes · 5月18日71http://x.com/i/article/2053129966217277440
# 我终于想明白了:你 90% 用 Markdown 写的东西,本来就该是 HTML(2026 实战指南・附全套提示词)
上篇写 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 分钟,
节省了 20 倍时间。
## 交互式项目计划页(组件多 / 视觉强)提示词:
## 场景二:Prompt 调参器
输入 prompt 用途 + 需要调的参数。
Ring 产出:三栏布局——左边滑块 + Switch 参数面板,
中间 prompt 编辑器(支持 {{ }} 占位符高亮),
右边实时预览合成 prompt + 一键复制按钮 + token 估算 +
Claude Opus 费用估算。
HTML:prompt调参器
这个工具我自己天天用,Ring 给的版本比我手写的稳得多——
关键是"token 估算 + 费用估算"这种细节,自己写经常忘。
也是2分多钟出第一版,直接能用。
## Prompt 调参器(交互密 / 单页应用)
## 场景三:可交互流程图
输入流程主题 + 节点清单 + 节点关系。
Ring 产出:纯 SVG 流程图,支持拖动平移、滚轮缩放、点击节点
展开详情、双击高亮关联连线。坐标系判断完全正确——
prompt 里那句"Y 轴向下为正"显式约束起了关键作用。
CTO 线组织盘点流程图 - 11 节点可交互
跑了 1分多分钟出第一版,11 个节点的复杂流程图布局工整、
连线无交叉。这比我用 Mermaid 折腾半天的体验好太多。
> prompt:可交互流程图(SVG 坐标系敏感)
## 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 模板(三个场景全套) + 调用示例 + 避坑指南
已经整理成飞书文档,需要的评论区留言我私信发。
译本文核心观点是判断AI产出格式的关键在于该产物是用于“阅读”还是“使用”。被阅读的文档、笔记适合Markdown;需要交互、可视化、一次性交付或直接分享的工具型产物则应选择HTML。文章提出了四组具体判断信号,如需要交互和可视化即指向HTML。作者使用Ring-2.6-1T模型实测了三个HTML工具,包括交互式项目计划页、Prompt调参器和可交互流程图,均能在几分钟内生成高质量、单文件且不依赖外部库的成品,效率大幅提升。同时,文章也指出了使用Ring生成HTML时可能遇到的输出不完整、SVG坐标系错误等常见问题及应对方法。