Решение проблемы дизайн-долга в инструментах AI-кодинга с помощью одного файла Design.md
makedream2026년 5월 8일
0
Computing/Software
Comments (0)
Log in to leave a comment
No posts yet
makedreammakedreamLog in to leave a comment
No posts yet
Достаточно отправить несколько промптов в инструменты AI-кодинга, и вы получите вполне приличную страницу. Проблема наступает после. Радиус скругления новой кнопки отличается от соседней страницы, а насыщенность брендового цвета едва заметно искажена. Скорость разработки высокая, но результат выглядит небрежно. Это происходит потому, что без контекста ИИ выдает наиболее распространенные средние значения. Чтобы решить эту проблему, необходимо внедрить файл Design.md в корень проекта и навязать ИИ строгие ограничения.
Просить ИИ использовать “стильный синий цвет” — это пустая трата времени. ИИ питается не прилагательными, а нормализованными данными. Опишите вашу дизайн-систему, разделив её на три уровня: примитивы (Primitive), семантику (Semantic) и компоненты (Component).
blue-500: #3B82F6.bg-primary: var(--blue-500).[category]-[property]-[modifier], чтобы заставить ИИ использовать имена вроде $color-background-hover.Согласно исследованию совместной работы над UI за 2025 год, команды, использующие такие структурированные токены, сократили количество UI-багов с 14 до 4 за спринт. Когда ИИ начинает выбирать классы, ориентируясь на функции, а не на цветовые коды, 70% времени на правки дизайна исчезает. Если вы используете Tailwind CSS, прикажите ИИ сопоставлять эти токены один к одному с tailwind.config.js.
Чем выше степень свободы, тем более глупые решения принимает ИИ. Чтобы избежать разрозненных отступов на каждой странице, необходимо внести числовые значения в спецификацию в виде таблицы.
| Свойство | Значение | Правило применения |
|---|---|---|
| Скругление кнопок | 8px | Фиксировано rounded-lg, произвольные изменения запрещены |
| Интервал между секциями | 64px | Вертикальный отступ между всеми основными секциями |
| Максимальная ширина | 1280px | Линия ограничения центрального выравнивания контента |
Ограничьте единицы отступов кратностью 8px и зафиксируйте внутренние отступы (padding) карточек на уровне 24px. Особенно эффективно создание раздела с анти-паттернами. Если добавить запреты вроде “не размещать более 3 кнопок CTA на одном экране” или “использовать границу 1px вместо теней”, ИИ сначала исключит неверные варианты, а затем приступит к работе. Эта простая таблица сокращает количество ручных правок более чем наполовину.
Если тон общения меняется от функции к функции, а стили иконок перемешаны, приложение выглядит дешево. Укажите персону бренда в Design.md. Вы должны заранее решить, использовать ли для сообщения об успехе текст “Обновление завершено” или “Готово!”.
Для иконок следуйте следующему протоколу:
stroke-width всех иконок на уровне 1.5px.То же самое касается темного режима. Простое инвертирование цветов разрушает читаемость. Как рекомендует Google Material Design Guidelines, укажите использование темно-серого (#121212) вместо чисто черного для фона и добавьте формулу для поддержания коэффициента контрастности , чтобы автоматически избегать ошибок доступности.
Даже хорошо написанная спецификация бессмысленна, если ИИ её не читает. Создайте специальные правила для UI в директории .cursor/rules/ и заставьте ИИ обязательно обращаться к Design.md перед любой задачей. Данные разработки за 2025 год показывают, что команды, внедрившие эту рутину, сократили среднее время разработки функционала с 12.5 до 8.1 часа.
Теперь разработчик не правит код, а меняет впечатление от всего сервиса, просто корректируя цифры в документе. Дизайн дает результат в скорости только тогда, когда он становится областью точного инжиниринга, а не чувств. 30 минут документирования на старте избавляют от десятков часов бессмысленной работы в будущем.