ВМП ЧЕЛЛЕНДЖ | Ч. 1 ❤️

«начни лето правильно» мы запускаем серию из трёх челленджей по Визуальному Мультимедийному Программированию, главный приз — проходка на курс всего будет 3 челленджа, в итогке вы соберете крутой мультимеда арт, а итоги мы подведём 8-го числа на стриме что нужно делать: работать с готовой цепочкой по тутору от Ангелины в тачдизайнере и создавать креативный визуал, работы присылайте под этот пост, файл проекта в комментариях дедлайн сдачи: 02.06 23:59 😁программа курса ВМП 😁 🖤🖤🖤🖤🖤 🖤🖤🖤🖤🖤 🖤🖤🖤🖤🖤 🖤🖤🖤🖤

Чел взял модули из Фигмы, подключил Claude Code через MCP и попробовал собрать из этого React-компоненты. Получилось, кстати, нормально: чистая структура файлов, аккуратный код, визуально близко к макету. Только перед этим он целый день объяснял Claude, что вообще происходит. Это опыт Росса Любе. Он не просто кинул макет агенту и получил готовый продукт. Сначала пришлось дать вводные по проекту, дизайну, сборке, компонентам и правилам. И вот после этого Claude Code смог выдать приличный результат. В этой истории хороша именно приземлённость. Без сказок про замену дизайнера и разработчика. Обычная рабочая реальность: агент может помочь, если ему нормально объяснить задачу. Примерно как с младшим разработчиком. Дал структуру, показал правила, потом проверил руками. Дал мутный макет и надежду на чудо, получил лотерею. С Фигмой тут тоже всё становится интереснее. Раньше неаккуратный файл мог жить годами. Дизайнер голосом объяснял, что имел в виду, разработчик сам догадывался, продакт что-то уточнял в чате. Все как-то вывозили. С агентами такой номер проходит хуже. Если в Фигме всё названо как попало, компоненты живут в трёх версиях, состояния забыты, а рядом лежит слой Rectangle 4827, агент просто ускорит бардак. Он быстрее соберёт не то и быстрее принесёт результат, который выглядит почти правильно. А «почти правильно» в интерфейсе иногда бесит сильнее, чем совсем плохо. Я в Hirehi, к слову. использую тоже связку, только не Claude, а Codex + MCP. Макет теперь собираю за минуту на фронте, потом остаётся чуть пофиксить и готово. Но и в Фигме там порядок) Долго я этого избегал, и очень-очень зря. Получается, что Фигма для агента уже не просто картинка. Ему нужны нормальные следы работы: 1. Понятные названия 2. Компоненты без хаоса 3. Состояния 4. Токены 5. Пояснения и ограничения Всё то, что раньше часто считалось скучной уборкой после дизайна. Теперь это становится входными данными для ИИ. Самый смешной момент в статье вообще про людей. Автор пишет, что мутная часть процесса всё равно остаётся до Фигмы и Claude: обсуждения, субъективщина, согласования, разное понимание задачи. Можно подключить хоть десять агентов, но если на созвоне все говорили разное и никто ничего не записал, агент просто красиво автоматизирует недосказанность. Claude Code + Фигма MCP проверяет не только силу ИИ. Он ещё показывает, насколько у команды всё прибрано до прихода агента. Что будет больнее для дизайнеров: научиться работать с агентами или впервые нормально прибраться в своих файлах? ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

🫠 Скачать набор 🫠 #материалы

