brand-landingpage — плагин для Claude Code: лендинг от бренда до HTML
Проводит интервью о бренде, генерирует лендинги через Stitch и отдаёт готовый HTML-бандл. Пригодится, когда продукт есть, а палитры, шрифтов и структуры страницы ещё нет.
/plugin marketplace add wshobson/agents
/plugin install brand-landingpage@claude-code-workflowsЧто делает brand-landingpage
Плагин запускает структурированное интервью: 10 вопросов в 3 фазах — продукт и цель, ощущение от бренда, визуальные предпочтения. На расплывчатые или противоречивые ответы он задаёт уточняющие вопросы. Дальше прилагательные переводятся в параметры Stitch: палитра, пара шрифтов, направление форм, цветовой режим.
Сгенерированная страница открывается в браузере, и вы правите её словами. Фраза вроде «выглядит слишком корпоративно» превращается в конкретные операции Stitch. Можно менять отдельные секции, пробовать варианты по вёрстке, цвету и типографике, откатываться к прежним версиям. Если дадите логотип или скриншот, плагин вытащит из них стилевые подсказки и сохранит оригиналы для передачи разработчику.
На выходе — zip с финальным HTML, дизайн-токенами в JSON, документацией по бренду и чек-листом деплоя. Нужен Node.js 18+, а ключ API вы получаете в веб-приложении Stitch: плагин сам проведёт через настройку при первом запуске и поставит SDK. Бесплатного тарифа Stitch хватает на всю функциональность. Учтите: Stitch делает статический HTML — без JS-интерактива, форм и анимаций, а картинки через его API не загружаются. После деплоя придётся заменить плейсхолдеры изображений, подключить ссылку CTA и добавить аналитику.
Какие задачи решает
- пройти интервью о бренде и зафиксировать палитру со шрифтами
- сгенерировать лендинг по описанию продукта через Stitch
- перевести замечание «слишком корпоративно» в правки дизайна
- откатить страницу к более ранней версии
- собрать zip с HTML, дизайн-токенами и чек-листом деплоя
Примеры запросов агенту
- Сделай лендинг для моего проекта
- Проведи интервью о бренде и собери страницу
- Слишком корпоративно — переделай секцию с ценами
Как установить brand-landingpage
Через маркетплейс плагинов
/plugin marketplace add wshobson/agents/plugin install brand-landingpage@claude-code-workflowsПо шагам, с командами для каждой платформы: Плагины Claude Code: маркетплейсы, установка и как собрать свой
Вопросы о brand-landingpage
Как установить brand-landingpage в Claude?
Добавьте маркетплейс командой /plugin marketplace add wshobson/agents, затем поставьте плагин: /plugin install brand-landingpage@claude-code-workflows.
Что делает brand-landingpage?
Проводит интервью о бренде, переводит ответы в параметры Stitch, генерирует и итеративно правит лендинг, а в конце отдаёт zip с HTML, дизайн-токенами и документацией.
Что нужно для работы плагина?
Node.js 18+ и ключ API Stitch. Плагин при первом запуске подскажет, где взять ключ, и установит SDK; бесплатного тарифа Stitch хватает на всю функциональность.
Исходный текст
brand-landingpage · MIT
# Brand Landing Page
A Claude Code skill that runs a structured brand discovery interview, generates iterative landing pages via Stitch, and delivers a deployment-ready HTML bundle.
Turn brand decisions you haven't made yet into a landing page you'd actually ship.
## When To Use
You have a product, side project, or service that needs a landing page. You can build the product but haven't established a brand direction — color palette, font pairing, visual hierarchy, or page structure. This skill handles the design decisions you'd otherwise skip or guess at.
Just ask Claude to create a landing page for your project. The skill takes it from there.
## What It Does
- **Brand discovery interview** — 10 questions across 3 phases (Product & Purpose, Brand Feel, Visual Preferences) with follow-up triggers for vague or contradictory answers
- **Design system translation** — maps brand adjectives to Stitch parameters: color palette, font pairing, shape direction, color mode
- **Visual feedback loop** — generates landing pages, opens them in your browser, translates feedback ("it looks too corporate") into targeted Stitch operations
- **Iteration** — edit specific sections, explore variants across layout/color/typography, roll back to earlier versions
- **Image handling** — extracts style cues from logos or screenshots you provide, saves originals for developer handoff
- **Delivery bundle** — final HTML, design tokens (JSON), brand documentation, and deployment checklist as a zip
## Setup
Stitch's free tier (350 standard + 200 experimental generations/month) covers all skill functionality — no paid plan required.
The skill walks you through Stitch setup the first time you use it: it'll point you to the Stitch web app for an API key and handle the SDK installation.
Requires Node.js 18+.
## File Structure
```
brand-landingpage/
.claude-plugin/
plugin.json
skills/
brand-landingpage/
SKILL.md # Main skill instructions
references/
interview-framework.md # Brand discovery question bank and feedback guide
stitch-architecture.md # Font/color/prompt/section reference
state-and-pitfalls.md # State schema, pitfalls, DEPLOY.md template
README.md
```
## Limitations
- Stitch generates static HTML (no JS interactivity, no forms, no animations)
- No image upload via Stitch API — logos and images are saved in the bundle for manual integration
- You'll need to replace placeholder images, wire up the CTA link, and add analytics after deployment
© Travis D. Elliott · MIT · wshobson/agents
