Сайт производителя замков и дверной фурнитуры жил в 2010-х: фиксированная ширина 900px, белые поля по бокам на любом мониторе, никакой дизайн-системы. Каждая страница — отдельное решение, не связанное с остальными.
Нужна была дизайн-система с нуля, которая объединит страницы в единый продукт и ускорит разработку — от токенов до готовых компонентов.
Дизайн-система
Библиотека с нуля: типографика, цветовые токены, базовые компоненты. Все значения переведены в Figma Variables, повторяющие структуру UnoCSS — разработчик не сверяет отступы и цвета вручную, токен в дизайне равен классу в коде.
Компоненты с props-конфигурацией
Каждый компонент настраивается через props: включить/выключить иконку, сменить размер, переключить состояние — без редактирования исходника. Это ускоряет сборку страниц и исключает рассинхронизацию между вариантами.
От дизайна к коду без ручного перевода
Поскольку я был единственным дизайнером в проекте и фронтенд тоже был на мне, решил проверить гипотезу: если система токенов и компонентов выстроена правильно, AI-агент через Figma MCP должен генерировать готовый код без ручного перевода. Проверил — работает. Показал другим разработчикам подход.
Готовые страницы
Дизайн-система применена ко всем типам страниц: от главной до карточки товара и системных состояний. Каждая страница собирается из готовых компонентов и соблюдает единые токены.
время разработки одного компонента после внедрения AI-агента через Figma MCP