TechCrunch написал про Dessn. Это новый дизайн-инструмент, который поднял $6 млн и предлагает дизайнерам работать ближе к реальному продукту: запускать проект в облаке, подтягивать кодовую базу и менять интерфейс через ИИ. Кажется, что это опять очередной заход на тему «мы сейчас заменим Фигму». Но у Dessn фокус другой. Он полезен командам, у которых уже есть продукт, код, компоненты и рабочий интерфейс. Это не про генерацию с нуля как в Lovable или v0. У Dessn история приземлённее: быстро потрогать изменение там, где продукт уже живёт. В моих проектах этот разрыв всплывает постоянно. В макете всё чисто: нормальные имена, ровные карточки, аккуратные состояния, никаких внезапных ошибок. А потом открываешь прод, и там фамилия на 28 символов, картинка сломалась, тариф закончился, кнопка уехала, а бэкенд вернул что-то весёлое. Фигма в этом смысле прекрасная штука, но она очень легко превращает продукт в красивый симулятор продукта. Вроде всё выглядит убедительно, команда согласовала, можно идти дальше. А потом выясняется, что компонент так не умеет, данные приходят другие, состояние забыли, разработчик смотрит на макет и говорит: «ну это сложно сверстать». Dessn пытается сократить именно это расстояние. Сидеть отдельно в файле и представлять, как оно будет работать, уже мало. Хочется быстрее проверить идею на живом продукте. В таком сценарии пользы больше, чем в ещё одном генераторе красивых карточек. Хотя тут легко представить и обратную сторону. Если дать всем возможность быстро менять интерфейс через ИИ, в команде сразу начнётся спор за ответственность. Дизайнер поправил, разработчик не понял, продакт попросил ещё три варианта, кто-то на встрече сказал «а давайте попробуем», и вот уже продукт превращается в песочницу для идей. Поэтому без нормальных правил такое тоже быстро поедет. Основатели Dessn, кстати, не хотят делать связку с Фигмой. Считают, что это снова утащит команды от прода. Спорная мысль, но логика понятная. Они хотят строить инструмент вокруг места, где продукт уже работает, а идеальный макет остаётся в стороне. У них ещё в планах связки со Слаком и заметками со встреч. Типа обсудили что-то в команде, и из этого можно быстрее собрать прототип. С этим я пока осторожен, потому что «из созвона сразу в интерфейс» звучит красиво только до первого созвона, где все говорили разное и никто ничего не решил. В целом мне такие инструменты интереснее, чем очередные генераторы красивых карточек. Меньше вау на демке, зато ближе к реальной работе. Главное, чтобы это не превратилось в режим «каждый накидал по промпту, а потом разработка разгребает». Но мне нравится то, что щас все намекают дизам на то, что пора начать разбираться в коде) И скоро диз без этого навыка будет уже не так хорош. ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Файл содержит подборку редактируемых пиксельных иконок Install ️

Чуть ранее я писал, что .noddef появился из очень простой мысли: вокруг существует огромное количество интересных шрифтовых идей, набросков и экспериментов, которые так и остаются где-то между черновиком, поиском и «может быть потом доделаю», полный пост можно почитать тут: Хочу коротко напомнить и уточнить: .noddef — это открытая типографическая экосистема для экспериментальных, незавершённых и авторских шрифтовых заготовок. Это не словолитня. Не маркетплейс. И не архив случайных файлов. Это кураторское пространство для шрифтовых образов с характером, потенциалом и возможностью продолжения. Здесь будут: — экспериментальные и незавершённые шрифты, — студенческие и авторские проекты, — процессы, наблюдения и исследования, — визуальные спесимены, — бесплатные шрифтовые образы для личного использования, — проекты, которые со временем могут получить развитие и доработку. Для авторов — это возможность показать свои поиски и дать проектам продолжение. Для дизайнеров — возможность находить живые, необычные и неочевидные типографические решения. Для нас всех — попытка немного расширить поле экспериментальной типографики вокруг и посмотреть на нее под иным углом. .noddef не романтизирует халтуру и не противопоставляет процесс качеству. Нас скорее интересует момент, когда в проекте уже появилась живая идея, характер и интонация — даже если он ещё не стал «завершённым продуктом» как по знаковому составу, так и по контурам. Для меня незавершённость — это просто момент, когда у идеи всё ещё есть пространство для движения. И мы хотим работать именно с этим состоянием. Огромная благодарность за поддержку, поиски, обсуждения и запуск проекта: Паше Рипли Нике Кириченко Антону Прокопьеву Максу Кешишеву Саше Киселеву Грише Морозову И всем, кто поддержал словом и делом. В ближайшее время я сделаю еще серию постов про то, как работает проект на текущем этапе, что планируется доработать и реализовать в ближайшее время и FAQ-карточки. А пока просто забегайте поглазеть и спасибо всем за ваше внимание и интерес! tg @noddef ig: @noddef.type noddef.com

В команду подведомственной организации Правительства Москвы нужен дизайнер презентаций (описание - в файле). Если интересно, присылайте резюме и порфолио мне в Telegram AnnaKoroleva_1 или на почту vas-any-95@mail.ru

Сейчас я больше работаю с Claude, поэтому задумалась об экономии ) Что накопала — делюсь ) Токен — это кусочек текста, чуть меньше слова, для английского ≈ ¾ слова, для русского дороже, кириллица дробится на большее количество токенов). Вот тут первый лайфхак: пишите на английском ) При каждом сообщении модель обрабатывает: • Входные токены — вся история чата целиком, системные инструкции, прикреплённые файлы, инструкции проекта. • Выходные токены — собственно ответ Claude. Ключевой момент: история читается заново на каждом шаге. Поэтому чем длиннее диалог, тем дороже каждая следующая реплика, даже если она короткая. Как тратить меньше токенов? • Планировать сообщение. Объединять связанные вопросы в одно сообщение. • Новая тема — новый чат. Не таскать за собой длинную нерелевантную историю. • Длинные тексты и документы, к которым обращаешься многократно, держать в Проектах и формате md: содержимое кэшируется (а в RAG-режиме подгружается только релевантными кусками) и не списывается заново при каждом сообщении. • Отключить ненужные инструменты и коннекторы в настройках. • Выключать extended thinking, когда задача простая. • Выбирать текст, а не скрин. Для сравнения: 1 000 токенов ≈ 750 слов текста. • Подбирать модель под задачу — для простого незачем брать Opus. Как отслеживать расход? Сlaude.ai/settings/usage — прогресс-бары текущей сессии и недели для Pro/Max/Team. Это запаздывающий индикатор: он показывает «сколько процентов плана съедено», но не счётчик токенов конкретной реплики. Claude Code: команда /cost показывает потокенный расход сессии, /stats — паттерны во времени; плюс локальные JSONL-логи, которые читают сторонние мониторы. API: точное число входных/выходных токенов в каждом ответе + отдельный эндпоинт для предварительного подсчёта. en<able> - о дизайне в A11y | Наши статьи на VC

Плагин для экспорта выбранных фреймов в легкий PDF файл. ‍ Скачать плаги👨🎨 #plugin

