Готовые шаблоны страниц под разные задачи
Тестовая выборка из коллекции Open Design — каждый пример это самостоятельная HTML-страница, написанная LLM-агентом по заданию дизайн-системы. Кликай карточку чтобы открыть пример.
AIVEXA · бренд-хаб
9 карточек · токены, реестр @aivexa, эталоны
Единый бренд AIVEXA для людей и агентов: токены из Figma, шрифт Golos Text, ассеты и shadcn-реестр
@aivexa на 38 элементов. Агент начинает с llms.txt,
соблюдает rules.md, ставит компоненты командой
npx shadcn add @aivexa/… и собирает экран по одному из пяти эталонов.
Полный свод — DESIGN.md.
Бренд-хаб для агентов
Точка входа для LLM-агента по конвенции llms.txt: порядок действий при вёрстке, карта ресурсов (правила, свод, токены, реестр с «когда применять» для каждого из 38 элементов, ассеты, эталоны) и вариант без React — чистый HTML на CSS-переменных.
Правила
Короткий императивный свод: только токены и Golos, только компоненты @aivexa, шкалы отступов/радиусов/кегля числами, шесть обязательных состояний, обе темы, адаптив и контраст с известными исключениями, do/don’t с кодом и чек-лист с командами.
Реестр компонентов
Витрина всех компонентов реестра и их состояний в светлой и тёмной теме: кнопки, поля, таблица, меню, диалог, сайдбар, чат, KPI. Ставятся командой npx shadcn add @aivexa/<name>, индекс — /r/registry.json.
Дашборд «ОТК Сделки»
Каркас app-shell, KPI-карточки со счётчиками, табы, поиск и фильтры, таблица с бейджами и меню «⋯», пагинация, лента уведомлений. Light/dark, 1440 и 390.
Чат с моделью
Свёрнутый сайдбар + панель истории, сообщения пользователя и ассистента, вложения, таблица в ответе, поле запроса с выбором модели и тосты.
Сотрудники и отделы
Таблица с выбором строк и экспортом, фильтры, диалог создания отдела (field, select, radio), карточки отделов со свитчами. Вкладки ?tab=departments, ?dialog=1.
Настройки профиля
Форма в карточках: аватар со сменой фото, поля с подсказкой и ошибкой, select, textarea, свитчи уведомлений, radio, выбор темы, «Сохранить» с loading и тостами.
Лендинг AIVEXA
Шапка, hero с волной (светлая) или свечением (тёмная), сетки преимуществ, карточки моделей и финальный призыв — блоки landing-* из реестра.
Токены и ассеты
tokens.json / tokens.css (роли light/dark, типографика, радиусы, тени, отступы), манифест ассетов: логотипы, favicon, фоны волна/свечение, шрифт Golos Text. Полный свод — DESIGN.md.
МойЧат · чат агента
1 демо · кнопки живыеЧат с агентом из МойЧата целиком: ветки, лента с блоком «Шаги», всплывашка над выделенным текстом Цитировать · Делай · Не понял, цитаты карточками в поле ввода, «Поделиться» сообщениями в другую ветку и кнопки поля ввода: файл, диктовка, @-упоминание, короткие ответы, умный режим, фиксация в git, «как дела?», «Стоп». Вкладка «Код и модули» внутри демо — из каких файлов собран настоящий чат и какие библиотеки нужны.
MCP · Дашборды
2 примера · shadcn MCP
Единственный раздел каталога, где страницы не написаны вручную, а собраны через
MCP — прямой канал агента к реестру компонентов. Агент ищет блок в реестре
@shadcn, забирает его исходники командой shadcn add и собирает
приложение. Верстка и дизайн приходят готовыми, руками пишется только композиция и данные.
Стек: React 19.2 · Tailwind 4.3 · Vite 8.2 ·
shadcn CLI 4.20, пресет radix-nova (иконки Lucide, шрифт Geist).
Это настоящее React-приложение, собранное в статику, а не HTML-имитация.
Аналитический дашборд из реестра
Сайдбар, 4 KPI-карточки с трендом, интерактивный график с переключением периода, таблица с вкладками и drag-сортировкой. Блок @shadcn/dashboard-01 — 11 файлов из реестра.
Вкладка Sales — точная копия AdminCN
Платный шаблон AdminCN, воспроизведённый 1:1 на нашем стеке: полный сайдбар (6 групп), 6 KPI с мини-графиками и радиальным гейджем, Total Transaction / Report / Total sales, upgrade-план с payment details, Earning Report, event-карточка, и полностью интерактивная таблица инвойсов (поиск, фильтр, сортировка, пагинация, выбор строк). Тема light/dark. Свой код и данные — чужих ассетов нет.
Node-редакторы
5 примеров · React FlowRAG-pipeline на нодах
User Input + Memory → LLM → параллельные tools (web search, SQL) → composer → output stream. Drag нод, animated edges, MiniMap. Стиль Dify/FlowiseAI.
Photo-upscale пайплайн на 7 нод
Load → Crop / Denoise → Resize → Upscale 4× → Color Correct → Save. Каждая нода с превью-градиентом и параметрами в моноширинном.
Visualizer схемы БД с FK
5 таблиц AIVEXA (users, tenants, projects, reports, shares) с типами колонок и связями FK через smoothstep-стрелки. Стиль ChartDB/DBDraw.
Воронка SaaS с условиями возврата
Лид → Квалификация → Демо → Предложение → Won/Lost. Двойные хэндлы (ok / fail), пунктирные edges на условиях, прогресс-бары конверсии.
Карта домена AIVEXA: 23 темы
Центральный узел AIVEXA + 6 цветных веток (Tech, Design, Product, Team, Growth, AI) с листами. Радиальная композиция, smoothstep-связи.
GSAP эффекты
18 примеровГладкий морфинг без зигзагов
Морф между двумя сложными формами с автоматическим перераспределением точек. Тоггл smooth и поле points показывают разницу — без них переход «дёргается».
Морф параллельно в SVG и на Canvas
Один morph рендерится одновременно в `<svg>` и в `<canvas>` через render-callback. Пример как вытащить морфинг GSAP за пределы SVG.
Двухслойный shape-overlay с волной
Клик — две полупрозрачные волны со случайными задержками точек закрывают и открывают экран. Идеальный паттерн для page-transitions.
Упругий футер на скорости скролла
Прокрутишь вниз — нижняя волна футера выпрямляется с пружинной амплитудой, зависящей от скорости скролла. Elastic ease на физике velocity.
Цепочка перевоплощений: 8 фигур
Один path морфит по кругу: круг → речь → ракета → молния → лайк → квадрат → сетка → лампочка. Бесконечно, без видимых стыков.
Линия рисуется как карандашом
Sequential-анимация stroke вдоль сложного SVG-пути: невидимая рука рисует линию из точки 0% и стирает с конца — бесконечный цикл.
Объект движется по SVG-пути
Маленький градиентный квадрат бесконечно ходит по сложному closed-path с петлями. Базовый и самый универсальный пример MotionPath.
Редактируй путь прямо в браузере
Bezier-редактор появляется поверх SVG: тащишь точки — путь меняется в реальном времени, объект едет по новому. Кнопка copy выгружает обновлённый d.
Flip между двумя targets с drag
Маленькая иконка в рамке. Тащи мышью + кликни — она с Flip-эффектом разворачивается на весь экран и пропадает превью. Ещё клик — обратно в рамку.
Три типа драга на одной странице
Левый объект — drag по X в bounds, средний — вращение с инерцией, правый — свободный drag с инерционным затуханием физики.
curveMode: морф без kinks
Переключатель: морф с обычной интерполяцией контрольных точек vs с интерполяцией углов и длин — второй вариант устраняет «изломы» при сложных переходах.
Управление точкой соединения
Один и тот же морф ромба в круг с разными значениями shapeIndex (0, 3, 6, 9) — точка старта соответствия точек кардинально меняет траекторию.
Curve swipe — занавес-разворот
Клик — нижний край прозрачной волны устремляется вверх и заполняет экран кривой границей через timeline reverse(). Идеальный page-transition.
Примитивы превращаются в буквы
Треугольник, квадрат и круг морфят в буквы A, B, C. convertToPath() переводит SVG-примитивы в равноценные path — иначе морф был бы невозможен.
Бесконечная карусель карточек
Горизонтальная лента, в которой карточки бесконечно перетекают через центр со scale-эффектом. Управление скроллом, кнопками Prev/Next или drag'ом мышью / тачем.
Плавная фильтрация по тегам
Чекбоксы Blue/Pink/Purple фильтруют сетку. Элементы не моргают — плавно переползают на новые позиции с фейдом и stagger-анимацией. Магия Flip plugin.
Каталог-карусель с переползанием
Кнопки Prev/Next двигают ряд карточек как «гусеничку»: одна уезжает в угол с opacity, новая выползает с противоположной стороны. Без шагов и рывков.
Стопка карточек — клик и смена
Стопка из 5 карточек со смещением и перспективой. Клик в любое место — верхняя плавно улетает влево-вниз, вся стопка подтягивается, снизу появляется новая.
Сайты / UI
14 примеровAirbnb — Host Dashboard
Дашборд арендодателя в стиле Airbnb: Rausch coral акцент, KPI-плитки, line + donut диаграммы, таблица бронирований. Inter как замена Cereal VF.
Growth Squad — Sprint 38
Канбан-доска с колонками статусов и плотными карточками задач. Тёмная палитра, акценты teal+purple — рабочий инструмент для трекинга спринта.
Filebase — Tweaks demo
Витрина мелких UI-улучшений: тогглы, инпуты, кнопки, состояния. Тёмная палитра с холодным синим акцентом — удобно для design-system gallery.
SPORT TEST — Axis Pro
Продающее email-письмо в виде веб-страницы: hero с продуктом, преимущества, CTA. Тёплая палитра terracotta + кремовый.
mutuals — your dating life
Лендинг датинг-сервиса «знакомства через общих друзей»: эмоциональный hero, social proof, ясный value-prop. Свежая зелёно-красная палитра.
Tomato — focus timer (web)
Веб-вариант помодоро-таймера с расширенным desktop-лейаутом — список задач, статистика, настройки. Тот же warm-paper стиль что и mobile-версия.
Lull — onboarding flow
Серия экранов онбординга мобильного приложения: welcome, бенефиты, разрешения, signup. Контрастная зелёно-синяя палитра на тёмном.
Level — daily quests
Игровой UI ежедневных квестов: тёмная палитра, прогресс-бары, очки и стрик-счётчики. Контраст к остальным «спокойным» примерам.
Tomato — focus screen
Экран фокус-таймера в формате мобильного приложения: крупный таймер, нижний таб-бар, минимум интерфейса.
Pulse — аналитический обзор
Внутренняя админка с sidebar-навигацией, KPI-карточками и таблицами. Плотная сетка под рабочий интерфейс.
Filebase Docs — Quickstart
Страница документации с боковой навигацией, оглавлением справа и кодовыми блоками. Аккуратный «doc reader» паттерн.
Why we rewrote sync engine in Rust
Технический пост в формате «текст-первый»: длинная читабельная колонка, сдержанная типографика. Шаблон для инженерного блога.
Filebase — тарифные планы
Страница цен: четыре тарифа в плотной сетке, чек-листы фич, FAQ-блок. Чистая структура без агрессивных «выгодных» баннеров.
Filebase — облачная синхронизация
Маркетинговый лендинг продукта: hero с заголовком и CTA, блок преимуществ, прайсинг и финальный призыв.
Editorial / постеры
4 примераZentou AI — wireframe v0.1
Лоу-фай эскиз интерфейса в стиле «руками на бумаге»: тёплая бумажная палитра, наброски блоков и аннотации.
Three posts. One beat.
Три слайда для соцсетевой карусели в едином ритме — формат Instagram/LinkedIn-постов, типографика как главный визуал.
AI Enthusiast — manifesto
Постер-манифест в журнальном стиле: крупный издательский заголовок, multi-column layout. Один экран, который продаёт идею.
Creator's Style & Format Guide
Стилизованный e-гайд с тёплой бежево-коралловой палитрой, журнальной типографикой. Для лид-магнитов и premium-контента.
Презентации
6 примеровHolm — Series A Pre-Read
Pre-read для Series A инвесторов: рынок, traction, юнит-экономика, команда. Глубокий тёмный фон, спокойная подача.
Atlas Quarterly — Chapter 01
Квартальный отчёт в формате журнала: длинноформатные слайды-разделы, типографика как визуал, минимум графиков.
Bluehouse — Real Estate ROI
Питч-дек по проекту в недвижимости: модель ROI, локация, риски и выходы. Та же тёмная палитра, цифры как герой слайда.
Helix — Q1 '26 Board Update
Регулярный апдейт для совета директоров: метрики, риски, решения, ask. Сжатый деловой формат.
Critique — magazine-web-ppt
Гибрид журнальной вёрстки и презентации с разбором дизайна. Богатая палитра — синий, зелёный, красный — каждый раздел как отдельная статья.
Filebase — Q2 2026 deck
Инвесторская презентация в формате слайдов: проблема, метрики, traction, команда, ask. Сдержанный paper-стиль.
Документы / отчёты
8 примеровGrowth · Weekly W42
Недельный апдейт команды: метрики, прогресс по целям, блокеры, фокус на следующую неделю. Тёмная палитра с фиолетовым акцентом.
Northwind — Q4 FY25 OKRs
Квартальные цели команды в виде структурированной таблицы: objectives, key results, прогресс, owner. Деловой шаблон планирования.
Spec — Two-factor authentication
Продуктовая спецификация фичи: контекст, user stories, acceptance criteria, риски. Шаблон для PM-документа перед разработкой.
Growth squad — 14 Oct notes
Протокол еженедельной встречи: участники, обсуждаемое, решения, action items с ответственными. Удобный шаблон для регулярок.
Sable Studio — INV-2025-0142
Счёт-фактура в чистом editorial-стиле: реквизиты сверху, line items таблицей, итоги внизу. Спокойная зелёно-кремовая палитра.
Welcome to Northwind — Maya's plan
План онбординга нового сотрудника: schedule на первые недели, контакты команды, ресурсы для изучения. Тёплая HR-эстетика.
Northwind — Q3 Financial Report
Финансовый отчёт квартала: revenue, costs, GP, key metrics с графиками. Корпоративный сине-зелёный стиль.
Auth Service — Runbook
Инженерный регламент для дежурного: симптомы, диагностика, шаги фикса, эскалация. Тёмная palette с mint-акцентами для критичной инфы.
Анимация
2 примераNintendo, 1889 — sprite
Спрайт-анимация в стиле ретро-консолей: пиксельные кадры, ограниченная палитра, ручной таймлайн. Демонстрация frame-based motion.
Reach every country — Charlotte & Vine
Раскадровка анимационной сцены: ключевые фреймы, пометки переходов, тайминги. Тёплая редакторская palette, как в book design.
Animista
6 категорий · 30 эффектовBasic
Простые универсальные эффекты: fade-in, scale, slide, rotate, flip. Базовая аптечка для любых элементов.
Entrances
Появление: elliptic, swing, puff-in, bounce, scale-vertical. Подходит для hero-блоков и модалок.
Exits
Исчезновение: fade-out, scale-out, slide-blurred, puff-out, roll-out. Для закрытия модалок и dismiss-action.
Text
Текстовые: tracking-in-expand, text-focus-in, text-pop-up, shadow-pop, tracking-contract. Premium-вайб для заголовков.
Attention
Привлечение внимания: vibrate, heartbeat, jello, shake, wobble. Все играют infinite — для алертов и badge'ей.
Background
Фон и заливки: bg-pan, color-change, gradient-shimmer (наш золотой переливающийся текст). Для hero-блоков и accent-плашек.