AI Design Skills — дизайнерские скиллы для AI-агентов: конверсионный лендинг и оживление макетов

AI Design Skills — растущая коллекция дизайн-скиллов для AI-кодинг-агентов: Claude Code, Cursor, Codex, Windsurf и любого другого инструмента, который читает markdown-файл с правилами. Каждый скилл — самодостаточная папка: достаточно скопировать её в проект, и агент получает готовую систему дизайна. Сейчас в коллекции два навыка: landing-page-design собирает конверсионный лендинг с нуля, а design-to-motion превращает статичный макет в анимированный шоу-кейс. Проект собрал около 7,8 тысячи звёзд на GitHub и распространяется по лицензии MIT.

landing-page-design: лендинг с нуля

Скилл начинается с тезиса: лендинг — это не главная страница. Главная обслуживает разные сценарии. Лендинг выигрывает один: одно предложение, одна аудитория, одно главное действие.

Навык состоит из двух частей.

Стратегия и структура

Сначала агент собирает вводные одним списком вопросов. Какое главное действие ждётся от посетителя: регистрация, демо, покупка, лист ожидания. Кто целевая аудитория и какие у неё три главных возражения. Откуда придёт трафик и какие есть доказательства: логотипы, отзывы, цифры. Если пользователь не отвечает, агент принимает разумное допущение, объявляет его одной строкой и продолжает работу.

Дальше — структура страницы. Первый экран: заголовок, подзаголовок, одна главная кнопка, одно доказательство, визуал продукта. Середина — аргументы: проблема и решение, три–пять выгод, «как это работает» в три шага, социальные доказательства. Финал — обработка возражений: FAQ из шести–двенадцати вопросов, снятие риска в виде бесплатного пробного периода или отмены в любой момент и повторная кнопка.

Отдельный блок выбирает один из четырёх макетов: классический хиро с секциями, длинная история для скептиков, минималистичная страница конверсии для тёплого трафика или страница сравнения под запросы вида «X против Y».

Правила конверсии конкретны. Рекламный заголовок повторяется в хиро. Над первым экраном живёт только одна кнопка. Выгода пишется раньше фичи. Вместо «Save time and streamline» скилл требует писать «Cut your weekly reporting from 4 hours to 15 minutes».

Визуальная система

Вторая часть запрещает агенту выдумывать значения на ходу:

• Шрифты — Geist, Manrope, Geist Mono, Poppins. Inter, Roboto, Arial и Open Sans запрещены, как и курсив и самый жирный вес 900.
• Размеры текста привязаны к шкале Tailwind. Произвольные значения вроде text-[19px] запрещены: размер округляется вниз до ближайшего шага.
• Отступы берутся только из фиксированной таблицы токенов от 0 до 96 px.
• Вложенные радиусы считаются по формуле: внутренний радиус равен внешнему минус зазор, если зазор меньше 32 px, а результат больше 2.
• Фоны плоские, без градиентов. Для тёмной темы задана палитра из шести фиксированных цветов.
• Иконки — Phosphor, Solar или Iconamoon. Material Icons запрещены.
• Анимируются только transform и opacity на кривой cubic-bezier(0.22, 1, 0.36, 1) с поддержкой prefers-reduced-motion.

Заголовок хиро получает горизонтальный градиент по тексту: от белого к серому в тёмной теме, от чёрного к тёмно-серому — в светлой. Это единственное место, где градиент разрешён.

Отдельные главы отвечают за правдоподобность контента и готовность к публикации. Тексты пишутся настоящими, без пустых громких слов вроде revolutionize и supercharge. Имена и цифры в макете должны выглядеть правдоподобно: без подозрительно круглых значений. Каждый интерактивный элемент несёт полный набор состояний: hover, active, видимый focus, скелетон загрузки, продуманный пустой экран, инлайн-ошибка вместо window.alert. В финальном чек-листе — страница 404, юридические ссылки, валидация форм, favicon, мета-теги и семантический HTML.

Ещё один обязательный элемент — секция с крупным слоганом, слова которого по очереди проявляются при прокрутке. Скилл задаёт и порядок работы: сначала план страницы, тексты и рекомендация по макету, потом код — по одной секции за раз, чтобы диффы оставались обозримыми.

design-to-motion: макет, который оживает

Второй скилл решает другую задачу: показать дизайн живым, не перерисовывая его. Формула: точный кадр → пустое состояние → плавная загрузка → каждый визуал разыгрывает свою историю → бесшовный повтор.

Скилл различает два контекста. В шоу-кейсе анимируется весь кадр, а результат экспортируется в MP4 для X, GIF для сайта и GIF 800×500. На сайте оживают только подходящие секции: хиро, бенто-карточки, мокапы продукта. Текст остаётся живым HTML ради SEO и доступности, а экспорты делаются только по просьбе.

Точность превыше всего

Источник истины — Figma через REST API. Агент получает дерево слоёв, рендерит эталонный кадр и выгружает каждый движущийся элемент отдельным PNG в 3x. Если макет дан скриншотом, агент определяет пиксельную плотность, восстанавливает поверхности в CSS, «поднимает» текст и иконки из пикселей и вырезает фотографии. Скрытые области никогда не додумываются молча — пользователь узнаёт о каждом допущении до начала анимации.

Фон объявлен священным: он не двигается, не размывается и не перекрашивается никогда. Перед любой анимацией статичный кадр сравнивается с эталоном по метрике PSNR — отношению сигнала к шуму: цель — выше 35 dB на весь кадр и выше 30 dB на каждый контейнер.

Система движения

Каждый показ начинается с пустого состояния. Затем элементы приезжают снизу, из размытия в резкость, в порядке чтения с шагом 80–90 мс. Дальше начинается главное: каждый визуал разыгрывает свою историю в цикле. Список лидов получает новую запись. По графику едет курсор с подсказкой. Календарь ищет свободный слот. В поле промпта печатается текст. Одна история на карточку, три–восемь секунд, начало и конец — точно в исходном дизайне.

Полный цикл шоу-кейса занимает 12 секунд: сборка, истории, растворение в пустое состояние, короткая пауза — и заново.

Запись и экспорт

Ролик не записывается с экрана: страница снимается покадрово под управлением программного таймера, чтобы каждый прогон кадр в кадр совпадал с предыдущим. Результат — MP4 (H.264, 60 fps, до 1920×1200), GIF шириной 960 px и обязательный GIF 800×500. Перед кодированием прогоняются проверки: ничего не вылезает за границы карточек, стык цикла бесшовный, каждая история вернулась в точный исходный кадр.

Установка

Каждый скилл — обычный файл SKILL.md, поэтому установка сводится к копированию:

Без терминала, для Claude.ai: скачать SKILL.md и загрузить в Project либо прикрепить к чату со словами «следуй этому».

Настройка под себя

Все дизайн-решения каждого скилла — шрифты, цвета, отступы, параметры движения — собраны в одной секции в конце файла. Автор предлагает форкнуть репозиторий и изменить только её: остальной скилл подстроится автоматически.

Происхождение и лицензия

landing-page-design развивает идеи taste-skill Леона Лина. design-to-motion заимствует несколько общих правил анимации из коллекций emilkowalski/skills, Owl-Listener/designer-skills и dylantarre/animation-principles. Всё распространяется под MIT: можно использовать, форкать и продавать сделанное — упоминание авторов не требуется.

Для обновления существующего сайта, а не сборки с нуля, у того же автора есть отдельный репозиторий redesign-skill.