Вот теперь история с ИИ в Фигме стала совсем прямой. Сначала они подключали внешних ребят через MCP, дружили с Claude Code, Codex и другими агентными инструментами. А теперь, по данным TechCrunch, Фигма добавляет собственного ИИ-агента прямо на совместный холст. Работать это должно так: пишешь запрос, агент создаёт новый дизайн, правит существующий экран или делает несколько вариантов того, что уже лежит в файле. Причём можно запускать сразу несколько агентов, чтобы они параллельно делали разные задачи. Выглядит как логичный следующий шаг. Если кодовые агенты уже умеют лезть в Фигму, тащить оттуда контекст и что-то собирать по макетам, то странно было бы Фигме самой оставаться просто местом, куда агент приходит в гости. Агенту проще жить там, где уже лежит вся продуктовая логика: компоненты, стили, состояния, комментарии, старые решения и люди, которые всё это обсуждают. Главный вопрос теперь: понимает ли агент, зачем этот экран вообще существует? Вот это для дизайна намного интереснее самой генерации. Нарисовать пять вариантов карточки уже не вау. Вау будет, если агент поймёт, что в этом продукте нельзя брать старую кнопку, что пустое состояние должно быть таким, что у мобильной версии другой сценарий, что в этой таблице пользователь ищет быстрый ответ итд Фигма говорит, что агент понимает дизайн-контекст и элементы, потому что работает на моделях, дообученных под дизайн-задачи. Хорошо, если так. Потому что обычная ИИ-генерация интерфейсов часто выглядит как человек, который насмотрелся красивых дашбордов, но ни разу не сидел на созвоне, где обсуждали реальную роль этого дашборда в продукте. Тут важен сам факт, что агент появляется на совместном холсте. Холст в Фигме всегда был местом, где команда смотрит на одно и то же. Дизайнер двигает блок. Продакт спорит про сценарий. Разработчик спрашивает, что будет в краевом случае. Кто-то оставил комментарий три недели назад и испортил всем настроение. Теперь туда добавляется ещё один участник. Он не устает, не обижается и может за минуту накидать десять вариантов. Польза очевидная, пока не представляешь реальный файл большой команды. Там же начнётся веселье: 1. один агент сделал вариант главного экрана 2. второй поправил состояние ошибки 3. третий решил «улучшить» компонент 4. дизайнер вручную вернул половину назад 5. продакт спросил, кто вообще это предложил Фигме придётся очень аккуратно проектировать ещё и следы работы агента. Что он поменял. Почему поменял. Где его вариант. Где человеческое решение. Что можно откатить. Что ушло в обсуждение. Что осталось просто черновиком. Самый полезный агент в Фигме будет не тем, кто рисует красиво. Скорее тем, кто быстро приносит материал для обсуждения: черновик, краевые случаи, варианты, странные состояния. Такой быстрый помощник, которому можно дать скучную задачу, но всё равно надо смотреть за руками. И это нормальная роль. Дизайнеру редко нужен кто-то, кто сам всё решил. Чаще нужен тот, кто быстро принесёт материал для обсуждения. А дальше уже начинается работа: понять сценарий, убрать лишнее, проверить состояния, привести в чувство и принять решение. Если Фигма сделает агента именно таким участником холста, это может быть сильная штука. Если просто добавит генератор экранов внутри файла, будет весело первые две недели, а потом все снова вернутся к ручной уборке после ИИ. Я, честно говоря, ко всей это аи агентской приколюхе в дизайне именно отношусь очень скептически. Вышли уже десяток продуктов по генерации и все сдохли. Ни одного продукта я не знаю, кто там на слуху и им прям пользуются. Код да, дизайн, увы, пока нет. А вы что думаете?) ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Есть два вида печати: 1. Цифровая — быстрая и выгодная. Макет отправляется на печатную машину и наносится на бумагу напрямую тонером или краской, как в домашнем принтере. Можно сделать один экземпляр, внести правки в файл и тут же напечатать исправленную версию. 2. Офсетная устроена сложнее: краска сначала попадает на печатную форму, потом на резиновое полотно, а с него — на бумагу. Это более долгий и дорогой способ, так как на старте нужно оплатить изготовление форм и настройку оборудования. Выбирайте вид печати, учитывая его плюсы и минусы. Подробнее об этом — в статье в нашем блоге. #польза #печать @contented

Когда вы кодите с LLM, проблема обычно не в том, что модель совсем ничего не умеет. Она умеет слишком правдоподобно угадывать. Поставит 12px там, где у вас должно быть 8px, выберет «почти тот» синий, придумает токен, которого в системе нет, и на каждом новом сеансе начнет делать это заново. По отдельности всё выглядит нормально. Вместе получается интерфейс, который расползается уже через несколько итераций. Здесь предлагают довольно жесткую, но рабочую схему: не надеяться на память модели, а дать ей опору в виде спецификаций, закрытого слоя токенов и автоматического аудита. То есть вынести дизайн-систему в структуру, которую LLM может читать как источник истины, а не как намек. Тогда она не выдумывает значения, а берет их из ограниченного набора, а любое отклонение ловится скриптом до ревью. Внутри: – Почему LLM плохо держат дизайн-систему в голове даже в рамках одного проекта; – Какие три ограничения модели быстрее всего разваливают консистентность интерфейса; – Зачем делать отдельные spec-файлы для foundations, tokens, components и patterns; – Почему закрытый слой токенов лучше, чем набор «примерно правильных» значений; – Как аудит по CSS ловит хардкод и не дает визуальному дрейфу копиться; – Зачем связывать инструкции для агента, токены и CI в одну систему; – Почему такой подход особенно важен для больших прототипов и длинных AI-сессий; – Как именно структура дизайн-системы превращается из знания в голове в рабочую инфраструктуру. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

