Знакомая история. Просишь ИИ сделать экран - он рисует кнопку. Просишь следующий экран - рисует похожую, но другую. Цвета чуть-чуть отличаются. Отступы гуляют. Шрифт вроде тот же, а вроде и нет.
Ты ничего не менял. Но приложение выглядит так, будто его три разных человека делали в разные дни недели.
И ты сидишь, поправляешь руками. «Вайбкодинг» - говорили они. «Быстро» - твердили они.
Проблема не в ИИ. У него просто нет шпаргалки.
Представь, что ты каждый раз заказываешь ремонт в квартире, но не показываешь мастеру образец. «Ну, покрась стену... красиво». Результат будет каждый раз разный.
А теперь представь, что ты один раз собрал альбом: вот эти цвета, вот такие кнопки, вот так выглядит текст, вот такие отступы. И каждый раз просто открываешь альбом и говоришь - делай как тут.
Это и есть дизайн система. Набор готовых «кубиков Лего» для интерфейса твоего приложения.
Что конкретно меняется, когда она есть?
Хочешь тёмную тему? Не проходишься по каждому экрану. Добавил новые цвета в систему - всё приложение подхватило само.
Надо поменять стиль кнопок? Меняешь в одном месте - обновляется везде.
Новый экран? Не объясняешь ИИ с нуля, как всё должно выглядеть. Говоришь «возьми мои готовые элементы» - и он берёт.
Разница - как диктовать адрес голосом каждый раз против просто скинуть геолокацию.
Как собрать дизайн систему? Рассказываю:
Шаг 1. Даёшь ИИ задачу: «Изучи лучшие практики дизайн систем, вдохновись 3-5 примерами и предложи мне стиль». Можешь уточнить, что нравится. Мне, например, зашёл стиль Apple - минимализм, чистота, ничего лишнего.
Шаг 2. Описываешь, что хочешь. Не «сделай красиво» - это ни о чём. А конкретнее: «светлый, минималистичный, скруглённые углы, спокойные цвета». Чем точнее скажешь - тем меньше переделок.
Шаг 3. Смотришь результат, корректируешь. «Кнопку сделай поярче», «текст помельче», «отступы побольше». Это нормально, за 3-5 попыток дойдёшь до того, что тебе нравится.
Шаг 4. Просишь разложить всё по полочкам: цвета - отдельно, шрифты - отдельно, кнопки и остальные элементы - отдельно.
Шаг 5. Просишь сделать «витрину» - один экран, где видно все элементы рядом. Открыл - и сразу понятно, как выглядит вся система.
Всё. Дизайн система готова.
«У меня простое приложение, мне это зачем?»
Как раз для простых - профит ощутимый. Вместо того чтобы каждый раз тратить запросы к ИИ на одни и те же кнопки-поля-карточки - берёшь готовое и вставляешь. Экономишь время, запросы и нервы.
А если проект вырастет - добавить новый блок, акцию, баннер - не придётся изобретать визуал с нуля. Расширяешь то, что уже работает.
Пока кто-то объясняет ИИ цвет кнопки в сотый раз — ты собираешь готовый интерфейс и отправляешь в стор.
Во продолжении ниже - как всё это перенести в Figma, чтобы твоя система всегда была перед глазами. Там пара граблей, на которые я уже наступил за тебя.