Телеграм канал «PixelMap»

От Figma к коду: как прокинуть UI-кит в Claude Code и не сойти с ума

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

Суть: у вас есть кит в Figma. Компоненты, варианты, переменные — всё на месте. Теперь нужно, чтобы это зажило в коде как React-компоненты и CSS-токены. Claude Code через MCP залетает в ваш файл, читает его и пишет код на основе реальных данных. То, что раньше делалось неделями, теперь залетает за пару часов.

Но сначала — Шаг 0, на котором все обычно сыпятся.

Подготовьте Figma-файл (без этого будет хаос)
Claude читает файл через API. Если у вас там свалка из слоев «Rectangle 47» — чуда не будет.

Компоненты — только через Main Components.

Варианты — строго через Component Properties.

Стили — всё должно быть привязано к Variables или Styles. Никакого «красного на глаз».
Если кит причесан — вы в игре. Если нет — идите чинить, иначе Claude выплюнет мусор.

Инструменты: чем собрать кит, если его еще нет
Прежде чем скармливать кит коду, его надо по-человечески собрать. Вот что реально работает:

Figma AI / Make — база. Накидать черновик экрана или интерактивный прототип по промту. Быстро, удобно, но часто слишком стерильно. Хорошо как фундамент.

Figr Identity — это уже про систему. Генерит компоненты, которые дружат с токенами и логикой.

Готовые решения — иногда быстрее взять эталон. Untitled UI (база баз) или Shadcn/ui для Figma. Если работаете с Tailwind — это вообще кратчайший путь к адекватному результату.

Шаг 1. Коннектим Claude Code

Шаг 2. Выворачиваем структуру файла

Вот ссылка на файл. Вытащи через MCP все компоненты, цвета, HEX-ы, текстовые стили и отступы. Мне нужна полная карта, прежде чем начнем кодить.

Claude вернет структуру. Проверьте её. Это момент истины: станет понятно, где вы накосячили в Figma-файле.

Шаг 3. Генерим токены

«На основе файла создай tokens.json. Группируй всё: colors, typography, spacing. Сверху накинь скрипт generate-css.js, чтобы получить готовый styles/tokens.css. Запускай».

Это самая приятная часть — токены залетают идеально, потому что это голая математика.

Шаг 4. Пишем компоненты

Берем, например, Button. Просим Claude написать React-компонент, который в точности повторяет варианты из Figma.

Важно: заставляйте его использовать только CSS-переменные из вашего файла токенов. Добавляем стейты (hover, focus, loading), типы для TS и Storybook для документации. Повторяем для каждого элемента.

Шаг 5. Зацикливаем процесс (Builder.io)

Когда код готов, используем плагин Builder.io. Он «маппит» ваши компоненты в Figma на реальный код.

Результат? Дизайнер рисует новый экран из готовых компонентов в Figma, а разработчик получает чистый React-код, который дергает ваши компоненты, а не генерит новую фигню.

Что в сухом остатке:

За один вечер вы получаете живую дизайн-систему: токены, CSS, React-библиотеку и Storybook. Figma — источник истины для визуала, код — для продакшена.

Всё связано, всё летает. ну не чудо ли?

Дизайнерская «чуйка» — это главный самообман 2026 года

Сейчас из каждого утюга кричат: «Нахрен процессы, у нас есть ИИ и интуиция! Скорость решает всё!» Даже лиды из Anthropic подливают масла в огонь. Но давайте честно: если вы строите бизнес, а не играете в песочнице, то вера в «озарение» без фундамента — это прямой путь к кассовому разрыву.

Раскладываем по полкам, почему «интуитивный дизайн» — это часто просто ширма для лени:

👀 Сеньор не забивает на этапы, он просто пролетает их на автомате.
Когда у тебя за плечами сотни запущенных продуктов, ты не «пропускаешь» исследование. Ты проводишь его в голове за 10 минут, потому что уже знаешь все грабли в этой нише. Это не отмена процесса, это его экстремальное сжатие.

👀 Double Diamond — это не секта, это ваша страховка.
Все эти фреймворки придумали не для того, чтобы дизайнерам было чем заняться. Это способ не просрать бюджет клиента на решение проблемы, которой не существует. В финтехе или медицине «интуиция» без проверки — это не гибкость, это должностное преступление.

👀 ИИ — это бензин, а не двигатель.
Нейронки ахуенно ускоряют сборку, но они не понимают зачем мы это делаем. Если джун надеется, что Клод или Чатгпт заменят ему мозг и понимание задачи — он профнепригоден. ИИ помогает сжимать рутину, но не снимает ответственности за результат.

Короче:

