Конспект: Команда /design в Claude Code: Полное руководство по UI/UX-генерации, интеграции MCP и устранению AI-слопа — VibCoderZ - VibeCoderz

Загрузка...

БЛОК САММАРИ

🎯 О чём этот конспект: Практический разбор новой команды /design в Claude и Claude Code. В видео показан сквозной воркфлоу: от параллельной генерации трёх концептов интерфейсов и постеров на основе референсов до извлечения брендбука сайтов через Firecrawl, отправки готовых PDF-документов клиентам через Zapier MCP и фильтрации шаблонного текста через анти-слоп систему копирайтинга.

👤 Кому будет полезно: Вайбкодерам, разработчикам микро-SaaS, фаундерам и маркетологам, которые хотят верстать дизайн-макеты, инфографику, карусели и документы прямо в терминале/Claude без ручной работы в Figma и траты токенов на бесконечный диалоговый пинг-понг.

✨ Что получите: Пошаговый алгоритм генерации дизайн-макетов в 3 вариантах, навык редактирования стилей через встроенную панель свойств, готовые промпты для связки Claude с Firecrawl и Zapier MCP, а также правила очистки текста от «AI-слопа» для конвертящих посадочных страниц.

1. Параллельная генерация трёх вариантов интерфейса и визуальный редактор свойств

Контекст: При создании дизайна через текстовые нейросети главная проблема — долгий «пинг-понг» с моделью: вы просите подвинуть кнопку, ИИ переписывает весь код, сбивает вёрстку и сжигает контекстное окно токенов. Команда /design внутри Claude Code решает эту проблему за счёт параллелизации (parallelization) — модель сразу строит 3 разных дизайн-направления. При этом сгенерированный результат открывается не как плоская картинка, а как интерактивный DOM-элемент. Справа появляется встроенная панель свойств (Properties Panel), позволяющая кликать по блокам и точечно менять типографику, отступы, выравнивание и жирность шрифтов вручную без единого дополнительного запроса к LLM.

Тайминг: [00:00], [00:34], [00:73], [00:84], [01:05]

Выгода: Экономия до 80% токенов за счёт отказа от уточняющих текстовых запросов на микро-стилизацию и ускорение выбора финального визуального направления в 3 раза.

Как применить:

Шаг 1: Запуск дизайн-режима — Claude / Claude Code] — Откройте Claude (или терминальный клиент Claude Code последней версии) и вызовите команду /design. Укажите контекст задачи, целевой формат и требуемое количество вариантов.
Шаг 2: Ввод промпта для мультивёрстки — Claude Prompt] — Отправьте базовый запрос на параллельную генерацию:

/design Create 3 distinct visual variations for our SaaS analytics dashboard. 
Variation 1: Minimalist dark mode with high contrast accents.
Variation 2: Modern clean bento-grid layout with soft borders.
Variation 3: Dense data-driven terminal style for engineers.
Ensure all UI components have editable text and proper hierarchy.

Шаг 3: Визуальная кастомизация без токенов — Claude UI] — Нажмите в правом верхнем углу кнопку «Show the properties panel». Выделите проблемный текстовый блок или контейнер, измените отступы (padding/margin), удалите лишние элементы клавишей Delete и настройте выравнивание через селекторы панели.

Результат: Три интерактивных прототипа с возможностью мгновенного ручного редактирования CSS-свойств без расхода токенов на регенерацию.

2. Генерация арт-постеров и концептов по референс-бордам (Savee/Pinterest)

Контекст: ИИ-модели часто выдают клишированный визуал («AI-галлюцинацию стиля»), если им не задать жёсткие эстетические ориентиры. Чтобы Claude сгенерировал по-настоящему стильный продукт, ему нужно скормить три разноплановых графических референса. Автор рекомендует брать визуальный мудборд с площадок Savee.it, Dribbble или Pinterest, загружать их в виде скриншотов прямо в команду /design и давать модели разрешение вызывать любые инструменты генерации картинок (Image Generation Tools). Claude берёт композицию с одной картинки, палитру со второй, а типографику с третьей, объединяя это в полноценный макет с наложенными текстовыми слоями.

