TGViewer
/designer /designer @slashdesigner · 13.9K subscribers
Post #1199 4.12K
#снек 44. Дизайн-система + AI = радикальное ускорение фронтенда

Дисклеймер: этот пост — иллюстрация, насколько продуктовый дизайн в корпорациях не про дизайн, и какую роль в нём играют дизайн-системы.

Самая горячая тема в разработке интерфейсов для меня сейчас — внедрение MCP-сервера, который предоставляет Figma.

Что это даёт:

Фронтендер выделяет экран в Figma и пишет запрос в AI: «сверстай этот экран». И AI верстает всё практически как человек, на базе всех требований и компонентов принятой дизайн-системы. Сборка типичного мобильного экрана занимает меньше минуты, вместо часов ручной работы.

Есть оговорки: это не так просто, придётся заранее подготовить базовый контекст на сотни строк, а также связать MCP Figma, разобраться с ClaudeCode и написать свой MCP с нужными командами. Кроме того, чтобы это заработало, в компании должна быть хорошо развитая дизайн-система, которую сможет понять AI, чтобы ему не пришлось писать кастом. А ещё это накладывает более строгие требования к макетам.

Да, даже в этих условиях он иногда гонит и вместо таблицы может сверстать список ячеек, однако, с этим можно справляться.

MCP-сервер — если очень округлять, это программа, которая умеет взаимодействовать с большой языковой моделью (LLM) и получать от неё ответ.

MCP-сервер Figma умеет смотреть в макеты и выдаёт, что нужно верстать для фронта, затем, ClaudeCode верстает их по заданным правилам.

ClaudeCode — это механизм определения контекста для запросов через командную строку, которому можно скормить директорию проекта и написанную людьми дизайн-систему.

Конечно, всё это не делает фронтендеров ненужными, однако их фокус при таком методе работы будет смещаться в вёрстку компонентов для дизайн-системы и фиксацию условий для AI в базовом контексте, потому что сам бизнес-сценарий по согласованному дизайну теперь может собирать и машина.

В следующий раз можно порассуждать о том, как дизайнеры могут генерировать макеты. Но пока о рабочем механизме я не слышал. Figma Make не в счёт, пока для серьёзной работы продуктового дизайнера не годится.

@slashdesigner #для_профи #AI
  • ❤ 39
More from @slashdesigner
  1. Sep 30, 2025#дайджест за сентябрь 2025 В плане контента сентябрь был ударным! Написал много авторских…
  2. Sep 30, 2025#снек 56. Списки и статьи Это серия про универсальную стратегию построения базы знаний, ко…
  3. Sep 25, 2025#снек 55. Как дизайнеру найти наставника на старте карьеры Ранее в рамках серии про настав…
  4. Sep 23, 2025Post #1227
  5. Sep 23, 2025#аудио 1. Obsidian: быстрый старт, часть 1 Эти 7 пунктов помогут освоиться c навигацией. 1…
  6. Sep 20, 2025Post #1224
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →