跟Claude团队学HTML用法,信息吸收更轻松了
在看完Claude Code团队关于html使用的那篇文章后,对我启发蛮大的,于是我做了很多使用上的探索,今天来和大家分享一下我的收获。
之前用AI沉淀内容的时候基本上都是生成md文档,在假期做Agent Loop探索的时候也是这样,我和AI每设计一个架构、每跑一次循环,我们都会沉淀一个md文档,方便后续去复盘总结。
为了方便去看md文档,我还特意在CodePal里做了阅读模块,能够把Markdown语法渲染出来,让内容查阅起来更清晰。
但最终的阅读体验其实不好,主要是AI写的字太多了,这么多内容摆在我面前,我第一反应是要么让AI去读吧,但是让AI总结就会遗漏很多设计细节上的问题。
这个事情让我的Agent Loop复盘拖延了好几天,在看到html使用方法后,我就立马把这个方法用到了这次复盘里,我让AI逐条阅读这些历史文档,然后给我输出一个尽可能齐全不遗漏细节的html页面。
当我打开html去阅读的时候,我发现体验和md完全不一样。
同样的信息放在html里可以被拆成卡片、表格、流程、对比、重点提示等多个模块,它不再是一整坨文字堆在面前,而是可以让人津津有味的从上往下读,不会有面对大量内容的压力感了。
这个时候我意识到,html的价值不仅仅是让样式变得好看,它更重要的是改变了信息被人吸收的方式,它能让信息更容易被看见、理解和利用。
基于这个思路,我最近也做了3个相关的Skill。
第一个是对话整理类的:readable-output。
它主要是用来整理我和AI的对话,把原本沉淀成md的讨论过程,转成更适合回看的html页面。
第二个是案例整理类的:case-radar。
我用它来整理案例材料,结合AI自主使用浏览器和CLI调用能力,把截图、说明和结构分析汇总成一个可浏览的html案例库。
第三个是学习类的:system-study。
它是用来做系统学习的,我给它一个学习目标,在和它确认需求后,AI会发起多个subagent做调研,最后生成一份系统化的html学习页面。
这三个Skill我都开源到了github,大家需要使用的自取:
github.com。
在跑完这几个案例后,我对html应用的理解也发生了一些变化。
我之前觉得html更多是demo产品的验证方式,所以我会把大量的产品demo和设计图用html来做载体承接。
但现在我觉得,html是AI时代很重要的信息表达形式,我也会后边尝试看看能不能用html在更多场合下替代md文档,先从coding场景的prd文档和测试文档开始吧,后续再和大家反馈我的实际体验。