Тайминг: [01:89], [02:26], [02:48], [02:85], [03:16]

Выгода: Создание дизайнерских постеров и визуалов выставочного уровня с первой попытки без глубоких навыков в Adobe Illustrator или Midjourney prompting.

Как применить:

Шаг 1: Сбор референс-пака — Savee.it / Pinterest / Dribbble] — Найдите 3 графических референса с разной сеткой: один со сложной типографикой, второй с акцентной иллюстрацией, третий со швейцарской сеткой/инфографикой. Сохраните их на диск.
Шаг 2: Вызов /design с мультимодальным контекстом — Claude Code] — Вставьте три изображения в чат и сопроводите их директивой:

/design 
I have attached 3 reference images for design inspiration. 
I want you to be inspired by the visual language, typography hierarchy, and spacing of these 3 designs.
Create for me 3 poster concepts about "Deep Space Exploration & The Moon".
Each design must follow the style of one of the reference images provided.
You are permitted to use any integrated image generation tool required to render background assets.
Keep typography layered on top so I can edit text and alignment directly.

Шаг 3: Тонкая доводка типографики — Claude Canvas / Inspector] — Дважды кликните по заголовкам, измените трекинг, поднимите или опустите текст относительно центрального графического объекта и удалите мусорные текстовые плашки.

Результат: Три арт-постера журнального качества с независимыми редактируемыми слоями текста поверх сгенерированного арта.

3. Автоматическое извлечение айдентики через Firecrawl MCP для брендовых документов

Контекст: Создание корпоративных документов (инвойсов, коммерческих предложений, отчётов) обычно требует ручного переноса HEX-кодов, шрифтов и логотипов из брендбука. За счёт интеграции Claude с MCP-сервером Firecrawl модель может в реальном времени зайти на URL вашего стартапа, распарсить стили, цвета, кнопки и tone-of-voice с минимальным расходом токенов, а затем применить эти токены дизайна к новому шаблону. В примере автор натравливает Claude на сайт своего стартапа glider.com и мгновенно получает три варианта брендированного инвойса, включая нестандартный стиль «техно-чек/квитанция».

Тайминг: [03:25], [03:96], [04:05], [04:40]

Выгода: Нулевое время на верстку корпоративной документации под фирменный стиль клиента: Claude сам парсит сайт и собирает готовый CSS-шаблон инвойса за 30 секунд.

Как применить:

Шаг 1: Подключение Firecrawl MCP — Claude Desktop / Code Config] — Убедитесь, что в конфигурационном файле Claude Desktop подключен MCP-сервер Firecrawl:
Шаг 2: Промпт для скрапинга айдентики и генерации инвойса — Claude Code] — Вызовите команду /design со ссылкой на целевой веб-ресурс:

/design Head over to https://glider.com. 
Extract the complete brand identity (color palette, font styles, border radius, vibe).
Use Firecrawl to fetch the raw design tokens and brand elements efficiently.
Once extracted, build me 3 completely different layout concepts for a company invoice:
- Concept 1: Modern receipt / edgy ticket style.
- Concept 2: Minimalist corporate luxury.
- Concept 3: Compact tech-spec / engineering sheet.
Make sure the alignment can be controlled via the properties panel.

Шаг 3: Выбор лучшего макета — Claude UI] — Оцените полученные варианты, выберите наиболее подходящий под формат вашей компании (например, Dark Signal Receipt) и скорректируйте ширину колонок в инспекторе.

Результат: Готовый дизайн-шаблон инвойса, идеально совпадающий по стилистике и колористике с вашим сайтом.

4. Сквозная автоматизация: превращение дизайна в PDF и отправка через Zapier MCP

