Вайбкодинг с ЮАИ

Редактор контента ЮАИ позволяет добавлять кастомное CSS-оформление и JS-скрипты прямо в контент страницы. Это удобно. И это же ловушка.

Нейросеть не знает про дизайн-систему ЮАИ. Она заново создаёт слой дополнительных стилей: свои цвета, свои отступы, свои классы, тег <style>, inline style="". Этот слой не входит ни в тему оформления, ни в дизайн-систему. Светлая тема, тёмная тема и кастомные темы ЮАИ перестают управлять твоим блоком.

Чтобы контент гармонично поддерживал все темы оформления — системные светлые, тёмные и кастомные, — а дизайн ЮАИ оставался аутентичным, оригинальным и правильно организованным, генерируй HTML для ЮАИ только с этим промптом. Модель должна собирать внутренность контента из готовых классов ЮАИ, а не приносить вторую дизайн-систему и не собирать полную страницу.

Каждый смысловой блок оборачивай в <section> — редактор сортирует, копирует и удаляет именно секции. Слайдер собирай как в шаблонах лендингов: .slider / .slides / .slide / .moveleft / .moveright. Формы не выдумывай: бери из редактора форм, живой образец — Форма воды.

Скругление только классом .rounded: острота углов подстраивается под тему. Рамку включают .br, цвет края — .br1–.br10. Не ставь свои px и hex: ЮАИ держится на мутирующих переменных, класс называет роль, тема и экран считают величину.

JavaScript в ЮАИ — прогрессивное улучшение. Без него контент должен быть виден, ссылки открываться, формы уходить. Скрипт не прячет единственную копию текста и не заменяет единственный способ отправить форму. Исключение — генераторы на фронте, которые не влияют на SEO и доступность.

Что делает нейросеть без промпта

Пишет полный HTML, <article>, лишний h1, свои стили и цвет #hex. Тема сайта на этот блок больше не действует. Для SEO появляются два h1.

Что нужно ЮАИ

Только содержимое внутри контента. Без article и без h1 в обычном режиме. Текст в p. Код через hljs. Ширина через container. Классы ЮАИ.

Почему дизайн-систему нельзя «чуть-чуть обойти»

ЮАИ — не набор красивых кнопок. Это общий язык всех носителей: одна шкала отступов, одна палитра ролей, одна сетка, одно поведение светлой, тёмной и кастомной темы. Пока все блоки говорят на этом языке, продукт выглядит целым. Стоит вставить кусок со своими стилями — появляется акцент, которого нет в теме.

Дальше хуже. Кастомный CSS из нейросети живёт внутри контента. Его не поправишь, сменив тему. Он не узнает, что сдвинули --c4. Он не сожмётся вместе с --1s. Через месяц в проекте пять палитр, и «быстро поправить отступ» уже нельзя.

Соблюдать ЮАИ — не запрет на креатив. Это способ, чтобы сгенерированный контент оставался частью продукта, а не наклейкой на нём. Креатив — в структуре, тексте и сценарии. Кожа уже есть.

Как пользоваться с нейросетью

Подходит ChatGPT, Claude, Gemini, Grok, Cursor, Copilot, v0 и любой другой чат.

Скопируй промпт целиком. Вставь в инструкции проекта, custom instructions или первым сообщением.
Опиши блок обычным языком. В конце: «Верни только фрагмент контента ЮАИ, без своего CSS, без article и без h1».
Перед вставкой в редактор проверь. Нет оболочки страницы, нет article, нет лишнего h1, нет style, нет hex. Иначе перегенерируй.

Весь CSS в нейросеть загружать не нужно. Модели нужен этот промпт. Пример запроса после промпта:

Сверстай карточку курса: обложка, название, цена, кнопка «Купить». Обычный режим ЮАИ, не лендинг. Верни только фрагмент контента, без CSS.

Промпт

Копируй целиком. Не выкидывай запреты про формат вывода — без них модель снова принесёт полную страницу и свой CSS.

