Пользуйтесь с удовольствием
Библиотека промтов для разработчиков Vibe Coders
Тщательно подобранная библиотека шаблонов разметки для разработчиков, создающих уникальный дизайн. Выберите раздел, скопируйте шаблон, вставьте его в свой инструмент искусственного интеллекта — и получите чистую, готовую к использованию разметку CSS и Tailwind.

Формы авторизации

С одной стороны - форма, с другой - фирменный стиль
Минималистичная прямоугольная форма, отлично подходит для модальных окон.
Ввод шестизначного кода подтверждения
Карточка для входа без пароля, через электронную почту
Форма для ввода нового пароля с требованиями
Подключите аутентификации с использованием QR кода
Вход SSO рабочего пространства
Сначала электронная почта, затем SSO и пароль
Вход по паролю с резервным вариантом
Сначала запрос данных, пароль - как запасной вариант
Выбор учетной записи
Выберите учетную запись для входа или добавьте новую учетную запись
Одобрение нового устройства
Одобрить или заблокировать вход в систему с другого устройства
Принятие приглашения в рабочее пространство
Присоединяйтесь к команде, используя ссылку - приглашение, отправленную по электронной почте
Подтвердите адрес электронной почты с помощью таймера повторной отправки
Состояние ожидания с кнопкой повторной отправки для восстановления работоспособности
Экран согласия OAuth
Предоставление приложению доступа пошагово
Учетная запись заблокирована с возможностью восстановления
Слишком много попыток автоизации
Менеджер активных сессий
Отслеживание всех устройств выполнивших вход в систему, с возможностью завершить сианс
Вход для гостей или зарегистрированных пользователей
Три варианта входа помимо регистрации
Регистрация на пробный период с подробным описанием
Форма регистрации слева, предложение справа
Вход с кодом восстановления
Экстренный доступ с одноразовым резервным кодом
Двойная проверка изменения адреса электронной почты
Подтверждение изменения адреса в обоих почтовых адресах

Цены

Трехъярусная конструкция с акцентом
Классические 3 варианта планировки, акцент на средний
Один план с возможностью выбора ежмесячной/ежегодной оплаты
Выделение уникальных товаров
Таблица сравнения
Матрица характеристик по планам
Оценка на основе использования
Ползунок, определяющий стоимость с учетом вариативных характеристик
Базовый план с дополнительными опциями
Базовая цена плюс дополнительные модули
Пополнение кредитного пакета
Единоразовые пакеты со скидками за объем
Цены в местной валюте
Переключатель регионов, для конвертации цен в тарифном плане
Цена за пользователя с шагом в зависимости от количества
Размер команды определяет общую сумму за месяц
Изменение тарифного плана с предварительным просмотром с пропорциональным уменьшением стоимости
Сколько на самом деле стоит обновление плана на текущий момент
Слайдер плана с отображением функций
Перетащите ползунок, чтобы попасть на нужный уровень
Сопоставление единоразовой лицензии и подписки
Две модели для покупки отображаются единовременно
Панель запроса коммерческого предложения для предприятий
Уровень с поддержкой продаж, требующий заполнения короткой квалификационной формы
Конструктор пакетов модулей
Отметьте необходимые детали и наблюдайте за изменением стоимости
Уровни комиссионных сборов на торговой площадке
Комиссия, которая снижается по мере роста объема продаж
Скользящая шкала ценообразования
Заплатите столько, сколько считаете нужным
Стоимость тарифного плана "Устройство +"
Оплата оборудования авансом или в рассрочку
Панель скидочных программ
Сниженные тарифные планы для соответствующих групп
Планировщик резервной мощности
Сравните гибкое использование с гарантийной мощностью
Симулятор оплаты, основанный на результатах
Модель предполагает базовую оплату + потенциал роста доходности

Особенности / Бенто

Сетка бенто
Ассиметричные плитки разного размера
Иконки в три колонки
Простая триада: иконка + заголовок + текст
Чередующаяся ветрина
Строки текста и медиафайлов, которые меняют местами стороны
Переключатель функций с вкладками
Вкладки, созданные только с помощью CSS, JavaScript не требуется
Контрольный список возможностей, сгруппированный по категориям
Плотный четырехколоночный указатель характеристик
До и после обновления
Старый тариф рядом с новым
Функция карусели с привязкой к прокрутке
Карточки с возможностью смахивания, снабженные стрелками и точками
Каталог интеграций с фильтром
Поиск по сетке логотипов, сгруппированных по значению
Акцентированное визуальное оформление с прокруткой
Панель остается на месте, пока текст прокручивается дальше
Наведите курсор, чтобы посмотреть список функций
Список слева меняет содержимое панели справа
Панель по вопросам безопасности и соответствия требованиям
Сертификаты, механизмы контроля и связь с поддержкой
Блок API с языковыми вкладками
Функция для разработчиков с возможностью переключения между фрагментами когда
Публичные колонки с планом развития
Отправлено, в процессе обработки и на рассмотрении
Панель "Купить или сделать самому"
Честное сравнение затрат на покупки с самостоятельным выполнением работы
Матрица доступности платформы
Что работает в веб-браузере, на мобильных устройствах, настольных компьютерах и в командной строке
Обязательства по обеспечению доступности
Соответствие стандартам, поддержка клавиатуры и порядок сообщения о недостатках
Схема архитектурного потока
Как перемещаются данные, показано в прямоугольных стрелках
Исследователь наследования разрешений
Отслеживание доступа от организации к ресурсу
Процесс синхронизации в автономном режиме
Объясните проведение алгоритма "локальный приоритет" через состояние соединений

Главные разделы

Заголовок по центру
Крупный шрифт, подтекст, два призыва к действию
Резделенный главный блок
Текст слева, изображение справа
Градиентный акцент
Темный фон с лучистым свечением
Заголовок с левосторонним расположением и полосой характеристик
Редакционный текст в нижнем колонтитуле с метрической системой счисления
Заголовок из списка ожидания с социальным доказательством
Форма регистрации плюс перекрывающиеся аватары
Command Hero
Страница разпработчика с копируемой командой
До/после
Заголовок рядом с перетаскиваемой панелью сравнения
Заголовок мобильного приложения в телефонной рамке
Слева - заголовок, справа - телефон, нарисованный с помощью CSS
Заголовок с меняющимся словом
Один заголовок, который меняется для разной аудитории
Главный заголвок
Заголовок на фоне непрерывно прокручивающегося ряда с покупателями
Журнальный заголовок
Заголовок журнала с едва заметными линиями и датой публикации
Кнопка "Бронирование" с полями для ввода даты
Поисковой виджет расположен под заголовком
Заголовок события с обратным отсчетом
Дата, место проведения и тикающие часы до старта
Главный заголовок портфолио с рабочей полосой
Введение к ряду недавних проектов
Заголовок пожертвований с выбором суммы
Заголовок слева, форма справа
Заголовок с рабоичими часами
Адрес, часы работы и кнопка вызова
Главный экран для совместной работы в режиме реального времени
Вступительная презентация, ориентированная на продукт, с активными курсорами коллег по команде
Главный заголовок и голосовая заметки
Внедрение аудитехнологии с демонстрацией диктофона

Баннеры с призывами к действию

Статистические полосы

Панели навигации

Отзывы

Нижний колонтитул

Часто задаваемые вопросы

Панели мониторинга

Введения

Блог / контент

Контакты

Бонус

Библиотека промтов и исходных кодов для вайбкодинга: собираем сайт по секциям

Вайбкодинг превращает разработку сайта в диалог с ИИ: вы описываете задачу — модель генерирует код. Но чтобы результат был предсказуемым, а не «примерно похожим», нужны точные промты и проверенные исходники. Эта библиотека — именно такой рабочий набор. Здесь собраны готовые промты и код для каждой ключевой секции сайта: формы авторизации, блоки с ценами и подписками, Bento-сетки для особенностей продукта, заглавные hero-разделы, CTA-баннеры, статистические полосы, панели навигации, отзывы, нижние колонтитулы, FAQ, дашборды, введения, блоги и контакты.

Каждый промт составлен по формуле: роль → контекст → задача → стек → требования к дизайну → критерии готовности. Это даёт ИИ достаточно вводных, чтобы выдать production-ready код, а вам — возможность быстро итерировать. Исходники написаны на чистом HTML/CSS/JS и адаптированы под популярные фреймворки (React, Next.js, Tailwind), поэтому их легко встроить в любой проект — от лендинга до SaaS-платформы.

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

Структура библиотеки (категории промтов)

Категория
Что внутри
1
Формы авторизации
Login, Register, Forgot Password, OAuth
2
Цены и подписки
Pricing table, toggle Monthly/Yearly, сравнение тарифов
3
Особенности / Bento
Асимметричная bento-grid, карточки фич
4
Заглавные разделы (Hero)
Hero с CTA, видео-фон, split-layout
5
CTA-баннеры
Полоса-призыв, конверсионный блок
6
Статистические полосы
Counters, метрики, achievements
7
Панели навигации
Navbar, mega-menu, mobile drawer
8
Отзывы
Testimonials, слайдер, стена логотипов
9
Нижние колонтитулы
Multi-column footer, newsletter, соцсети
10
FAQ
Аккордеон, schema.org FAQPage
11
Дашборды
Sidebar + widgets, графики, KPI-карточки
12
Введения
Intro-секции, «О нас», миссия
13
Блоги / Контент
Сетка статей, карточка поста, sidebar
14
Контакты
Форма, карта, реквизиты