Контекст: Обычно после создания дизайна в визуальном редакторе следует рутинный экспорт в PNG/PDF, ручное заполнение данных, переход в почтовый клиент и отправка клиенту. Подключение Claude к Zapier MCP превращает LLM в исполнительный слой (authentication layer). Claude может взять выбранный дизайн инвойса, подставить туда реальные или тестовые реквизиты контрагента (например, UFC), скомпилировать документ в PDF и отправить его на email через Zapier Action, не требуя открытия сторонних программ. Полученный флоу можно сохранить как «Skill» внутри Claude для повторного использования одной фразой.

Тайминг: [04:68], [04:96], [05:26], [05:83], [05:92]

Выгода: Полный цикл биллинга и документооборота из одного окна терминала или чата без ручного переключения между редактором, таблицами и почтой.

Как применить:

Шаг 1: Подключение Zapier NLA / MCP — Claude Settings] — Настройте Zapier MCP-сервер, предоставив доступ к действиям Gmail: Send Email и сервисам работы с файлами/Google Drive.
Шаг 2: Генерация документа и отправка — Claude Prompt] — Дайте команду Claude наполнить выбранный дизайн данными и вызвать Zapier:

I really like Design 1 (the dark signal style). 
Generate a finalized invoice based on this template for the amount of $33,000 billed to "UFC" for my UFC debut.
Look up their corporate headquarters address for the recipient field, use a dummy sender address for me, and compile this into a clean PDF.
Then, use Zapier to automatically email this PDF invoice to my registered email address on file.

Шаг 3: Консервация пайплайна в Claude Skill — Claude Code] — После успешной отправки сохраните воркфлоу в долговременную память агента:

Claude, save this entire workflow (Design 1 template + UFC invoice structure + Zapier PDF dispatch) as a reusable Skill named "generate-and-send-invoice".
In the future, when I say "Send invoice to [Client] for [Amount]", execute this exact flow.

Результат: Клиент получает готовый PDF-инвойс на почту, а вы получаете активированный навык (Skill), доступный для вызова в любой будущей сессии Claude.

5. Борьба с «AI-слопом»: очистка текстов лендингов и каруселей через Slop-Monster

Контекст: Даже великолепный визуальный дизайн умирает, если текст внутри него наполнен безликим «AI-слопом» (клише вроде: «надежный, проверенный временем, инновационные решения, душевное спокойствие»). Автор создал и выложил открытый репозиторий «AI Slop Monster», который заменяет генеративные штампы на принципы прямого маркетинга (Алекс Хормози, Дэниел Пристли) и правила UX-юзабилити Стива Круга («Don't Make Me Think»). В основе методологии 4 правила: 1) «Называй боль первой» (Name the pain first); 2) «Будь конкретен или молчи» (Specific or silent); 3) «Одно действие на экран» (One ask per screen); 4) Факты и цифры вместо прилагательных (например: «6 гвоздей на каждую черепицу» вместо «высочайшее качество кровли»).

Тайминг: [06:17], [06:44], [06:82], [07:11], [07:40]

Выгода: Рост конверсии лендингов и читаемости постов за счёт вырезания 100% нейросетевых клише и замены абстракций на твёрдые цифры и конкретные офферы.

Как применить:

Шаг 1: Установка скилла из репозитория — Claude Code] — Установите инструмент очистки текста прямо из GitHub:

# В терминале Claude Code или чате
Install skill from URL: https://github.com/jack/ai-slop-monster

Шаг 2: Генерация карусели для соцсетей — Claude Prompt] — Попросите Claude сделать 3 концепта образовательной карусели в вашей нише:

/design Find 3 high-performing Instagram carousel formats in the AI & Automation niche.
Design 3 different visual slide variations (3 slides each).
Integrate official logos for tools like Claude Code, n8n, and Cursor automatically.

Шаг 3: Прогон текста через Slop-фильтр — Claude Prompt] — Примените установленный навык анти-слопа к текстам слайдов или лендинга:

