Design-to-Code Pipeline

Інструмент, що поєднує складні Figma дизайни з production-ready frontend кодом, скорочуючи ручну роботу перетворення дизайн-файлів у підтримувані компоненти.

Що я зробив

• Побудував агента на базі Figma MCP, що читає строгий JSON-маніфест з описом компонентів, токенів і правил layout
• З'єднав агента з наявною Gulp-системою збірки (SCSS/BEM, gulp-file-include, генерація SVG-спрайтів)
• Автоматизував генерацію розмітки та стилів, що точно відповідають design-токенам, зменшивши узгодження між дизайном і розробкою
• Задокументував контракт маніфесту, щоб дизайнери й розробники мали єдине джерело правди

Результат

Нові компоненти проходять шлях від Figma до робочої, стандарт-сумісної реалізації в рази швидше, з набагато меншою кількістю візуальних розбіжностей.