Наступательная кибербезопасность & SaaS

Sentinel by Kayzen

Продавать продукт безопасности инженерам: каждое утверждение должно было быть доказуемым.

Год
2026
Разработка
4 недели
Стек
Next.js · React · TypeScript · Tailwind · Vercel
  • Позиционирование
  • Дизайн
  • Разработка
  • Техническое SEO
  • Тексты
https://sentinel.kayzen-lyon.com/
Главная страница сайта Sentinel by Kayzen — Наступательная кибербезопасность & SaaS, создан Kayzen Web
заявленных ложных срабатыванийкаждая находка сопровождается воспроизводимым PoC
0
до первого полезного рендерингастатический HTML, отдаваемый с CDN
< 1 с
сторонних доменов при загрузке
0
Отправная точка

Какую задачу нужно было решить.

Контекст

Sentinel — платформа автономного тестирования на проникновение от Kayzen Web. ИИ-агенты не анализируют код: они запускают приложение, реально пытаются провести эксплуатацию и прикладывают к каждой подтверждённой уязвимости воспроизводимый proof-of-concept. Сайт — коммерческая витрина продукта и точка входа в пробный период.

Ограничение

Целевая аудитория — CISO, ведущие разработчики, платформенные команды — невосприимчива к маркетингу как никто другой. Сайт о безопасности, обещающий «полную защиту», теряет доверие с первой строки. Нужен был сайт, который вызывает интерес, никогда не обещая лишнего, и остаётся понятным нетехническому руководителю, пришедшему сравнить трёх подрядчиков.

Решение

Мы перевернули привычную иерархию: сначала доказательство, потом обещание. Главная страница сначала показывает фрагмент реального отчёта — уязвимость, эксплуатирующий запрос, предложенное исправление — и только потом аргументацию. Лексика остаётся профессиональной (PoC, ложное срабатывание, CVSS), потому что читатель её знает, а упрощение восприняли бы как некомпетентность.

Дизайн и арт-дирекшн

Каждое решение — и его причина.

  1. Тёмная тема по умолчанию, но не ради декора

    Тёмная тема — конвенция отрасли: инструменты безопасности живут в терминале. Здесь она функциональна — блоки кода и фрагменты отчётов читают на странице больше всего, а тёмный фон уменьшает слепящий эффект при долгом чтении. Контраст текста и фона остаётся выше 7:1, то есть на уровне AAA, а не минимального AA.

  2. Доказательство как компонент

    Переиспользуемый компонент «фрагмент отчёта»: заголовок уязвимости, серьёзность по CVSS, запрос, ответ, исправление. Он появляется на странице четыре раза, с разными случаями. Это единственный анимированный элемент страницы — внимание направлено туда, где принимается решение о покупке.

  3. Никаких абстрактных иллюстраций

    Ни замков, ни щитов, ни каркасных глобусов. Визуальные материалы — снимки экрана самого инструмента. На этом рынке шаблонная иконография — самый надёжный признак того, что продукта ещё не существует.

  4. Контролируемая плотность

    Длина строки ограничена 68 символами, типографская шкала — плавная, на clamp(). Содержание плотное по своей природе; компенсировать это должна вёрстка, а не читатель.

Палитра проекта

  • Чернила

    #0B1120

    Фон страницы

  • Сланец

    #1E293B

    Карточки и блоки кода

  • Сигнал

    #38BDF8

    Ссылки и акценты

  • Тревога

    #F43F5E

    Только критическая серьёзность

Типографическая система

Заголовки

Inter (начертания 600–800)

Основной текст

Inter (400–500)

Одно семейство, две роли. Фрагменты отчётов набраны системным моноширинным стеком: дополнительные шрифты не загружаются.

Разработка