Apply the "ai-slop-monster" skill to all copy on these slides.
Enforce the following rules strictly:
1. Eliminate all generic words banned by Wikipedia AI-style guidelines.
2. Replace adjectives with cold hard proof (e.g., instead of "reliable roofing", write "6 nails per shingle, fixed price contract before anyone climbs the ladder").
3. Name the pain first.
4. One clear call to action per slide.

Результат: Убойный контент с живым языком, конвертящими заголовками и профессиональной графической подачей без ощущения дешевого ИИ-текста.

FAQ

В: Чем команда /design в Claude Code отличается от веб-приложения Claude Artifacts? О: Команда /design запускает глубокую параллельную генерацию сразу трёх альтернативных макетов и активирует специальную боковую панель свойств (Properties Panel). Кроме того, внутри Claude Code у модели есть прямой доступ к вашей локальной файловой системе, долговременной памяти, установленным MCP-серверам (Firecrawl, Zapier) и терминалу, что превращает дизайн в исполняемый код.

В: Нужно ли оплачивать сторонние генераторы картинок для использования /design? О: Нет, если у вас настроен доступ к базовым моделям Claude или подключены доступные Image Generation Tools через MCP/API. Claude самостоятельно решает, когда сгенерировать фон через доступный графический инструмент, а когда сверстать макет чистым кодом и SVG.

В: Зачем использовать Zapier MCP, если можно отправлять почту напрямую через curl или скрипт на Python? О: Zapier MCP выступает готовым слоем безопасной аутентификации (Authentication Layer). Он снимает необходимость вручную прописывать OAuth-токены для десятков сервисов (Gmail, Slack, Skool, Notion) внутри кода Claude: вы один раз авторизуете Zapier и отдаёте Claude право вызывать готовые проверенные экшены.

В: Каким образом Firecrawl помогает снизить затраты токенов при скрапинге сайтов для дизайна? О: Firecrawl вычищает лишний HTML-мусор, скрипты и тяжелые DOM-деревья, отдавая в контекст Claude только очищенный структурированный Markdown и CSS-токены (цвета, шрифты, отступы). Это экономит тысячи токенов контекстного окна по сравнению со стандартным парсингом страницы через fetch/curl.

В: Что такое «правило 6 гвоздей» из системы анти-слопа? О: Это принцип максимальной конкретизации оффера («Specific or silent»). Вместо абстрактных фраз нейросети вроде «наша кровля надежна и долговечна», текст заменяется на физический измеримый факт: «6 гвоздей на каждую черепицу, письменная смета с фиксированной ценой до того, как мастер поднимется на лестницу».

В: Можно ли превратить созданный через /design инвойс или постер в код на React/Tailwind? О: Да. Поскольку Claude генерирует макеты в виде структурированного кода компонентов, вы можете прямо в диалоге написать: Export this selected variation into a clean Next.js + Tailwind CSS component — и агент положит готовый файл в ваш проект.

Ресурсы и ссылки

Savee.it — Минималистичная платформа для поиска дизайнерских референсов и визуального вдохновения — https://savee.it
Pinterest — Сервис поиска визуальных идей, постеров и инфографики — https://pinterest.com
Dribbble — Портал для дизайнеров с примерами современных UI/UX-концептов — https://dribbble.com
Firecrawl — MCP-инструмент для чистого скрапинга веб-страниц и извлечения дизайн-токенов для LLM — https://firecrawl.dev
Zapier MCP — Мост аутентификации и выполнения сотен действий (отправка писем, интеграции с CRM) для ИИ-агентов — упомянут в видео
AI Slop Monster — GitHub-репозиторий автора с набором фильтров для удаления нейросетевых клише и улучшения копирайтинга — упомянут в видео
Glider — Стартап автора для голосовой диктовки с агентским режимом — https://glider.com
Книга «Don't Make Me Think» (Стив Круг) — Классическое руководство по веб-юзабилити и UX, взятое за основу анти-слоп фильтра — упомянута в видео

Конспект создан на основе видео «Claude finally dropped its slashdesign feature inside Claude code» канала Jack. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=op0q90XiY8o