www.figma.com/blog/the-figma-agent-is-here

→ Higgsfield + Figma MCP + Claude Code Благодаря инструкции Claude сможет быстрее сообразить как сделать такой слайдер 💻 1. Инструкцию нужно складывать в ту же папку, где у вас лежат все файлы по сайту (шрифты + те файлы, что вы будете делать по инструкции)/либо загружать её в чат с Claude с ссылкой на макет и другие материалы 2. Важно повторять все те действия, что описаны в ней – там пошагово сказано как и что делать не только с точки зрения верстки, но и как подготовить материалы ⚠️Обратите внимание, что помимо инструкции Claude нужно дать макет в Figma (с включенным MCP и загруженными фотографиями) + фото, видео 360° для каждой модели при ховере (всех моделей + видео я генерировала в Higgsfield, используя Nana Banana Pro и Kling) Ссылка на инструкцию🔗 *Выше я делала инструкцию как скачать/зайти/установить Claude #полезное #клод

Студенты Института дизайна могут подать заявку на получение повышенной стипендии Правительства РФ 🤩 Подаваться могут: — студенты бюджетной формы обучения — студенты договорной формы обучения — иностранные студенты 🤩Важные условия: — отсутствие академических задолженностей и долгов по обучению — отсутствие троек за весь период обучения — учитываются достижения за весь период обучения 🤩 До 22 мая включительно необходимо отправить письмо на почту: decanat.design@rguk.ru Тема письма: ЗАЯВКА НА СТИПЕНДИЮ ПРАВИТЕЛЬСТВА Что нужно прикрепить: 🤩 Word-файл со списком достижений (дипломы, сертификаты, благодарности, участие в конкурсах и т.д.) 🤩 Один PDF-файл со сканами всех достижений, указанных в Word-документе

Lovable за последние апдейты начал собирать вокруг себя что-то вроде продуктовой комнаты. Можно править интерфейс прямо в превью, оставлять комментарии на элементах, отправлять тред агенту, искать по истории чата, а в десктопном приложении подключать локальные MCP, чтобы агент видел контекст из Фигмы и других инструментов. По отдельности всё вроде мелочь. Комменты уже сто лет есть в Фигме. Визуальные правки есть почти в любом конструкторе. Поиск по истории вообще обычно замечаешь только после того, как он один раз спас тебе день. Но в сумме получается любопытная штука. Вайбкодинг перестаёт быть одиноким чатом, где ты сидишь и уговариваешь модель «ну сделай нормально, пожалуйста». Он начинает обрастать рабочими слоями: экран, обсуждение, история решений, контекст из соседних инструментов, правки по месту. Агент поменял кнопку. Через неделю команда пытается понять: это было решение, эксперимент или чей-то случайный промпт? Вот это для меня главный вопрос во всей истории. В hirehi такое и без агентов всплывает постоянно. Где-то идея лежит в Фигме, где-то обсуждение в чате, где-то правка уже в коде, где-то я сам себе написал «потом поправить» и, конечно, через неделю не помню, что именно хотел поправить. Если рядом появляется агент, который может реально менять интерфейс, бардак получает турборежим. Поэтому комментарии в превью тут важнее, чем кажутся. Продакт ткнул в конкретное место. Дизайнер поправил состояние. Агент получил задачу рядом с экраном. Разработчик хотя бы видит, откуда прилетела правка. Уже меньше шансов, что всё превратится в длинный промпт на 40 строк, где половина смысла живёт только в голове человека, который его писал. С историей чата похожая тема. Если приложение собирается через диалог, переписка становится частью продукта. Там лежат решения, компромиссы, откаты и странные моменты типа «вчера просили сделать ярче, сегодня срочно верните как было». Потерял историю, и потом продукт выглядит так, будто его собирали несколько людей, которые общались через стену. Десктопное приложение с локальным MCP добавляет ещё больше контекста. Агент может смотреть в Фигму и другие локальные штуки. В теории это прям хорошо, потому что он меньше угадывает. На практике появится новый вопрос: а что именно он прочитал? Макет? Старый файл? Обсуждение? Какой-то черновик, который вообще никто не хотел тащить в продукт? Вот тут Lovable может стать правда полезным, если не развалит ответственность. Потому что дать всем возможность быстро править интерфейс легко. Сложнее сделать так, чтобы команда понимала, кто что поменял, зачем поменял и почему это теперь считается нормальным решением. Такие апдейты мне ближе, чем очередной генератор приложения мечты за один запрос. Тут обычная продуктовая рутина: ткнуть в экран, обсудить, поправить, откатить, найти старое решение, передать агенту контекст. Скучнее для демки, зато намного ближе к реальной работе. ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

