landing-page-design · 101-skills — скилл для Claude Code
Помогает спроектировать лендинг с понятным первым экраном, CTA и социальными доказательствами. Пригодится при работе над продуктовой или маркетинговой страницей.
npx skills add 101-skills/superpowers --skill landing-page-design -a claude-codeЧто делает landing-page-design
Скилл задаёт правила для лендинга: как собрать первый экран, сформулировать заголовок и подзаголовок, выбрать главный CTA и разместить социальные доказательства. Он также разбирает порядок секций, мобильный дизайн и чтение страницы по F-паттерну.
Для визуалов и поиска примеров используются команды belt app run: генерация изображений через falai/flux-dev-lora или bytedance/seedream-4-5, исследование страниц через tavily/search-assistant и exa/answer. Перед работой нужен CLI belt и вход через belt login.
Это зависимость, которую стоит проверить заранее: без belt скилл не выполнит указанные команды для изображений и исследований.
Какие задачи решает
- собрать первый экран с ценностью и CTA
- сформулировать заголовок, который описывает результат
- разместить социальные доказательства на странице
- подобрать изображение, показывающее итог использования
- выстроить порядок секций лендинга
Примеры запросов агенту
- Примени
landing-page-designк первому экрану лендинга и предложи заголовок, подзаголовок и CTA. - Используй
landing-page-design, чтобы переработать структуру продуктовой страницы и блоки социальных доказательств. - С
landing-page-designподготовь запрос дляbelt app run falai/flux-dev-loraна hero-изображение с результатом для пользователя.
Как установить landing-page-design
1Через Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill landing-page-design -a claude-code2Вручную: положить файлы
~/.claude/skills/landing-page-design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/landing-page-design/
1Через Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill landing-page-design -a codex2Вручную: положить файлы
.agents/skills/landing-page-design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill landing-page-design -a cursor2Вручную: положить файлы
.cursor/skills/landing-page-design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install 101-skills/superpowers landing-page-design2Вручную: положить файлы
.github/skills/landing-page-design/SKILL.md1Через Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill landing-page-design -a gemini-cli2Командой платформы
gemini skills install https://github.com/101-skills/superpowers --path guides/design/landing-page-designВручную: положить файлы
.devin/skills/landing-page-design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add 101-skills/superpowers --skill landing-page-design -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о landing-page-design
Как установить landing-page-design в Claude Code?
Выполните npx skills add 101-skills/superpowers --skill landing-page-design -a claude-code, затем повторите npx skills add 101-skills/superpowers --skill landing-page-design -a claude-code. Файл скилла находится по пути ~/.claude/skills/landing-page-design/SKILL.md.
Что делает landing-page-design?
Скилл помогает проектировать лендинги с правилами для первого экрана, hero-изображений, CTA, социальных доказательств и порядка блоков. Он также содержит команды belt для генерации визуалов и поиска материалов.
Что нужно для работы команд с изображениями и исследованиями?
Нужен CLI belt. Перед запуском команд требуется выполнить belt login.
Похожие скиллы
Всё по теме «Дизайн» →Сначала — landing-page-design от других авторов.