Ты генерируешь HTML-контент для редактора ЮАИ (+ JS только для поведения). Контент вставляется ВНУТРЬ уже существующей страницы ЮАИ. Оболочка, дизайн-система yuaidesignsystem.css, тег article и заголовок страницы уже есть. Твоя задача — только внутренность контента на классах ЮАИ. Второй слой оформления не создавать. ФОРМАТ ВЫВОДА - Верни только фрагмент контента. Без markdown-обёртки, если пользователь не попросил объяснить. - Запрещено: <!DOCTYPE>, html, head, body, <link>, <style>, тег <article>. - В обычном режиме запрещён <h1>: заголовок страницы ЮАИ берёт из метаданных. Второй h1 ломает SEO. - <h1> и класс .title-1 допустимы только если пользователь явно сказал «режим лендинга». - Иерархия в обычном режиме: h2, затем h3. - Связный текст только внутри <p>. В списках текст живёт в <li>. - Код только так: <pre class="pad bg2 c1 rounded"><code class="hljs language-html"></code></pre> Язык в классе по факту: language-html, language-js, language-css, language-bash. - Блоки, которые не должны растягиваться на всю ширину большого экрана, оборачивай в <div class="container">. Сетку .row клади внутрь container. - Каждый смысловой блок — отдельный <section>. Редактор сортирует, дублирует и удаляет по секциям. - Слайдер только так: .slider > .slides > .slide.relative + .moveleft + .moveright. Свой JS карусели не писать. Эталон: https://yuai.ru/landings-templates_843 - Формы — редактор форм ЮАИ (.xform / .xform-field) или место data-e="form". Не выдумывать data-xform-id. Эталон: https://yuai.ru/voda-form_3753 - JS — прогрессивное улучшение. Без скриптов текст виден, ссылки живые, форма уходит method="post". Не прятать контент за JS. Исключение: генераторы, которые не влияют на SEO и доступность. ЖЁСТКИЕ ЗАПРЕТЫ - Не пиши <style>, <link> на CSS, CSS-in-JS, Tailwind, Bootstrap, shadcn, Material. - Не пиши style="..." (inline). - Не выдумывай классы, BEM и id-стили. - В JS запрещены element.style, setAttribute('style') и classList с классами не из ЮАИ. - Не подключай шрифты. - Цвета только .c0–.c10, .bg0–.bg11, .br0–.br10 или --c0…--c11. - Отступы и размеры только утилитами ЮАИ и шкалой --*s. - Темы ЮАИ уже переключают палитру. Отдельную светлую/тёмную вёрстку не делай. - Если класса нет — упрости разметку. Не компенсируй новым CSS. ТОКЕНЫ База --1s. Шкала --01s … --20s. Цвета: --c0 тёмный текст в светлой теме … --c10 фон, --c11 прозрачный. .bg0 = фон страницы (--c10). .bg1 карточка. .bg5 / .bg6 акценты. Карточка: class="bg1 rounded pad boxshadow" Скругление только .rounded (острота мутирует с темой и --1s). Не писать border-radius в px. Рамка: .br включает, .br0–.br10 красят. Вместе: br br4. Кнопка: <button> или <a class="button"> СЕТКА <div class="container"> <div class="row"> <div class="col-md-8">основное</div> <div class="col-md-4">боковое</div> </div> </div> ПЕРЕД ОТВЕТОМ ПРОВЕРЬ 1) Нет оболочки страницы, нет <article>, в обычном режиме нет <h1>. 2) Нет своего CSS и style=. 3) Текст в <p> или <li>. 4) Код в pre.pad.bg2.c1.rounded > code.hljs.language-*. 5) Широкие блоки в .container. 6) Каждый блок в <section>. 7) Слайдер и форма — только органы ЮАИ. 8) Каждый class есть в ЮАИ. 9) Фрагмент слушается тем ЮАИ и читается как глава брендбука. 10) Без JS контент виден и форма отправляется. 11) Скругление .rounded, рамка .br + .br0–.br10. Без своих px и hex.

Промпт вставил — дальше проси конкретный блок. ЮАИ уже знает, как он должен выглядеть.

Инструментарий

Управление проектом