Как повторить
- Установите Node.js, если его нет.
- В терминале, в папке проекта, выполните:
npx skills add elayadesign/ai-design-skills --skill landing-page-design- Программа спросит, для каких агентов ставить. Выберите Claude Code, Cursor, Codex или Windsurf. Чтобы пропустить вопросы, добавьте флаг
-a claude-code -y. - Для Claude Code файл ляжет в
.claude/skills/landing-page-design/SKILL.md, для остальных агентов в папку.agents/skills/. - Откройте агента в этой папке и попросите собрать лендинг обычными словами. Файл подключается сам на любой запрос про лендинг, маркетинговую страницу или секцию сайта.
- Агент сначала задаст вопросы: цель, аудитория, оффер, три главных возражения клиента. После ответов он соберёт страницу по порядку: шапка, выгоды, как это работает, доказательства, FAQ, финальный призыв к действию.
- Для своего бренда откройте внутри файла раздел Part B и поправьте шрифты, цвета фонов в HEX и текстовые стили. Это единственное место, которое по инструкции стоит менять руками.
Как проверить результат
Соберите тестовый лендинг под выдуманный продукт и сверьтесь с чек-листом в конце файла. Шрифт не Inter, Arial или Roboto, размеры текста идут по шкале Tailwind, отступы только из таблицы B2, фон без градиента (кроме текста заголовка в первом экране), есть своя страница 404 и состояния кнопок при наведении, нажатии, фокусе и загрузке. Если агент всё равно ставит Inter и дефолтные тени, проверьте, что файл лежит в .claude/skills/, или прямо попросите агента следовать правилам из него.
Как это устроено
Без ограничений модель повторяет то, что чаще всего видела в обучающих данных: Inter, шаблонные тени, случайные размеры в пикселях. Файл сужает выбор: четыре разрешённых шрифта, типографика по шкале Tailwind с именованными стилями (Heading 1–6, Body 1–6), тринадцать значений отступов и ничего между ними.
Скругления вложенных карточек считаются по формуле inner = outer - gap, если результат больше 2. Так внутренние и внешние углы совпадают, и страница не выглядит дешёвой. Раздел B8 запрещает слова вроде revolutionize и cutting edge и требует реальных имён и чисел вместо заглушек.
Ссылки
- elayadesign/ai-design-skills: репозиторий с файлом и инструкцией по установке. Бесплатно, MIT.
- landing-page-design/SKILL.md: сам файл правил, можно прочитать до установки. Бесплатно.
- skills.sh: каталог, через который ставится файл, со счётчиком установок (2,6К на 1 ноября). Бесплатно, сам каталог делает Vercel.
- redesign-skill: файл того же автора для переделки готового сайта. Бесплатно, MIT.
- Leonxlnx/taste-skill: похожий набор правил, из которого взята часть идей — сам автор это прямо указывает в разделе Credits файла. Бесплатно, MIT.
Источник: kirill.dobrelia, Instagram Reels.