天天喊着让 AI 帮你写代码，结果它给你画的架构图比鬼画符还乱？现在有人专门治这个病了。

effective-html，一套专门给编码智能体用的 HTML 技能，核心就一件事：让 AI 产出自包含、还好看的 HTML 交付物。

拆成三块： html，做通用页面 html-diagram，专攻全屏架构图和系统图，SVG 优先，清爽不糊 html-plan，专门生成计划页

说白了就是把“智能体输出难看又混乱“这个老毛病给摁住了，文档、架构、计划一把梭。搞 Agent 的可以去瞅瞅。

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

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 was made by Fable 5, I will create more fable 5 artifacts and add them to the skill folder for smaller models to distill. example demo

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

Render and annotate your HTML with Plannotator (optional): https://github.com/backnotprop/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