brand-landingpageавтор Seth Hobson

Brand Landing Page Skill.

Навык для Claude Code и Codex для UI-дизайна: сначала интервью о фирменном стиле, затем генерирует и итерирует посадочную страницу через Stitch.

Web и UI
UI-код

Скачать OpenDesign Инструкция по использованию

wshobson/agents · plugins/brand-landingpage/skills/brand-landingpage/SKILL.mdSKILL.md

--- name: brand-landingpage description: Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at … --- ## Phase 0: Prerequisites & Stitch Connection ## Phase 1: Brand Interview ## Phase 2: Design System Creation ## Phase 3: Generate & Review Loop ## Phase 4: Delivery Bundle ## Stitch Documentation

Метаданные и заголовки разделов прочитаны из исходного файла 2026-09-14 · 15 626 символов полностью

01 Что делает

Что делает Skill brand-landingpage в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Дизайнер лендингов, ориентированный на бренд, который проводит интервью из трёх частей (цель продукта, ощущение бренда, визуальные предпочтения), переводит ответы в дизайн-систему Stitch (сопоставляя прилагательные с colorVariant, шрифты — с headlineFont/bodyFont, формы — с roundness), генерирует экраны для десктопа и мобильных, ведёт итеративное уточнение через структурированную обратную связь (варианты, правки, откат) и предоставляет готовый к деплою пакет с версионированным HTML, DESIGN.md, цветовыми токенами и DEPLOY.md.

Для пользователей, создающих одностраничные лендинги или маркетинговые сайты продукта, у которых нет устоявшегося визуального направления. Не подходит для дашбордов, многостраничных приложений, работы на уровне компонентов или пользователей с готовыми дизайн-макетами.

Что он выдаёт

Готовый к деплою zip-пакет, содержащий index.html (десктоп), mobile.html (если сгенерирован), DESIGN.md, color-tokens.json, ассеты пользователя и чек-лист DEPLOY.md
DESIGN.md, документирующий дизайн-систему: ощущение бренда, направление цвета с hex-кодом и обоснованием, выбор типографики и описание округлости форм
color-tokens.json со структурированными дизайн-токенами: основной цвет, colorMode, colorVariant, шрифты, roundness
Чек-лист деплоя DEPLOY.md, сгенерированный из шаблона в references/state-and-pitfalls.md

Смотрите пример запроса ↗

Как это работает

01
Проверка SDK Stitch и окружения
Перед началом интервью skill устанавливает SDK, если он отсутствует, проверяет, что переменная окружения с API-ключом задана, и делает один минимальный вызов SDK для подтверждения авторизации.
02
Проведение интервью о бренде из трёх частей
Часть A фиксирует название продукта, его назначение, целевую аудиторию и желаемый CTA. Часть B фиксирует 3 прилагательных бренда и предпочтение светлой/тёмной темы.
03
Перевод результатов интервью в параметры Stitch
Skill сопоставляет прилагательные бренда с перечислением colorVariant, светлую/тёмную тему — с colorMode, предпочтение шрифта — с headlineFont и bodyFont, а острые/скруглённые формы — с перечислением roundness, используя таблицу соответствий.
04
Генерация экрана и открытие в браузере
Skill вызывает generate_screen_from_text с deviceType DESKTOP, сохраняет полученный HTML как desktop-v1.html в .stitch/designs/ и открывает его локально с помощью команды, специфичной для ОС.
05
Итерации по циклу обратной связи
После каждой генерации skill задаёт три вопроса для обратной связи, преобразует ответы пользователя в вызовы edit_screens для точечных изменений или generate_variants для исследования вариантов, а затем сохраняет новые версии с увеличенным номером в имени файла.
06
Подготовка пакета для развёртывания
Skill создаёт zip-архив с итоговым HTML, переименованным в index.html, mobile.html (если он был сгенерирован), DESIGN.md с описанием брендовой системы, color-tokens.json, ассетами пользователя и чек-листом DEPLOY.md.

02 Определите своё применение

Когда использовать навык brand-landingpage

Используйте навык brand-landingpage в Claude Code или Codex, когда задача — это UI-дизайн такого типа. Область применения и ограничения ниже взяты из собственного файла навыка.

Хорошо подходит

