brand-landingpage
Создание лендинга с айдентикой бренда и интерактивным интервью
Большинство лендингов терпят неудачу, потому что пропускают этап проработки айдентики бренда. Этот скилл проводит пользователя через структурированное бренд-интервью, а затем генерирует готовый лендинг с соответствующей дизайн-системой с помощью Stitch SDK.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «brand-landingpage». Create a landing page for my API tool called DataPipe
Ожидаемый результат:
Скилл спрашивает о назначении продукта, затем предлагает выбрать 3 прилагательных для бренда, например «чистый», «техничный» и «современный». После подтверждения темной темы с индиго-акцентами генерируется десктопный лендинг с разделами: герой, пример кода, возможности и подвал.
Использование «brand-landingpage». The colors feel wrong, can you change them?
Ожидаемый результат:
Скилл уточняет, что именно не так с цветами: слишком яркие, слишком блеклые или не тот оттенок. После ответа «слишком яркие» генерируется приглушенный вариант с тем же расположением элементов, но скорректированной насыщенностью цветов.
Использование «brand-landingpage». I want to compare different layout options
Ожидаемый результат:
Скилл генерирует 3 варианта лендинга: с центральным героем, разделенной компоновкой и полноширинным заголовком. Все три открываются во вкладках браузера, и скилл спрашивает, какой вариант вам больше нравится.
Аудит безопасности
Низкий рискAll 295 static analysis findings were evaluated against actual file content. All 'weak cryptographic algorithm' findings are false positives caused by hex color codes in brand design reference tables. All 'Ruby/shell backtick execution' findings are false positives from markdown code blocks showing SDK method names and CLI commands. The 'C2 keywords', 'system reconnaissance', 'Windows SAM database', and 'Windows cmd.exe' findings are all false positives resulting from design terminology, brand interview questions, and legitimate file-opening instructions. The 'environment file access' finding is confirmed but represents proper API key management with documented security practices. The 'hardcoded URL' findings are low-severity documentation links for the Stitch SDK. The heuristic 'dangerous combination' finding is a false positive reflecting expected SDK integration patterns (API key + SDK calls + documentation references). No prompt injection, data exfiltration, or malicious intent was detected.
Проблемы низкого риска (1)
Факторы риска
⚙️ Внешние команды (7)
🌐 Доступ к сети (1)
🔑 Переменные окружения (1)
Оценка качества
Что вы можете построить
Запуск лендинга для побочного проекта
Разработчик, создающий CLI-инструмент или open-source проект, нуждается в лендинге, но не имеет опыта в дизайне. Этот скилл проводит бренд-интервью и генерирует профессиональную страницу.
Создание маркетингового сайта стартапа
Стартап на ранней стадии нуждается в лендинге для своего SaaS-продукта. Скилл помогает определить айдентику бренда и создает страницу с разделами возможностей, цен и отзывов.
Сборка портфолио разработчика
Разработчик или дизайнер хочет получить персональный лендинг-портфолио. Скилл проводит бренд-интервью и генерирует страницу с избранными проектами и разделом «О себе».
Попробуйте эти промпты
Create a landing page for my project called [Project Name]. It is a [description]. The target users are [audience].
I want to design a landing page for my product [Project Name]. Let me go through the brand interview to define my visual identity first.
The hero section on my landing page feels too plain. Can you generate a variant with a bolder layout and more color contrast? Keep the color scheme.
I have a saved design session from yesterday. Resume from where I left off and help me finalize the bundle for deployment.
Лучшие практики
- Пройдите бренд-интервью полностью, даже если хочется пропустить. Вопросы занимают 5 минут, но именно они превращают шаблонную страницу в страницу, которая подходит вашему продукту.
- Просматривайте сгенерированные страницы, открывая HTML в браузере, а не запрашивая текстовые описания. Визуальная обратная связь ведет к лучшим итерациям дизайна.
- Сохраните Stitch API-ключ в переменных окружения перед началом работы, чтобы скилл мог генерировать и дорабатывать дизайн без перебоев.
Избегать
- Просить скилл встроить логотип вашей компании или загрузить изображения. Stitch SDK генерирует на основе текстовых запросов и не принимает графические файлы.
- Давать обратную связь на уровне CSS, вроде «добавь padding-top: 40px». Формулируйте замечания через дизайн-намерение, например: «добавь больше воздуха над заголовком».
- Пропускать мобильную версию. Десктопный макет часто требует корректировок для мобильного просмотра, и генерация обеих версий обеспечивает единообразный пользовательский опыт.
Часто задаваемые вопросы
Нужен ли мне аккаунт Stitch для использования этого скилла?
Что произойдет, если моя сессия прервется?
Могу ли я использовать свои фирменные цвета?
Работает ли этот скилл с изображениями и логотипами?
Какие страницы может создавать этот скилл?
Можно ли редактировать HTML после генерации?
Сведения для разработчиков
Автор
wshobsonЛицензия
MIT
Репозиторий
https://github.com/wshobson/agents/tree/main/plugins/brand-landingpage/skills/brand-landingpage/Ссылка
main
Структура файлов