плагин

landing — плагин для Claude Code: одностраничник в одном HTML-файле

Q: Как установить landing в Claude?

Добавьте маркетплейс: `/plugin marketplace add alirezarezvani/claude-skills`, затем установите плагин: `/plugin install landing@claude-code-skills`.

Q: Чем landing отличается от landing-page-generator?

`landing-page-generator` из `product-team` выдаёт Next.js TSX и Tailwind под конверсию и A/B-тесты. Этот плагин делает один HTML-файл с GSAP-анимацией — когда важнее визуальное впечатление.

Собирает премиальный лендинг в одном самодостаточном HTML-файле: GSAP-анимации, параллакс за курсором, три секции.

Установить в Claude Code · Через маркетплейс плагинов Все способы и платформы ↓

/plugin marketplace add alirezarezvani/claude-skills
/plugin install landing@claude-code-skills

Открыть на GitHub

Что делает landing

Плагин задаёт 3–4 вопроса по очереди, и без ответов дальше не идёт. Сначала название продукта и питч в одно-два предложения, потом аудитория (техническая, бизнес, потребители, внутренняя), затем тон и цвета бренда. По умолчанию тёмно-синий с бирюзовым; можно дать свой primary HEX, акцент и фон — если указать только primary, остальное выводится алгоритмически.

На выходе один .html файл: hero на 100vh с анимацией входа по таймлайну GSAP и слоями глубины за заголовком, блок фич сеткой в три колонки (две на 900px, одна на 580px) с SVG-иконками и появлением по скроллу, финальный призыв с радиальным свечением за кнопкой. CSS и JS внутри файла, снаружи только Google Fonts и GSAP через CDN. Путь — ${OUTPUT_DIR}/<product-name-kebab>.html, по умолчанию ./landing-pages/.

Внутри есть три скрипта на стандартной библиотеке Python: brand_palette_validator.py проверяет HEX и контраст по WCAG, kebab_slug_generator.py делает слаг из названия и ловит дубли, html_validator.py проверяет структуру после генерации. Это не то же самое, что product-team/skills/landing-page-generator/: тот отдаёт Next.js TSX под конверсию и лидогенерацию, а этот — под визуальный одностраничник. Если цель — чтобы посетитель оставил заявку, берите второй; здесь страница сама должна впечатлять.

Какие задачи решает

собрать лендинг под запуск продукта одним файлом
задать фирменные цвета и проверить их на контраст до генерации
получить анимации входа и появления блоков по скроллу без ручной вёрстки
сделать слаг из названия продукта и не наткнуться на дубль
проверить структуру готового HTML после генерации

Примеры запросов агенту

/cs-landing
создай лендинг для Quill AI, питч: помощник для написания текстов
собери одностраничник с primary #FF6B35 и акцентом #2EC4B6

Как установить landing

Через маркетплейс плагинов

/plugin marketplace add alirezarezvani/claude-skills

/plugin install landing@claude-code-skills

По шагам, с командами для каждой платформы: Плагины Claude Code: маркетплейсы, установка и как собрать свой

Вопросы о landing

Как установить landing в Claude?

Добавьте маркетплейс: /plugin marketplace add alirezarezvani/claude-skills, затем установите плагин: /plugin install landing@claude-code-skills.

Что делает landing?

Проводит короткий опрос по продукту, аудитории, бренду и тону, а потом генерирует один самодостаточный HTML-файл с hero, блоком фич и финальным призывом.

Чем landing отличается от landing-page-generator?

landing-page-generator из product-team выдаёт Next.js TSX и Tailwind под конверсию и A/B-тесты. Этот плагин делает один HTML-файл с GSAP-анимацией — когда важнее визуальное впечатление.

Исходный текст

landing · MIT

# landing

Premium single-file HTML landing page generator. Outputs one polished `.html` file with GSAP 3D animations, scroll-triggered reveals, and mouse-parallax depth — all CSS inline, all JS inline, only externals are Google Fonts + GSAP via CDN.

