#снек 44. Дизайн-система + AI = радикальное ускорение фронтенда
Дисклеймер: этот пост — иллюстрация, насколько продуктовый дизайн в корпорациях не про дизайн, и какую роль в нём играют дизайн-системы.
Самая горячая тема в разработке интерфейсов для меня сейчас — внедрение MCP-сервера, который предоставляет Figma.
Что это даёт:
Фронтендер выделяет экран в Figma и пишет запрос в AI: «сверстай этот экран». И AI верстает всё практически как человек, на базе всех требований и компонентов принятой дизайн-системы. Сборка типичного мобильного экрана занимает меньше минуты, вместо часов ручной работы.
Есть оговорки: это не так просто, придётся заранее подготовить базовый контекст на сотни строк, а также связать MCP Figma, разобраться с ClaudeCode и написать свой MCP с нужными командами. Кроме того, чтобы это заработало, в компании должна быть хорошо развитая дизайн-система, которую сможет понять AI, чтобы ему не пришлось писать кастом. А ещё это накладывает более строгие требования к макетам.
Да, даже в этих условиях он иногда гонит и вместо таблицы может сверстать список ячеек, однако, с этим можно справляться.
MCP-сервер — если очень округлять, это программа, которая умеет взаимодействовать с большой языковой моделью (LLM) и получать от неё ответ.
MCP-сервер Figma умеет смотреть в макеты и выдаёт, что нужно верстать для фронта, затем, ClaudeCode верстает их по заданным правилам.
ClaudeCode — это механизм определения контекста для запросов через командную строку, которому можно скормить директорию проекта и написанную людьми дизайн-систему.
Конечно, всё это не делает фронтендеров ненужными, однако их фокус при таком методе работы будет смещаться в вёрстку компонентов для дизайн-системы и фиксацию условий для AI в базовом контексте, потому что сам бизнес-сценарий по согласованному дизайну теперь может собирать и машина.
В следующий раз можно порассуждать о том, как дизайнеры могут генерировать макеты. Но пока о рабочем механизме я не слышал. Figma Make не в счёт, пока для серьёзной работы продуктового дизайнера не годится.
@slashdesigner #для_профи #AI
Post #1199
4.12K
- ❤ 39