🤖 Как CLI-инструменты и MCP превращают наброски в готовый код

Ясонас Георгиадис исследовал, как дизайнеры могут использовать агентные CLI-инструменты Claude Code и Codex CLI для создания AI-управляемых рабочих процессов. Главное отличие от AI-IDE: CLI-инструменты подключаются напрямую к моделям, минуя посредников, что делает взаимодействие быстрее и надёжнее. Ключ к успеху — идеально выровненная дизайн-система, где переменные Figma напрямую соответствуют CSS-токенам. Автор использовал новые возможности Code Connect UI с компонентным маппингом и MCP-инструкциями для каждого компонента. Файлы CLAUDE.md в корне проекта определяют правила поведения AI-агентов и структуру проверок. В тесте с превращением нарисованного от руки макета в прототип Claude Code справился за 14 минут, создав респонсивную страницу с правильными токенами, а Codex CLI потратил 20 минут с менее точным результатом. Внутри: – Почему прямое подключение к моделям эффективнее работы через IDE; – Как субагенты работают в изолированных контекстных окнах для экономии токенов; – Зачем нужны матрицы проверки компонентов (Default, Hover, Active, Focus, Disabled); – Какие 10 специализированных агентов автоматизируют проверки дизайна; – Как Playwright MCP позволяет Claude самостоятельно тестировать интерфейс в браузере; – Почему больший контекст часто приводит к менее точным результатам. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста

🎯 Хочу поделиться с вами тем, как выглядит раскадровка и процесс создания промо-сайтов уровня Awwwards.

В видео к посту — пример небольшой части работы моих студентов над сайтом для инсулиновых помп. Да, такая вот необычная, социально значимая тема. В этом проекте ребята полностью разработали концепцию продукта. Сейчас Никита (@Nikita_Kisilyov) и Валерия (@Valeria_Eolyan) находятся на этапе создания визуального контента. Все это делается на моем курсе «Ultra UI: Уровень Арт-дирекшн». Для следующего потока у нас будет классное нововведение: каждому ученику я назначу куратора, который будет с вами созваниваться, отвечать на вопросы и помогать формировать концепцию проекта. Я также буду контролировать проект на ключевых точках и отвечать за качество ваших работ. А с прошлыми потоками продолжаем верстать сайты и забирать награды на Awwwards, CSSDA и других международных платформах. Как говорится, ставлю перед собой и вами новые вершины — и вместе постепенно достигаем их 😊 📌 К слову, начинается пора новогодних скидок. Я уже не раз говорил, что ни хрена в этом не разбираюсь, но понимаю, что вы их ждете. Поэтому возвращаем скидки «черной пятницы» на предпразничный период, и сейчас вы можете приобрести обучение по самой низкой цене 👇 Цена на курс «Ultra UI: Уровень Арт-дирекшн» со скидкой: ➡️ Для студентов UPROCK: 84 400 71 740 руб. при оплате сразу / от 4350 руб. в месяц в рассрочку ➡️ Для не студентов: 99 000 84 150 руб. при оплате сразу / от 4959 руб. в месяц в рассрочку 📌 Но имейте в виду: старт потока будет в середине января, и свободно только 2 места. Если хотите раскачать уровень мышления до уровня арт-директора по созданию проектов — бронируйте обучение через моих коллег в @uprock_hello ‼️На все курсы UPROCK также новогодние скидки: 30% скидка на новый курс👇 🟣Нейросети для дизайнеров — 58 900 41 230 ₽ (старт первого потока 26 января, количество мест ограничено ❗️) 2 месяца практики, где вы освоите ИИ как рабочий инструмент, научитесь делать визуал быстрее и сильнее: от обложек и 3D до фото, иконок и редактирования материалов клиентов. Подходит дизайнерам, которые хотят повысить качество и чек за свои услуги. 20% скидка на пакетные программы👇 🟣UX/UI с нуля — 94 000 75 200 ₽ Курс для начинающих, которые за 8 месяцев обучения прокачают свои навыки до уровня настоящих профессионалов и выйдут на рынок со знанием современных UX/UI-инструментов и 6+ проектами в портфолио. 🟣Middle/Senior — 118 000 94 400 ₽ 8 месяцев прокачки ваших UX/UI-навыков современными техниками и продуктовыми фишками до уровня сильного мидла с отработкой на 7+ проектах. 🟣MAX — 159 000 127 900 ₽ 12 месяцев полного погружения сразу во все ключевые направления дизайна. Эта программа для тех, кто хочет развиваться комплексно: UX/UI, сайты, продуктовый подход, работа с нейросетями, веб-приложения и графический дизайн — все в одном пакете. 25% скидка на отдельные направления👇 🟣Продуктовый дизайн — 78 200 58 650 ₽ За 5 месяцев вы изучите полный цикл создания цифровых продуктов: исследование, аналитика, проработка пользовательских сценариев и финальные интерфейсы. 🟣Сайты — 68 900 51 675 ₽ Трехмесячная программа, в которой вы научитесь создавать продуманные, эстетичные и работающие многостраничные сайты для бизнеса. 🟣Веб-приложения — 75 900 56 925 ₽ 3 месяца практики по созданию интерфейсов повышенной сложности: CRM-системы, дашборды, AI-инструменты. 🟣Нейрокрейтеры: Коммерческое использование AI — 39 000 29 250 ₽ 2 месяца обучения и плюс 5 профессий в копилку через освоение ИИ-инструментов, а также приобретение навыков работы с фото, видео, 3D, иллюстрациями и креативным визуалом. 🟣Графический дизайн — 58 900 44 175 ₽ 6 месяцев обучения чистой практики с минимумом теории: все для создания плакатов и разработки креативной бренд-айдентики. ➡️ Чтобы забронировать место на моем авторском курсе или на другом обучении, напишите коллегам — @uprock_hello

