Главная / Конструктор AI-правил

Инструмент студии

Соберите AI-правила
под ваш стек

Оригинальные рекомендации REACTAPP.TOP для ассистентов в React, TypeScript, Express и операторских системах плюс библиотека промптов UI-макетов. Выберите, посмотрите markdown, экспортируйте.

Конструктор правил

Быстрый старт
Эвристический автовыбор по зависимостям

Выбранные правила (0)

Выберите правила слева, чтобы собрать markdown-пакет.

Превью и экспорт

Путь: .cursor/rules/
# AI rules for project

Generated by REACTAPP.TOP AI Rules Builder. Original studio guidance for assistants working in this repository.

_No rules selected yet._
Библиотека UI-промптов

Промпты макетов для vibe coding

Выберите структуру, скопируйте промпт и вставьте его в Cursor, v0, Lovable или Bolt вместе со скриншотом желаемого стиля. Добавляйте промпты в пакет, чтобы экспортировать их рядом с правилами кодирования.

92 промпта макетов в 15 категориях

Формы входа6

Разделённый экран с визуалом

Форма с одной стороны, визуал продукта или брендовая панель с другой

Build a sign-in screen as a split layout: a form column with logo, heading, email, password with show/hide toggle, remember-me checkbox, forgot-password link, primary CTA and a sign-up link; and a visual column with a product screenshot or brand graphic plus a one-line customer quote. Collapse the visual column below 768 px and keep inline validation messages under each field. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Карточка по центру на фоне

Плавающая карточка с заголовком, полями, CTA и ссылкой на регистрацию

Build a sign-in form as a floating card centred on a full-page background with a soft gradient or subtle pattern. Inside the card: heading, email, password, primary CTA and a link to switch to sign-up. Show field-level validation inline and a disabled pending state on the button while submitting. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Минимальная одна колонка

Без карточки — логотип, заголовок, поля и CTA аккуратно в столбик

Build a sign-in page as a single narrow column (max 360 px) without a card container: logo, heading, email, password, primary CTA and a secondary link, stacked with generous vertical rhythm. Put legal links in a quiet footer and keep the whole form visible without scrolling on a phone. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Сначала соцсети

Кнопки входа через соцсети сверху, email и пароль под разделителем

Build a sign-in form where social providers (Google, GitHub, Apple) are the primary group of full-width buttons at the top, followed by an "or continue with email" divider and a secondary email/password form below. Each social button has the provider icon, consistent height and a visible focus ring. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Только magic link

Одно поле email и один CTA — вход без пароля

Build a passwordless sign-in: a heading, a single email input and one CTA that sends a magic link. After submit, replace the form with a "check your inbox" state showing the masked email, a resend button with a 30-second countdown and a link to use a different address. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Пошаговый мастер

Индикатор прогресса сверху, регистрация в 2–3 шага

Build a sign-up wizard with a step indicator at the top and three steps: account (email, password), profile (name, role) and workspace (name, team size). Provide back and next buttons, keep entered values when navigating between steps, and show a summary before the final submit. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Тарифы8

Классические 3 тарифа

Три карточки в ряд, средняя выделена как рекомендуемая

Build a pricing section with three tier cards side by side; the middle card is elevated, uses the accent border and carries a "Recommended" badge. Each card shows the plan name, price with billing period, a short positioning line, a feature list with check icons and a CTA. Stack the cards on mobile with the recommended one first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Переключатель месяц / год

Переключатель оплаты с бейджем «экономия X%» и живыми ценами

Build a pricing section with a monthly/annual switch above the plan cards and a "save 20%" badge next to the annual option. Prices update instantly when the switch changes, with a short crossfade; expose the switch with role="switch" and keyboard support. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Таблица сравнения

Тарифы в колонках, функции в строках с галочками и прочерками

Build a feature comparison table: plans as columns with a sticky header row containing name, price and CTA; features grouped into sections as rows with check icons, dashes or short values. On screens under 768 px collapse it into one accordion per plan instead of horizontal scrolling. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Один тариф как hero

Одна большая карточка с ценой, полным списком функций и CTA

Build a single-plan pricing hero: one large centred card with the price and period, a two-column list of everything included, a prominent CTA and a money-back or cancel-anytime note underneath. Keep it readable at a glance; no toggles or comparisons. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Слайдер использования