Пользователь просит создать, спроектировать или собрать лендинг, главную страницу или маркетинговую страницу, при этом у него нет устоявшегося визуального направления
Пользователь создал продукт, побочный проект или сервис и нуждается в лендинге, но пока мало думал о брендовой идентичности или визуальном направлении
Одностраничные лендинги и маркетинговые сайты продуктов

Знайте границы

У пользователя есть макет дизайна
Пользователю нужен дашборд или интерфейс приложения
Пользователь работает на уровне компонентов
Пользователь создаёт многостраничное приложение или делает рестайлинг с уже известными design-токенами (в этом случае используйте frontend-design)

Что предоставить

Название и назначение продуктаЧем занимается продукт, кто целевые пользователи и какое действие должны совершить посетители (зарегистрироваться, попробовать демо, встать в лист ожидания).
Три прилагательных брендаSkill предлагает набор прилагательных для выбора. Обязательно для перехода от фазы B к фазе C.
Предпочтение светлой или тёмной темыНапрямую отображается в параметр colorMode (LIGHT или DARK) в дизайн-системе Stitch.
Цветовое направлениеСуществующие цвета бренда или приложения в формате hex, либо общее ощущение цвета, если устоявшейся палитры нет. Отображается в параметр customColor.
Предпочтения по шрифту и формеПредпочтение современного или традиционного шрифта отображается в headlineFont и bodyFont.

03 Внутри скилла

Правила, которые skill brand-landingpage задаёт Claude Code и Codex

7 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

Никогда не показывать API-ключи
Skill никогда не должен показывать, расшифровывать или выводить API-ключ Stitch при проверке окружения или диагностике ошибок аутентификации.
Не запрашивать изображения
Skill не должен просить пользователей предоставить изображения или логотипы, поскольку Stitch не принимает загрузку изображений через API.
Версионировать HTML-файлы последовательно
Сохраняйте сгенерированный HTML как desktop-v1.html для первой генерации, desktop-v2.html для следующей итерации и так далее.
Всегда открывать обновлённый HTML в браузере
После каждой генерации, редактирования или выбора варианта skill должен сохранить обновлённый HTML из ответа Stitch и открыть локальный файл в браузере пользователя.
Предложение выпустить проект после 3 положительных раундов
После 3 раундов положительной обратной связи skill должен спросить: «Выглядит уверенно. Продолжаем итерации или выпускаем и дорабатываем позже?»
Четыре обязательных ответа интервью
Skill должен собрать название проекта, его назначение, целевую аудиторию и желаемый CTA перед переходом от Фазы A к Фазе B. Эти четыре пункта обязательны.
Не повторять неудачную генерацию сразу
Если генерация завершилась с ошибкой, не повторяйте попытку сразу. Используйте get_screen или list_screens, чтобы проверить, не завершился ли процесс асинхронно.

04 Применение

Установите brand-landingpage в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте brand-landingpage в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/wshobson/agents --skill brand-landingpage

Общая форма CLI skills для plugins/brand-landingpage/skills/brand-landingpage/SKILL.md; репозиторий может документировать свой собственный путь.

Дайте skill первую задачу по дизайну интерфейса

SKILL.md не включает пример промпта; этот стартовый написан на основе однострочного описания из каталога. Замените строку задачи на ваш реальный бриф.

Starter prompt

Use the brand-landingpage skill on the material I attach. What the skill should do here: Brand-identity interview first, then generates and iterates a landing page through Stitch. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Источник: стартовый промпт написан на основе однострочного описания из каталога (не из SKILL.md).

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Откройте сохранённый HTML-файл в браузере пользователя с помощью команды, специфичной для ОС (open на macOS, xdg-open на Linux, start на Windows), чтобы увидеть дизайн в полном качестве
Задайте три вопроса для обратной связи: первая реакция в первые 5 секунд, ощущается ли это как их продукт, и есть ли что-то, что кажется неверным или отсутствующим
Обратите внимание пользователя на конкретные аспекты дизайна: ясность сообщения, заметность CTA, соответствие цвета их прилагательным и порядок восприятия
Проверьте, что файл .stitch/metadata.json существует и содержит ID проекта, ID актива дизайн-системы, сводку интервью и историю экранов при возобновлении сессии
Следуйте контрольному списку по развёртыванию в DEPLOY.md, который охватывает хостинг, настройку домена, аналитику и замену изображений

