AI-first дизайн-система та MCP-сервер
Перетворив дизайн-систему на AI-інфраструктуру - MCP-сервер і 22 навички агентів, що дозволяють кодинг-агентам будувати UI в межах системи, а баги виправляються за 3 дні замість 6 тижнів.
- Клієнт
- DriveNets
- Галузь
- Мережі / корпоративне ПЗ
- Роль
- Тімлід дизайн-системи
- Терміни
- січ - чер 2026
1,5 міс3дні
баг-репорт → виправлення в релізі
67компонентів
з 34, за 6 місяців
22навичок
спільних навичок агентів, кодифікованих
27релізів
npm-релізів через Changesets
Контекст і виклик
Контекст
Спільна бібліотека React-компонентів, якою користуються 100+ розробників у кількох продуктових командах.
Виклик
Масштабувати бібліотеку та її впровадження командою з двох людей - і зробити її придатною для AI-агентів, на яких розробники вже покладалися.
Архітектура · рис. 02
рис. 02 - дизайн-система як AI-інфраструктура
Figma зі змінними та Code Connect - джерело для бібліотеки з 67 компонентів у Storybook, пропси яких задокументовані для агентів. Бібліотеку віддає MCP-сервер дизайн-системи, яким користуються кілька внутрішніх команд, кодинг-агентам Claude Code, Cursor і Codex, а ті створюють UI в межах системи, який випускають 100+ розробників. Допоміжні частини: баг-пайплайн на Claude routines і хмарних середовищах, що тріажить і виправляє баги - 1,5 місяця → 3 дні; пороги якості - 90% покриття рядків, Vitest browser mode з Playwright, перевірки axe і jsx-a11y; і 22 навички агентів для скафолдингу, Figma-to-code, TDD і код-рев'ю.
- 01 ДжерелоFigmaзмінні + Code Connect
- 02 Бібліотека67 компонентівStorybook · пропси задокументовані для агентів
- 03 MCP-серверMCP дизайн-системивикористовують кілька внутрішніх команд
- 04 Агенти
- Claude Code
- Cursor
- Codex
- 05 РезультатUI в межах системивипускають 100+ розробників
- Баг-пайплайн · Claude routines + хмарні середовищаТріаж і виправлення багів - 1,5 місяця → 3 дні
- Пороги якості90% покриття рядків · Vitest browser + Playwright · axe, jsx-a11y
- 22 навички агентівСкафолдинг · Figma-to-code · TDD · код-рев'ю
- 01 ДжерелоFigmaзмінні + Code Connect
- 02 Бібліотека67 компонентівStorybook · пропси задокументовані для агентів
- 03 MCP-серверMCP дизайн-системивикористовують кілька внутрішніх команд
- 04 АгентиClaude Code · Cursor · Codex
- 05 РезультатUI в межах системивипускають 100+ розробників
Що я створив
- MCP-сервер дизайн-системи, яким користуються кілька внутрішніх команд; пропси компонентів задокументовані, щоб Cursor, Claude Code і Codex генерували UI в межах системи.
- 22 спільні навички агентів для скафолдингу компонентів, Figma-to-code, TDD і код-рев'ю.
- Автоматизований баг-пайплайн на Claude routines і хмарних середовищах, що тріажить і виправляє зареєстровані баги.
- Figma Code Connect для базових компонентів; змінні Figma синхронізовані з токенами коду в 170+ файлах.
- Пороги якості: 90% покриття рядків у CI, Vitest browser mode + Playwright, перевірки axe і jsx-a11y.
- Правила управління, внеску та впровадження для спільної бібліотеки.
Результати і роль
- Баг-репорт → виправлення в релізі: 1,5 місяця → 3 дні.
- Бібліотека зросла з 34 до 67 компонентів за 6 місяців; 27 npm-релізів.
- Набір тестів зріс з 1 до 64 файлів.
Тімлід двох senior-інженерів - управління людьми плюс практичне технічне лідерство. Очолював ініціативу організації з впровадження AI в роботу з дизайн-системою.
- MCP
- Claude Code
- Cursor
- Codex
- Claude Design
- React 19
- TypeScript
- Ark UI
- Radix UI
- TanStack
- Storybook
- Turborepo
- Figma
- Vitest
- Playwright
- Changesets
Стек
- MCP
- Claude Code
- Cursor
- Codex
- Claude Design
- React 19
- TypeScript
- Ark UI
- Radix UI
- TanStack
- Storybook
- Turborepo
- Figma
- Vitest
- Playwright
- Changesets