Дизайн веб-сайта AI-инфраструктуры

Спокойный лендинг среды выполнения агента

Этот официальный пример из комплекта представляет Halcyon как среду выполнения для долгоживущих AI-агентов. Авторский заголовок «Calmer infrastructure for the agents already running your business» рассматривает инфраструктуру как стабилизирующий слой, а не как ещё один интерфейс модели. Затем страница подкрепляет эту позицию видимыми примерами среды выполнения, расходов, задач и аудита.

Истории инфраструктуры с демонстрационными данными

Страница подходит инфраструктурным командам, которым нужно объяснить несколько технических аспектов в рамках единого маркетингового сценария. Её язык переходит от широкого обещания более спокойной работы агентов к конкретным примитивам, а затем — к доступу для реализации через SDK и CLI. Такая последовательность даёт техническим читателям причину продолжить изучение, не превращая вступление в страницу документации.

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

От макета среды выполнения к приглашению к разговору о продажах

Центрированная плавающая pill-навигация знакомит с Halcyon, Platform, Metrics, Docs, Changelog и Get started. Hero-блок использует разделение 1.05fr/0.95fr между крупным заголовком и скруглённым макетом среды выполнения. Немного более широкая текстовая колонка несёт основную идею, а вложенная оболочка карточки выделяет демонстрационные метрики в отдельный визуальный контейнер. Это облегчает представление предлагаемого продукта, но карточка не является операционным доказательством.

Заголовок переносится на крупные строки, переходя от «Calmer infrastructure» к «for the agents already running your business». Серое оформление второй фразы создаёт визуальный переход между категорией продукта и его аудиторией. Такой акцент делает обещание запоминающимся, хотя из-за масштаба требуется внимательно обработать адаптивное поведение на более узких экранах.

1. Начните с макета среды выполнения

   Начните с заявления о продукте, затем разместите рядом с ним панель среды выполнения. Подпись «research-agent / tier-3», строка статуса, карточка расходов, карточка задач и запись аудита показывают, что именно должна организовывать инфраструктура.

2. Разверните историю в шесть примитивов

   Сетка платформы представляет шесть пронумерованных карточек: идентификация, расходы, аудит, песочница, маршрутизация и эргономика. Идентификация занимает высокую ячейку с образцом кода, рядом расположены расходы и аудит; для трёх последних используются более короткие ячейки. Во вступлении к источнику сказано «Five primitives», хотя визуально отображаются шесть. Сохраните структуру из шести карточек как наблюдаемую, а это расхождение рассматривайте как демонстрационный текст, а не как подтверждённую таксономию продукта.

3. Завершите страницу одним действием

   В завершающей панели фон становится тёмным, а по центру появляется «Less duct tape between the model and the bill». Короткое сообщение о пробном периоде и ценах ведёт к «Talk to an engineer», оставляя странице одно финальное действие вместо конкурирующих вариантов завершения.

Границы области применения и возможностей

Halcyon — это концепция лендинга, предназначенная только для демонстрации дизайна. Кнопки не имеют бизнес-обработчиков; только ссылка Platform ведёт к соответствующему разделу. Цели Metrics, Docs и Changelog отсутствуют, а ссылки в футере являются заполнителями. Демонстрационные значения аптайма, расходов, количества задач, задержки, финансирования и безопасности не являются свидетельствами работы сервиса. Названия в движущейся строке компаний не подтверждают наличие клиентов или рекомендаций, а текст SOC 2/ISO 27001 не подтверждает сертификацию. Для доступа к консоли, биллинга, маршрутизации, хранения данных и связи с отделом продаж потребуется отдельная реализация.

Мягкость создают серебристый холст, Plus Jakarta Sans, акценты шалфейного оттенка и вложенные скруглённые оболочки, а не работающая инфраструктурная система. CSS добавляет дрейфующую фоновую сетку, пульсирующую точку статуса и непрерывно перемещающуюся строку с названиями компаний, которая останавливается при наведении. IntersectionObserver показывает разделы по мере их появления в области просмотра. Правила reduced-motion отключают дрейф сетки и появление разделов, но не отключают пульсацию или бегущую строку; при адаптации дизайна учитывайте эти оставшиеся анимации.

Источник и атрибуция

OpenDesign является дистрибьютором Community. В документации источника Taste Skill by Leonxlnx указан как автор рекомендаций по мягкому визуальному стилю и анимации: https://github.com/Leonxlnx/taste-skill. Сохраните эту роль источника, не подразумевая личное авторство этого образца или независимое авторство OpenDesign в отношении исходного направления. В манифесте для входящего в комплект плагина заявлена лицензия MIT; это не устанавливает отдельные права на каждый изображённый объект.