Cursor Rules для UI без нейрослопа: готовый design.mdc
Токены, компоненты и запреты, чтобы агент собирал экраны в твоём стиле
Какую задачу решает
Генерировать аккуратный интерфейс без «нейросетевого» вида
Что будет на выходе
Правила Cursor для аккуратного UI: палитра, шрифт, сетка
- Кому подойдёт
Вайбкодер, у которого агент штампует одинаковые «нейросетевые» интерфейсы
- Тема
- Вайбкодинг
- Инструменты
- Cursor
Попроси Cursor «сделать красиво», и он выдаст узнаваемый набор: фиолетовый градиент на кнопке, карточки с тенью и скруглением 24px, эмодзи в каждом заголовке, пять разных серых на одной странице. Каждый новый экран добавляет свои отступы и цвета, и через неделю интерфейс выглядит так, будто его собирали пять разных людей.
Файл design.mdc фиксирует твою систему: палитру, шкалу отступов, размеры шрифта, готовые компоненты и прямые запреты на типовые приёмы нейросетей. Агент сверяется с ним каждый раз, когда трогает файлы интерфейса.
Собираешь палитру, шрифт, пару скриншотов-референсов и список своих компонентов. Промпт превращает это в design.mdc с токенами и запретами. Агент перестаёт придумывать цвета и тени на каждом экране.
Что получишь
- 🎨Токены вместо HEX-кодов
Цвета, отступы и радиусы по именам из твоего tailwind.config или CSS-переменных. Агент берёт их вместо сырых кодов вроде #7c3aed.
- 🧩Список готовых компонентов
Какие кнопки, поля и карточки уже есть и где лежат, чтобы агент не собирал четвёртую версию кнопки.
- 🚫Чёрный список приёмов
Случайные градиенты, стекло с размытием, эмодзи в заголовках, тени на всём подряд — запрещены явно.
- ♿Минимум доступности
Контраст текста, видимый фокус, подписи у полей и иконок-кнопок.
Как использовать
- 1Собери свою систему
Палитру (HEX или имена из tailwind.config), шрифт и 3–4 размера текста, 2–3 скриншота экранов, которые тебе нравятся, и список компонентов из папки components/ui.
- 2Перечисли, что бесит
Что агент уже делал, а тебе не нравится: градиенты, огромные скругления, иконки рядом с каждым словом. Это пойдёт в запреты.
- 3Запусти промпт и сохрани файл
Ответь на вопросы ИИ и сохрани ответ в .cursor/rules/design.mdc целиком, вместе с шапкой.
- 4Проверь на одном экране
Попроси агента собрать экран настроек профиля и сравни: цвета только из токенов, отступы из шкалы, компоненты переиспользованы.
Рядом по теме: Cursor Rules для Vue 3: готовый vue.mdc, Cursor Rules для тестов: готовый tests.mdc, Cursor Rules для безопасности: готовый security.mdc, статья «Что такое вайбкодинг» и Сайт за выходные: 7 файлов для Claude Code (990 ₽).
Дальше — для участников
Регистрация бесплатная и занимает минуту. Часть закрытых материалов откроется сразу, без карты.
Что дальше
Если палитры и шкалы отступов у тебя пока нет, сначала собери мини-дизайн-систему, а потом запускай промпт. Про пустые экраны и ошибки подробно — в гайде «Четыре состояния, без которых интерфейс разваливается». Готовый экран прогони через скилл проверки интерфейсов после вайбкодинга.
Список типовых примет «сайта от нейросети» для своего чёрного списка возьми в бесплатном наборе Антишаблон: 30 примет сайта, сделанного нейросетью.
