Effective HTML — навыки для создания визуальных HTML-артефактов

Effective HTML — это набор навыков (skills) от Plannotator для AI-агентов, которые генерируют самодостаточные HTML-файлы с сильным визуальным уклоном. Если вам нужно быстро получить красивую страницу — будь то архитектурная диаграмма, план проекта или просто хорошо оформленный HTML по любой теме — этот репозиторий даёт агенту готовые промпты и референсы.

Репозиторий насчитывает 1400+ звёзд на GitHub и поддерживает три основных сценария работы: Claude Code (через плагины), Codex (через плагины) и любой AI-агент через npx skills.

Что внутри

Репозиторий содержит три навыка:

html — универсальный HTML

Базовый навык: создаёт HTML-файл для чего угодно, следуя стилю effective HTML. Подходит для страниц с информацией, документации, лендингов — любой задачи, где нужен самодостаточный HTML-файл без внешних зависимостей.

html-diagram — архитектурные диаграммы

Навык для визуализации архитектуры, стеков и систем. Генерирует полноэкранные HTML-диаграммы с качественной SVG-графикой. Минимум текста, акцент на визуальное восприятие. Идеально, когда нужно быстро объяснить архитектуру решения или показать связи между компонентами.

html-plan — страницы планирования

HTML-страницы планов проектов в том же стиле effective HTML. Полезно для создания roadmaps, таймлайнов и планов работ, которые можно сразу открыть в браузере и показать команде.

Установка

Через npx skills (универсальный способ)

# Установить все навыки
npx skills add plannotator/effective-html

# Посмотреть, какие навыки доступны
npx skills add plannotator/effective-html --list

# Установить конкретный навык
npx skills add plannotator/effective-html --skill html-diagram
npx skills add plannotator/effective-html --skill html-plan

Как плагин Claude Code

/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-html

Как плагин Codex

codex plugin marketplace add plannotator/effective-html
codex plugin add plannotator-effective-html@effective-html

Как это работает

Навыки живут в директории skills/<skill-name>/SKILL.md. Каждый навык содержит промпт, который направляет AI-агента на генерацию HTML определённого типа. К каждому навыку прилагается коллекция референсных примеров в references/html-effectiveness/ — это корпус качественных HTML-страниц, на которые агент может опираться как на примеры стиля.

Референсы основаны на работе Thariq Shihipar (html-effectiveness) — коллекции примеров визуально привлекательных, самодостаточных HTML-страниц. Эти примеры показывают агенту, как выглядит «хороший» HTML в контексте этой системы.

Экосистема Plannotator

Effective HTML — часть экосистемы Plannotator, которая включает:

• Plannotator — инструмент для рендеринга и аннотирования HTML. Можно отправить сгенерированный HTML и получить его с аннотациями, правками и заметками. Полезно, когда нужно доработать результат работы агента.
• ToT (tot.page) — сервис для создания мгновенных шаринг-ссылок на HTML-файлы. Позволяет быстро опубликовать результат в интернете, чтобы показать кому угодно. Поддерживает даже HTML из видео.

Зачем это нужно

AI-агенты хорошо пишут код, но визуальное качество сгенерированных HTML-страниц часто оставляет желать лучшего. Effective HTML решает эту проблему через:

1. Referencе-driven генерацию — агент не просто пишет «какой-то HTML», а опирается на проверенные визуальные примеры.
2. Сфокусированные промпты — каждый навык заточен под конкретный тип результата (диаграмма, план, страница), что даёт более предсказуемый результат.
3. Самодостаточность — все файлы содержат встроенные стили и не требуют внешних зависимостей. Открыл в браузере — работает.

Это особенно полезно в контексте spec-driven development и планирования через AI: сгенерировать красивую HTML-страницу плана прямо из диалога с агентом и сразу показать её команде — без лишних шагов и инструментов.