Знакомая ситуация: продукт написан за выходные, гипотеза подтвердилась, кто‑то уже платит. Приходит дизайнер и просит файл.

Файла нет. 

Есть интерфейс, который существует только в виде кода. Кнопка там называется.btn‑primary,.btn‑add и.button‑save — три класса, одна кнопка, паддинги отличаются на пиксель. Серый цвет записан тремя способами, и один из них, судя по всему, опечатка. Отдать это дизайнеру нельзя. Нарисовать заново — значит выбросить полгода работы и начать спорить про радиусы. 

Мне стало интересно, что тут реально может AI. Не «сделай красиво», а честный замер: я собрал маленькое демо, намеренно заложил в него шестнадцать несогласованностей, записал их в отдельный файл и спрятал. Потом запустил на этом коде свежую сессию Claude Code, которая файла с ответами не видела.

Дальше — что из этого вышло, с цифрами и с местами, где всё сломалось.

В феврале Figma и Anthropic анонсировали связку: живой интерфейс из браузера уезжает в Figma редактируемыми фреймами. Не картинкой — слоями, которые можно двигать и править.

Это правда полезно. И это ровно то, чего недостаточно.

Потому что сорок редактируемых фреймов — это тот же самый бардак, что был в коде, только теперь он в Figma и занимает место на канвасе. Кнопка на каждом экране лежит отдельной копией. Поменять цвет — сорок раз. Компонентов нет, переменных нет, Auto Layout нет. Дизайнер открывает такой файл и говорит спасибо, а потом всё равно рисует с нуля.

Разница между «перенести экраны» и «восстановить систему» — это разница между экспортом и реверс‑инжинирингом. Первое умеет тулза. Второе приходится вытаскивать промптом.

Пара скучных, но важных деталей, на которые я потратил час. Запись на канвас работает только через remote‑сервер https://mcp.figma.com/mcp. Локальный figma‑desktop, который многие уже подключили, умеет в основном обратную сторону — читать из Figma в код; у него шесть инструментов, и создавать он ничего не умеет. На время беты запись бесплатна, дальше Figma обещает сделать её платной по потреблению. Есть официальный плагин figma@claude‑plugins‑official — он просто оборачивает тот же remote‑адрес и добавляет скиллы.

Трекер подписок. Один HTML, один CSS, три экрана: список, модалка добавления, пустое состояние. Пятьсот строк, открывается двойным кликом.

Выглядит прилично — это принципиально. Если бы демо выглядело как поделка, весь эксперимент был бы про то, как AI разбирает поделку.

А внутри — шестнадцать закладок. Три кнопки‑копипаста. Серый в написаниях #6b7280, #6B7280 и #6d7280. Синий в двух версиях, #3b82f6 и #3B82F7. Паддинги карточек 14, 15 и 16 пикселей. Два разных box‑shadow на визуально одинаковых карточках..card и.subscription‑item — один и тот же элемент под двумя именами. line‑height то 1.4, то 20px, то никак. Фиксированная ширина 240px у названия внутри родителя шириной 420px.

Экран списка подписок в браузере — исходное демо

Список я записал в GROUND‑TRUTH.md и вынес за пределы папки с кодом, чтобы агент случайно его не прочитал. Без этого весь замер превратился бы в анекдот.

Главный трюк простой: сначала запретить агенту трогать Figma.

Первый промпт — только инвентаризация. Перечисли экраны. Найди повторяющиеся элементы и скажи, какие из них — один и тот же элемент под разными именами. Выпиши все сырые значения, какие реально используются. Сгруппируй почти‑дубли. Предложи нормализованную шкалу. И отдельной строкой: сообщай, что есть, а не что должно быть; если два значения отличаются на 1px — так и напиши, не усредняй молча.

Второй промпт — сборка, и в нём важнее запреты, чем задачи. Сначала переменные, потом компоненты, потом экраны, и никак иначе. Каждая заливка, отступ, радиус и текстовый стиль привязаны к переменной. Инстансы везде. Абсолютное позиционирование — только оверлей модалки. И: не выдумывай правила молча, перечисли всё, что решил сам.

Инвентаризация вышла на 32 килобайта. Дальше — что в ней было.

Все шестнадцать закладок найдены. Все.

Про опечатку в сером агент написал: «различие в 2 единицы красного канала, почти наверняка опечатка». Про синий: «различаются на 1 единицу в синем канале — визуально неразличимы, формально разные». Про два оттенка границы посчитал сдвиг по каналам: +7/+8/+8 и −8/−10/−14.

