Многие специалисты ищут качественные промпты для верстальщика, но в итоге находят лишь поверхностные списки, которые не работают на реальных задачах. Результат – разочарование в технологии и потерянное время. Кажется, что нейросеть просто не способна генерировать хороший код.
Проблема не в нейросети, а в качестве запросов. Общие команды дают общие ответы, бесполезные в настоящем проекте. Чтобы получить чистый, рабочий и адаптивный код, нужно научиться ставить задачу правильно: с контекстом, ограничениями и четкими требованиями к формату.
Эта статья – практическое руководство. В ней собраны не просто примеры, а готовые шаблоны, которые предвосхищают ошибки и помогают получать предсказуемый результат. Здесь вы найдете решения для множества повседневных задач:
Создание чистой HTML-разметки по методологии БЭМ.
Написание современных и адаптивных CSS-стилей с использованием Flexbox и Grid.
Генерация JavaScript-кода для интерактивных элементов интерфейса.
Оптимизация, исправление и документирование существующего кода.
Материал построен так, чтобы вы не просто скопировали текст, а поняли логику составления эффективных запросов. Это поможет в будущем самостоятельно формулировать команды для любых, даже самых сложных задач верстки.
Типичные ошибки при составлении запросов к ИИ
Прежде чем переходить к готовым решениям, важно понять, какие ошибки чаще всего допускают специалисты. Избегая этих ловушек, вы сразу повысите качество генерируемого кода в несколько раз. Многие наступают на эти грабли, теряя часы на исправление того, что можно было сразу сделать правильно.
Использовать абстрактные команды вроде “сделай красиво” или “улучши дизайн”. Нейросеть – это исполнитель кода, а не дизайнер с врожденным чувством стиля. Она не понимает субъективных оценок и выдаст клишированный или совершенно неподходящий результат.
Забывать о контексте всего проекта. Если попросить сверстать кнопку, не указав, где она будет использоваться (в шапке, в форме, в карточке товара), вы получите универсальный, но безликий элемент, который придется долго дорабатывать напильником.
Слепо копировать сгенерированный код, не проводя проверку. ИИ может допускать неочевидные ошибки, использовать устаревшие подходы или создавать уязвимости. Любой код, особенно JavaScript, требует внимательного код-ревью перед добавлением в проект.
Просить написать код, игнорируя принятые в проекте методологии и стандарты. Если вы используете БЭМ, а в промпте это не указали, нейросеть сгенерирует набор классов вразнобой, нарушая всю структуру и консистентность проекта. Конечно, если ваша цель – хаос в стилях, то это отличный способ.
Пытаться сгенерировать всю страницу или весь сайт одним запросом. Это верный путь к провалу. Модель плохо справляется с огромными задачами, ее ответ будет неполным, запутанным и полным ошибок. Работайте итерационно, по одному компоненту за раз.
Не указывать технические ограничения и требования к совместимости. Без указания “использовать только ES6 синтаксис” или “обеспечить совместимость с Safari 14” вы рискуете получить код, который просто не будет работать у части ваших пользователей.
Сравнение формулировок: от слабого запроса к сильному результату
Разница между бесполезным и рабочим кодом часто кроется в деталях формулировки. В этой таблице наглядно показано, как превратить расплывчатую просьбу в точную техническую задачу, которая принесет ожидаемый результат. Обратите внимание, как добавление контекста, ограничений и формата меняет итог.
Задача
Слабый промпт (частая ошибка)
Сильный промпт (как надо)
Создать кнопку
Напиши HTML и CSS для кнопки.
Создай HTML и CSS для основной кнопки (call-to-action). Используй тег button. Стиль: синий фон #007bff, белый текст, скругление углов 8px, внутренние отступы 12px 24px. При наведении курсора фон должен становиться темнее (#0056b3). Не использовать сторонние библиотеки. Код должен быть в одном блоке.
Сверстать карточку товара
Сделай карточку товара с картинкой, названием и ценой.
Ты – опытный верстальщик. Создай HTML и CSS для карточки товара. Используй семантические теги. Структура: изображение сверху, под ним заголовок h3, абзац с коротким описанием и цена. Цена должна быть выделена жирным. Внизу – кнопка “Добавить в корзину”. Используй Flexbox для выравнивания. Карточка должна иметь тень и скругленные углы. Ширина карточки – 300px.
Сделать адаптивное меню
Сверстай навигационное меню для сайта.
Создай HTML, CSS и JS для адаптивного навигационного меню. На экранах шире 768px меню должно быть горизонтальным. На экранах уже 768px – скрываться под иконкой “бургер”. При клике на “бургер” меню плавно выезжает сбоку. Используй CSS-переходы для анимации. JavaScript должен быть написан на чистом ES6, без jQuery.
Написать стили для сетки
Нужна сетка из 3 колонок.
Напиши CSS-код для создания адаптивной сетки с помощью CSS Grid. На десктопах (от 1024px) должно быть 3 колонки одинаковой ширины. На планшетах (от 768px до 1023px) – 2 колонки. На мобильных устройствах (до 767px) – 1 колонка. Расстояние между элементами сетки (gap) – 20px.
Рабочие промпты для верстальщика: 25 готовых примеров
Ниже представлены 25 детализированных промптов для решения повседневных задач верстальщика. Каждый шаблон – это результат отсева неудачных формулировок и поиска оптимальной структуры. Используйте их как основу, подставляя свои данные в квадратные скобки.
1. Генерация HTML-структуры компонента по БЭМ
Проблема: Нужно быстро создать HTML-каркас для нового компонента, соблюдая строгую структуру именования классов по методологии БЭМ, чтобы избежать хаоса в проекте.
Решение: Промпт генерирует чистую и валидную HTML-разметку с классами, полностью соответствующими БЭМ-нотации.
Текст промпта:
*****
Ты – эксперт по HTML-верстке и методологии БЭМ. Твоя задача – создать HTML-структуру для компонента “[укажите название компонента, например, ‘карточка профиля пользователя’]”.
Название блока: “[укажите название блока, например, ‘profile-card’]”.
Компонент должен включать следующие элементы:
[перечислите элементы компонента, например:
– Аватар пользователя (изображение)
– Имя пользователя (заголовок)
– Короткая биография (абзац)
– Кнопка “Подписаться” (кнопка)]
Сгенерируй только HTML-код. Используй теги с максимальной семантической точностью. Все классы должны строго соответствовать БЭМ-нотации (блок__элемент, блок–модификатор). Не добавляй CSS или JavaScript.
*****
Почему это работает: Четкое указание роли (“эксперт по БЭМ”), названия блока и перечня элементов не оставляет нейросети пространства для импровизации. Требование строго следовать нотации гарантирует правильное именование классов.
2. Создание CSS-стилей для Flexbox-контейнера
Проблема: Необходимо быстро стилизовать блок с помощью Flexbox, но помнить все свойства и их значения бывает утомительно.
Решение: Промпт генерирует готовый CSS-код для Flexbox-контейнера с нужными параметрами выравнивания, распределения и переноса элементов.
Текст промпта:
*****
Ты – frontend-разработчик, специалист по CSS Flexbox. Напиши CSS-код для класса “[укажите имя класса, например, ‘.card-container’]”.
Этот класс должен определять Flexbox-контейнер со следующими свойствами:
– Направление основной оси: [укажите направление, например, “горизонтальное (row)”]
– Выравнивание элементов по основной оси: [укажите свойство justify-content, например, “пространство между элементами (space-between)”]
– Выравнивание элементов по поперечной оси: [укажите свойство align-items, например, “по центру (center)”]
– Перенос элементов: [укажите, нужен ли перенос, например, “разрешить перенос на новую строку (wrap)”]
Сгенерируй только CSS-код. Добавь короткие комментарии к каждому свойству, объясняющие его назначение.
*****
Почему это работает: Запрос оперирует конкретными свойствами Flexbox (justify-content, align-items). Указание роли и просьба добавить комментарии заставляют модель выдать не просто код, а хорошо документированный и понятный фрагмент стилей.
3. Написание стилей для CSS Grid-раскладки
Проблема: Создание сложной сеточной раскладки с помощью CSS Grid требует написания большого количества кода, особенно для адаптивности.
Решение: Промпт позволяет быстро сгенерировать CSS для сложной Grid-сетки, включая определение колонок, рядов и областей.
Текст промпта:
*****
Ты – эксперт по CSS Grid Layout. Создай CSS для контейнера с классом “[укажите класс, например, ‘.page-layout’]”.
Сетка должна иметь следующую структуру:
– Колонки: [опишите колонки, например, “три колонки: первая и третья по 1fr, центральная – 3fr”]
– Ряды: [опишите ряды, например, “два ряда: верхний ‘auto’, нижний ‘1fr'”]
– Области (grid-template-areas): [опишите области, например, “‘header header header’, ‘sidebar content content’, ‘footer footer footer'”]
– Расстояние между ячейками (gap): “[укажите значение, например, ’15px’]”.
Напиши только CSS-код для родительского контейнера. Предоставь также примеры CSS-правил для дочерних элементов, чтобы разместить их в областях (header, sidebar, content, footer).
*****
Почему это работает: Промпт использует специфическую терминологию CSS Grid (grid-template-areas, fr, gap), что направляет модель на генерацию точного кода. Просьба предоставить примеры для дочерних элементов делает ответ исчерпывающим и готовым к использованию.
4. Создание адаптивной сетки для страницы
Проблема: Нужно создать CSS-код для сетки элементов (например, карточек товаров), которая корректно отображается на всех типах устройств.
Решение: Этот запрос генерирует CSS с медиазапросами, которые изменяют количество колонок в сетке в зависимости от ширины экрана.
Текст промпта:
*****
Ты – верстальщик, специализирующийся на адаптивной верстке. Напиши CSS-код для создания адаптивной сетки элементов.
Используй [выберите технологию, например, “CSS Grid” или “Flexbox”].
Селектор контейнера: “[укажите селектор, например, ‘.product-grid’]”.
Поведение сетки:
– На экранах шире 1200px: [укажите количество колонок, например, “4 колонки”]
– На экранах от 992px до 1199px: [укажите количество колонок, например, “3 колонки”]
– На экранах от 768px до 991px: [укажите количество колонок, например, “2 колонки”]
– На экранах уже 767px: [укажите количество колонок, например, “1 колонка”]
Расстояние между элементами сетки: “[укажите значение, например, ’24px’]”.
Сгенерируй полный CSS-код с медиазапросами (media queries).
*****
Почему это работает: Запрос четко определяет “точки останова” (breakpoints) и желаемое поведение на каждом из них. Это позволяет ИИ сгенерировать точные медиазапросы, избавляя от рутинной работы по их написанию.
5. Генерация JS для открытия/закрытия модального окна
Проблема: Написание JavaScript для управления видимостью модального окна – частая, но требующая внимания задача (обработка кликов, закрытие по Esc и т.д.).
Решение: Промпт генерирует готовый, чистый JavaScript-код для полного цикла работы модального окна.
Текст промпта:
*****
Ты – JavaScript-разработчик. Напиши код на чистом JavaScript (ES6+) для управления модальным окном.
HTML-структура:
– Кнопка открытия с id: “[укажите id, например, ‘openModalBtn’]”
– Модальное окно с id: “[укажите id, например, ‘myModal’]”
– Кнопка закрытия внутри окна с классом: “[укажите класс, например, ‘.close-button’]”
Требуемая функциональность:
1. При клике на кнопку открытия модальное окно должно появляться (добавлять класс ‘is-open’).
2. При клике на кнопку закрытия или на фон вне окна, оно должно скрываться (убирать класс ‘is-open’).
3. При нажатии клавиши ‘Escape’ окно также должно скрываться.
Сгенерируй только JavaScript-код. Код должен быть хорошо прокомментирован.
*****
Почему это работает: Промпт не просто просит “сделать модалку”, а предоставляет точные селекторы (id, классы) и перечисляет все необходимые триггеры (клик по кнопке, клик вне, клавиша Esc). Это гарантирует полнофункциональный и продуманный скрипт.
6. Рефакторинг “грязного” CSS-кода
Проблема: Имеется фрагмент CSS с重复рующимися стилями, длинными селекторами и магическими числами, который сложно поддерживать.
Решение: Этот промпт анализирует предоставленный CSS и предлагает оптимизированную версию, следуя лучшим практикам.
Текст промпта:
*****
Ты – опытный frontend-архитектор, специалист по рефакторингу CSS. Проанализируй следующий CSS-код и предложи его улучшенную версию.
Цели рефакторинга:
– Уменьшить вложенность селекторов.
– Сгруппировать общие свойства для похожих элементов.
– Заменить “магические числа” (например, `margin-left: 13.5px;`) на более универсальные значения или переменные.
– Улучшить читаемость и структуру кода.
Объясни, какие именно изменения ты внес и почему они делают код лучше.
Исходный CSS-код для рефакторинга:
“`css
[вставьте сюда ваш “грязный” CSS-код]
“`
Формат ответа: сначала исправленный CSS, затем список внесенных улучшений с объяснениями.
*****
Почему это работает: Роль “архитектора” и четко поставленные цели (уменьшить вложенность, сгруппировать) направляют ИИ на глубокий анализ, а не поверхностное форматирование. Требование объяснить изменения превращает ответ в обучающий материал.
7. Поиск и исправление ошибок в JavaScript
Проблема: Скрипт не работает, как ожидалось, но ошибка не очевидна.
Решение: Промпт дает ИИ задачу выступить в роли отладчика: найти логические или синтаксические ошибки в коде и предложить исправление.
Текст промпта:
*****
Ты – опытный JavaScript-разработчик и отладчик. Проанализируй этот код. Он должен [опишите, что должен делать код, например, “скрывать элемент при клике”], но он не работает.
Найди ошибку(и) в коде, исправь ее и подробно объясни, в чем была проблема и почему предложенное тобой решение ее исправляет.
Код для анализа:
“`javascript
[вставьте сюда ваш неработающий JS-код]
“`
Формат ответа:
1. Описание найденной ошибки.
2. Исправленный код.
3. Подробное объяснение.
*****
Почему это работает: Запрос не просто просит “исправить код”, а требует выступить в роли отладчика и объяснить причину. Описание ожидаемого поведения помогает ИИ понять цель кода и быстрее найти логическую ошибку.
8. Добавление ARIA-атрибутов для доступности
Проблема: Компонент сверстан, но не доступен для пользователей с экранными ридерами.
Решение: Промпт анализирует HTML-структуру и добавляет необходимые WAI-ARIA атрибуты для улучшения доступности (a11y).
Текст промпта:
*****
Ты – эксперт по веб-доступности (a11y). Твоя задача – улучшить доступность следующего HTML-компонента, добавив необходимые WAI-ARIA роли и атрибуты.
Компонент представляет собой [опишите компонент, например, “аккордеон” или “вкладки (табы)”].
Добавь атрибуты, такие как `role`, `aria-expanded`, `aria-controls`, `aria-labelledby`, и другие, где это необходимо.
Вот HTML-код для улучшения:
[вставьте сюда ваш HTML-код без ARIA-атрибутов]
Верни обновленный HTML-код и добавь краткие комментарии, объясняющие, для чего нужен каждый добавленный атрибут.
*****
Почему это работает: Роль “эксперта по доступности” заставляет модель сфокусироваться на специфических атрибутах ARIA. Описание типа компонента (“аккордеон”) дает ключ к пониманию его интерактивного поведения и нужных ролей.
9. Оптимизация SVG-иконки
Проблема: SVG-иконка, выгруженная из графического редактора, содержит много лишнего кода: метаданные, комментарии, избыточные теги.
Решение: Промпт “чистит” SVG-код, удаляя все ненужное и оптимизируя его для использования на веб-странице.
Текст промпта:
*****
Ты – инструмент для оптимизации SVG. Проанализируй следующий SVG-код и оптимизируй его для использования в вебе.
Задачи оптимизации:
– Удалить метаданные редактора (например, комментарии, теги ``, ``).
– Удалить XML-инструкции и DOCTYPE.
– Удалить ненужные атрибуты, такие как `id`, `class`, если они не используются.
– Сократить числовые значения до необходимой точности (2-3 знака после запятой).
– Преобразовать стили из атрибутов в единый `style` или наоборот, если это уменьшит размер.
Вот SVG-код для оптимизации:
“`xml
[вставьте сюда ваш исходный SVG-код]
“`
Верни только оптимизированный SVG-код.
*****
Почему это работает: Запрос перечисляет конкретные шаги оптимизации, которым должна следовать модель. Это превращает ее в аналог специализированного инструмента вроде SVGO, но с гибкой настройкой через текст.
10. Создание CSS-анимации при наведении
Проблема: Нужно добавить простой, но элегантный интерактивный эффект для элемента, например, для кнопки или ссылки.
Решение: Промпт генерирует CSS-код для создания анимационного эффекта при наведении курсора, используя `transition` и `transform`.
Текст промпта:
*****
Ты – CSS-аниматор. Напиши CSS-код для элемента с классом “[укажите класс, например, ‘.animated-button’]”.
При наведении курсора на этот элемент должен происходить следующий эффект: [опишите эффект, например, “элемент плавно сдвигается вверх на 5px и его тень становится более выраженной”].
Длительность анимации: [укажите время, например, “0.3 секунды”].
Функция плавности: [укажите функцию, например, “ease-in-out”].
Используй свойства `transition` и `transform`. Не используй JavaScript.
Сгенерируй только CSS-код.
*****
Почему это работает: Конкретное описание желаемого визуального эффекта, указание длительности и функции плавности дают ИИ все необходимые параметры для создания точного и аккуратного CSS-кода с переходами.
11. Написание стилей для кастомного чекбокса
Проблема: Стандартные чекбоксы выглядят по-разному в браузерах и не вписываются в дизайн проекта. Нужно создать свой, стилизованный чекбокс.
Решение: Промпт генерирует HTML и CSS для создания полностью кастомного чекбокса с использованием псевдоэлементов.
Текст промпта:
*****
Ты – frontend-разработчик. Создай HTML и CSS для стилизации чекбокса.
Задача: полностью скрыть стандартный `` и нарисовать кастомный вид с помощью `
*****
Почему это работает: Промпт описывает конкретную технику (скрыть input, использовать label и псевдоэлементы), что является стандартным подходом. Описание вида в двух состояниях дает четкие инструкции для стилизации.
12. Генерация HTML и CSS для формы обратной связи
Проблема: Нужно быстро сверстать стандартную форму с полями и кнопкой, обеспечив базовую структуру и стилизацию.
Решение: Запрос генерирует готовую разметку и стили для простой, но аккуратной формы обратной связи.
Текст промпта:
*****
Ты – верстальщик. Создай HTML и CSS для формы обратной связи.
Форма должна содержать следующие поля:
– Имя (текстовое поле, обязательное)
– Email (поле для email, обязательное)
– Сообщение (текстовая область, textarea)
– Кнопка “Отправить”
Используй тег `
`;
if(anchor&&anchor.parentNode){anchor.parentNode.insertBefore(WRAP,anchor);}else{scope.insertBefore(WRAP,scope.firstChild);}
// Гарантированный отступ НАД виджетом (распорка — не схлопывается, тему не задевает).
try{ if(WRAP && WRAP.parentNode){ var gap=document.createElement("div"); gap.setAttribute("aria-hidden","true"); gap.style.cssText="height:24px;flex:0 0 auto;pointer-events:none;"; WRAP.parentNode.insertBefore(gap, WRAP); } }catch(e){}
// Перенос блока «ИИ-технолог» ПОД виджет: переносим его исходную обёртку
// (.entry-top) ЦЕЛИКОМ и ВНЕ .entry-content — иначе H2 подхватывает стили темы.
try{
var promo=document.getElementById("kursblock");
var mover=promo?(promo.closest('.entry-top')||promo):null;
var ec=document.querySelector('.entry-content,.post-content,.article-content,.td-post-content');
if(mover && ec && ec.parentNode){
ec.parentNode.insertBefore(mover, ec.nextSibling);
mover.style.setProperty('margin-top','32px','important');
mover.style.setProperty('margin-bottom','0','important');
}
}catch(e){}
startEngine(WRAP);
}
if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',boot);}else{boot();}
function startEngine(WRAP){
/* =========================================================
ICONS
========================================================= */
const CHECK_ICON = `
`;
const AI_ICON = `
`;
const FLIP_ICON = `
`;
/* =========================================================
DATA
========================================================= */
/* =========================================================
РАЗМЕТКА ОТ ИИ (CyberSEO вставляет сюда свой ответ)
Движок сам парсит её в CARDS / LAYERS / CLASSIC_PRESET / PAGE.
========================================================= */
/* демо-разметка (фолбэк, если на странице нет блока #generator) */
const DEMO_MARKUP = `
[[ТЕМА]] коммерческих предложений
[[ПОДЗАГОЛОВОК]] Собери промпт: выбери тип, усили слоями и впиши данные.
[[ЛИД]] Бесплатный генератор коммерческих предложений на нейросети: соберите сильный промпт под свою задачу за минуту.
[[КАРТА]]
[НАЗВАНИЕ] Холодное КП
[ЯРЛЫК] Первый контакт
[ХИТ] да
[ОПИСАНИЕ] Цепляет того, кто о вас ещё не слышал.
[КОГДА] Когда пишете тому, кто вас пока не знает: холодная база, первый выход на ЛПР.
[ФИЧА] Сильный первый абзац
[ФИЧА] Снимает недоверие
[ФИЧА] Без длинных вступлений
[МЕТРИКА] Свобода ИИ | 45
[МЕТРИКА] Простота ввода | 70
[МЕТРИКА] Глубина | 55
[ПРОМПТ] Составь холодное КП от [КОМПАНИЯ] для [АУДИТОРИЯ], которая пока не знает о нас. Продукт: [ПРОДУКТ]. Зацепи с первой строки, сними недоверие.
[[/КАРТА]]
[[КАРТА]]
[НАЗВАНИЕ] Тёплое КП
[ЯРЛЫК] Уже знают вас
[ОПИСАНИЕ] Опирается на прошлый контакт и укрепляет доверие.
[КОГДА] Когда клиент уже общался с вами: после встречи, заявки, пробного периода.
[ФИЧА] Личное обращение
[ФИЧА] Опора на контакт
[ФИЧА] Мягкое дожатие
[МЕТРИКА] Свобода ИИ | 40
[МЕТРИКА] Простота ввода | 60
[МЕТРИКА] Глубина | 60
[ПРОМПТ] Составь тёплое КП от [КОМПАНИЯ] для [АУДИТОРИЯ], уже знакомой с нами. Продукт: [ПРОДУКТ]. Опирайся на прошлый контакт [КОНТЕКСТ].
[[/КАРТА]]
[[КАРТА]]
[НАЗВАНИЕ] Длинное со списками
[ЯРЛЫК] Детальное
[ОПИСАНИЕ] Полный разбор по разделам. Для сложных сделок.
[КОГДА] Когда сделка сложная или дорогая: услуги с этапами, B2B-проекты.
[ФИЧА] Разделы и списки
[ФИЧА] Полнота
[ФИЧА] Под сложный B2B
[МЕТРИКА] Свобода ИИ | 35
[МЕТРИКА] Простота ввода | 55
[МЕТРИКА] Глубина | 90
[ПРОМПТ] Составь развёрнутое КП от [КОМПАНИЯ] для [АУДИТОРИЯ] по [ПРОДУКТ]. Раздели на секции со списками: проблема, решение, этапы, результат.
[[/КАРТА]]
[[КАРТА]]
[НАЗВАНИЕ] Короткое КП
[ЯРЛЫК] На один экран
[ОПИСАНИЕ] Суть, выгода, оффер и шаг — без воды.
[КОГДА] Когда нужно быстро: мессенджер, короткое письмо, занятый руководитель.
[ФИЧА] На один экран
[ФИЧА] Без воды
[ФИЧА] Быстрое чтение
[МЕТРИКА] Свобода ИИ | 50
[МЕТРИКА] Простота ввода | 85
[МЕТРИКА] Глубина | 30
[ПРОМПТ] Составь короткое КП от [КОМПАНИЯ] для [АУДИТОРИЯ] по [ПРОДУКТ] — не длиннее экрана: суть, выгода, оффер, шаг.
[[/КАРТА]]
[[КАРТА]]
[НАЗВАНИЕ] Через кейс
[ЯРЛЫК] Доказательное
[ХИТ] да
[ОПИСАНИЕ] Показывает результат другого клиента.
[КОГДА] Когда есть сильный кейс, цифры результата и надо снизить риск.
[ФИЧА] Социальное доказательство
[ФИЧА] Цифры результата
[ФИЧА] Снимает риск
[МЕТРИКА] Свобода ИИ | 40
[МЕТРИКА] Простота ввода | 45
[МЕТРИКА] Глубина | 75
[ПРОМПТ] Составь КП от [КОМПАНИЯ] для [АУДИТОРИЯ] на основе кейса [КЕЙС] с результатом [РЕЗУЛЬТАТ]. Перенеси логику успеха на клиента.
[[/КАРТА]]
[[КАРТА]]
[НАЗВАНИЕ] Под тендер
[ЯРЛЫК] Формальное
[ОПИСАНИЕ] Строгий формат: требования, сроки и гарантии.
[КОГДА] Когда участвуете в закупке, конкурсе, тендере.
[ФИЧА] Соответствие ТЗ
[ФИЧА] Сроки и гарантии
[ФИЧА] Строгий тон
[МЕТРИКА] Свобода ИИ | 25
[МЕТРИКА] Простота ввода | 50
[МЕТРИКА] Глубина | 70
[ПРОМПТ] Составь формальное КП от [КОМПАНИЯ] для закупки [АУДИТОРИЯ] по [ПРОДУКТ]: требования, сроки, гарантии, цена.
[[/КАРТА]]
[[СЛОЙ]] Кто пишет
[ВАРИАНТ] Психолог коммуникаций | Учитывает мотивы и страхи ЛПР. | Пиши как психолог деловых коммуникаций: учитывай мотивы и страхи ЛПР, снимай возражения заранее.
[ВАРИАНТ] Маркетолог со стажем | Выгоды и оффер на первом плане. | Пиши как опытный маркетолог: цепляющий заход, выгоды на первом плане, чёткий оффер.
[ВАРИАНТ] Руководитель руководителю | По делу, через цифры. | Пиши как управленец управленцу: по делу, цифры, ответственность, без воды.
[[/СЛОЙ]]
[[СЛОЙ]] Мышление
[ВАРИАНТ] Латеральное | Неочевидный угол подачи. | Найди неочевидный угол подачи, которого нет у конкурентов.
[ВАРИАНТ] Первопринципы | От коренной потребности. | Иди от коренной потребности клиента, а не от шаблона.
[ВАРИАНТ] Композиционное | Аргументы по нарастанию. | Выстрой аргументы по нарастанию — от слабого к сильному.
[[/СЛОЙ]]
[[СЛОЙ]] Упор
[ВАРИАНТ] Психология | Триггеры доверия и дефицита. | Сделай упор на триггеры: доверие, принадлежность, страх упустить.
[ВАРИАНТ] Выгоды | Экономия и рост в цифрах. | Сделай упор на измеримые выгоды: экономия, рост, окупаемость в цифрах.
[ВАРИАНТ] Надёжность | Гарантии и снижение рисков. | Сделай упор на надёжность: гарантии, опыт, снижение рисков.
[[/СЛОЙ]]
[[КЛАССИКА]] карта=1 | слои=Кто пишет:2, Упор:2
[[FAQ]]
[ВОПРОС] Что вписать в «Дополнительно», чтобы КП стало сильнее? [ОТВЕТ] Добавьте конкретику: цифры, сроки, кейс и главное возражение клиента — детали отличают убедительное предложение от шаблонного.
[ВОПРОС] Как правильно заполнять поля? [ОТВЕТ] Пишите конкретно: не «бизнесу», а «руководителю продаж сети из 20 филиалов». Чем точнее вводные, тем точнее результат.
[ВОПРОС] Чем усилители реально помогают? [ОТВЕТ] Они меняют логику подачи: заставляют считать экономику решения, снимать главное возражение или усиливать доказательства.
[ВОПРОС] Что делать с готовым промптом? [ОТВЕТ] Скопируйте его в любую нейросеть, чтобы создать КП с ИИ, оцените черновик и при желании прогоните ещё раз с другим усилителем.
[[/FAQ]]
`;
/* =========================================================
ЧТЕНИЕ РАЗМЕТКИ ИЗ ТЕЛА СТАТЬИ (маркер #generator ... #generator)
Как у движка аналогов: ИИ выдаёт разметку в текст статьи между
двумя строками-маркерами #generator. Движок находит блок, парсит
и скрывает исходный текст, оставляя только конструктор.
========================================================= */
function readMarkupFromPage(){
// Читалка и пряталка на ОДНИХ узлах. Блок находится по всему дереву,
// и прячется весь диапазон его верхнеуровневых контейнеров между
// маркерами (кроме виджета). Устойчиво к: любой вложенности (.wp-block-*),
// склейке блока в один абзац, съеденной решётке (#generator->generator),
// висячим в пустых абзацах, тексту статьи рядом с маркером.
const root = document.querySelector('.entry-content, .post-content, .article-content, .td-post-content') || document.body;
const widget = document.querySelector('.app-layout');
const widgetBox = document.getElementById('ai-generator-widget');
const BLANK = /^[\s\u00A0\u200B\u200C\u200D\uFEFF]*$/;
const blank = (s) => BLANK.test(s || '');
const hasWidget = (el) => (widget && el.contains(widget)) || (widgetBox && el.contains(widgetBox));
const inWidget = (n) => {
let p = n;
while(p){
const t = p.nodeName;
if(t === 'SCRIPT' || t === 'STYLE') return true;
if(widget && p === widget) return true;
if(widgetBox && p === widgetBox) return true;
p = p.parentNode;
}
return false;
};
// 1. Глубоко собираем текстовые узлы статьи (кроме виджета) + карту смещений.
const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
const nodes = []; let node;
while((node = walker.nextNode())){
if(inWidget(node)) continue;
nodes.push(node);
}
if(!nodes.length) return null;
let full = ''; const ranges = [];
for(let i = 0; i < nodes.length; i++){
if(i) full += '\n';
const start = full.length;
full += (nodes[i].nodeValue || '');
ranges.push([start, full.length]);
}
// 2. Маркеры (учитываем съеденную решётку: #generator -> generator).
const reMark = /(^|\n|\s)#?generator(\s|\n|$)/gi;
const marks = []; let m;
while((m = reMark.exec(full)) !== null){
const wStart = m.index + m[1].length;
const wEnd = wStart + (m[0].length - m[1].length - m[2].length);
marks.push({ start: wStart, end: wEnd });
}
if(marks.length < 2) return null; // блока нет -> демо/выключение
const first = marks[0], last = marks[marks.length - 1];
// 3. Текст блока между маркерами + нормализация: перенос строки ТОЛЬКО
// перед структурными тегами. Плейсхолдеры внутри промптов не трогаем.
let block = full.slice(first.start, last.start).replace(/^#?generator/i, '');
const TAGS = ['НАЗВАНИЕ','ЯРЛЫК','ХИТ','ОПИСАНИЕ','КОГДА','ФИЧА','МЕТРИКА','ПРОМПТ','ВАРИАНТ','ВОПРОС','ОТВЕТ'];
block = block.replace(/\s*(\[\[[^\]]+\]\])\s*/g, '\n$1 ');
block = block.replace(new RegExp('\\s*(\\[(?:' + TAGS.join('|') + ')\\])\\s*', 'g'), '\n$1 ');
if(block.indexOf('[[КАРТА]]') === -1) return null;
// Узлы маркеров и их верхнеуровневые (прямые дети root) контейнеры.
const nodeAt = (pos) => {
for(let i = 0; i < ranges.length; i++){ if(pos >= ranges[i][0] && pos < ranges[i][1]) return nodes[i]; }
return nodes[nodes.length - 1];
};
const topChild = (n) => {
let el = n;
while(el && el.parentNode && el.parentNode !== root){ el = el.parentNode; }
return (el && el.parentNode === root) ? el : null;
};
const firstTop = topChild(nodeAt(first.start));
const lastTop = topChild(nodeAt(Math.max(first.start, last.end - 1)));
// 4a. Стираем текст блока (границы режем посимвольно — текст статьи в том
// же узле не заденем).
const from = first.start, to = last.end;
const touched = new Set();
for(let i = 0; i < nodes.length; i++){
const [s, e] = ranges[i];
if(e <= from || s >= to) continue;
const v = nodes[i].nodeValue;
const lf = Math.max(0, from - s), lt = Math.min(v.length, to - s);
nodes[i].nodeValue = v.slice(0, lf) + v.slice(lt);
if(nodes[i].parentNode) touched.add(nodes[i].parentNode);
}
// 4b. Прячем внутренние опустевшие элементы (в т.ч. внутри обёртки с виджетом).
touched.forEach(p0 => {
let el = p0;
while(el && el !== root && el.nodeType === 1){
if(hasWidget(el)) break;
if(blank(el.textContent)) el.style.display = 'none';
el = el.parentNode;
}
});
// 4c. Жёстко прячем верхнеуровневые контейнеры блока [firstTop..lastTop]:
// между границами — целиком; сами границы — только если опустели
// (чтобы не съесть текст статьи у маркера); обёртку с виджетом не трогаем.
if(firstTop && lastTop){
const kids = [].slice.call(root.children);
let started = false;
for(const el of kids){
const isFirst = el === firstTop, isLast = el === lastTop;
if(isFirst) started = true;
if(started && !hasWidget(el)){
if(isFirst || isLast){ if(blank(el.textContent)) el.style.display = 'none'; }
else { el.style.display = 'none'; }
}
if(isLast) break;
}
}
return block;
}
let MARKUP = DEMO_MARKUP; // реально прочитается в initEngine() после загрузки DOM
/* =========================================================
ПАРСЕР РАЗМЕТКИ → CARDS / LAYERS / CLASSIC_PRESET / PAGE
========================================================= */
function parseMarkup(text){
const lines = text.split(/\r?\n/);
const page = { theme:"", subtitle:"", lead:"" };
const cards = [];
const layers = [];
const faq = [];
let faqItem = null;
let classic = { card:0, layers:{} };
let mode = null; // "card" | "layer"
let card = null; // текущая карта
let layer = null; // текущий слой
const val = (line, tag) => line.slice(tag.length).trim();
for(let raw of lines){
const line = raw.trim();
if(!line) continue;
// шапка
if(line.startsWith("[[ТЕМА]]")){ page.theme = val(line,"[[ТЕМА]]"); continue; }
if(line.startsWith("[[ПОДЗАГОЛОВОК]]")){ page.subtitle = val(line,"[[ПОДЗАГОЛОВОК]]"); continue; }
if(line.startsWith("[[ЛИД]]")){ page.lead = val(line,"[[ЛИД]]"); continue; }
// карта
if(line === "[[КАРТА]]"){
mode = "card";
card = { name:"", badge:"", hot:false, description:"", when:"", features:[], metrics:[], prompt:"" };
continue;
}
if(line === "[[/КАРТА]]"){ if(card) cards.push(card); card=null; mode=null; continue; }
// слой
if(line.startsWith("[[СЛОЙ]]")){
mode = "layer";
const name = val(line,"[[СЛОЙ]]");
layer = { key:"layer"+(layers.length+1), name:name, options:[] };
continue;
}
if(line === "[[/СЛОЙ]]"){ if(layer) layers.push(layer); layer=null; mode=null; continue; }
if(line === "[[FAQ]]"){ mode="faq"; faqItem=null; continue; }
if(line === "[[/FAQ]]"){ mode=null; faqItem=null; continue; }
// классика
if(line.startsWith("[[КЛАССИКА]]")){
const body = val(line,"[[КЛАССИКА]]");
// карта=1 | слои=Кто пишет:2, Упор:2
const parts = body.split("|").map(s=>s.trim());
parts.forEach(pt=>{
if(pt.startsWith("карта=")){
classic.card = Math.max(0, parseInt(pt.slice(6),10)-1 || 0);
} else if(pt.startsWith("слои=")){
pt.slice(5).split(",").forEach(pair=>{
const [lname, opt] = pair.split(":").map(x=>x.trim());
classic._pending = classic._pending || [];
classic._pending.push([lname, parseInt(opt,10)-1]);
});
}
});
continue;
}
// поля карты
if(mode === "card" && card){
if(line.startsWith("[НАЗВАНИЕ]")){ card.name = val(line,"[НАЗВАНИЕ]"); continue; }
if(line.startsWith("[ЯРЛЫК]")){ card.badge = val(line,"[ЯРЛЫК]"); continue; }
if(line.startsWith("[ХИТ]")){ card.hot = /да|true|1/i.test(val(line,"[ХИТ]")); continue; }
if(line.startsWith("[ОПИСАНИЕ]")){ card.description = val(line,"[ОПИСАНИЕ]"); continue; }
if(line.startsWith("[КОГДА]")){ card.when = val(line,"[КОГДА]"); continue; }
if(line.startsWith("[ФИЧА]")){ card.features.push(val(line,"[ФИЧА]")); continue; }
if(line.startsWith("[МЕТРИКА]")){
const m = val(line,"[МЕТРИКА]").split("|").map(x=>x.trim());
card.metrics.push([ m[0]||"", parseInt(m[1],10)||0 ]);
continue;
}
if(line.startsWith("[ПРОМПТ]")){ card.prompt = val(line,"[ПРОМПТ]"); continue; }
}
// варианты слоя
if(mode === "layer" && layer){
if(line.startsWith("[ВАРИАНТ]")){
const parts = val(line,"[ВАРИАНТ]").split("|").map(x=>x.trim());
layer.options.push([ parts[0]||"", parts[1]||"", parts[2]||"" ]);
continue;
}
}
// FAQ (вопрос+ответ на одной строке "[ВОПРОС] .. [ОТВЕТ] .." или на разных)
if(mode === "faq"){
if(line.startsWith("[ВОПРОС]")){ const qa = val(line,"[ВОПРОС]").split("[ОТВЕТ]"); faqItem = { q:(qa[0]||"").trim(), a:(qa[1]||"").trim() }; faq.push(faqItem); continue; }
if(line.startsWith("[ОТВЕТ]")){ if(!faqItem){ faqItem={q:"",a:""}; faq.push(faqItem); } faqItem.a = val(line,"[ОТВЕТ]"); continue; }
}
}
// разрешить _pending слои классики (по имени → key)
if(classic._pending){
classic._pending.forEach(([lname, opt])=>{
const L = layers.find(x=>x.name === lname);
if(L) classic.layers[L.key] = opt;
});
delete classic._pending;
}
return { page, cards, layers, classic, faq };
}
let PARSED = parseMarkup(MARKUP);
let PAGE = PARSED.page;
let CARDS = PARSED.cards;
let LAYERS = PARSED.layers;
let CLASSIC_PRESET = PARSED.classic;
let FAQ = PARSED.faq;
// перечитать разметку из статьи и пересобрать структуры (вызывается после DOM готов)
function loadMarkupAndBuild(){
let fromPage = null;
try{ fromPage = readMarkupFromPage(); }catch(e){ fromPage = null; }
// НЕТ блока #generator в этой статье → движок не работает здесь.
// Это защищает от показа на всех страницах сайта (в шапке/подвале/других статьях).
// Исключение: страница-превью, где на самой странице лежит атрибут data-generator-demo.
if(!fromPage){
const allowDemo = document.querySelector('[data-generator-demo]');
if(!allowDemo){
const box = document.getElementById('ai-generator-widget');
if(box) box.style.display = 'none';
return false; // сигнал: не рисовать
}
MARKUP = DEMO_MARKUP;
} else {
MARKUP = fromPage;
}
try{
PARSED = parseMarkup(MARKUP);
if(!PARSED.cards || PARSED.cards.length === 0) throw new Error('no cards');
}catch(e){
const box = document.getElementById('ai-generator-widget');
if(box) box.style.display = 'none';
return false;
}
PAGE = PARSED.page;
CARDS = PARSED.cards;
LAYERS = PARSED.layers;
CLASSIC_PRESET = PARSED.classic;
FAQ = PARSED.faq;
return true;
}
const state = {
card:null,
layers:{},
activeLayer:0,
ai:{},
values:{},
additional:"",
cardSides:{}
};
/* =========================================================
HELPERS
========================================================= */
const byId = id => document.getElementById(id);
function escapeHTML(value){
return String(value ?? "").replace(
/[&<>"']/g,
character => ({
"&":"&",
"<":"<",
">":">",
'"':""",
"'":"'"
})[character]
);
}
function pulseElement(element){
if(!element){
return;
}
element.classList.remove("pulse");
void element.offsetWidth;
element.classList.add("pulse");
}
function animateElement(element,className){
if(!element){
return;
}
element.classList.remove(className);
void element.offsetWidth;
element.classList.add(className);
element.addEventListener(
"animationend",
() => element.classList.remove(className),
{once:true}
);
}
function selectedLayerCount(){
return LAYERS.filter(layer => {
return state.layers[layer.key] != null;
}).length;
}
function variantCount(){
let total = CARDS.length;
LAYERS.forEach(layer => {
total *= layer.options.length + 1;
});
return total;
}
/* =========================================================
SOUND
========================================================= */
let soundEnabled = true;
const Sound = (() => {
let context = null;
let master = null;
const notes = {
C:523.25,
D:587.33,
E:659.25,
G:783.99,
A:880
};
function ensure(){
if(!context){
context = new (
window.AudioContext ||
window.webkitAudioContext
)();
master = context.createGain();
master.gain.value = .18;
master.connect(context.destination);
}
if(context.state === "suspended"){
context.resume();
}
return context;
}
function tone(frequency,duration = .12,delay = 0,gain = 1){
if(!soundEnabled){
return;
}
try{
const ctx = ensure();
const start = ctx.currentTime + delay;
const oscillator = ctx.createOscillator();
const envelope = ctx.createGain();
oscillator.type = "sine";
oscillator.frequency.value = frequency;
envelope.gain.setValueAtTime(.0001,start);
envelope.gain.exponentialRampToValueAtTime(
.22 * gain,
start + .01
);
envelope.gain.exponentialRampToValueAtTime(
.0001,
start + duration
);
oscillator.connect(envelope).connect(master);
oscillator.start(start);
oscillator.stop(start + duration + .03);
}catch(error){}
}
return {
click(){
tone(notes.D,.055,0,.43);
tone(notes.E,.075,.06,.38);
},
open(){
tone(notes.E,.11,0,.72);
tone(notes.G,.18,.075,.66);
},
close(){
tone(notes.G,.1,0,.62);
tone(notes.E,.16,.07,.58);
},
flip(){
tone(notes.C,.07,0,.45);
tone(notes.G,.12,.06,.56);
},
fill(){
tone(notes.G,.075,0,.44);
tone(notes.A,.11,.055,.54);
},
success(){
[notes.C,notes.E,notes.G,notes.A].forEach(
(note,index) => {
tone(
note,
index === 3 ? .18 : .09,
index * .085,
.62
);
}
);
}
};
})();
/* =========================================================
CARD CONTENT
========================================================= */
function metricClass(index){
return [
"originality",
"simplicity",
"persuasion"
][index];
}
function cardFrontHTML(card,index){
const selected = state.card === index;
return `
`).join("");
}
// Разбирает плейсхолдер на короткую метку + подсказку для тултипа.
// Вход: полный текст внутри [ ], например:
// 'укажите роль, например, "опытный автор постов"'
// 'опишите аудиторию, например, "владельцы студий"'
// 'АУДИТОРИЯ' (старый короткий формат — тоже поддержан)
// Возвращает { label, hint }.
function parsePlaceholder(raw){
const full = String(raw || "").trim();
// старый формат: короткое ИМЯ капсом без запятых/кавычек → метка как есть, без подсказки
if(/^[A-ZА-ЯЁ0-9 _-]+$/.test(full) && full.length <= 24 && full.indexOf(",") === -1){
return { label: capitalizeFirst(full.toLowerCase()), hint: "" };
}
// новый формат: "<действие> <предмет>, например, "<пример>""
// 1) отделяем пример (после "например")
let hint = "";
const exMatch = full.match(/,?\s*например[,:]?\s*(.+)$/i);
let head = full;
if(exMatch){
hint = exMatch[1].trim().replace(/^["«]|["»]$/g, "").trim();
head = full.slice(0, exMatch.index).trim();
}
// 2) из "укажите роль" / "опишите аудиторию" / "дайте цель" убираем глагол-действие
let label = head
.replace(/^(укажите|опишите|дайте|впишите|введите|добавьте|напишите|перечислите|уточните)\s+/i, "")
.trim();
// 3) если после чистки пусто — берём первое существительное из head
if(!label){ label = head; }
// 4) обрезаем хвост после запятой (лишние уточнения)
label = label.split(",")[0].trim();
// 5) капитализация
label = capitalizeFirst(label);
// если подсказки не было, но head длинный — саму инструкцию в подсказку
if(!hint && head && head.toLowerCase() !== label.toLowerCase()){
hint = capitalizeFirst(head);
}
return { label: label || full, hint: hint };
}
function capitalizeFirst(s){
s = String(s || "").trim();
return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
}
function renderFields(){
const list = placeholders();
const root = byId("fieldsList");
byId("fieldsCount").textContent = list.length;
if(!list.length){
root.innerHTML = `
