Конспекты
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Загрузка...
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Пошаговый гид по созданию UI/UX дизайна внутри ChatGPT: плагин Magic Path, импорт из Figma, генерация мобильных версий, React Bits и Mavin MCP.
Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
Об авторе →Claude Code для бизнеса: Пошаговый гид по созданию AIOS и автоматизации процессов
Практическое руководство по автоматизации бизнеса с Claude Code: внедрение AIOS, протокол MCP, фреймворк SPARK и вайбкодинг живых дашбордов.
Полный пайплайн веб-разработки на Claude Code: От брифинга и дизайна до SEO, безопасности и деплоя
Пошаговый гид по созданию сайтов с Claude Code: AI-брифинг, сборка лендинга по референсам, анти-AI копирайтинг, SEO, безопасность и деплой на Netlify.
Создание ИИ-маркетинговой команды в ChatGPT: Пошаговый гайд по мультиагентной системе без кода
Пошаговый гайд по созданию мультиагентной ИИ-маркетинговой команды в ChatGPT: Work, Codex, Docs, генерация лендингов, креативов и интеграция со Slack.
Claude Code + Mobbin MCP: Генерация профессионального UI/UX и интерактивных прототипов
Пошаговый гайд по связке Claude Code и Mobbin MCP: генерация мобильного UI, интерактивных прототипов и лендингов на базе 600 000+ реальных экранов.
AI-генерация рекламы для E-commerce и услуг: Пошаговый пайплайн от анализа 10 000 креативов до генерации лидов
Практический гид по созданию прибыльной рекламы с ИИ: фреймворки PROOF и QUEST, связка Kixel и Astra, генерация UGC-видео и поиск B2B-клиентов.
Micro-SaaS на AI без кода: Пошаговый запуск микросервисов под боли клиентов из Threads
Пошаговое руководство по поиску болей в Threads, сборке Micro-SaaS за 48 часов через VS Code и монетизации AI-сервисов без опыта в программировании.
Claude Code: новый CLI-агент от Anthropic
Anthropic выпустила Claude Code — терминальный AI-агент для разработчиков. Инструмент работает прямо в командной строке и умеет писать, редактировать и запускать код.
Claude Code: советы от создателя. Конспект доклада Бориса Черни из Anthropic
Борис Черни, автор Claude Code, показал на конференции Anthropic, как реально пользоваться инструментом: с чего начать, зачем CLAUDE.md, какие горячие клавиши никто не знает и как запускать несколько агентов параллельно. Конспект доклада с командами и разбором.
Чек-лист оптимизации сайта для ИИ-поиска (AEO 2026): полное руководство
Оптимизируйте свой сайт под будущий ИИ‑поиск: в 2026 году традиционный трафик упадёт, а ChatGPT, Perplexity и YandexGPT будет выбирать только самые релевантные ресурсы. Узнайте, как сделать это быстро и эффективно.
🎯 О чём этот конспект: Практическое руководство по созданию сквозного цикла веб-дизайна и прототипирования внутри десктопного приложения ChatGPT. В материале показано, как объединить плагин-расширение Magic Path, готовые макеты Figma, сторонние UI-библиотеки из GitHub, генераторы изображений и UX-агенты на базе MCP в единый бесконечный холст без переключения между десятком отдельных программ.
👤 Кому будет полезно: Вайбкодерам, UI/UX-дизайнерам, продакт-менеджерам и фронтенд-разработчикам, которые хотят ускорить проектирование интерфейсов, автоматизировать адаптивность и генерировать дизайн-системы с помощью ИИ.
✨ Что получите: Пошаговый алгоритм настройки рабочего пространства в ChatGPT для импорта макетов из Figma, автоматического создания мобильных адаптаций, извлечения дизайн-токенов, прототипирования страниц и обратного экспорта готовых компонентов.
Контекст: Традиционный процесс веб-дизайна разбит по разным сервисам: макеты в Figma, генерация картинок в Midjourney, код компонентов в IDE, а тексты в ChatGPT. Новая панель задач (Work Tab) в интерфейсе ChatGPT позволяет подключать плагины-расширения с бесконечным холстом. Плагин Magic Path трансформирует стандартный чат в визуальный дашборд проектов, где агент одновременно генерирует UI-блоки на бесконечном холсте и отображает ход своих мыслей в чате. Это формирует фундамент для быстрого прототипирования интерфейсов без выхода из рабочей среды ИИ.
Тайминг: , ,
Выгода: Экономия до 80% времени на первичном создании концептов за счёт генерации сразу нескольких вариантов посадочных страниц на одном холсте.
Как применить:
Create two different landing page design variants for a specialty coffee roaster company.
Результат: Развёрнуто единое рабочее пространство с бесконечным холстом и параллельным окном агента, готовое к проектированию.
Контекст: Перенос готовых макетов из Figma во фронтенд или другие среды обычно требует ручной верстки или экспорта ассетов. В связке с Magic Path десктопные фреймы из открытого браузера Figma переносятся простым копированием буфера обмена. Если дизайн в Figma не использовал Auto Layout и зафиксирован по ширине, ИИ-агент автоматически пересчитывает свойства контейнеров и генерирует отдельную адаптивную мобильную версию интерфейса с корректными брейкпоинтами.
Тайминг: , ,
Выгода: Мгновенный перенос макетов за 10–15 секунд и автоматическая генерация мобильной версии без ручной переверстки фреймов в Figma.
Как применить:
Cmd + C (Ctrl + C).Cmd + V. Подождите 10–15 секунд, пока Magic Path распознает фреймы, векторные элементы и изображения.Make this mobile responsive.
Результат: Полноценный мобильный фрейм с корректным позиционированием элементов рядом с десктопной версией.
Контекст: Поддержание консистентности стилей — главная сложность при делегировании дизайна нейросетям. ИИ часто генерирует случайные цвета и шрифты, если не зафиксировать дизайн-систему. Magic Path умеет считывать глобальные цветовые и текстовые стили из импортированного файла Figma и компилировать их в единый компонент Style Guide (дизайн-токены). Все последующие страницы (например, Checkout Flow) генерируются строго с соблюдением этих токенов, радиусов кнопок и типографики.
Тайминг: , ,
Выгода: 100% визуальная согласованность между всеми новыми страницами продукта без необходимости каждый раз прописывать HEX-коды и шрифтовые пары.
Как применить:
Do you see the color styles and text styles in this Figma file? Please create a style guide in Magic Path based on these properties so that I can use them throughout the project.
Create a checkout page based on the style guide.
Результат: На холсте появится полноценная страница оформления заказа (с формами и кастомными иллюстрациями), визуально идентичная основному сайту.
Контекст: Генерация нового интерфейса редко дает идеальный результат с первого раза. Часто требуется создать несколько вариантов одной секции (например, подвала сайта) и внести точечные правки: убрать фоновый элемент, сменить текст или заменить блок. Magic Path совмещает агентную генерацию вариаций с инструментом Visual Edits, позволяющим выделять и удалять элементы прямо на холсте кликом мыши, после чего компонент встраивается в основной макет по его ID/названию.
Тайминг: , ,
Выгода: Быстрое A/B-тестирование гипотез отдельных секций сайта без переписывания всего макета целиком.
Как применить:
I would like to create three new variants of this footer with a new layout that clearly shows a call to action to book a demo.
Replace the footer with [PASTED_FOOTER_COMPONENT_NAME].
Результат: Мастер-страница обновлена выбранным и отредактированным вариантом блока без нарушения остального макета.
Контекст: При разработке часто берется референс с реального веб-сайта (например, сетка тарифов или форма со страницы Stripe). Инструмент аннотирования в Magic Path позволяет сделать скриншот нужной области любого сайта прямо внутри браузера, передать его агенту и дать команду перерисовать эту секцию, применив дизайн-токены текущего проекта. Агент сохраняет архитектуру сетки оригинала, но перекрашивает кнопки, меняет шрифты и скругления под ваш бренд.
Тайминг: , ,
Выгода: Возможность за секунды переносить сложные UX-паттерны лидеров рынка в свой дизайн-код без ручной отрисовки с нуля.
Как применить:
Bring this section into Magic Path and style it with the Nourish design tokens design system.
Let's add this new get started section above the footer.
Результат: Блок стороннего сайта адаптирован под фирменный стиль и встроен в структуру главной страницы.
Контекст: Макеты часто наполняются шаблонными стоковыми фото, не соответствующими реальной нише бизнеса. Для наполнения проекта тематическими изображениями можно использовать стандартный генератор изображений ChatGPT или специализированные плагины (например, Hicksfield). Агент Magic Path способен принимать пакет сгенерированных изображений, автоматически присваивать им имена и заменять плейсхолдеры во всех карточках макета за одну команду.
Тайминг: , ,
Выгода: Полная замена всех графических ассетов сайта под новую тематику занимает менее минуты.
Как применить:
Post all of these generated images into the Magic Path canvas and name them.
Replace all the images on the homepage with our generated images.
Результат: Все карточки, баннеры и фон сайта обновлены реалистичными тематическими изображениями.
Контекст: Статичный дизайн не дает клиентам и разработчикам понимания сложной динамики (слайдеры, свайп-карточки, интерактивные степперы). С помощью плагина GitHub в ChatGPT можно подключить репозиторий с открытой библиотекой интерактивных компонентов (например, React Bits). Агент считывает доступные компоненты из кодовой базы, преобразует их в интерактивные элементы Magic Path и применяет к ним стили текущей дизайн-системы.
Тайминг: , ,
Выгода: Тестирование интерактивных микровзаимодействий (свайп, клик, переключение шагов) прямо на дизайн-холсте до написания продакшен-кода.
Как применить:
Check out GitHub for the repo I have with React Bits. Can you see it?
What UI components can we add from this repo? Please add the stack cards, slideshow, and stepper components to the Magic Path canvas using our design system.
Результат: На холсте размещены полностью интерактивные UI-блоки (Stack Cards, Carousel, Stepper), оформленные в цветах и шрифтах проекта.
Контекст: Стандартные экраны оформления заказов или регистрации часто страдают от низкой конверсии из-за перегруженности формами. Протокол Model Context Protocol (MCP) позволяет подключить специализированного UX-агента Mavin. Mavin анализирует выбранный экран, сравнивает его с реальными UX-паттернами ведущих SaaS-компаний (Synthesia, Pipedrive и др.) и генерирует оптимизированную альтернативу (например, Accordion Checkout Flow), которая занимает меньше места и снижает когнитивную нагрузку на пользователя.
Тайминг: , ,
Выгода: Готовое продуктовое решение с повышенным UX-потенциалом на базе бенчмарков рынка без привлечения отдельного UX-исследователя.
Как применить:
Use @mavin to explore different flows for this page which is a checkout page.
Implement the suggested accordion checkout flow as a separate component right underneath the existing page.
Результат: Сгенерирован компактный пошаговый экран оформления заказа в виде аккордеона, полностью готовый к интеграции.
Контекст: Дизайн-процесс не заканчивается на макетах: для презентации клиентам и передачи разработчикам требуются блок-схемы (User Flows), роадмапы и графики запуска. Поскольку Magic Path удерживает в контексте всё содержимое бесконечной доски, агент может составить диаграмму чекаута и график таргетов прямо рядом с экранами. Готовые артефакты и компоненты экспортируются в Figma в один клик.
Тайминг: , ,
Выгода: Закрытый цикл разработки — от идеи и прототипа до аналитических диаграмм и обратного экспорта в векторный редактор без потери данных.
Как применить:
Let's create a diagram of the checkout flow and a chart of launch targets using the design system.
Cmd + V.[Элемент мгновенно появляется в Figma в виде нативных редактируемых векторных слоёв и фреймов]
Результат: Полноценный User Flow и график таргетов экспортированы напрямую в файл Figma рядом с основными дизайн-макетами.
В: Чем Magic Path отличается от обычных плагинов для ChatGPT? О: Magic Path — это плагин-расширение с собственным интерфейсом дашборда и бесконечным холстом. В отличие от стандартных текстовых плагинов, он визуализирует создаваемые страницы в реальном времени, поддерживает интерактивные компоненты и двусторонний буфер обмена с Figma.
В: Можно ли использовать Magic Path без платной подписки на сторонние генераторы изображений? О: Да. В видео автор использовал плагин Hicksfield в качестве примера для специализированного медиа, но всю генерацию картинок можно выполнять напрямую через встроенные возможности ChatGPT (DALL-E) без дополнительных затрат.
В: Как Magic Path преобразует неадаптивный дизайн Figma в мобильный? О: ИИ анализирует иерархию элементов во фрейме, пересчитывает фиксированные значения ширины в гибкие контейнеры и перестраивает многоколоночные секции в вертикальный стек под стандартные мобильные брейкпоинты.
В: Что такое Mavin MCP и как он работает внутри ChatGPT? О: Mavin — это UX/UI-ориентированный инструмент, подключенный по протоколу Model Context Protocol (MCP). Он анализирует контекст выбранного экрана и предлагает оптимизированные пользовательские пути (User Journeys) на основе реальных паттернов ведущих технологических компаний.
В: Сохраняется ли редактируемость слоев при экспорте из Magic Path обратно в Figma? О: Да, при нажатии кнопки «Copy to Figma» компонент копируется в системный буфер в специальном формате и вставляется в Figma как набор нативных векторных фреймов, текстов и автолейаутов.
В: Можно ли подключать несколько чатов к одной доске Magic Path? О: Да. На доске сохраняется сквозной контекст. Вы можете открывать отдельные диалоги под разные задачи (например, один чат для генерации экранов, второй — для диаграмм и документации) и выводить все результаты на единый холст.
https://chatgpt.comhttps://figma.comКонспект создан на основе видео «Design, Prototype & Build inside ChatGPT» канала UI/UX Design Workflow. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=u6sJeXexkPM