博客文章配套示例

HTML 令人不讲道理地有效

这里有二十个自包含的 .html 文件,它们是智能体选择生成的交互式页面,而不是一堵 Markdown 文字墙。 每个示例都把一份“你可能会扫一眼的文档”换成“你真的愿意读完的页面”——直接用浏览器打开即可。 下面按它们所替代的工作类型分组。

01

探索与规划

3 个演示

当你还不确定自己真正想要什么时,可以让智能体沿着几个方向同时展开,并把方案并排放在你面前。 这样你只需要指出想要哪一个,而不必按顺序读完三堵文字墙,再把所有细节都塞进脑子里。 一旦选定方向,就把选择转成实现者真正能读懂的计划。

02

代码评审与理解

3 个演示

Diff 和调用图本质上都是空间信息,Markdown 会把它们压平成线性文本。 让智能体把变更渲染成带注释的 diff,把模块画成方框和箭头,或者写出评审者真正需要的 PR 说明。 这样代码的形状一眼就能看见。

03

设计

2 个演示

HTML 本来就是设计系统最终交付的媒介,所以它天然适合用来讨论设计系统。 Token 可以变成色板,组件可以变成总览页,而这份产物还能直接喂回下一轮提示词。

04

原型验证

2 个演示

动效和交互很难被描述,只能被感受。 一个临时页面放上真实缓动曲线或真实点击路径,五秒钟就能告诉你一段说明文字永远说不清的东西。

05

图解与图表

2 个演示

内联 SVG 给了智能体一支真正的笔。 你可以要求它为文章画配图,或者为流程画一张流程图,得到的是可手动微调、也能直接粘进最终文档的矢量图。

06

演示文稿

1 个演示

几个 <section> 标签加二十行 JS 就是一份幻灯片。 把 Slack 讨论串或设计文档交给智能体,就能得到会议里可用方向键翻页的材料:无需 Keynote,也无需导出。

07

研究与学习

2 个演示

带折叠章节、标签页代码示例和侧边术语表的解释页,读起来和线性堆砌的同一段文字完全不同。 智能体可以搭出让新主题变得可导航的脚手架。

08

报告

2 个演示

周报、复盘这类周期性文档,最受益于一点结构和色彩。 一个小图表加一条上色时间线,就能把原本容易被扫过去的材料变成真的有人会读的报告。

09

定制编辑界面

3 个演示

有些需求很难在文本框里说清楚。 可以让智能体为你正在处理的具体对象做一个临时编辑器,并且总是在最后提供导出按钮,把你在界面里的操作重新变成可粘贴给智能体或提交到代码库的内容。 你仍然在循环里,只是这个循环更紧了。