Библиотека компонентов построена по методологии Atomic Design. React 19, Next.js 16, Tailwind CSS 4.
Дизайн-токены как CSS custom properties. Все цвета адаптируются к тёмной теме.
Нейтральные
Поверхности
Текст
Семантические
Шрифт Inter с модульной шкалой размеров.
Section Heading — md (default, 24-32px) — typical section h2
Подзаголовок с описанием секции. text-wrap balance.
Section Heading — sm (18-22px) — подсекции / group titles
Section Heading — lg (28-44px) — landing promo, как PromoSplit/PromoTestimonials
Мельчайшие строительные блоки дизайн-системы.
Button
Ticket Button
Icon Button
Iconly Icons (48)
Iconly Pro Light. Все экспортируются из @dmitriikapustin/ui как именованные компоненты <IconlyName size={24} color="currentColor" />.
Menu Item
Input
Пароль слишком короткий
Badge
Tag
Toggle
Segmented Control
Avatar
Spinner
Logo
Stat Badge
Message
Textarea
Поле обязательно
Checkbox
Radio
Select
Обязательное поле
Tooltip
Skeleton
Theming — component-level tokens override (per-consumer palette)
Любой компонент стилизуется через CSS-vars (--button-primary-bg, --icon-badge-bg, --cta-bg, --avatar-fallback-bg, --testimonial-rating-fg). Override через wrapper-стиль — каскад применяется ко всем дочерним компонентам.
Комбинации атомов, работающих как единое целое.
Card — base / with image / with badges + action
Опубликован на dyadya-stepa.kapustin.website. 47 просмотров за неделю.
Run a VC-style startup deep dive: build an analysis spreadsheet, research online, benchmark competitors, and enrich staff profiles.
Run a VC-style startup deep dive: build an analysis spreadsheet, research online, benchmark competitors.
Website Variant (New Design)
Используется в генераторе сайтов. Нет обводки, шрифт Inter Tight 500 18px, нулевой letter-spacing.
Icon Badge (36×36, bg #F3F3F3, icon #4C4C4C)
Gallery — grid (равные квадраты)
Gallery — masonry (разная высота)
Icon With Text
Chat Message
Chat Input
Easy + Contrast On
Easy + Contrast Off
Full + Contrast On
Full + Contrast Off
Top Promo
Profile Nav
Search Bar
Stat
Alert
Инфо
Успех
Внимание
Ошибка
Info Field
Двух-колоночная info-таблица для Sidebar/settings. Левая колонка — labels (default 97px, override через labelWidth), правая — values + опц. иконка. 12px gap по горизонтали, 8px между строками. Опц. ?-helper на каждой строке.
Form Field
Как в паспорте
Tabs
Общая информация о компоненте.
StampCard (перфорация)
Карточка с перфорацией по краям как у почтовой марки.
stamp=false — обычная карточка с border и rounded corners.
Modal
Toast
Dropdown Menu
Breadcrumbs
Pagination
Password Input
Code Input
Сложные компоненты из молекул и атомов.
App Top Line
Sidebar — Menu
Sidebar — Website Design (New)
Sidebar — Course Submenu
Header
Footer
Empty State
Создайте свой первый проект, чтобы начать работу с платформой.
Pricing Card
Для личных проектов и экспериментов.
Для команд и растущих продуктов.
Для крупных организаций с особыми требованиями.
Testimonial Card
“Мы перешли на эту платформу полгода назад и уже видим рост конверсии на 35%. Интеграция заняла всего два дня.”
“Лучший инструмент для аналитики, который мы пробовали. Поддержка отвечает за минуты, а не за дни.”
Feature Grid
Запустите первый проект за 5 минут без настройки инфраструктуры.
Шифрование данных, двухфакторная аутентификация и соответствие SOC 2.
Настраиваемые оповещения по email, Slack и Telegram в реальном времени.
Hero Section — Center
Готовые промо-блоки, адаптивные шаблоны и встроенная тёмная тема. Просто собери страницу из компонентов.
Hero Section — Left + Media
Отслеживайте метрики в реальном времени, настраивайте дашборды и получайте инсайты автоматически.
Logo Cloud
Trusted by teams at
Stats Bar — Inline
Stats Bar — Cards
Bento Grid
Push в main — и через 30 секунд изменения на продакшене.
Серверный код рядом с пользователями по всему миру.
Встроенные метрики без сторонних сервисов.
TLS, RBAC, audit log и соответствие SOC 2 из коробки.
FAQ Section
Да, план Starter полностью бесплатный. Он включает 1 проект и 100 запросов в день — достаточно для личных проектов и экспериментов.
Оплата ежемесячная. Можно перейти на годовой план со скидкой 20%. Отмена в любой момент без штрафов.
SSO через SAML и OpenID Connect доступен на плане Enterprise. Для Pro плана доступна двухфакторная аутентификация.
Slack, Telegram, email-уведомления, Webhooks, REST API. На Enterprise плане — кастомные интеграции по запросу.
Comparison Table
| Starter | Pro | Enterprise | |
|---|---|---|---|
| Проекты | 1 | Безлимит | Безлимит |
| Запросы в день | 100 | 10 000 | Безлимит |
| Аналитика | |||
| Кастомные домены | |||
| SSO / SAML | |||
| SLA | 99.5% | 99.9% | |
| Приоритетная поддержка |
CTA Section — Default
Создайте аккаунт за 30 секунд. Карта не нужна.
CTA Section — Filled
Полный доступ ко всем функциям. Без обязательств.
CTA Section — Bordered
Наша команда поможет настроить всё за один звонок.
Cookie Consent
Fixed-position баннер в правом нижнем углу (mobile — full-width внизу). Persistence через localStorage. Жми «Показать» — баннер всплывёт в правом-нижнем углу страницы.
Landing Layout — Header Mode
Header pill во всю ширину viewport, Footer ниже — тоже full-width pill (равная Header ширина).
Landing Layout — Sidebar Mode
Готовые секции для лендингов и промо-страниц. Структура по мотивам Figma-макетов.
Promo Hero — Dark
Автоматизируйте рутину и освободите 5+ часов в неделю. Начните бесплатно — карта не нужна.
Promo Hero — Dark + Media
Автоматизируйте рутину и освободите 5+ часов в неделю. Начните бесплатно — карта не нужна.
Promo Hero — Gradient + Media
Отслеживайте метрики, находите инсайты и принимайте решения быстрее конкурентов.
Promo Hero — Light
Платформа для команд, которые строят будущее.
Promo Hero — Light + Media
Платформа для команд, которые строят будущее.
Promo Hero Form (URL/email submit)
Вставьте URL Яндекс.Карт — получите готовый сайт за 60 секунд
Пример: https://yandex.ru/maps/-/CDxxxxxx
Promo Bento
Promo Showcase (stepper)
Загрузите данные
Импортируйте файлы, текст или записи
AI обработает
Модель анализирует и структурирует контент
Получите результат
Готовый документ за секунды
Promo Split — Media Right
Расширенный словарь и кастомный справочник для максимальной точности транскрибации.
Создавайте шаблоны для частых фраз — экономьте время с каждым документом.
Система учится вашему стилю и адаптирует результат под вас.
Запрашивайте правки — система запоминает предпочтения.
Пневмоторакс
Электрокардиограмма
Холецистэктомия
Promo Split — Media Left
Единый интерфейс для управления задачами, контентом и аналитикой.
Promo Action Cards
Глубокий разбор в стиле VC: таблица анализа, онлайн-исследование, бенчмарк конкурентов.
Снимок приоритетов, задач и вызовов вашей команды разработки.
Следите за топовыми AI и инженерными блогами, получайте еженедельную сводку.
Каждое утро — краткое содержание дня с контекстом и рекомендациями.
Создание PDF-резюме из известных данных и онлайн-исследования.
Конвертация любого изображения в ретро пиксель-арт с настраиваемым размером.
Promo Trust Grid
Соответствие стандартам безопасности и приватности данных.
Все данные обрабатываются и хранятся на локальных серверах.
Аудио и документы удаляются сразу после обработки.
Promo Testimonials
“За полгода мы увеличили конверсию на 35%. Интеграция заняла два дня.”
“Лучший инструмент аналитики. Поддержка отвечает за минуты.”
“Экономим 10+ часов в неделю на документообороте.”
“Простая интеграция, мощная функциональность. Рекомендую.”
“Наконец-то инструмент, который реально работает как обещает.”
“Перешли с трёх сервисов на один — и всё стало проще.”
Promo Pricing — Dark
Выберите план, который подходит вашей команде.
Для личных проектов
Для команд
Для крупных организаций
Promo Pricing — Light
Promo Devices CTA
Начните на одном устройстве — продолжите на другом. Данные синхронизируются мгновенно.
Типовые блоки для построения статей, лендингов и исследовательских страниц. Стилистика из макета Kapustin / Figma.
Article Hero
Eval
We're releasing Vending-Bench 2, a benchmark for measuring AI model performance on running a business over long time horizons.
Article Heading (h2 + h3)
Average across 5 runs
Article Body
Article Note (italic emphasis)
Note: The qualitative analysis below was written when Gemini 3 Pro led the leaderboard. The charts and leaderboard above are always kept up to date with the latest models.
Line Chart
Bar Chart (stacked)
Scatter Chart
Article Figure (image / placeholder)
Article Table (leaderboard)
Unordered List
Ordered List
Chat Block (assistant)
Chat Block (system prompt)
Link Button
Article Footer
Full Article Layout (composed)
Note: Scoring has been streamlined for clarity.