Мини-дизайн-система: порядок вместо случайных цветов

Что это

Проект, собранный с ИИ за несколько сессий, обычно выглядит как лоскутное одеяло: три оттенка синего, кнопки разного размера, отступы «на глаз», подписи «ОК» и «Отправить», после которых непонятно, что произойдёт. По отдельности мелочи, вместе — ощущение самоделки. Часть таких примет заранее отсекает бесплатный запрет-лист Антишаблон: 30 примет сайта, сделанного нейросетью.

Промпт наводит порядок в три шага:

1. Порядок внимания. Что человек должен понять первым, что сделать дальше, какие детали посмотреть потом. ИИ сравнивает главный экран с референсом и находит элементы, которые спорят за внимание. Из референса берётся принцип. Вёрстку один в один ИИ не копирует.
2. Аудит. Случайные цвета, отступы и скругления; одинаковые элементы с разным видом; кнопки без понятного результата; поля без подписи; ошибки без способа исправить; пустые экраны без следующего действия.
3. Правила. Короткий файл: один акцентный цвет, шкала отступов, роли текста, кнопки, тон подписей. Внедрение — по одному типу элементов.

Как использовать

1. Сделай скриншот главного экрана своего продукта. Если есть сайт, который нравится, — скриншот и его.
2. Отправь шаг 1 со скриншотами.
3. Отправь шаг 2 — ИИ расспросит о предпочтениях и соберёт правила.
4. Отправь шаг 3, если работаешь с агентом в папке проекта: он внедрит правила по одному типу элементов.
5. Совет: кнопка должна называть результат. «Получить результат», «Добавить клиента» вместо «Далее» и «ОК».

Рядом по теме: UI kit для ИИ-агента: ui-kit.md за один разговор, Аудит визуального стиля по скриншотам, Дизайн-бриф лендинга: design-brief.md для агента, статья «Нейросети для работы по 20 профессиям» и 7 кнопок вместо Adobe: промпты для Claude Code (бесплатно).

Что получится на выходе

• После шага 1 — список элементов, которые спорят с порядком внимания, и до 5 точечных правок в духе референса. У каждой правки написано, чем она помогает пользователю.
• После шага 2 — сначала три вопроса по одному: акцентный цвет, плотность, тон подписей. Потом аудит главного пути и короткие правила: цвета с кодами, шкала отступов, роли текста, кнопки с примерами подписей, пример понятной ошибки и пример пустого состояния.
• После шага 3 — файл DESIGN_SYSTEM.md и правки по одному типу элементов. После каждого типа агент показывает, что изменилось, и ждёт твоего «дальше».

Что делать с результатом

Когда правила внедрены, проверь, как они держатся на узком экране, — промпт Почини вёрстку на телефоне и не устрой редизайн. Если нужны картинки и обложки в том же стиле, пригодится гайд про визуал по референсу. Правила можно перенести и в Figma: Claude соберёт из них цвета, текстовые стили и компоненты. Как это сделано у нас, рассказано в статье Claude и Figma: обложки, фирменный файл и 60 эмодзи. А если экран ещё только предстоит собрать, система Первый экран проведёт от идеи до работающей страницы с агентом за шесть шагов — 990 ₽.