Подход «сначала пилим решение, потом ищем проблему» работает только в одном случае — если вы делаете клон уже взлетевшего продукта. Во всех остальных ситуациях это авантюра. Главный скилл сегодня — не слепое следование методичке и не хаотичное «я так чувствую». Это умение врубать нужную скорость под конкретный риск.

Либо ты управляешь рисками, либо они управляют твоим временем. Третьего не дано. А более детально про все это написано в статье от NNG

RAG, CAG и причем тут контекстное окно

Щас расскажу про тааакую штуку, но начну с исторической справки: долгое время мы все сидели в парадигме RAG. Почему? Да потому мой любознательный друг, что контекстные окна у нейронок были размером с почтовую марку.

Приходилось резать данные в мелкую лапшу, превращать их в векторы и надеяться, что поисковый алгоритм вытянет именно тот кусок, который нужен. Но в 2026 году, когда контекст измеряется миллионами токенов, этот подход начинает выглядеть как костыль. На смену (или скорее в дополнение) приходит CAG — Cache-Augmented Generation.

Как работает магия?

Суть простая: вместо того чтобы каждый раз судорожно искать фрагменты в базе, я загружаю всю базу знаний целиком прямо в контекстное окно модели и замораживаю её там. Это стало возможным благодаря KV-кэшированию. Модель один раз обрабатывает массив данных, сохраняет промежуточные вычисления и при каждом новом вопросе обращается к этому «горячему» кэшу. Больше никакого ожидания, пока идет поиск нужных данных. Ответ прилетает мгновенно, как будто я общаюсь с коротким промптом, хотя за спиной у модели висят сотни мегабайт документации.

Почему это точнее и быстрее?

Тут все просто то безумия. В классической схеме точность всегда упирается в качество поиска: если алгоритм не нашел нужный кусок, модель его просто не увидит и начнет лукавить на голубом глазу. В CAG поискового этапа просто нет — модель видит всю картину сразу. Это дает практически стопроцентную точность и позволяет сопоставлять факты из разных концов огромного архива. Для RAG это часто была непосильная задача, а для нас — теперь база.

А как эту вундервафлю применить?

Возьмем конкретный пример из нашей жизни. Когда нужно провести полный аудит сложной дизайн-системы, мы кэшируем все гайды и кейсы за последние годы. Теперь я могу спросить о противоречиях в логике отступов между проектами разных лет, и модель не просто найдет упоминания, а проведет сквозной анализ всего объема данных.

Другой вот кейс — работа с легаси. Можно засунуть в кэш весь репозиторий проекта, который писали пять лет разные команды. Если спросить, как изменение одной функции аутентификации повлияет на логику инвойсов в другом модуле, модель увидит все зависимости. Поисковый алгоритм RAG мог бы это пропустить из-за низкой семантической схожести запроса, а CAG — нет.

Про страх потери середины

Мне накидали в панамку по поводу потери данных или снижения внимания в середине огромного контекста. Ребят, это все хуйня. Современные архитектуры давно решили проблему потери середины. В тестах на извлечение информации модели показывают идеальные результаты даже на объемах в два миллиона токенов. Единственное реальное ограничение — это объем. Если ваша база весит терабайты, RAG все еще неизбежен. Но для локальных баз до 200 мегабайт CAG — это абсолютная киллер-фича.

Че по бабкам?

Конечно, за кэш нужно платить как и за все в жизни. Хранение активного контекста стоит денег, и если обращаться к нему раз в месяц, это выйдет дороже классической векторной базы. Но если вам нужен глубокий, быстрый и точный анализ в режиме рилтайма, CAG окупает себя за счет экономии на разработке и отсутствия ошибок поиска. Лично для меня выбор очевиден: там, где важна глубина понимания, я выбираю кэш.

Дизайн больше не будет прежним или почему мы меняемся.

Долгое время мы писали о Pixel-perfect и классическом подходе к дизайну, но индустрия развивается слишком быстро, чтобы оставаться в старых рамках. Сегодня роль дизайнера трансформировалась: это уже не просто специалист в Figma, а скорее оркестратор технологий и искусственного интеллекта.

Реальность 2026 года предъявляет к нам новые требования. Теперь недостаточно просто спроектировать интерфейс — критически важно уметь прототипировать его через код и понимать основы фронтенда, бэкенда и облачных сервисов. Искусственный интеллект при этом становится нашим основным помощником, который берет на себя написание кода и автоматизацию рутинных задач.

Наша редакция стремиться быть в центре этих изменений, поэтому решили обновить формат. Мы будем делиться практическими наработками, тестировать актуальные нейросети и знакомить вас с лидерами рынка. В связи с этим канал Pixelmap превращается в «Нейрокодинг». Наш новый логотип, объединяющий структуру кода и ядро ИИ, стал прямым отражением этой философии.

Давайте двигаться вперед и расти вместе.