Anthropic объявляет: Пишем на HTML

Несколько дней назад я увидел интересный пост в X: команда Claude Code из Anthropic объявила, что их внутренняя документация больше не пишется на Markdown, а прямо на HTML. Причина: Markdown для авторов, HTML для читателей.

Вскоре после этого проект под названием html-anything​ стал вирусным на GitHub, набрав уже более 2500 звёзд. Он позволяет вашему локальному ИИ-агенту писать HTML за вас.​ Он не выводит Markdown или PPTX, а чистые статические HTML-файлы. Вводите требования слева, выбирайте шаблон посередине и предварительно просматривайте результат в реальном времени справа.

После установки вам нужно сделать только одно: описать, что вам нужно. Например: «Сделай технический пост в блоге, тёмная тема, с примерами кода и графиками данных.»

ИИ автоматически выберет шаблон, применит ограничения дизайна и выдаст полный HTML-файл. Это готовый продукт, а не черновик.

Он не предоставляет ИИ, он только оркестрирует

Что касается реализации, html-anything не поставляется с моделью и не продаёт API-ключи.​ Проще говоря, он вызывает инструменты ИИ, которые у вас уже установлены на компьютере. Claude Code, Cursor, Gemini CLI, Copilot… пока вы их использовали и входили в систему, он просто их использует. Не требует дополнительной регистрации или оплаты.

Каждая сгенерированная страница — это готовый продукт, а не незавершённая работа

Он поставляется с 75 тщательно продуманными шаблонами. Каждый шаблон имеет строгие ограничения:

• Стек шрифтов с приоритетом CJK.
• Сетка базовой линии 8px.
• Коэффициент контрастности ≥ 4.5.
• Должны использоваться реальные данные.
• Запрещён текст-заполнитель.

Преимущество в том, что это гарантирует соответствие вывода профессиональным стандартам. Он охватывает 9 распространённых сценариев:

1. Веб-прототипы.​ Можно использовать для создания целевых страниц, страниц с ценами, панелей администратора, технических блогов и т.д.
2. Презентации.​ 20 стилей на выбор, подробно обсуждаются ниже.
3. Генерация видео.​ Пишите и экспортируйте непосредственно как видео MP4. Подробно обсуждается ниже.
4. Карточки для соцсетей.​ Создавайте графику в стиле Xiaohongshu, Twitter, Spotify и т.д. одним щелчком мыши.
5. Офисные документы.​ Шаблоны для еженедельных отчётов, документов с требованиями, финансовых отчётов и других повседневных офисных документов.
6. Резюме.
7. Отчёты о данных.
8. …и другие сценарии.

Среди этих 9 сценариев шаблоны презентаций заслуживают отдельного обсуждения. Есть целых 20 стилей презентаций. Друзьям, которые проводят технические выступления и демонстрации продуктов, эта часть покажется впечатляющей.

• Швейцарский интернациональный стиль:​ Используйте 16-колоночную сетку с основным цветом. Выбирайте из Klein Blue, Lemon Green и т.д. Применяйте напрямую из 22 фиксированных макетов. Открывается с тем «выглядит дорого» суровым ощущением.
• Стиль журнала и электронных чернил:​ 10 макетов в сочетании с 5 цветовыми схемами, включая Чернила, Индиго-фарфор и Крафт-бумагу. Выглядит как отпечатанный художественный журнал.
• А также стили, такие как deck-xhs-pastel(Xiaohongshu пастель), deck-hermes-cyber(Hermès кибер-неон), deck-replit(стиль демонстрации продукта Replit) и т.д.

Скрипты кадров видео, могут быть отрендерены прямо в MP4

Помимо статических страниц и презентаций, html-anything также может генерировать видеоконтент. Он предоставляет 10 скриптов кадров, соответствующих спецификации heygen-com/hyperframes. Передайте их в Remotion​ для рендеринга в .mp4.