У Фигмы в релиз-нотах появился апдейт Draw. Там добавили текст по контуру, быстрый доступ к инструментам, отдельные слои для текста и вектора, новые настройки кистей, градиентов, текстур и шума. Можно было бы пролистать и забыть. Ну мало ли, ещё один набор мелких улучшений для тех, кто любит ковырять векторы. Но вообще это довольно показательная история. Они уже давно перестали быть просто местом, где рисуют экраны. Теперь вот потихоньку забираю соседние задачи, из-за которых дизайнер раньше уходил в другие редакторы. Обычный рабочий сценарий: • Собрал экран в Фигме. • Понял, что нужна простая картинка для пустого состояния. • Потом обложка. • Потом чуть поправить вектор. • Потом текст по дуге. Потом какая-то графика для презентации. И начинается: открыл Illustrator, поправил, экспортнул, вставил обратно, увидел правку, пошёл заново. Всё это не страшно, но бесит. Особенно когда задача маленькая, а вокруг неё внезапно появляется отдельный мини-процесс. Вот в такие места Draw и лезет. В ежедневную мелкую графику, которая постоянно всплывает рядом с интерфейсами. Для большой профессиональной иллюстрации отдельный редактор всё равно пригодится, тут иллюзий нет. Для продуктового дизайнера это вполне окей. Нужно быстро собрать пустое состояние, простую иконку, промо-блок, обложку, кусок графики для лендинга или презентации. И если всё это можно сделать прямо рядом с макетом, без прыжков между окнами, то понятно, почему Фигма туда идёт. Обратная сторона тоже есть: фигма начинает пухнуть. Сначала экраны. Потом прототипы. Потом Dev Mode. Потом сайты. Потом ИИ. Теперь ещё больше графики. И в какой-то момент инструмент, который был понятным рабочим местом, начинает превращаться в такой дизайн-комбайн, где всё вроде можно, но иногда уже не очень понятно, куда смотреть. Мне в целом удобно, когда мелкие графические штуки можно быстро сделать в том же файле. Я не хочу ради маленькой картинки для онбординга открывать ещё одно приложение и устраивать цирк с экспортами. Но я ещё меньше хочу, чтобы Фигма стала местом, где всё делается на уровне «ну вроде норм». Короче, Draw выглядит маленьким апдейтом, но направление у Фигмы понятное: дизайнер должен всё реже выходить из одного рабочего пространства. Вопрос только в том, где у этого пространства край. Потому что если сложить туда вообще всё, однажды сама Фигма станет отдельной задачей на день. Я вот, например, так и не нашёл как мне отменить подписку на тим аккаунт. Нигде. Даже кодекс просил, чтоб нашёл. Тупо нет кнопки нигде. Что думаете? ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Сторонние менеджеры скриптов удобнее, но если важно, чтобы скрипты оставались в системной папке — это можно организовать с помощью символических ссылок. Тогда достаточно хранить все скрипты в одном месте, например, в облачной папке с синхронизацией, а все версии Иллюстратора будут автоматически видеть одинаковые скрипты. Инструкция — Символические ссылки для скриптов (Ru) — How to Use Symbolic Links for Illustrator Scripts (En) #learn

