Как научить AI-агентов верстать без шаблонов и монтировать видеопрезентации

Каждый, кто просил Claude или Cursor сверстать лендинг, знает этот результат. Сгенерированный код технически работает, но визуально выглядит как типичная страница из 2018 года с синими кнопками и закругленными карточками. Модели знают синтаксис CSS и React, но у них нет встроенного дизайн-вкуса и понимания структуры проекта.

Репозиторий garden-skills от китайского разработчика ConardLi решает эту проблему через формат Agent Skills. Это набор модулей по спецификации SKILL.md, которые превращают Claude Code, Cursor, Codex и другие терминальные агенты в специализированных инженеров.

Что такое Agent Skills и как они работают

Anthropic недавно предложили открытый стандарт для расширения возможностей агентов. По сути, скилл — это отдельная папка в проекте или домашней директории, внутри которой лежит манифест SKILL.md с YAML-шапкой, текстовыми инструкциями, готовыми скриптами и справочниками.

Агент сканирует поле description в манифесте. Когда задача пользователя совпадает с описанием, модель подгружает нужный контекст прямо во время диалога. Это избавляет от необходимости копировать километровые системные промпты в каждый чат.

В репозитории garden-skills собрано пять готовых модулей для реальных рабочих задач.

Готовые навыки в репозитории

Каждый навык заточен под отдельный сценарий и содержит жесткие правила взаимодействия, чтобы агент не галлюцинировал и не пропускал согласование этапов.

1. web-design-engineer

Модуль ориентирован на верстку страниц, дашбордов, прототипов и интерактивных компонентов. Вместо банальных шаблонов он использует базу из 25 готовых визуальных стилей. Среди них есть эстетика Linear, терминал Bloomberg, швейцарский стиль, неоморфизм, ретро-футуризм и минимализм в духе кенийского дизайнера Кения Хара (Muji).

Навык заставляет модель работать по пяти параметрам: плотность элементов, динамика анимаций, зависимость от ассетов, соответствие бренду и вариативность. Агент сначала согласует концепт и палитру в oklch(), затем строит ранний прототип v0 и только после одобрения пишет финальный React-код.

2. web-video-presentation

Этот скилл берет исходный текст, техническую статью или конспект урока и собирает интерактивную веб-презентацию с фиксированным разрешением 1920×1080 на стеке Vite, React и TypeScript.

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

Модуль поддерживает 23 встроенные темы оформления и интеграцию с генерацией озвучки через MiniMax CLI, OpenAI TTS, ElevenLabs или системную утилиту macOS say.

3. beautiful-article

Инструмент преобразует сырые данные (ссылки, PDF, DOCX, заметки или дампы диалогов) в верстку читабельной статьи. Навык опирается на библиотеку компонентов Reacticle и 11 авторских дизайн-профилей (Tufte, Bodoni, Vignelli, Knuth).

Модуль предлагает 10 форматов публикаций, от подробных туториалов со 90% сохранением исходного текста до интерактивных эксплейнеров с глубокой переработкой сути. В процессе сборки агент обязательно делает паузы для подтверждения темы, структуры и стратегии иллюстраций.

4. gpt-image-2 и kb-retriever

Два других навыка закрывают более узкие задачи:

• gpt-image-2 содержит 79 структурированных шаблонов промптов для генерации схем, архитектурных диаграмм, баннеров и UI-мокапов через совместимые с OpenAI API. Он умеет работать как в режиме генерации кода, так и просто в виде советчика по составлению промптов.
• kb-retriever организует локальный поиск по структурированной папке с документами, PDF и Excel таблицами. Вместо того чтобы скармливать агенту тяжелые файлы целиком и забивать контекстное окно, скилл читает древовидные индексы data_structure.md, использует утилиты вроде grep или pdftotext и находит точные выжимки максимум за 5 итераций.

Способы установки в проект

Самый быстрый путь добавить навыки в рабочее окружение — воспользоваться менеджером пакетов npx skills. Утилита автоматически определит, какой AI-ассистент запущен в директории, и положит файлы в нужную папку.

Установка всех модулей сразу:

npx skills add ConardLi/garden-skills

Установка конкретного навыка в глобальную конфигурацию:

npx skills add ConardLi/garden-skills -s web-design-engineer --global

Если вы пользуетесь Claude Code, можно подключить плагины напрямую через встроенный маркетплейс:

/plugin marketplace add ConardLi/garden-skills
/plugin install web-design-skills@garden-skills

Для фиксированных версий в CI/CD или проектах с жесткими требованиями к зависимостям в релизах репозитория доступны подписанные .zip архивы с SHA-256 контрольными суммами. Достаточно распаковать архив в .claude/skills/ или .agents/skills/.

Совместимость с агентами

Формат открытый, поэтому навыки работают не только с экосистемой Anthropic. Проект протестирован со следующими инструментами:

• Claude Code и веб-интерфейс Claude.ai (через раздел Capabilities)
• Cursor (папка .agents/skills/<name>/)
• Codex CLI
• Gemini CLI
• OpenCode

Кому пригодится проект

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

Начать проще всего с web-design-engineer или beautiful-article. Они дают наглядный результат уже на первом запросе и показывают, как правильно составлять собственные инструкции для спецификации SKILL.md.