Интерактивный слайдер, который обновляет цену в реальном времени

Build a usage-based pricing block: a range slider for seats or monthly requests that updates the displayed price live, shows the unit price and highlights tier breakpoints along the track. The slider is keyboard operable with visible value labels; show a "contact sales" state past the last tier. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Сетка пакетов кредитов

Плитки с количеством кредитов, ценой, стоимостью за единицу и бейджами

Build a credit pack picker as a grid of selectable tiles; each tile shows the credit amount, price, cost per credit and an optional "Best value" or "Popular" badge. Selecting a tile updates a summary and CTA below; support keyboard selection with radio semantics. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Free против Pro

Две колонки с сильным визуальным контрастом между тарифами

Build a two-plan pricing layout: Free on the left with a muted surface and Pro on the right on an accent or dark surface, features aligned row by row so the difference is obvious. Each column has its own CTA; on mobile stack Pro first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Карточки в столбик (mobile-first)

Карточки на всю ширину, по одной на тариф, с полным списком функций

Build a mobile-first pricing list: full-width stacked cards, one per tier, each with name, price, complete feature list and a CTA at the bottom. Add a sticky "compare plans" button that scrolls to a compact comparison table; on desktop limit the cards to a 640 px column. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Возможности и bento8

Сетка иконок в 3 колонки

Иконка, название функции и короткое описание в трёх колонках

Build a features section as a three-column grid of six items; each has an icon in a soft tinted square, a title and one or two sentences. Equalise card heights, collapse to two columns at 768 px and one at 480 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Bento-сетка

Асимметричные плитки разного размера, ключевые функции крупнее

Build a bento-style features grid: two large tiles for the headline capabilities and four small tiles for supporting ones, all with the same corner radius and gap. Each tile has a visual (screenshot crop, chart or icon) and a short caption; reflow to a single column on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Чередующиеся ряды

Текст с одной стороны, визуал с другой, чередование по рядам

Build a features section as alternating rows: text block (eyebrow, heading, paragraph, link) on one side and a visual on the other, switching sides each row. Stack text above visual on mobile and keep the visuals the same aspect ratio. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Функции во вкладках

Вкладки, каждая раскрывает функцию с визуалом

Build a tabbed features block: a horizontal tab list on top (vertical on the left at desktop widths if there are more than four), and a panel showing the visual and description of the active feature. Tabs follow the WAI-ARIA tabs pattern with arrow-key navigation; no auto-rotation. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Список-аккордеон

Сворачиваемые строки, раскрывающие полное описание

Build a features accordion: vertical list of collapsible rows with the feature name, an expanded description and an optional visual on the side that changes with the open row. Only one row is open at a time; keep collapsed content in the DOM and hide it with CSS. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Раскрытие при скролле

Закреплённый визуал с одной стороны, описания прокручиваются с другой

Build a scroll-driven features section: a sticky visual on one side and a column of feature descriptions on the other; as each description reaches the middle of the viewport the visual updates to match. Use IntersectionObserver, and fall back to a plain stacked list when prefers-reduced-motion is set or on narrow screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Стена иконок

Плотная сетка маленьких плиток с иконками и короткими подписями

Build an icon wall: a dense grid of 16 to 24 small tiles, each with an icon and a two-word label (integrations, formats or capabilities). Tiles lift slightly on hover, wrap from six columns down to three, and keep labels visible without truncation. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Сравнение до / после

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

Build a before/after comparison: two side-by-side columns, "Without" with muted styling and cross icons and "With" with the accent surface and check icons, item by item. Communicate the contrast with icons and labels, not colour alone; stack the columns on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Hero-секции8

Текст по центру + скриншот

Заголовок, подзаголовок и CTA сверху, большой скриншот продукта ниже

Build a hero with centred eyebrow, heading, subheading and two CTAs, followed by a large product screenshot in a browser frame with a soft shadow that slightly overlaps the next section. Preload the screenshot, set explicit dimensions and use fluid type for the heading. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Разделённый hero

Заголовок и CTA с одной стороны, мокап продукта с другой

Build a split hero: heading, subheading and two CTAs on the left, a product mockup (device frame or floating cards) on the right. Below 768 px stack the text above the visual and reduce the visual height. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Видеофон

