Magerko

Landing Skill — Development skill for Claude Code

Development community

Скилл для Claude Code: лендинги, которые не выглядят как вайб-код.

How to install Landing Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Magerko/landing-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Landing Skill does

Скилл для Claude Code: лендинги, которые не выглядят как вайб-код.

Alternatives in Development

15 — Build a Next.js 14 portfolio landing page with a full-screen hero section and an animated loading screen 152 ★
Anatomy — A Claude Code skill that turns a technical idea into a detailed, interactive isometric figure of a real machin 96 ★
Xuanji Landing — 玄机 XuanJi · Claude 客户端 + Claude Code Agent · 国内直连 Claude Sonnet 4.6 / Opus 4.7 / DeepSeek v4 · Claude 防封不退款, C 86 ★

README

landing

Скилл для Claude Code, с которым лендинги перестают выглядеть как вайб-код.

Я сделал его после того, как посмотрел два ролика с чеклистами «почему ваш сайт выглядит сгенерированным» и попробовал просто скормить эти списки модели. Не сработало: запрещаешь фиолетовый градиент и Inter, получаешь кремовый фон с зелёным и другой модный гротеск. Шаблон остаётся, меняется только поколение.

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

Было и стало

Одно и то же короткое ТЗ: лендинг клининговой компании в Киеве, без логотипа, цветов, фото и отзывов.

Без скилла:

![Лендинг без скилла](examples/without-skill.png)

Со скиллом:

![Лендинг со скиллом](examples/with-skill.png)

Первый вариант аккуратный, но если заменить название, это может быть сайт кофейни или стоматологии. Во втором видно, чем занимается компания, ещё до того, как прочитан заголовок.

Что делает скилл

Работа идёт в семь шагов:

Бриф. Что продаётся, кто приходит, одно целевое действие, какие факты есть в ТЗ, а каких нет.
Контент раньше дизайна. Тексты пишутся до вёрстки. Отзывы, счётчики и логотипы клиентов берутся только из ТЗ. Нет данных — нет секции.
Дизайн-решения. Три разных направления на выбор, палитра и шрифт из мира услуги, один запоминающийся элемент.
Структура. Секции идут по вопросам посетителя, а не по набору «преимущества, отзывы, тарифы».
Вёрстка. По умолчанию статический HTML и CSS без сборки, состояния кнопок и форм, мобильная ширина от 360 px.
Законченность. Favicon, картинка для превью ссылки, 404, политика конфиденциальности, никаких мёртвых ссылок.
Аудит. Скриншоты в браузере, отдельный проход по мобильной версии, сверка с чеклистом признаков.

Есть и второй режим: аудит уже готового лендинга с находками по приоритету.