Максим за вечер «собрал лендинг» в Cursor: hero – indigo-градиент, услуги – зелёные кнопки, отзывы – другой шрифт без кириллицы. Каждый новый промпт давал новый «дизайн». Боль знакома: нейросеть для дизайна сайта без правил рисует как «10 пьяных дизайнеров», а кажется, что DESIGN.md – только для Figma-профи. Ответ проще: один файл-контракт, правило Cursor и одна секция за вечер.
DESIGN.md – это короткая памятка для ИИ-агента: цвета (hex), шрифты, отступы, правила hero и явные запреты. Не промпт «сделай красиво», а договор, который не меняется от чата к чату. Ориентир на вечер: файл в корне → правило в .cursor/rules → hero в стиле контракта. Workflow: токены → правило → одна секция → сверка глазами → картинки только потом. Parent «нейросеть для дизайна» – около 5528 показов/мес по России.
Формат DESIGN.md популяризировала экосистема Google Stitch как plain-text дизайн-систему для агентов. Парадокс 2026: без жёстких токенов модели выдают один и тот же «AI slop» – фиолетовый градиент, Inter и три feature-карточки. «Просто попроси красиво» почти гарантирует шаблон, а не бренд. Ниже – как зафиксировать стиль в Cursor без команды дизайнеров.
Почему без файла стиль плывёт от промпта к промпту
Боль «каждый блок как будто от другого дизайнера» появляется не потому, что Cursor «плохой». Агент (помощник, который правит файлы по вашей инструкции) каждый раз угадывает «средний интернет», если ему не дали палитру и запреты. На практике соседние секции получают разные оттенки blue, разные скругления и другой вес шрифта – это style drift.
| Подход | Что видит агент | Что получается |
|---|---|---|
| Промпт «сделай красиво» | Нет токенов, только настроение | Фиолетовый градиент, Inter, три карточки |
| Длинный чат без файла | Правила в истории, легко забываются | Стиль плывёт между секциями |
| DESIGN.md + правило Cursor | Hex, шрифты, Do’s/Don’ts каждый раз | Один primary и одна пара шрифтов |
| Конструктор «нейросеть-сайт» | Свой шаблон сервиса | Быстро, но слабо похоже на ваш бренд |
Вердикт: не делайте ставку на «ещё один красивый промпт». Используйте файл-контракт: так нейросеть для создания сайтов перестаёт угадывать шаблон и держит ваш mood. Типичная ошибка – править цвета в чате, а не в DESIGN.md.
Если лендинг без кода уже собирали – гайд лендинг в Cursor AI без кода. Эта статья – слой поверх: зафиксировать визуал, чтобы блоки не спорили друг с другом.
Соберите минимум DESIGN.md за один вечер
Боль «это только для дизайнеров» снимается коротким минимумом. Не нужна полная design system команды. Сделайте файл DESIGN.md в корне проекта и заполните блоки ниже – ориентир 30–40 минут, как у Максима.
- Шаг 1. Напишите name бренда и mood одной фразой (спокойный B2B / дерзкий lifestyle).
- Шаг 2. Задайте 4–6 цветов: primary, secondary, background, text, accent – только hex, не «синий поприятнее».
- Шаг 3. Выберите 1–2 шрифта с кириллицей (например Onest + Inter) и роли: заголовок / текст.
- Шаг 4. Пропишите spacing sm / md / lg в пикселях или rem – три значения хватит.
- Шаг 5. Добавьте правило hero: один заголовок, один CTA, один визуальный ассет, без кучи бейджей.
- Шаг 6. Список Do’s: контрастный CTA, читаемый русский текст, единые скругления.
- Шаг 7. Список Don’ts: purple/indigo default, emoji в UI, прозрачные кнопки, случайные стоки.
Живой образец глубже минимума – AURADESIGN.md у AURA Designer. Новичку хватит короткого markdown: конкретные числа, не прилагательные. Избегайте «сделай современно и дорого». Уберите из Don’ts всё расплывчатое – запрет должен проверяться глазами за 10 секунд.
Как подключить правило Cursor, чтобы агент читал контракт
Файл в корне сам по себе не спасает, если Agent не обязан его открывать. По официальным Cursor Rules правила проекта лежат в .cursor/rules как .mdc с frontmatter; plain .md в этой папке игнорируется. Альтернатива проще: строка в AGENTS.md – «перед любым UI читай DESIGN.md, не выдумывай значения».
- Шаг 1. Создайте папку .cursor/rules в проекте.
- Шаг 2. Добавьте файл design.mdc с инструкцией читать DESIGN.md перед правками UI.
- Шаг 3. Укажите globs на html, css, tsx (или alwaysApply, если проект маленький).
- Шаг 4. Проверьте, что в правиле есть запрет: «не invent brand colors».
- Шаг 5. Сохраните шаблон промпта: «прочитай DESIGN.md, сверстай только секцию X».
Паттерн «DESIGN.md + design.mdc» разобран и на designmd.app. На практике новички чаще забывают именно правило, а не палитру: тогда стиль снова плывёт. Не делайте десяток .mdc в первый вечер – одного design-правила достаточно.
Сгенерируйте одну секцию и сверьте глазами
Боль «боюсь сломать всю вёрстку» лечится узким промптом. Попросите Agent сверстать только hero (или pricing), не трогать остальные файлы, использовать только токены из контракта. Дизайн сайта с помощью нейросети работает лучше секциями: сначала совпал hero – потом следующий блок.
Шаблон промпта:
Прочитай DESIGN.md. Сверстай только hero лендинга [название]. Не трогай другие файлы. Используй только цвета, шрифты и отступы из контракта. Без emoji и без фиолетового градиента.
После генерации откройте превью и пройдите короткий чеклист сверки:
- CTA окрашен в primary из файла, не в «случайный синий»
- Заголовок читается по-русски, шрифт с кириллицей
- Скругления и отступы совпадают с spacing в DESIGN.md
- На ширине ~375px блок не разъезжается
- Нет emoji и прозрачных кнопок из Don’ts
В реальном проекте Максима цвета совпали уже на первом hero – дальше он добавлял секции по одной, а не «весь сайт сразу». Если что-то уехало, правьте DESIGN.md или точечный промпт, не Accept All на полпроекта.
Когда подключать картинки через MCP – только после контракта
Боль «рандомные стоки портят даже хороший layout» решается порядком. Сначала контракт и чистая секция, потом ассеты. MCP на пальцах – «розетка» к внешним сервисам: генерация картинок, снятие фона, поиск. Пока нет палитры, картинка только усилит хаос.
Сделайте так: когда hero совпал с DESIGN.md, подключите генерацию через MCP «Всё подключено» (GPT Image 2 и remove background – пост @maya_pro #1309). Дизайн-агент AURA пишет контракт и тянет картинки только через MCP KV. Для wow-hero после стиля – PARALAXIMUS: один atlas 2×2, не четыре генерации (#1311).
Не делайте картинки «на глаз» до файла правил. Если MCP ещё не настроен – подключение MCP в Cursor. Отложить ассеты тоже нормально: чистый layout лучше чужих стоков. Рядом по теме: вайбкодинг для маркетинга, разбор DESIGN.md в @maya_pro #1319, практика в курсе Make + вайбкодинг.
Чеклист результата: что должно лежать в проекте сегодня
До FAQ зафиксируем success criteria. Вы поймёте, что боль «плывущий дизайн» закрыта, если выполнены пункты ниже – это ваш результат за вечер без Figma-команды.
- Шаг 1. В корне лежит DESIGN.md с hex, шрифтами, spacing, hero-правилом и Don’ts.
- Шаг 2. В .cursor/rules есть design.mdc (или строка в AGENTS.md) про чтение контракта.
- Шаг 3. Одна секция (hero или pricing) использует тот же primary и ту же пару шрифтов.
- Шаг 4. Проверьте мобильную ширину ~375px – блок не разъезжается.
- Шаг 5. Картинки либо согласованы через MCP, либо осознанно отложены (не случайные стоки).
- Шаг 6. Сохранён шаблон промпта «секция по DESIGN.md» на завтра.
Схема на пальцах:
Workflow вечера:
Боль «плывёт стиль» → DESIGN.md минимум → правило Cursor → промпт на одну секцию → чеклист глазами → MCP-картинки или следующая секция
Материал проверен: Артур Хорошев (CEO Maya AI, автор курса по Make.com и вайбкодингу).
Достоверность данных: паттерн DESIGN.md + Cursor Rules сверен с cursor.com/docs/rules и designmd.app; сигналы AURA/PARALAXIMUS/MCP – с GitHub Horosheff и постами @maya_pro #1319, #1311, #1309; частотность «нейросеть для дизайна» / «нейросеть для дизайна сайта» – по Яндекс Вордстат (регион 225) на 12 июля 2026.
Частые вопросы
Что писать в DESIGN.md новичку, если нет дизайнера?
Сделайте минимум: mood, 4–6 hex с ролями, 1–2 шрифта с кириллицей, sm/md/lg, правило hero и 5 Don’ts. Проверьте, что правило видно глазами за секунды. Полный AURADESIGN.md – следующий уровень.
Чем DESIGN.md отличается от промпта «сделай красиво»?
Промпт живёт в одном чате и забывается. Файл лежит в проекте и читается правилом Cursor снова и снова. Используйте контракт как источник правды: цвета правятся в файле, а не в десяти сообщениях.
Нужны ли картинки сразу при генерации дизайна сайта нейросетью?
Нет. Сначала совпадение layout с токенами. Добавьте ассеты через MCP после сверки hero – так стоки не перебьют палитру. Если картинок нет, оставьте чистый блок с CTA.
Можно ли копировать стиль чужого сайта этично?
Берите mood и композицию как референс, не копируйте логотипы и уникальные иллюстрации. В AURA – source-first: контракт под ваш бренд. Избегайте «укради пиксель в пиксель» без разрешения.
С какой секции начать генерацию?
С hero: там сразу видны primary, шрифт заголовка и правило «один CTA». Не делайте сразу footer, отзывы и прайсинг пакетом. После совпадения hero переходите к следующей секции тем же промптом.
Что делать, если русский текст превратился в кракозябры?
Уберите шрифты без кириллицы из контракта, пропишите shortlist Google Fonts с поддержкой русского и перегенерируйте только заголовок. Проверьте превью на реальной фразе из вашего оффера, не на латинице-заглушке.