Меня больше зацепило то, чего я не закладывал.

input-2 и.field‑input не задают color. Поля ввода не наследуют цвет от body — текст в них будет системным, а не тем #111827, который я имел в виду. Это настоящий баг, а не косметика, и я про него не знал. Дальше: контраст disabled‑кнопки — белый текст на #c7d2e4, примерно 1.9:1, ниже любого порога..sub‑name шириной 240px внутри родителя в 420px. У контейнера списка вообще нет ни одного CSS‑правила — вертикальный ритм держится на margin‑bottom детей, включая последнего.

И решение, которое мне понравилось больше всего. Брендовые цвета логотипов — #E50914 Netflix, #1DB954 Spotify — агент отказался превращать в токены. Написал, что это контент, и вынес в property logoColor. В промпте про это не было ни слова.

Сжатие получилось такое: 16 значений отступов → 9 токенов, 5 радиусов → 3, 9 кеглей → 5, 23 записи цвета → 17 токенов.

Пять страниц: Foundations, Components, Patterns, Screens, Edge Cases. Дальше — то, что я посчитал скриптом, а не прикинул на глаз.

Страница Foundations: палитра, типографика, шкала отступов, радиусы, тени

Три кнопки из кода схлопнулись в один Component Set на 16 вариантов: primary/ghost × sm/md × default/hover/disabled/loading. Три поля ввода — в один компонент с восемью состояниями, из которых в исходнике не было ни одного. Четыре класса «квадрат с буквой» (.logo‑mark,.avatar,.sub‑logo,.empty‑icon) — в один компонент Glyph.

Страница Components: Glyph, Button на 16 вариантов, Badge, Input

Проверка, ради которой всё затевалось. Я поменял один примитив: blue/500 с синего на фиолетовый.

Тот же экран после смены одного токена — весь интерфейс фиолетовый, логотипы брендов остались своими

Перекрасились логотип, кнопка «+ Добавить», все четыре кнопки «Управлять», акцентная плитка со статистикой. Не перекрасились логотипы Netflix и Spotify — потому что агент сам решил, что это контент. И не перекрасилась disabled‑кнопка, потому что у неё отдельный токен.

Второй тест: название подписки в 60 символов. Вёрстка не поехала, обрезки нет, строка выросла на четыре пикселя. В исходном CSS на этом месте текст бы обрезало.

Страница Edge Cases: длинное название, пустой список, состояния кнопки со спиннером, поле с ошибкой

Теперь честная часть, которой обычно нет в статьях про AI.

Двадцать невидимых белых прямоугольников. figma.createAutoLayout() создаёт фрейм с белой заливкой по умолчанию. Все служебные обёртки — Logo, Actions, Info, FormField — получили захардкоженный белый. На белой карточке этого не видно вообще. Скриншоты выглядели идеально, я смотрел на них и был доволен. Нашёл это только скриптовый аудит, который перебрал все заливки и проверил, привязана ли каждая к переменной. При переключении на тёмную тему они вылезли бы все сразу.

Мораль: глазами такое не ловится. Аудит должен быть кодом.

Варианты уехали за пределы собственного набора. У Component Set стоял counterAxisSizingMode: FIXED. Когда я добавил состояние loading и кнопок стало шестнадцать, набор не вырос — и половина вариантов оказалась на координате y = -64, то есть физически за границей своего контейнера. Страница компонентов выглядела как каша из наложенных друг на друга прямоугольников.

Белая буква на светло‑голубом. В пустом состоянии я переопределил заливку глифа, а про цвет буквы забыл. Символ «₽» стал почти невидим. Это уже не Figma виновата, а я.

Скрипт упал целиком из‑за порядка операций. Привязка текстового свойства к компоненту до того, как компонент добавлен в набор. Свойство живёт на наборе, а не на компоненте — Could not find a component property with name: 'label#7:0'. Здесь, кстати, хорошая новость: скрипты use_figma атомарны. Упавший не применяется вообще, полуразобранного файла не остаётся.

И отдельно — то, что агент придумал сам и, к его чести, пометил.

В коде нет ни одного состояния ошибки и ни одного красного цвета. А Input без error — не компонент. Агент завёл токен danger и написал в описании переменной прямым текстом: «ПРИДУМАНО, а не извлечено из кода». Ещё он схлопнул font‑weight: 500 в 600 — кнопки станут заметно жирнее, это видимое изменение, а не нормализация. И сплющил полупрозрачный фон бейджа на белом, из‑за чего на небелом фоне бейдж будет выглядеть иначе.

