Дизайн-система для стартапу за тиждень з AI: план по днях

Коротка відповідь: за тиждень з AI реально зібрати мінімальну дизайн-систему для стартапу: токени кольорів, типографіки і відступів у Figma Variables, світлу і темну тему, 6-8 базових компонентів зі станами, ті самі токени в коді і короткі правила для команди та AI-агентів. Не встигнете і не потрібно: десятки компонентів, повну документацію і мульти-бренд. Рутину (аудит, генерацію змінних, стани, експорт) беруть на себе Claude і безкоштовні плагіни.

Я Дмитро Ніколаєнко, 15 років у продуктовому дизайні, вів дизайн мобільних банків, де без дизайн-системи просто не вижити. У стартапах ситуація інша: часу мало, людей мало, а хаос у Figma росте щотижня. Нижче план, який я дав би дизайнеру в команді з трьох-десяти людей.

Що таке дизайн-система для стартапу і чим вона відрізняється?

Для стартапу дизайн-система - це не сайт з документацією і не бібліотека на сто компонентів. Це мінімальний набір рішень, який дозволяє дизайнеру і розробникам не сперечатись про кольори і відступи, а AI-агентам генерувати інтерфейс, що виглядає як ваш продукт.

Тест простий: якщо новий екран можна зібрати з наявних токенів і компонентів без жодного нового hex, система працює. Якщо ні, це ще UI-кіт. Різницю між ними я розписав у статті Дизайн-система vs UI-kit.

Що потрібно перед стартом?

• Figma з Variables. На безкоштовному тарифі Starter змінні є, але лише з одним модом, тому для темної теми як другого моду знадобиться платний план або окрема колекція.
• Claude і безкоштовні плагіни UX Hero: Code Runner для скриптів, VooDoo Maker для генерації системи з одного кольору, Design System Doctor для аудиту. Огляд є в статті Безкоштовні Figma-плагіни для дизайн-системи.
• Доступ до репозиторію продукту або хоча б домовленість з одним розробником.
• 3-4 години на день. Тиждень - це п'ять робочих днів плюс два дні на код і правила.

План по днях

День	Що робимо	Що робить AI	Результат
1	Аудит	знаходить сирі кольори, шрифти, відступи	список того, що є насправді
2	Примітиви	генерує палітри і змінні	колекція Primitives
3	Семантика і теми	розставляє семантичні токени, перевіряє контраст	світла і темна тема
4	Типографіка, відступи, перші компоненти	прив'язує шари до змінних	Button, Input, Card
5	Стани і решта базових компонентів	генерує стани скриптом	6-8 компонентів зі станами
6	Код	експорт токенів, CSS-змінні, компоненти	токени в коді, Storybook
7	Правила	пише чернетки правил	CLAUDE.md, коротка документація

День 1. Аудит: що у вас є насправді

Не починайте з чистого аркуша. Зберіть 10-15 ключових екранів продукту в один файл і проженіть аудит: скільки унікальних кольорів, розмірів шрифту, відступів. Design System Doctor дає загальну картину, а Claude може написати скрипт для Code Runner під ваші питання. Часто виявляється, що відтінків «основного синього» у файлі набагато більше, ніж задумувався один.

Результат дня - таблиця: що залишаємо, що зливаємо, що видаляємо. Детальний процес є в матеріалі Аудит дизайн-системи за один день.

День 2. Примітиви

Примітиви - це сирі значення з назвами: blue-500, gray-100, space-4. Якщо бренд-колір один і чіткий, VooDoo Maker згенерує систему змінних з нього за хвилини. Якщо у вас вже є розкидані hex, скрипт «хекси в змінні» знайде схожі відтінки, склеїть їх і створить колекцію. Як це працює, розписано в статті Хардкод-кольори у Figma Variables автоматично.

День 3. Семантика і теми

Семантичні токени описують призначення: bg-surface, text-primary, border-subtle, action-primary. Саме з ними працюють компоненти. Тут же робимо темну тему як другий мод колекції (або окрему колекцію, якщо ви на Starter). Попросіть Claude перевірити пари текст і фон на контраст WCAG AA для обох тем. Помилки на цьому етапі найдешевші.

День 4. Типографіка, відступи і перші компоненти

Типографічна шкала з 6-8 стилів, шкала відступів на основі 4 або 8 пікселів, 3-4 радіуси. Потім перші три компоненти: Button, Input, Card. Кожен шар прив'язаний до змінних, жодного сирого значення. Скрипт може пройтись по компонентах і показати неприв'язані шари.

День 5. Стани і решта базового набору

