看到一个用来生成"结构化"html网页的SKILL,叫Effective HTML,很适合来做产品原型展示、项目流程梳理,我感觉现在ai生成html网页已经是标配了,有点取代ppt的趋势,可是好用的skill不多,
很多agent内置的html技能有个通病,只是将markdown的段落文字改成网页文档,看上去漂亮,但仍然是文档,又臭又长,而且ai味道很重。
Effective HTML则是把内容抽丝剥茧,梳理它的结构、流程、关系,用可视化的语言去生成可交互的html,不是大段文字的平铺,非常的清晰。

另外为了防止ai脸,它有意地根据内容主题去改html的风格,比如线条、配合、背景、卡片,也就是针对性的视觉设计,这就很适合做产品原型、页面结构的演示。
这个技能包含了6个子技能,是配合一起来用的,类似于团队作战,比如design-artifact用来管好看,html-wireframe管布局、html-prototype管交互、html-diagram管架构流程等。
这样会比传统一个skill写html要合理,就像房屋装修,总得有瓦工、油漆工、电工等角色,不可能一个人干所有活。
安装Effective HTML很简单,直接在workbuddy、codex等agent上输入仓库链接,让它安装就可以。
提示语就直接说,生成一个......html,比如:
"做一个agent新品发布的html封面展示,agent名字叫save your money,用来记账的"
生成结果见附图,非常清晰、美观。