В OpenDesign импортируйте brand-landingpage по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Seth Hobson
Repository: github.com/wshobson/agents Ветка main
Файл skill: plugins/brand-landingpage/skills/brand-landingpage/SKILL.md Контрольная сумма содержимого записана при верификации; коммит 4236bb9
License: MIT Из LICENSE.
Звёзды репозитория: 39 635 Снимок GitHub сделан 2026-09-14 для всего репозитория wshobson/agents, который содержит 18 skills в этом каталоге. Это не рейтинг и не счётчик использования brand-landingpage.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Фаза 0: Предварительные условия и подключение к StitchПроверьте установку SDK, переменную окружения с API-ключом и выполните минимальный тестовый вызов перед началом интервью
Справочные файлыУказывает, когда в процессе работы читать interview-framework.md, stitch-architecture.md и state-and-pitfalls.md
Обзор рабочего процессаЧетыре фазы: настройка, интервью из трёх частей, перевод в дизайн-систему, цикл генерации и проверки, комплект поставки
Фаза 1: Интервью о брендеТри части: назначение продукта, ощущение бренда через прилагательные, визуальные предпочтения по цвету, шрифту и форме
Фаза 2: Создание дизайн-системыПеревод ответов интервью в параметры Stitch с помощью таблицы соответствий, создание и обновление дизайн-системы, написание DESIGN.md
Фаза 3: Цикл генерации и проверкиГенерация экрана для десктопа, открытие в браузере, сбор обратной связи через три вопроса, итерации через редактирование или варианты
Фаза 4: Комплект поставкиУпаковка финального HTML, DESIGN.md, цветовых токенов, пользовательских ассетов и контрольного списка DEPLOY.md в версионированный zip-архив
Документация StitchСсылки на документацию по использованию SDK и примеры DESIGN.md на stitch-design.ai
Возобновление и восстановление после ошибокЗагрузка состояния из metadata.json, обработка ошибок генерации, ограничения скорости запросов и истёкших проектов при возобновлении

Собственное описание skill

«Дизайнер посадочных страниц с фокусом на бренд — проводит интервью по идентичности бренда (цвета, типографика, язык форм), затем создаёт и дорабатывает полированную посадочную страницу через Stitch с готовым к развёртыванию HTML. Используйте, когда пользователь просит создать, разработать или построить посадочную страницу, домашнюю страницу или маркетинговую страницу и у него нет чёткого визуального направления. Пропускайте, когда у них есть макет дизайна, нужен интерфейс приборной панели или приложения, они работают на уровне компонентов, создают многостраничное приложение или изменяют стили с известными токенами дизайна — вместо этого используйте frontend-design».

Описание из front-matter SKILL.md. Полный файл содержит около 15 626 символов. Прочитайте полный файл на GitHub.

06 Перед установкой

Вопросы о skill brand-landingpage

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Можно ли предоставить свой логотип или скриншоты продукта?

Stitch генерирует результат из текстовых запросов и не принимает загрузку изображений через API. Если вы прикрепите изображение, skill попросит вас своими словами описать его доминирующие цвета, настроение и язык форм, а затем учтёт эти характеристики в дизайне.

Ваш исходный файл сохраняется в bundle, поэтому вы можете вставить его в финальный HTML простой заменой тега img.

Почему нужно проходить интервью, а не сразу переходить к генерации?

Именно интервью создаёт большую часть ценности. Без него результат получился бы обычным шаблоном.

Интервью занимает около 5 минут и охватывает назначение продукта, целевую аудиторию, прилагательные бренда и визуальные предпочтения — skill преобразует это в дизайн-систему, которая действительно подходит вашему бренду, а не в универсальный результат.

Что я получу в итоге?

Готовый к развёртыванию zip-архив, содержащий финальный десктопный HTML, переименованный в index.html, mobile.html, если вы запросили мобильный вариант, DESIGN.md с описанием дизайн-системы вашего бренда, color-tokens.json со структурированными токенами дизайна, любые предоставленные вами ассеты и DEPLOY.md с чек-листом для развёртывания. Все промежуточные версии и состояние сохраняются в .stitch/ для справки.

brand-landingpage

Запустите brand-landingpage на реальной задаче UI-дизайна.

Загрузите OpenDesign, импортируйте brand-landingpage по его ссылке на SKILL.md, вставьте запрос выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/wshobson/agents --skill brand-landingpage