Галоўная / Канструктар 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-інтэграцыя