## Important: distinct from `product-team/skills/landing-page-generator/`

This is **NOT** the same skill as the existing `landing-page-generator` in `product-team/`. They serve different needs:

| Skill | Output format | Optimization target | Animation approach | When to use |
|---|---|---|---|---|
| **`marketing/landing/`** (this skill) | Single self-contained `.html` file | **Visual premium / one-pager** | GSAP 3D + mouse parallax + scroll-trigger | Launch page, product showcase, brand site where the page IS the experience |
| **`product-team/skills/landing-page-generator/`** | Next.js TSX components + Tailwind | **Conversion / lead-gen** | Static, copy-framework-driven (PAS / AIDA / BAB) | Lead capture, A/B test variants, campaign pages where conversion rate is the goal |

If you want the prospect to **convert** → use `landing-page-generator`.
If you want the prospect to **be impressed** → use `landing`.

Both are valid; they sit at different points on the visual-premium / conversion-optimization axis.

## What this skill does

Run via `/cs-landing` or trigger phrases like "create a landing page" / "build a landing page".

The skill walks **3–4 forcing intake questions** (one at a time, dependency-ordered):

1. **Product / service** — name + 1–2 sentence elevator pitch (refuses vague answers)
2. **Audience register** — technical / business / consumer / internal (forcing choice)
3. **Brand overrides** — default dark navy + teal, OR provide primary HEX + accent HEX + optional bg HEX (algorithmic derivation if only primary given)
4. **Tone** — professional / playful / authoritative / minimal (forcing choice)

Then generates a single `.html` file with three sections:

- **Hero** — 100vh, animated entrance via GSAP timeline, depth layers behind H1, mouse parallax
- **Features** — 3-column grid (responsive: 2-col at 900px, 1-col at 580px), SVG icons, scroll-triggered card reveals
- **Closing CTA** — ambient radial-gradient glow behind button, large closing headline

Output path: `${OUTPUT_DIR}/<product-name-kebab>.html` (default `${OUTPUT_DIR}=./landing-pages/`).

## Plugin layout

```
marketing/landing/
├── .claude-plugin/plugin.json
├── README.md
├── agents/cs-landing.md             ← landing-generation persona, FOUC-prevention enforcer
├── commands/cs-landing.md           ← /cs-landing
└── skills/landing/
    ├── SKILL.md                     ← Path-B converted from megaprompt 04
    ├── references/
    │   ├── brand_system_design.md   ← color theory + override patterns (7+ sources)
    │   ├── gsap_animation_patterns.md  ← entrance + scroll-trigger + parallax + CSS floats (7+ sources)
    │   └── single_file_html_discipline.md  ← why inline + CDN-only externals (7+ sources)
    └── scripts/
        ├── brand_palette_validator.py  ← stdlib: HEX validation + WCAG contrast + derived palette
        ├── kebab_slug_generator.py     ← stdlib: product-name → kebab slug + duplicate detection
        └── html_validator.py           ← stdlib: post-generation structural check
```

## Quick start

```bash
# Validate a brand override before generation
python skills/landing/scripts/brand_palette_validator.py \
  --primary "#FF6B35" --accent "#2EC4B6" --bg "#011627"

# Generate output filename
python skills/landing/scripts/kebab_slug_generator.py \
  --product "Quill AI" --output-dir ./landing-pages

# Validate generated HTML structurally
python skills/landing/scripts/html_validator.py --file ./landing-pages/quill-ai.html
```

## Source spec

`megaprompts/04-landing-megaprompt.md` (maintainer-local draft spec — gitignored, not in the public repo) (PR #657). The megaprompt is canonical; this plugin is the working implementation. Drift between the two is a bug — re-grill with `/cs-grill-with-docs` if they diverge.

## License

MIT.

Из того же набора394

Весь набор →