Зациклённое видео без звука за заголовком и CTA

Build a hero with a looping, muted, autoplaying background video under a dark overlay, with heading and CTAs on top. Provide a poster image, load the video lazily and show the static poster when prefers-reduced-motion is set or on slow connections. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Анимированный градиент

Медленно движущийся градиентный фон под текстом

Build a hero with a slowly animating gradient mesh background (three or four blurred colour blobs) and heading, subheading and CTAs on top. Animate only transform and opacity, pause the animation when prefers-reduced-motion is set, and keep text contrast at WCAG AA over every frame. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Hero с терминалом / кодом

Окно терминала с анимированным набором текста как центральный визуал

Build a developer-focused hero: heading and one-line pitch above a terminal window that types an install command and prints its output, with a copy button for the command. Use a monospace font, realistic prompt and colours, and render the final text immediately when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Плавающие UI-элементы

Карточки продукта, парящие вокруг центрального заголовка

Build a hero where four to six small product UI cards (notifications, charts, list items) float around a centred heading and CTA with slight parallax on pointer movement. Hide all but two cards under 768 px, and disable the parallax when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Крупная жирная типографика

Огромный заголовок как фокус с минимумом сопровождения

Build a typography-led hero: an oversized, tightly set heading occupying most of the viewport, a single short sentence and one CTA. Use clamp() for fluid type between 40 and 120 px, balanced line wrapping and no imagery. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Hero со встроенной формой

Сбор email прямо под заголовком

Build a hero with heading, subheading and an inline email capture form directly beneath: input and button on one row, a privacy note under it. Validate the email inline, show a success state replacing the form and stack input and button on narrow screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

CTA-баннеры7

Градиентный баннер на всю ширину

Секция на всю ширину с градиентом, заголовком по центру и CTA

Build a full-bleed call-to-action section with a gradient background, centred heading, one supporting sentence and a single high-contrast CTA. Keep vertical padding generous and the text readable at AA contrast over the gradient. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Разделённая CTA-карточка

Карточка с заголовком слева и кнопкой справа

Build a contained call-to-action card: heading and one sentence on the left, primary button on the right, aligned on one row with a border and subtle surface. Stack the content and make the button full width under 640 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Закреплённая нижняя панель

Панель у нижнего края экрана с сообщением, CTA и закрытием

Build a sticky bottom bar fixed to the viewport: short message, one CTA and a dismiss button; remember the dismissal in localStorage. Respect the safe-area inset on mobile, do not cover page content by adding bottom padding to the body while visible. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Фон с паттерном

Едва заметный точечный или сеточный узор за сообщением и кнопкой

Build a call-to-action section with a subtle dot or grid pattern background, a centred heading, one sentence and a button. Fade the pattern towards the edges with a radial mask and keep it purely decorative for assistive technology. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Двойной CTA

Основное и второстепенное действие рядом

Build a call-to-action block with a heading, one sentence and two buttons side by side: a filled primary action and an outlined secondary one, each with a short helper text underneath. Stack the buttons full width on narrow screens with the primary first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Встроенный сбор email

Поле email и кнопка отправки в одну строку под заголовком

Build an email capture call to action: heading, subheading and an inline form with email input and submit button on one row, plus a note about frequency and unsubscribe. Show inline validation and a success message in place of the form. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Отзыв + CTA

Цитата клиента над заголовком и кнопкой как социальное доказательство

Build a call-to-action block that opens with a short customer quote, avatar, name and company, followed by the heading and a single CTA. Keep the quote to two lines and align everything centrally. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Блоки статистики7

Четыре числа в ряд

Четыре крупных числа в ряд с подписями под ними

Build a stats bar with four large numbers in a row and a short label under each, separated by thin vertical dividers. Use tabular figures, wrap to two columns on tablets and one on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Анимированный счётчик

Числа набегают при появлении в области видимости

Build a stats row whose numbers animate from zero to their final value when scrolled into view, once, over about a second with easing. Render the final values in the server HTML and skip the animation when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Иконка + показатель

Иконка в паре с каждым числом и подписью

Build a stats block where each metric is a pair of a rounded icon tile on the left and the number with its label on the right, three or four pairs in a row. Icons are decorative; the label carries the meaning. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Логотипы + статистика