рассказываем как можно загрузить свои картинки в сферу — тул, который навайбкодил под конец ai-сезона ⚪️ миша, дизайнер pragmatica и 5heads ⚫️⚫️⚫️ основная задача сферы — быстро собрать разрозненный визуал в интерактивную композицию. базовую версию я сделал за 4–8 часов. на добавление функционала загрузки работ времени ушло больше: хотелось сделать не просто дроп файлов, а понятный и красивый инструмент с коротким, но динамичным шоу-рилом + дать возможность встраивать эту сферу в свои сайты и портфолио. затестить << sphere.5heads.ai >> шерьте процесс и свои сферы в комментах! 🌹

Мечта любой команды разработки сейчас — автоматизировать сборку дизайна с помощью LLM, чтобы ускорить delivery-процесс. Я видел несколько разных подходов, но в итоге пришёл к чему-то, что, как мне кажется, должно сработать удобно Рассказываю на примере проекта, где я на фрилансе (oversecured.com) Дано: - legacy-архитектура фронта, которую сложно масштабировать с LLM-кой - отсутствие части макетов в Figma + неактуальность макетов Что хотим: - заиметь макеты в Figma, которые выступают как источник правды - можно дать ссылку на макет, и LLM (Codex/Claude) его соберёт - UI-kit/дизайн-система, которая полностью совпадает в Figma/code Как мы решили это сделать: 1. Подключаем для кода open-source библиотеку компонентов shadcn (https://ui.shadcn.com/create). Компонентов там достаточно много + они гибкие (можно внутрь прокидывать много свойств). Это наша база, из которой мы будем собирать весь фронт 2. Берём для этой же библиотеки какой-то из Figma-файлов (вот здесь (https://ui.shadcn.com/docs/figma) есть несколько ссылок на файлы community, на них ссылается сам shadcn). Это наша вторая база, из которой мы будем собирать все макеты в Figma Мы пока не придумываем дизайн и не собираем компоненты с нуля, чтобы ускориться на старте, — просто берём готовое решение. 3. Начинаем собирать макеты в Figma из компонентов, которые мы взяли в community. На скрине — дизайн 4. Дальше через Figma MCP мы можем отдавать нашему AI-агенту ссылку на макет и просить собрать дизайн с помощью компонентов shadcn (можно также использовать shadcn MCP (https://ui.shadcn.com/docs/mcp)) Для тех, кто еще не знает: MCP — это протокол, через который LLM общается с внешними тулами вроде Figma. Важно здесь отловить одну вещь: AI-агент должен вытаскивать из Figma не скриншот макета, а структуру страницы (для этого используются разные методы). И всё — это работает. Простые страницы уже собираются верно на 95–100%, страницы посложнее пока тестируем Первая задача — актуализировать весь фронт на новых гибких компонентах. Во второй части (когда я к ней подойду) я хочу иметь возможность стилизовать компонент в Figma и стащить дизайн на фронт, чтобы в коде он тоже стилизовался В теории, проблемы тут быть не должно, потому что мы взяли в коде и в Figma одинаковую семантику токенов (и там и там shadcn) — то есть цвет в коде и цвет в Figma называются одинаково, например surface-default-100 Я уже предвижу некоторую сложность со стилизацией и со сборкой сложных экранов, так как в Figma компонент не всегда соответствует по пропсам тому, что есть на фронте в библиотеке shadcn (часть свойств может отсутствовать, часть — называться иначе). Тут потребуется немного ручной настройки и тюнинга компонентов в Figma Часть 2 напишу, когда подойду к ней!