🖥 HTML-верстка для дизайнеров (интенсив)

Как и обещал, проведем для вас интенсив по HTML-верстке. Дизайнеру важно понимать, как технически реализуются макеты — это помогает заранее продумывать дизайн так, чтобы он корректно собирался в разработке. Интенсив пройдет 26 и 27 ноября, на нем мы вместе с командой Taptop разберем: • основы HTML-верстки • основные термины • как правильно передавать макет в разработку 📌 Плюс будет практика, где вы сможете самостоятельно сверстать проект на визуальном редакторе кода Taptop. Он позволяет работать по принципам реальной верстки, при этом не требует знания кода. Подробная программа на 2 дня интенсива: 🗓 26 ноября: ⬥ Расскажем, почему дизайнер, который понимает верстку, становится сильнее, дороже и востребованнее, и зачем вообще дизайнеру разбираться в логике кода. ⬥ Разберем частые ошибки дизайнеров в макетах. ⬥ Объясним, как думает разработчик: что для него важно, почему он “ломает” макет, как он считывает структуру, что такое чистый код. ⬥ На примере Taptop разберем, что такое логика визуальной верстки и почему дизайнеру важно понимать структуру. ⬥ Рассмотрим, что такое HTML простым языком: структура страницы, теги, div, DOM. ⬥ CSS в понимании дизайнера: позиционирование, построение структуры, работа flex и grid, поведение блоков, связь дизайна и кода. ⬥ Принципы адаптации дизайна: mobile-first и desktop-first, брейкпоинты, базовые правила адаптива. ⬥ Посмотрим и разберем реальные кейсы студентов и партнеров, а также вы получите практическое задание 🗓 27 ноября: ⬥ Разберем ваши работы: рассмотрим типичные ошибки, расскажем, как сделал бы разработчик, а также подарим вам чек-лист передачи макета. ⬥ Практика: сборка макета в Таптоп, создание адаптива и мобильной версии. ⬥ Подведем итоги и подарим бонусы участникам: чек-лист передачи макета, методичка по терминологии, а также запись практики. ⚡️ Зарегистрироваться на интенсив P.S. В видео к посту — реализованные сайты студентов Uprock на Taptop, посмотреть их подробнее можно по ссылкам 👇 ➤ Тигран Шагоян — Shagoyan ➤ Наталия Кузнецова — Laguna Al-Sha'ab ➤ Наталья Лебедева — Бризант

Лучший сайт месяца. Какой он?⚡️