Что внутри.

  • Next.js
  • React
  • TypeScript
  • Tailwind
  • Vercel
  1. Next.js со статической генерацией

    Каждая страница генерируется при сборке. У витрины продукта нет динамических данных: постоянный серверный рендеринг стоил бы задержки и поверхности атаки — впустую. Полный HTML отдаётся с CDN.

  2. Ноль сторонних зависимостей при загрузке

    Ни шрифтов Google, ни внешних скриптов аналитики, ни iframe чата. На сайте о безопасности каждый сторонний домен, запрашиваемый при первом рендеринге, — аргумент против себя и реальная точка входа в цепочку поставок.

  3. Полный набор заголовков безопасности

    Строгая Content-Security-Policy, HSTS с preload, Referrer-Policy, Permissions-Policy, закрытая по умолчанию. Это минимум, которого ждут от разработчика средств безопасности, — и первый рефлекс технически подкованного клиента — открыть вкладку «Сеть» и проверить.

  4. Открытый движок — без утайки

    Исполняющий движок основан на open source проекте Strix. Сайт прямо говорит об этом и даёт ссылку, а не скрывает: для этой аудитории прозрачность технической основы ценнее чёрного ящика.

SEO-продвижение

Как сайт становится находимым.

  1. Сравнительные запросы вместо общих

    «Автоматизированный пентест», «DAST или ручной пентест», «ложные срабатывания сканера уязвимостей» — запросы середины воронки, небольшие по объёму, но с очень сильным намерением. Бороться за «кибербезопасность» было бы бессмысленно.

  2. Разметка SoftwareApplication

    JSON-LD SoftwareApplication с категорией, операционной системой и предложением, плюс FAQPage с типичными возражениями («могут ли агенты сломать мой прод?»). Именно эти ответы цитируют ИИ-ассистенты.

  3. Тщательно проработанные социальные метаданные

    Продуктом делятся в Slack и LinkedIn между коллегами. Поэтому Open Graph и Twitter-карточка рассматриваются как канал привлечения — с отдельным изображением, а не логотипом.

Доступность

Удобно для всех.

С июня 2025 года Европейский акт о доступности (European Accessibility Act) требует цифровой доступности для значительной части онлайн-сервисов. Мы закладываем её на этапе проектирования, а не исправляем задним числом.

  1. Контраст AAA для основного текста

    Тёмная тема — классическая ловушка: светло-серый на тёмно-сером. Все пары были измерены: основной текст — 12:1, второстепенные подписи — 7:1.

  2. Блоки кода, доступные с клавиатуры

    На мобильных фрагменты отчётов прокручиваются горизонтально: они получают фокус и объявляются как прокручиваемые области, иначе их содержимое недоступно без мыши.

Структура сайта

Что было сдано.

  • Главная — доказательство, обещание, пробный период
  • Как это работает — цикл агентного аудита
  • Отчёты — анатомия результата
  • Тарифы
  • Документация и открытый движок
Метод

Ход проекта.

  1. Постановка задачи

    Интервью с продуктовой командой, определение возражений и порядка их отработки.

  2. Контент

    Технические тексты, утверждённые инженерами до любого макета.

  3. Дизайн

    Тёмная система, компонент доказательства, типографская шкала.

  4. Разработка

    Статический Next.js, заголовки безопасности, бюджет производительности.

  5. Запуск

    Приёмка по безопасности, проверка заголовков, Search Console.

Вопросы

О чём нас часто спрашивают.

Потому что его аудитория проверяет. Технически подкованный клиент открывает инструменты разработчика раньше, чем читает текст: если он найдёт там шесть сторонних трекеров и отсутствующую политику безопасности, никакая аргументация уже не поможет.

Да, если покупатель — эксперт: промышленность, здравоохранение, инжиниринг, консалтинговые фирмы. Правило то же — показать реальный результат, прежде чем его описывать.

Тот же уровень требований — для вашего сайта.

Бесплатный аудит вашего текущего сайта, смета в течение 24 часов и письменное обоснование — такое же, как то, что вы только что прочитали. Оплата в три этапа без переплаты; местные программы поддержки проверяются до подписания.

Поделиться