Логотипы клиентов рядом с ключевыми цифрами вроде «10k+ пользователей»

Build a social-proof strip combining a row of monochrome customer logos with two or three key figures such as users, uptime and countries. Give logos equal optical size, and place the figures above the logos on narrow screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Вертикальная статистика

Стопка метрик для узкой колонки или сайдбара

Build a vertical stats stack for a narrow column or sidebar: each metric shows a number, a label and an optional delta, separated by hairlines. Keep numbers right-aligned with tabular figures. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Статистика поверх изображения

Числа поверх изображения или градиента на всю ширину

Build a full-bleed section with a background image or gradient and a dark overlay, with three or four stats laid over it in white. Ensure AA contrast for numbers and labels and load the image with explicit dimensions. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Статистика в карточках

Ряд карточек с рамкой, по одному показателю в каждой

Build a stats row as individual bordered cards, each with a label, a large number and a small trend indicator (arrow and percentage) with an accessible text equivalent. Cards wrap to a 2×2 grid on tablets. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Навигация8

Логотип + ссылки + CTA

Логотип слева, ссылки по центру или справа, CTA у правого края

Build a top navigation bar: logo on the left, four or five text links in the centre or right, and a primary CTA button on the far right. Under 768 px collapse the links into a menu button that opens an accessible drawer with focus trapping and Escape to close. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Логотип по центру

Логотип в центре, ссылки поровну по обе стороны

Build a navigation bar with the logo centred and links split evenly on both sides, all vertically aligned on one row. On mobile show the logo on the left and a menu button on the right. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Мега-меню

Выпадающая панель на всю ширину с категоризированными ссылками

Build a navigation bar with a full-width mega menu: hovering or clicking a top-level item opens a panel with three or four columns of categorised links, each with an icon and a one-line description, plus a featured card on the right. Open on click and Enter, close on Escape and outside click, and render the panel as an accordion inside the mobile drawer. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Боковая навигация

Вертикальный сайдбар с логотипом, ссылками и блоком пользователя

Build a vertical sidebar navigation: logo at the top, grouped links with icons and an active state in the middle, and a user block with avatar, name and menu at the bottom. Collapse to an icon-only rail on tablets and to a slide-in drawer on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Плавающая «таблетка»

Скруглённая панель, отделённая от верхнего края, с тенью

Build a floating pill navigation: a rounded bar detached from the top edge, centred, with logo, links and a small CTA, a soft shadow and a translucent blurred background. Shrink it slightly on scroll and fall back to a full-width bar under 640 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Прозрачная над hero

Прозрачная поверх hero, сплошная после прокрутки

Build a navigation bar that is transparent with light text while over the hero and becomes a solid surface with a bottom border and dark text after scrolling 40 px. Animate only background and colour, and keep a visible focus style in both states. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Навигация с командной палитрой

Заметное поле поиска ⌘K как центральный элемент

Build a navigation bar centred on a command palette trigger: a wide search-like button showing "Search or jump to…" and the ⌘K shortcut; it opens a modal with fuzzy results grouped by pages, actions and recent items. Support arrow keys, Enter and Escape, and trap focus inside the modal. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Нижняя мобильная навигация

Нижняя панель вкладок в стиле приложения с иконками и подписями

Build a mobile bottom tab bar with four or five items, each an icon with a label, a clear active state and an optional badge. Respect the safe-area inset, keep touch targets at least 44 px and hide it at desktop widths in favour of the top navigation. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Отзывы8

Цитаты в 3 колонки

Три карточки с фото, именем, ролью и цитатой

Build a testimonials section with three quote cards side by side; each has the quote, a photo, name, role and company, with the quote first for scannability. Collapse to one column on mobile and keep card heights aligned. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Бегущая строка

Бесконечно прокручивающийся ряд плиток с отзывами

Build a testimonials marquee: a row of compact quote tiles scrolling horizontally and looping seamlessly, pausing on hover and focus. Duplicate the list for the loop, animate with transform only, and show a static two-row grid when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Masonry-сетка

Сетка отзывов разной высоты в стиле Pinterest

Build a masonry grid of testimonial cards with varying quote lengths, three columns on desktop, two on tablet and one on phones. Use CSS columns or grid with dense packing so cards keep their natural height; include a "show more" button after the first twelve. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Один главный отзыв