Я тут вспомнил, что давно не писал дизайн-дайджесты с премии CSS Design Awards. Напомню, что я там участник международного дизайн-жюри и должен смотреть и оценивать минимум 10 проектов в неделю. Так я и делаю, а вот про выпуск даджестов — подзабыл. Или подзабил, но это очень и очень зря. Возвращаюсь с ежемесячными отчетами. Сегодня опубликовал статью на портале https://dsgners.ru/ancora/18852-dizayn-daydjest-css-design-awards-sayt-mesyatsa-oktyabr-25">Дизайнерс, кто стал номинантом на награду Сайт Месяца в октябре и кто ее получил. Проектов среди номинантов было 9, я отобрал свой Топ-5. Среди них есть и пара проектов с российскими корнями, которые достойны внимания. Статья доступна по ссылке ниже 👉🏼 https://dsgners.ru/ancora/18852-dizayn-daydjest-css-design-awards-sayt-mesyatsa-oktyabr-25 Приятного вам чтения и просмотра проектов. После прочтения — проголосуйте в статье за проект, который лично вам больше всего понравился. Обнял и приятных выходных 🏆 Саша из Анкоры
Изображение поста
🛠️ DevTools для дизайнера: как проверять вёрстку без страха перед кодом
Дима из Voximplant написал руководство по использованию инструментов разработчика для дизайнеров. Главная мысль: открыть DevTools это как поднять капот у автомобиля. Не нужно разбирать двигатель, достаточно понимать, где что находится. Самая полезная функция для дизайнера это инспектор элементов. При наведении на элемент DevTools подсвечивает отступы цветом: зелёный показывает padding (внутренние отступы), оранжевый показывает margin (внешние). Вкладка Computed показывает финальные значения после всех вычислений браузера, а Styles показывает исходные CSS-правила и откуда они пришли. В Responsive Design Mode можно проверить адаптив, выбрав конкретное устройство или задав размеры вручную. Справа есть ручка для плавного изменения ширины, чтобы заметить момент, когда начинаются проблемы с вёрсткой. Внутри: – Как быстро достать SVG-логотип через Copy element; – Зачем нужна вкладка Network для скачивания защищённых изображений; – Как тестировать идеи прямо в браузере без Figma; – Почему изменения видны только вам до обновления страницы; – Какие пять основных зон есть в интерфейсе DevTools; – Как конкретные значения отступов упрощают фидбек разработчикам. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
💎 Шаблон КП на Тильде
Сегодня дарю вам шаблон коммерческого предложения для дизайнера-разработчика сайтов на Тильде (подойдёт как для фрилансера так и для команды) ✨ ❤️ ID шаблона: 87847526 Шаблон выполнен в виде странички на Тильде, сверстан он на стандартных блоках (с щепоткой CSS кода). Я отдала предпочтение именно стандартным блокам, чтобы их было легко редактировать и кастомизировать под свой фирменный стиль, и не надо было заморачиваться над адаптацией. Уникальный дизайн это, конечно, хорошо, но в переговорах и продажах важнее все таки скорость и мобильность, нежели красивая обёртка. Поэтому, когда вас попросят срочно отправить КП, вы сможете сделать это незамедлительно 🔥 ⭐️ В шаблоне некоторые блоки представлены в двух вариантах для различных схем работы. ⭐️ Также я добавила навигацию по странице КП, т.к. оно получилось довольно объемным. ⭐️ Все шрифты установлены «по умолчанию», поэтому когда вы добавите шаблон себе в проект — подключатся ваши установленные шрифты. Не призываю всех и каждого делать свое КП только по этой схеме, однако мой шаблон сможет послужить вам отличной основой для формирования своего собственного КП со своими уникальными текстами и предложениями. Инструкция по добавлению шаблона в проект на Тильде: ⭐️ Зайдите в ваш проект, где вы хотите разместить КП и нажмите «+ Создать новую страницу» ⭐️ Пролистайте страницу с шаблонами до самого низа, где будет располагаться кнопка «Указать ID шаблона» ⭐️ Нажмите на нее и в появившемся поле введите идентификатор моего шаблона КП: 87847526. И страница с КП у вас в проекте! Вы великолепны! 🌸 По всем вопросам или замечаниям по шаблону добро пожаловать в комментарии 😊 P.S. Не забудьте скрывать ваши КПшки заказчикам от индексации #документы #freebie
Изображение поста
Ищем веб-разработчика на «1С-Битрикс»
Меня зовут Артем Кузьмин, я программист студии. Нам требуется веб-разработчик на «1С-Битрикс». Минимальные требования к кандидату: — уверенное владение PHP, SQL и «1С-Битрикс»; — знание HTML, CSS, JavaScript. Чтобы получить приглашение на собеседование, нужно написать нам о себе, своем опыте, навыках и карьерных планах, сопроводив рассказ ссылками на выполненные работы. Подача заявки: artlebedev.ru/job/web-bitrix-11
Tailwind CSS Color Generator
Создайте полную цветовую палитру для Tailwind CSS, используя HEX-код, цвет в формате HSL или случайное значение. Формируйте и изменяйте группы цветовых переменных на основе полученной шкалы. #Plugin ОТКРЫТЬ
Изображение поста
Стажировка для фронтендеров
Команде собственных цифровых продуктов студии нужны фронтендеры-стажеры. Стажировка начнется зимой и продлится 3–6 месяцев. Кандидатам нужно быть крайне внимательными к деталям и справляться с проектами уровня «пиксель-перфект». Минимальные требования: — знание HTML, CSS, JavaScript и Git; — хороший уровень владения Vue.js; — умение создать и развернуть сборку на Docker. Опыт коммерческой разработки — существенный плюс. Для получения тестового задания требуется написать о себе, своем опыте, навыках и карьерных планах, сопроводив рассказ ссылками на выполненные работы. Подача заявки: artlebedev.ru/job/frontend-developer-intern-7
Inspo Compilation. Дайджест креативных сайтов | Сентябрь 2025
Новинки с Awwwards, CSSDA и FWA в сентябре от SALT AND PEPPER. Все горячие тренды в дизайне и разработке от лучших студий Читать на дизайнерс | #дайджест
Изображение поста
Inspo Compilation. Дайджест креативных сайтов | Сентябрь 2025
Новинки с Awwwards, CSSDA и FWA в сентябре от SALT AND PEPPER. Все горячие тренды в дизайне и разработке от лучших студий Читать на дизайнерс | #дайджест
Изображение поста
🇬🇧 A new (or rather, old) approach to typography on the web
Команда Daybreak Studio рассказала о проектировании типографической системы Atlas для продукта Adaline и поделилась приёмами и подходами, которые решают многие проблемы типографики в вебе. Веб-типографика редко подчиняется тем же законам, что и печатная. Линии плавают, межстрочные интервалы считаются по рамке шрифта, а не по базовой линии, а визуальный ритм часто теряется в сетках и токенах. Чтобы вернуть оптическую точность и читабельность, команда создала систему, где все параметры подчинены восприятию, а не математике. В статье детально разобраны принципы такого подхода — от подбора кегля и межстрочного интервала до настройки вертикального ритма, адаптации под CSS и создания гибкой модели токенов. #статья@zhurnalus_lite
Изображение поста
Маркетинг для дизайн-агентства
Как мы делаем дизайн грейт эген или почему мне не сидится на месте. Сейчас рынок штормит и любые методы привлечения внимания к агентству — это хорошо. Именно по этой причине я регулярно пишу про дизайн сам или с редактором. 👀 Например, я пишу дизайн-дайджесты, в которых разбираю топ сайтов за месяц с премии CssDesign Awards. Это полезные статьи, которые нам в команде помогают качать насмотренность. Конечно же в каждом дайджесте я оставляю ссылки на сайт нашего агентства. Потом я размещаю статьи на профильных ресурсах для дизайнеров или диджитал-агентств. Чем больше медиа-площадка, тем весомее для нашего сайта там ссылки. Ну и конечно классно, когда админы этих ресурсов оценивают статью и добавляют ее в рекомендуемые или ставят в раздел "Лучшее". Именно так и получилось с дайджестом, который я публиковал пару недель назад. На сайте WorkSpace статья попала в раздел "Лучшее" в теме "Дизайн". Если вы еще не читали этот полезный дайджест — добро пожаловать по ссылке ниже. Буду признателен за оценки. https://workspace.ru/blog/dizayn-daydzhest-css-design-awards-sayt-mesyaca-avgust-25/ Обнял! @Саша из Анкоры
Изображение поста
📖 Вышел Журналус № 476. Как читать воздух рядом с реактивной Гильотиной Юма
Вот что мы подготовили на этой неделе: • Цитаты из книги Эрин Мейер «Карта культурных различий. Как люди думают, руководят и добиваются целей в международной среде» • К чему готовиться на рынке труда в 2025 году • Как выбирать инструменты для стратегического планирования • Почему вкус — это главный операционный актив в эпоху ИИ • Разбор нового CSS-свойства «corner-shape» • Шпаргалка по созданию контента с учётом стандартов доступности • Какие прогнозы о роли ИИ в дизайне сбылись, а какие нет • Как идеально выполнить тестовое задание • Секрет идеального звука в Veo 3: анализ успешных промптов • Бесплатный сервис для создания промтов под Gemini • Обзор ИИ-функций Chrome, представленных Google • Экспериментальные плакаты студии vu-huu
Изображение поста
Pattern Generator — простой генератор бесшовных паттернов, с возможностью экспорта в PNG, SVG, CSS.
doodad.dev/pattern-generator/#beautiful-dingbats
Дизайн-дайджест CSS Design Awards. Сайт месяца. Август '25
Узнайте, кто стал номинантом на премию "Сайт Месяца" на CSSDesign Awards в августе'25. Вдохновляйтесь лучшими дизайнерскими работами! Читать на дизайнерс | #дайджест
Изображение поста
Дизайн-дайджест CSS Design Awards. Сайт месяца. Август '25
Узнайте, кто стал номинантом на премию "Сайт Месяца" на CSSDesign Awards в августе'25. Вдохновляйтесь лучшими дизайнерскими работами! Читать на дизайнерс | #дайджест
Изображение поста
Плагин Figma to Code (HTML, Tailwind, Flutter, SwiftUI) — Полностью бесплатный плагин с открытым исходным кодом, который может вывести всю вёрстку вашего макета на трёх языках.
Как пользоваться: 1. Нажмите правой кнопкой мыши по макету и перейдите Plugins → Figma to Code. 2. Выделите любой объект на макете, и в появившемся окне отобразится его код. 3. При необходимости можете изменить язык: HTML, Flutter, SwiftUI, CSS-фреймворк Tailwind. Если нужны Flutter или SwiftUI, то Figma to Code сможет выручить. Но поддержка HTML в нём не очень хорошая — плагин не пытается организовать все стили объекта в формат CSS, а просто выдаёт всё в формате
. #AutoLayout #android #css #html #девайсы #код #стили
Дизайн-дайджест СssDesign Awards⚡️
Лучший сайт месяца. Август 2025. Привет, бананолюбители 🍌 Только что опубликовал свежий дайджест по итогам голосования на премии CssDesign Awards. Наконец определили победителя в категории "Сайт месяца" и это просто огонь. Сразу скажу, что мне август понравился разнообразием проектов. Были кейсы с типографикой и сложные анимационные проекты. В этот дайджест попали проекты от Чипсы и ВайдИнфра. Вайды мне вообще голову снесли своим креативом. У них почему-то в канале даже 300 подписчиков нет, а студия — топ уровня. Были классные проекты от известных международных команд, которые не прошли в номинанты на награду "Сайт месяца", но в дайджест попал проект от Rejoice. Это одна из тех студий, за работами которых я пристально слежу. Статья уже лежит на сайте Dsgners. Почитать ее можно по ссылке ниже https://dsgners.ru/ancora/13276-dizayn-daydjest-css-design-awards-sayt-mesyatsa-avgust-25 👈🏼 В конце статьи есть голосовалка и не забывайте комментировать статью. Хочу с ней попасть в рекомендации Обнял и прекрасного вам чтения.
Изображение поста
700+ Icons — крутой пак иконок в формате CSS, SVG и Figma.