Sentinel by Kayzen
Продавать продукт безопасности инженерам: каждое утверждение должно было быть доказуемым.
- Год
- 2026
- Разработка
- 4 недели
- Стек
- Next.js · React · TypeScript · Tailwind · Vercel
- Позиционирование
- Дизайн
- Разработка
- Техническое SEO
- Тексты

- заявленных ложных срабатыванийкаждая находка сопровождается воспроизводимым PoC
- 0
- до первого полезного рендерингастатический HTML, отдаваемый с CDN
- < 1 с
- сторонних доменов при загрузке
- 0
Какую задачу нужно было решить.
Контекст
Sentinel — платформа автономного тестирования на проникновение от Kayzen Web. ИИ-агенты не анализируют код: они запускают приложение, реально пытаются провести эксплуатацию и прикладывают к каждой подтверждённой уязвимости воспроизводимый proof-of-concept. Сайт — коммерческая витрина продукта и точка входа в пробный период.
Ограничение
Целевая аудитория — CISO, ведущие разработчики, платформенные команды — невосприимчива к маркетингу как никто другой. Сайт о безопасности, обещающий «полную защиту», теряет доверие с первой строки. Нужен был сайт, который вызывает интерес, никогда не обещая лишнего, и остаётся понятным нетехническому руководителю, пришедшему сравнить трёх подрядчиков.
Решение
Мы перевернули привычную иерархию: сначала доказательство, потом обещание. Главная страница сначала показывает фрагмент реального отчёта — уязвимость, эксплуатирующий запрос, предложенное исправление — и только потом аргументацию. Лексика остаётся профессиональной (PoC, ложное срабатывание, CVSS), потому что читатель её знает, а упрощение восприняли бы как некомпетентность.
Каждое решение — и его причина.
Тёмная тема по умолчанию, но не ради декора
Тёмная тема — конвенция отрасли: инструменты безопасности живут в терминале. Здесь она функциональна — блоки кода и фрагменты отчётов читают на странице больше всего, а тёмный фон уменьшает слепящий эффект при долгом чтении. Контраст текста и фона остаётся выше 7:1, то есть на уровне AAA, а не минимального AA.
Доказательство как компонент
Переиспользуемый компонент «фрагмент отчёта»: заголовок уязвимости, серьёзность по CVSS, запрос, ответ, исправление. Он появляется на странице четыре раза, с разными случаями. Это единственный анимированный элемент страницы — внимание направлено туда, где принимается решение о покупке.
Никаких абстрактных иллюстраций
Ни замков, ни щитов, ни каркасных глобусов. Визуальные материалы — снимки экрана самого инструмента. На этом рынке шаблонная иконография — самый надёжный признак того, что продукта ещё не существует.
Контролируемая плотность
Длина строки ограничена 68 символами, типографская шкала — плавная, на clamp(). Содержание плотное по своей природе; компенсировать это должна вёрстка, а не читатель.
Палитра проекта
Чернила
#0B1120
Фон страницы
Сланец
#1E293B
Карточки и блоки кода
Сигнал
#38BDF8
Ссылки и акценты
Тревога
#F43F5E
Только критическая серьёзность
Типографическая система
Заголовки
Inter (начертания 600–800)
Основной текст
Inter (400–500)
Одно семейство, две роли. Фрагменты отчётов набраны системным моноширинным стеком: дополнительные шрифты не загружаются.
Что внутри.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
Next.js со статической генерацией
Каждая страница генерируется при сборке. У витрины продукта нет динамических данных: постоянный серверный рендеринг стоил бы задержки и поверхности атаки — впустую. Полный HTML отдаётся с CDN.
Ноль сторонних зависимостей при загрузке
Ни шрифтов Google, ни внешних скриптов аналитики, ни iframe чата. На сайте о безопасности каждый сторонний домен, запрашиваемый при первом рендеринге, — аргумент против себя и реальная точка входа в цепочку поставок.
Полный набор заголовков безопасности
Строгая Content-Security-Policy, HSTS с preload, Referrer-Policy, Permissions-Policy, закрытая по умолчанию. Это минимум, которого ждут от разработчика средств безопасности, — и первый рефлекс технически подкованного клиента — открыть вкладку «Сеть» и проверить.
Открытый движок — без утайки
Исполняющий движок основан на open source проекте Strix. Сайт прямо говорит об этом и даёт ссылку, а не скрывает: для этой аудитории прозрачность технической основы ценнее чёрного ящика.
Как сайт становится находимым.
Сравнительные запросы вместо общих
«Автоматизированный пентест», «DAST или ручной пентест», «ложные срабатывания сканера уязвимостей» — запросы середины воронки, небольшие по объёму, но с очень сильным намерением. Бороться за «кибербезопасность» было бы бессмысленно.
Разметка SoftwareApplication
JSON-LD SoftwareApplication с категорией, операционной системой и предложением, плюс FAQPage с типичными возражениями («могут ли агенты сломать мой прод?»). Именно эти ответы цитируют ИИ-ассистенты.
Тщательно проработанные социальные метаданные
Продуктом делятся в Slack и LinkedIn между коллегами. Поэтому Open Graph и Twitter-карточка рассматриваются как канал привлечения — с отдельным изображением, а не логотипом.
Удобно для всех.
С июня 2025 года Европейский акт о доступности (European Accessibility Act) требует цифровой доступности для значительной части онлайн-сервисов. Мы закладываем её на этапе проектирования, а не исправляем задним числом.
Контраст AAA для основного текста
Тёмная тема — классическая ловушка: светло-серый на тёмно-сером. Все пары были измерены: основной текст — 12:1, второстепенные подписи — 7:1.
Блоки кода, доступные с клавиатуры
На мобильных фрагменты отчётов прокручиваются горизонтально: они получают фокус и объявляются как прокручиваемые области, иначе их содержимое недоступно без мыши.
Что было сдано.
- Главная — доказательство, обещание, пробный период
- Как это работает — цикл агентного аудита
- Отчёты — анатомия результата
- Тарифы
- Документация и открытый движок
Ход проекта.
Постановка задачи
Интервью с продуктовой командой, определение возражений и порядка их отработки.
Контент
Технические тексты, утверждённые инженерами до любого макета.
Дизайн
Тёмная система, компонент доказательства, типографская шкала.
Разработка
Статический Next.js, заголовки безопасности, бюджет производительности.
Запуск
Приёмка по безопасности, проверка заголовков, Search Console.
О чём нас часто спрашивают.
Другие проекты
Соответствие GDPR & SaaSKonsent by Kayzen
Разработчик баннеров, который сам же их проверяет, — судья в собственном деле: независимость и была продуктом.
Данные & МетеосервисMétéo Climat France
358 индексируемых страниц, анимированная карта на 72 срока — и ни одной строчки фреймворка.
Ремесло & СтроительствоBTP EA Rénovation
Шесть полей, и ни одним больше: форма — это и есть продукт.
Тот же уровень требований — для вашего сайта.
Бесплатный аудит вашего текущего сайта, смета в течение 24 часов и письменное обоснование — такое же, как то, что вы только что прочитали. Оплата в три этапа без переплаты; местные программы поддержки проверяются до подписания.