Три решения, каждое спорное, каждое названо вслух. По‑моему, это ровно то поведение, которое нужно.

Демо — пятьсот строк, и косяки в него закладывал я сам. Это делает задачу заметно легче, чем реальная кодовая база на пятьдесят тысяч строк, где половина стилей приходит из библиотеки компонентов, вторая половина переопределена через!important, а треть экранов вообще рендерится условно.

16 из 16 на подготовленном демо — это не обещание 16 из 16 на вашем проекте. Это доказательство, что метод рабочий: разделение на «сначала анализ, потом сборка» даёт систему, а не набор фреймов.

Всё интересное.

AI разобрал код, нашёл дубли, свёл значения в шкалу, собрал компоненты, настроил Auto Layout и связал всё переменными. Это техническая работа, и на неё ушло около часа вместо недели.

Дальше начинается то, что он не сделает. Нужно ли на этом экране три стат‑плитки или хватит одной. Почему пустое состояние выглядит как ошибка. Что происходит, когда подписок двести. Стоит ли вообще существовать кнопке «Управлять» на отменённой подписке.

Смысл не в том, чтобы отдать дизайнеру готовый продукт. Смысл в том, чтобы отдать ему чистую основу вместо папки со скриншотами и ссылки на репозиторий.

Первый — анализ, ничего не создаём:

Analyze the app at demo/. Do not create anything in Figma yet.

Produce an inventory:

1. Screens and what each contains.

2. Repeated UI elements — and which of them are the same element under different class names.

3. Every raw value actually used: colors, spacing, font sizes, radii, shadows, line-heights.

   Group near-duplicates and flag them.

4. Missing states: hover, focus, disabled, loading, error, empty.

5. A normalized scale to replace the raw values. Fewer tokens is better than faithful.

6. A component model: primitives → components → patterns → screens.

   Say which variants each component needs and why.

Rules: report what is there, not what should be there. If two values differ by 1px,

say so explicitly instead of silently averaging them.

Output as markdown. End with a table: raw value → token.

Второй — сборка:

Build the design system from the inventory into the Figma file <URL>.

Order matters — do not skip ahead:

1. Variables first. Colors, spacing, radius, typography from the normalized scale.

   Nothing else gets created until these exist.

2. Components. Use variants (type / size / state), not separate components for each look.

3. Screens. Assemble from instances only.

Hard rules:

- Every fill, gap, padding, radius and text style binds to a Variable. No raw hex, no magic numbers.

- Every container is Auto Layout. Absolute positioning only for the modal overlay.

- Instances everywhere. If you catch yourself duplicating a layer, make it a component.

- Semantic layer names. Not Frame 42.

- Where the source code is inconsistent, use the normalized value and note the change.

  Do not invent rules silently — list every decision you made on your own.

File structure: 00 Foundations / 01 Components / 02 Patterns / 03 Screens / 04 Edge Cases.
04 Edge Cases must include: a 60-character name, an empty list, a disabled button, a loading state.

Третий — аудит. Ключевая строчка в нём последняя: проверять надо перебором узлов, а не разглядыванием скриншотов. Именно так нашлись те двадцать невидимых белых прямоугольников.

Audit the Figma file you just built, as a senior design-system designer who did not

build it and is looking for reasons to reject it.

Check and report, with node names:

- layers that should be instances but are copies;

- components that duplicate each other;

- missing variants and missing states;

- containers without Auto Layout, or with wrong resizing (fixed where it should hug/fill);

- absolute positioning that is not the modal overlay;

- any fill, spacing, radius or text style not bound to a Variable;

- names like Frame 42, Rectangle 7, Group 3;

- screens that break on a 60-character subscription name;

- anything you normalized without saying so.

Do not eyeball screenshots. Walk the node tree in code: for every node check whether

each fill, padding, radius and text style resolves to a Variable, and report the ones

that do not. A hardcoded white on a white background is invisible in a screenshot.

Report findings worst first. State what you fixed and what you left alone and why.

Do not report the file as clean if it is not.

Вот такой вот оптимизированный путь теперь существует, чтобы за несколько часов собрать интерфейс, который год назад ещё нужно было собирать всю неделю! Если у Вас остались вопросы или хотите продолжение этой статье — с радостью прошу в комментарии!