Додаємо Select, Checkbox, Badge, Modal або те, що найчастіше трапляється у ваших екранах. Для кожного інтерактивного компонента стани: default, hover, focus, active, disabled, плюс loading і error там, де потрібно. Генерацію варіантів станів добре автоматизує скрипт від Claude, а вам лишається перевірити, що вони правильні візуально.

День 6. Доводимо до коду

Система, яка живе тільки у Figma, через місяць розійдеться з продуктом. Експортуйте змінні в tokens.json і попросіть Claude Code згенерувати CSS-змінні або тему Tailwind. Далі ті ж базові компоненти в коді на цих токенах і Storybook з усіма станами. Якщо ви ще не працювали з кодом, цей день краще пройти разом з розробником.

День 7. Правила для людей і для AI

Коротка документація на одну-дві сторінки: які токени для чого, коли створювати новий компонент, хто приймає рішення. І файл правил для AI-агентів у репозиторії (CLAUDE.md або AGENTS.md): використовувати тільки токени, перевіряти, чи немає вже схожого компонента. Без цього кожен згенерований AI екран буде повільно розмивати систему. Детальніше в статті AGENTS.md для дизайн-системи.

Що свідомо пропустити в першій версії

• Повну бібліотеку компонентів. Додавайте компонент тоді, коли він знадобився втретє.
• Окремий сайт документації. Storybook і одна сторінка в Notion на старті цілком достатньо.
• Мульти-бренд і складну архітектуру токенів. Якщо бренд один, три рівні токенів можна спростити до двох.
• Motion-токени та ілюстрації. Важливо, але не в перший тиждень.

Типові помилки

• Почати з компонентів, а не з токенів. Тоді кожен компонент має свої кольори, і через тиждень ви рефакторите все.
• Робити систему окремо від продукту. Беріть реальні екрани, а не абстрактні приклади.
• Не залучити розробника. Навіть одна година спільного обговорення неймінгу токенів економить тиждень переробок.
• Довірити AI рішення, а не рутину. AI чудово генерує і перевіряє, але яка палітра і яка ієрархія, вирішуєте ви.

Якщо треба порахувати, скільки така робота коштує і що реально економить AI, подивіться розбір Скільки коштує дизайн-система у 2026. Повний покроковий процес без прив'язки до днів є в гайді Дизайн-система з AI.

Що робити після першого тижня

Тиждень дає фундамент, а цінність системи з'являється в наступні місяці. Три звички, які тримають її живою:

• Правило третього разу. Новий компонент з'являється в системі, коли патерн трапився в трьох місцях продукту.
• Короткий аудит раз на місяць. Той самий скрипт чи Design System Doctor покаже, скільки нового хардкоду з'явилось.
• Зміни токенів через pull request. Тоді розробники бачать, що змінилось, а дизайн і код не розходяться.

Що робити після першого тижня

Тиждень дає фундамент, а цінність системи з'являється в наступні місяці. Три звички, які тримають її живою:

• Правило третього разу. Новий компонент з'являється в системі, коли патерн трапився в трьох місцях продукту.
• Короткий аудит раз на місяць. Той самий скрипт чи Design System Doctor покаже, скільки нового хардкоду з'явилось.
• Зміни токенів через pull request. Тоді розробники бачать, що змінилось, а дизайн і код не розходяться.

Часті питання

Чи реально зробити дизайн-систему за тиждень?

Мінімальну - так: токени кольорів, типографіки і відступів, світлу і темну тему, 6-8 базових компонентів зі станами, токени в коді і короткі правила. Повна бібліотека, документаційний сайт і мульти-бренд потребують більше часу і стартапу на старті зазвичай не потрібні.

З чого почати дизайн-систему для стартапу?

З аудиту реальних екранів продукту: скільки унікальних кольорів, шрифтів і відступів використовується зараз. Потім примітиви, семантичні токени і тільки після цього компоненти. Початок з компонентів без токенів майже завжди веде до переробок.

Що в дизайн-системі може зробити AI?

AI бере рутину: аудит файлу, генерацію палітр і змінних, прив'язку шарів до токенів, варіанти станів компонентів, перевірку контрасту, експорт токенів у код і генерацію компонентів у Storybook. Рішення про палітру, ієрархію і склад системи лишаються за дизайнером.

Які інструменти потрібні для дизайн-системи з AI?

Figma з Variables, Claude і Claude Code, безкоштовні плагіни на кшталт Code Runner, VooDoo Maker і Design System Doctor, а для коду - CSS-змінні або Tailwind і Storybook. Платні інструменти на старті не обов'язкові.

---

Дизайн-система для стартапу не повинна бути ідеальною. Вона повинна існувати, жити в коді і рости разом з продуктом. Тиждень з AI - цілком реальний старт.