@QingQ77: 给编码智能体用的 HTML 技能，专门生成简洁的架构图、计划页和视觉文档。 https://github.com/plannotator/effective-html… effective-html 是一套给智能体用的 HTML 技能，专…

X AI KOLs Timeline 工具
coding-agents html-skills architecture-diagrams visual-documents open-source github

摘要

effective-html is a set of HTML skills for coding agents to generate self-contained, visually appealing HTML deliverables like architecture diagrams, plan pages, and visual documentation.

给编码智能体用的 HTML 技能，专门生成简洁的架构图、计划页和视觉文档。 https://t.co/rrYGQlWbYJ effective-html 是一套给智能体用的 HTML 技能，专门做自包含的、好看的 HTML 交付物。三个子技能：html 做通用页面，html-diagram 做全屏架构图和系统图（SVG 优先），html-plan 做计划页。 https://t.co/wBwCd0gJK9
查看原文
查看缓存全文

缓存时间: 2026/06/12 02:51

给编码智能体用的 HTML 技能，专门生成简洁的架构图、计划页和视觉文档。

https://t.co/rrYGQlWbYJ

effective-html 是一套给智能体用的 HTML 技能，专门做自包含的、好看的 HTML 交付物。三个子技能：html 做通用页面，html-diagram 做全屏架构图和系统图（SVG 优先），html-plan 做计划页。 https://t.co/wBwCd0gJK9

plannotator/effective-html

Source: https://github.com/plannotator/effective-html

HTML skills for pragmatic visual artifacts

https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0

Note: The diagram in the video was made by Fable 5, I will create more fable 5 artifacts and add them to the skill reference folder for smaller models to distill.

Focused skills for generating self-contained HTML deliverables with a strong visual bias:

  • html: an HTML file for whatever you’re describing, in the effective HTML style
  • html-diagram: architecture, stack, and systems understanding rendered as full-screen HTML diagrams with high-quality SVG
  • html-plan: HTML plan pages in the effective HTML style

like this? star Plannotator

Install

npx skills add plannotator/effective-html

List available skills first:

npx skills add plannotator/effective-html --list

Install a specific skill:

npx skills add plannotator/effective-html --skill html-diagram
npx skills add plannotator/effective-html --skill html-plan

Skills

  • html - Create an HTML file for whatever the user is describing, matching the effective HTML references.
  • html-diagram - Build full-screen HTML architecture and stack diagrams with SVG-first presentation and minimal prose.
  • html-plan - HTML plan pages in the effective HTML style.

Repository Shape

Skills live under skills/<skill-name>/SKILL.md. Each skill also bundles a copy of the html-effectiveness example corpus under references/html-effectiveness/ so the examples stay local to the skill.

Credit: this repo bundles and uses the html-effectiveness examples by Thariq Shihipar: https://thariqs.github.io/html-effectiveness

相似文章

@geekbb: AI 写出来的技术文档动辄几千字，全在终端里滚，没人愿意看。md2html 让 AI 自动把这些 Markdown 转成带侧边栏目录、图表、时间线、卡片和警告框的 HTML 页面，一个文件就能发给团队看。 https://github.c…

X AI KOLs Timeline

md2html is a tool that converts AI-generated Markdown documents into polished, self-contained HTML pages with sidebar table of contents, diagrams, timelines, and callouts, making them easier to read and share.

@AYi_AInotes: Claude团队的工程师，已经彻底抛弃Markdown了。 不是Markdown不好用， 是AI变得太快，它已经跟不上了。 以前AI写10行笔记，Markdown刚刚好， 现在AI能一次性输出1000行计划、复杂流程图、完整代码审查， 密…

X AI KOLs Timeline

Claude团队工程师放弃Markdown转向HTML，因AI输出量已从10行增至1000行，纯文字格式难以处理。HTML可生成彩色表格、SVG流程图、交互式原型等，显著提升人机协作体验，尽管生成时间增加2-4倍。