Одна крупная цитата с фото, именем, ролью и логотипом компании

Build a single featured testimonial: a large quote in display type, a portrait photo, the name, role and company logo, arranged as a two-column layout with the photo on one side. Stack on mobile and keep the quote under 40 words. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Сетка видеоотзывов

Кликабельные превью видео с иконкой воспроизведения, именем и компанией

Build a grid of video testimonials: thumbnails with a centred play button, duration badge, and the customer name and company underneath; clicking opens an accessible modal player. Use poster images with explicit dimensions and load the player only on click. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Стена твитов

Карточки в стиле соцсетей с аватаром, ником и временем

Build a wall of social-post style testimonial cards: avatar, display name, handle, timestamp and post text, in a three-column grid. Link each card to the original post, keep the platform logo small and stack to one column on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Облако логотипов

Сетка или ряд логотипов клиентов и партнёров с заголовком

Build a logo cloud: a short heading such as "Trusted by teams at" and a grid of eight to twelve monochrome customer logos with equal optical weight. Give each logo an accessible name, and wrap to three columns on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Карусель с точками

По одному отзыву за раз с точками или стрелками

Build a single-testimonial carousel showing one quote with photo, name and role at a time, with previous/next arrows and dot indicators. Support keyboard arrows and touch swipe, announce slide changes politely, and do not autoplay. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Футеры5

Многоколоночная карта сайта

Сгруппированные ссылки, логотип, слоган, соцсети и копирайт

Build a site footer with the logo and a one-line tagline on the left, three or four columns of grouped links (Product, Company, Resources, Legal) and a bottom row with copyright, language selector and social icons. Collapse the columns into accordions on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Минимальный в одну строку

Логотип, несколько ссылок и копирайт в одной строке

Build a minimal footer: logo on the left, three or four key links in the centre and the copyright on the right, all in a single row with a top border. Wrap to two rows on mobile and keep the tap targets at least 44 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Футер с огромным логотипом

Гигантский словесный знак в центре, ссылки вокруг

Build a footer with the brand wordmark set in huge type across the full width as the centrepiece, with link groups above it and a thin row of legal links and copyright below. Clip the wordmark so it never causes horizontal scrolling. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Футер с рассылкой

Подписка на рассылку как главный элемент, ссылки второстепенны

Build a footer where the newsletter signup is the dominant element: heading, one sentence, an inline email form and a consent note, with the navigation links in smaller type below. Show inline validation and a success state, and put the copyright on the last row. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Футер с индикатором статуса

Живой индикатор состояния системы рядом с обычными ссылками и логотипом

Build a footer with the usual logo and link columns plus a live system status pill ("All systems operational") with a coloured dot that links to the status page. Fetch the status client-side after hydration and fall back to a neutral state on error. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

FAQ5

Аккордеон в одну колонку

Одна колонка; каждый вопрос раскрывает ответ

Build an FAQ as a single-column accordion: each question is a button with a chevron, and the answer expands beneath it. Use aria-expanded and aria-controls, keep the answers in the DOM and hide them with CSS so search engines can read them, and allow several items to be open at once. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Аккордеон в две колонки

Вопросы распределены по двум колонкам аккордеона

Build an FAQ with questions split evenly across two accordion columns to save vertical space, collapsing to one column under 768 px. Order the questions by importance top to bottom, left to right, and keep answers in the DOM. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Вопрос-ответ в пузырях чата

Вопросы и ответы как чередующиеся пузыри чата

Build an FAQ styled as a conversation: questions as right-aligned bubbles from a user avatar and answers as left-aligned bubbles from the brand avatar, alternating down the page. Keep it a plain list semantically (a definition list or headings and paragraphs), not a live chat widget. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

FAQ с поиском

Строка поиска, фильтрующая список вопросов по мере ввода

Build an FAQ with a search input at the top that filters the list of questions as the user types, highlighting matched words and showing an empty state with a contact link when nothing matches. Filter client-side, keep the full list in the server HTML and announce the result count to screen readers. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Вкладки по категориям

Вкладки категорий, переключающие отфильтрованные наборы вопросов

