AI · Figma · Фижма · MCP
Как я делаю живые прототипы
Не картинка и не видео: приложение, которое нажимается прямо на странице.
Корпус и кит из Figma
Рамки устройств и элементы iOS взяты из набора Apple «iOS and iPadOS 26» для Figma. Прототип сверстан в точках экрана, как настоящее приложение: у iPhone 16 Pro это 402 на 874, со строкой состояния, островом и безопасными полями.
Макет я не перерисовываю по скриншоту. Ассистент читает узлы Figma через MCP: размеры, отступы, варианты компонентов приходят данными, и в коде не появляется «примерно так».
Экраны кодом, вместе с AI
Экран, это компонент на React. Я задаю сценарий, состояния и поведение, Claude собирает разметку, я смотрю в браузере и правлю, пока экран не ведёт себя как в системе.
Под экранами общий движок: стек переходов, вкладки, свайп назад от края, жест домой снизу, шторки. Пороги жестов взяты у UIKit, поэтому палец на прототипе ведёт себя так же, как на айфоне.
Фижма: макет из тех же деталей, что сайт
Фижма, это мой холст на элементах дизайн-системы, он открыт по адресу prokhor.me/fizhma. Кадр из Figma переносится по ссылке, и после переноса видно, какие цвета макета в наборе не живут и чем их заменили.
Готовое уходит кнопкой «В код»: разметкой из тех же компонентов, из которых собран сайт. Между макетом и вёрсткой нечему разойтись.
Прототип показывает себя сам
На главной телефоны проходят сценарий пальцем: подъезжают к кнопке, нажимают, заполняют поля. Нажатия настоящие, по живым экранам. Курсор над телефоном ставит показ на паузу, и дальше человек нажимает сам.