• frame-glitch-title​ – Кадр заголовка в стиле глитч-арт. Смещение хроматических аберраций голубой/пурпурный, строки развёртки ЭЛТ, испорченные субтитры данных, шум ASCII абзаца. Создано для киберпанк-тем.
• frame-logo-outro​ – Заключительный кадр с логотипом бренда. Логотип собирается блок за блоком + светящийся ореол, поднимается слоган, появляется CTA. Завершающая карточка для запуска продукта.
• vfx-text-cursor​ – Эффект печатающего курсора. Каждый символ появляется со следом хроматической аберрации пурпурный × голубой. Введите цитату, получите кинематографический начальный кадр.

Экспорт в один клик на несколько платформ

После создания контента следующий шаг — публикация. Html-anything поддерживает экспорт в один клик на несколько основных платформ, избавляя от хлопот с ручным форматированием.

• Официальный аккаунт WeChat:​ CSS полностью инлайновый, вставьте и используйте напрямую.
• X / Weibo / Xiaohongshu:​ Автоматически рендерится как PNG с высоким DPI 2×, копируется в буфер обмена.
• Zhihu:​ Формулы LaTeX автоматически обрабатываются в изображения-заглушки.

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

Потоковый рендеринг + предпросмотр в песочнице

Опыт во время генерации также важен. Html-anything использует SSE (Server-Sent Events) потоковый рендеринг, позволяя вам видеть творческий процесс ИИ в реальном времени. Вы можете наблюдать, как страница «рисуется» ИИ. Если вы видите, что она идёт в неправильном направлении, вы можете прервать и перезапросить немедленно, избегая напрасной траты ресурсов генерации и делая творческий процесс более управляемым.

Безопасность также учтена; это не грубая реализация, заботящаяся только о функциональности. Весь сгенерированный HTML предварительно просматривается в изолированном iframe, изолируя локальное хранилище и куки.

Увидев эти функции, я уверен, что некоторые из вас с нетерпением ждут возможности попробовать.

⚠️ Предварительные требования:​ У вас должен быть установлен хотя бы один поддерживаемый ИИ CLI локально, например, Claude Code, и он должен быть рабочим.

Установка (3 шага):

1. Склонируйте код на свой компьютер. bashbashgit clone https://github.com/nexu-io/html-anything
2. Перейдите в каталог и установите зависимости. bashbashcd html-anything pnpm install
3. Запустите одной командой. bashbashpnpm devОткройте браузер на http://localhost:3000, чтобы увидеть интерфейс.

Хотите увидеть, как выглядит каждый шаблон? Откройте каталог skills/в репозитории. У каждого шаблона есть файл example.html. Дважды щёлкните, чтобы увидеть эффект.

Две небольшие проблемы

Конечно, проект не идеален. В настоящее время у него есть два основных ограничения:

1. В настоящее время он может выводить только форматы HTML и PNG. Если вам нужны PDF или PPTX, вам придётся полагаться на печать браузера или инструменты сторонних производителей для преобразования.
2. Изменение содержимого требует повторной генерации через ИИ-агента. Порог входа несколько высок для людей, не установивших ИИ CLI.

Заключительные мысли

Поговорив так много о функциях, вернёмся к исходной теме — HTML или Markdown?

В сообществе идут довольно оживлённые дебаты. Некоторые считают, что Markdown достаточно — просто, прямо и удобно для контроля версий. Другие считают, что HTML — правильный ответ — свободная вёрстка, WYSIWYG. Обе точки зрения имеют свои достоинства.

Я думаю, что ключ не в самом формате, а в контексте, в котором вы находитесь.

• Делать заметки, писать документацию.​ Markdown достаточно.
• Кросс-платформенная публикация, требующая тонкой вёрстки.​ Преимущества HTML проявляются.

Особенно сейчас, когда ИИ может помочь вам писать HTML, барьер форматирования больше не является проблемой. Что вы думаете?

Проект имеет открытый исходный код под лицензией Apache-2.0. Заинтересованные друзья могут ознакомиться с исходным кодом и документацией в репозитории GitHub.

Адрес исходного кода:​ https://github.com/nexu-io/html-anything