Build an FAQ with category tabs at the top (Billing, Security, Getting started, Integrations) that switch between filtered sets of questions, each set an accordion. Follow the tabs ARIA pattern, sync the active tab with a URL hash and render all sets in the HTML. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Дашборды6

Сайдбар + контент

Вертикальный сайдбар с навигацией и основная область контента

Build an application shell with a collapsible left sidebar (logo, grouped navigation, user block) and a main area with a top bar containing breadcrumbs, search and account menu, then the page content. Persist the collapsed state and turn the sidebar into a drawer under 1024 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Верхняя навигация + контент

Горизонтальная навигация сверху и контент на всю ширину

Build an application shell with a horizontal top navigation (logo, primary sections, search, notifications, avatar) and full-width content beneath with no sidebar. Show the active section with an underline and collapse the sections into a menu on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Три панели

Сайдбар, панель списка или ленты и панель деталей

Build a three-pane layout: a narrow navigation sidebar, a middle pane with a scrollable list or feed and a right detail panel that shows the selected item. Make the middle/detail split resizable, and on tablets and phones show one pane at a time with a back button. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Kanban-доска

Колонки этапов с перетаскиваемыми карточками

Build a kanban board with columns for each stage, a WIP count in every column header and cards that can be dragged between columns with a drop indicator. Provide a keyboard alternative for moving cards (menu or shortcuts), announce moves to screen readers and scroll columns horizontally on small screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Карточки метрик + график

KPI-карточки сверху и крупный график ниже

Build a dashboard overview: a row of four KPI cards (label, value, delta versus the previous period, sparkline) above a large time-series chart with a date-range picker and series toggles. Design loading, empty and error states for every card and chart, and show units and time zone. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Пустое состояние

Иллюстрация по центру, заголовок и призыв к действию

Build an empty state for a dashboard page: a centred illustration or icon, a short heading, one sentence explaining what will appear here and a primary CTA to create the first item, plus a secondary link to documentation. Keep the layout inside the normal content area so navigation stays visible. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Онбординг4

Чек-лист онбординга

Задачи настройки с прогрессом и раскрывающимися шагами

Build an onboarding checklist card: a progress bar with "2 of 5 completed", a list of setup tasks each with a checkbox state, a short description and an expandable panel with the action button. Persist completion, let users dismiss the card when done and keep it keyboard accessible. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Тур с подсказками

Пошаговый тур с выносками, указывающими на элементы интерфейса

Build a guided product tour: a sequence of tooltip callouts anchored to real UI elements, each with a title, one sentence, step counter, next/back buttons and a skip link, with a dimmed backdrop around the highlighted element. Manage focus inside the tooltip, close on Escape and remember completion. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Модальное окно с видеообзором

Модальное окно со встроенным видео и кнопкой «Начать»

Build a welcome modal that appears on first login with a short heading, an embedded walkthrough video with a poster, and a "Get started" CTA plus a "Skip for now" link. Load the video only when the modal opens, trap focus, close on Escape and never show it again after dismissal. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Иллюстрированное пустое состояние

Иллюстрация, заголовок, одно предложение и CTA

Build an illustrated empty state for a first-run screen: a custom illustration, a short heading, one supporting sentence and a primary CTA, optionally with a secondary "import" action. Size the illustration with explicit dimensions and hide it from screen readers. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Блог и контент4

Журнальная сетка

Крупная главная статья сверху, карточки поменьше в сетке ниже

Build a blog index in magazine style: one large featured post with cover image, category, title, excerpt and author on top, then a three-column grid of smaller post cards. Use consistent image aspect ratios, and collapse the grid to one column on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Режим чтения в одну колонку

Чистая одна колонка с удобной шириной строки и интерлиньяжем

Build an article page as a single reading column of 65 to 75 characters with generous line height, a title block (category, title, author, date, reading time), a lead image and styled typography for headings, lists, quotes, code and figures. Add share links and a "next article" card at the end. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Оглавление в сайдбаре

Закреплённое оглавление с подсветкой текущего раздела

Build a long-form documentation or article layout with the content in the centre and a sticky table of contents in the right sidebar that highlights the current section while scrolling. Generate the TOC from h2/h3 headings, use IntersectionObserver and collapse the TOC into a details element above the content on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Сетка карточек с фильтрами

Карточки статей с тегами-фильтрами категорий сверху

Build a blog index with a row of category filter chips (All plus categories) above a three-column grid of post cards with image, category, title, excerpt and date. Sync the active filter with the URL query, show a result count and an empty state, and render the full list in the server HTML. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Контакты3

Форма + реквизиты

Форма обратной связи с одной стороны, контакты компании с другой

Build a contact page as two columns: a form with name, email, company, message and consent checkbox on one side, and contact details (email, phone, address, office hours) with a small map or office photo on the other. Validate inline, show a success state and stack the columns on mobile with the form first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Карточки каналов поддержки

Карточки для чата, email, документации и сообщества

Build a support page as a grid of channel cards: live chat, email, documentation and community, each with an icon, title, one sentence, expected response time and a CTA. Show availability (online, business hours) where relevant and stack to one column on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Минимальная форма на всю страницу

Форма по центру с заголовком, несколькими полями и одной кнопкой

Build a minimal full-page contact form: a centred column with a heading, one sentence, name, email and message fields and one submit button, with a note on response time. Keep the fields large, validate inline and show a clear success state. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Служебные экраны5

Таблица сравнения (мы и конкуренты)

Ваш продукт против конкурентов с галочками и прочерками

Build a competitor comparison table: your product as the highlighted first column, two or three competitors as further columns, and feature rows with checks, dashes or short notes. Add a sticky header, footnotes for claims and switch to per-product cards under 768 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Баннер анонса функции

Тонкая верхняя полоса с тегом «Новое», сообщением, ссылкой и закрытием

Build a slim announcement bar above the navigation: a "New" tag, a one-line message, a "Learn more" link and a dismiss button, with the dismissal persisted per announcement id. Do not shift layout on load — reserve its height server-side — and keep AA contrast on the accent background. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Баннер cookie

Карточка в нижнем углу с кнопками принять, отклонить и настройки

Build a cookie consent card anchored to the bottom corner: a short message with a privacy link and three actions — accept all, reject non-essential and settings, where settings opens a modal with per-category toggles. Do not block the page, keep equal visual weight for accept and reject, and store the choice with a version. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Страница 404

«Страница не найдена» с пояснением и полезными ссылками

Build a 404 page: a large "404", a friendly heading, one sentence, a search box or list of popular links, and CTAs back to home and support. Keep the site header and footer, return a real 404 status and emit noindex. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Состояние загрузки

Скелетон, повторяющий финальный макет, с мерцанием

Build a loading state as a skeleton that mirrors the final layout (header, cards, table rows) with a subtle shimmer animation and no layout shift when the real content arrives. Use aria-busy on the region, disable the shimmer when prefers-reduced-motion is set and show an error state after a timeout. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Как пользоваться

  1. Выберите нужную структуру и скопируйте промпт.
  2. Вставьте его в AI-инструмент вместе со скриншотом или дизайн-токенами, чтобы результат совпал с вашей эстетикой.
  3. Добавьте промпты в пакет, чтобы выгрузить их как .mdc-файлы рядом с правилами кодирования.
FAQ

Об AI Rules Builder

Бесплатный инструмент в браузере: собирает оригинальные правила для Cursor, GitHub Copilot, Claude Code и Windsurf плюс библиотеку UI-промптов. Превью markdown, копирование и скачивание — на сервер ничего не загружается.
Cursor (.mdc / rules), инструкции GitHub Copilot, Claude Code и Windsurf. Выберите среду экспорта — сборщик оформит выбранные правила под этот инструмент.
Да, бесплатно. Выбор правил и превью идут в браузере. Мы не храним ваш набор на сервере — копируйте или скачивайте файлы локально.
UI-промпты — готовые брифы для типичных макетов. Их можно добавить в тот же набор, что и инженерные правила, и экспортировать вместе в markdown или файлы Cursor.
Да. Копируйте превью, скачайте markdown или экспортируйте файлы правил Cursor. Для AI-фич в продукте смотрите страницу экспертизы AI и LLM.

Оценка за 24 часа

Оригинальные рекомендации REACTAPP.TOP для ассистентов в React, TypeScript, Express и операторских системах плюс библиотека промптов UI-макетов. Выберите, посмотрите markdown, экспортируйте.

Прислать брифAI & LLM-интеграция