Claude Code + Paper MCP: кратко о главном
🎯 О чём этот конспект: Практическое руководство по созданию премиального интерфейса и брендинга с помощью связки терминального агента Claude Code и визуального инструмента Paper через MCP-сервер. В конспекте разобран пайплайн от сбора референсов реальных бренд-китов (Cash App, SeatGeek) до автоматической генерации полноценного брендбука, мобильного адаптива и компиляции макета в рабочий фронтенд-код.
👤 Кому будет полезно: Вайбкодерам, инди-хакерам, соло-разработчикам и фаундерам, которые хотят перестать выпускать продукты со стереотипным «AI-дизайном» и создавать интерфейсы уровня топовых дизайн-агентств без найма специалистов.
✨ Что получите: Готовый воркфлоу настройки Paper MCP с Claude Code, технику работы с референсными бренд-китами, промпты для генерации дизайн-систем и пошаговый алгоритм экспорта макета в чистый код (Next.js/HTML/Tailwind) с запуском на локальном сервере.
1. Архитектура связки: Подключение Paper MCP к Claude Code
Контекст: Большинство интерфейсов, сгенерированных нейросетями напрямую (через стандартный чат Claude или ChatGPT), страдают от типичного «AI-лука»: скучные шрифты, блеклые градиенты и отсутствие структуры. Это моментально считывается пользователями как «поделка за 5 минут». Решение проблемы — вынести визуальный слой в специализированный AI-нативный графический редактор Paper (аналог Figma), который управляется терминальным агентом Claude Code через Model Context Protocol (MCP). В отличие от стандартного контекстного окна чата, Paper сохраняет постоянное состояние стилей и дизайн-токенов даже при сбросе сессии или переполнении контекста Claude.
Тайминг: , ,
Выгода: Устранение шаблонного вида AI-интерфейсов, сохранение дизайн-системы между сессиями без потери контекста, возможность ручной правки любого элемента прямо на холсте.
Как применить:
- Шаг 1: Настройка рабочего окружения — Установите Claude Code CLI и менеджер проектов SuperSet (для удобного переключения между кодовыми базами и дизайн-файлами).
- Шаг 2: Подключение Paper MCP сервера — Добавьте конфигурацию Paper MCP в глобальный конфиг
claude_desktop_config.jsonили конфиг проекта Claude Code. - Шаг 3: Выбор модели для генерации ассетов — На этапе создания логотипов, векторных иконок и подбора шрифтовых пар используйте модель Fable (или Claude 3.5 Sonnet / Opus с визуальным рассуждением). После утверждения дизайн-системы переключитесь на более легкую модель для экономии токенов.
Результат: Claude Code получает прямой доступ к инструментам создания фреймов, векторных объектов, стилей текста и цветовых палитр внутри рабочего пространства Paper.
2. Техника «Brand Kit Stealing»: Загрузка реальных ассетов для Claude
Контекст: Нейросети плохо создают качественные стили «с чистого листа» по текстовым описаниям вроде «сделай современный финтех». Лучший способ получить агентское качество — скормить модели официальные пресс-киты и дизайн-руководства успешных брендов (например, Cash App, Duolingo, SeatGeek). Компании Кремниевой долины выкладывают в открытый доступ полные брендбуки с точными HEX-кодами, правилами отступов, векторными логотипами и файлами шрифтов. Claude анализирует структуру этих файлов как локальную файловую систему, перенимает логику композиции и подбирает бесплатные открытые аналоги (Google Fonts), сохраняя премиальный визуальный ритм без прямого плагиата.
Тайминг: , ,
Выгода: Интерфейс получает типографику и цветовой баланс уровня студий стоимостью $50k+, исключая юридические риски за счет автоматической адаптации бесплатных шрифтов.
Как применить:
- Шаг 1: Скачивание ассетов бренда-донора — Найдите раздел «Press Kit» или «Brand Assets» целевой компании (например, Cash App или SeatGeek), скачайте SVG-логотипы, руководства по стилю и шрифтовые файлы.
- Шаг 2: Передача файлов в проект — Поместите ассеты в папку проекта, к которой обращается Claude Code, чтобы агент видел структуру файлов.
- Шаг 3: Запуск первичного брендинга через промпт — Отправьте агенту задачу создать уникальный бренд на базе структуры референса.
Я создаю социальное приложение для торговли акциями StockDrop.
Используй как визуальный референс дизайн-систему из папки ./cash-app-brand-kit.
Не копируй бренд буквально: возьми за основу принципы контраста, структуру отступов и характер шрифтовой пары.
Подбери бесплатные аналоги шрифтов из Google Fonts с похожей геометрией.
Создай в Paper базовый фрейм с цветовой палитрой (Primary, Secondary, Background), вариантами логотипа и текстовой метки (wordmark).Результат: В Paper в реальном времени генерируется фрейм брендбука с разложенными цветами, правилами типографики и вариантами текстового логотипа.
3. Итерация айдентики: Стикер-паки, акцентные цвета и очистка холста
Контекст: Первая генерация логотипов и иконок всегда выглядит сырой или шаблонной (например, стандартные плоские иконки или нелепые клипарты). Чтобы придать интерфейсу характер дорогого мобильного приложения, автор использует стиль «стикеров» (объемные иконки с плотной белой обводкой и мягкой тенью) и правило «цвета гостевой формы» (Away Team Color). Кроме того, во время генерации десятков вариантов холст забивается мусором, что перегружает контекст Claude. После утверждения финальной концепции необходимо принудительно удалять отвергнутые варианты.
Тайминг: , , ,
Выгода: Создание узнаваемого визуального якоря (стикер-айдентика), предотвращение галлюцинаций AI из-за старых неудачных вариантов на холсте.
Как применить:
- Шаг 1: Добавление третьего контрастного цвета — Стандартные генераторы выдают 2 цвета (основной и фоновый). Потребуйте добавить 3-й неожиданный акцентный цвет (например, Glowing Purple к неоново-зеленому палитры Cash App) для кнопок действий и бейджей.
- Шаг 2: Стилизация иконок под стикеры — Задайте генерацию иконок в стиле 3D-стикеров с контуром для использования в качестве маскота и элементов UI.
Вариант лого B мне нравится, но сделай его в стиле физического винилового стикера (наклейки):
1. Добавь плотную белую внешнюю обводку (border-radius, stroke).
2. Добавь мягкую объемную тень снизу (drop shadow).
3. Добавь в палитру третий акцентный цвет — яркий неоновый фиолетовый (#8A2BE2), который будет контрастировать с основным зеленым.
Выдай 3 варианта иконки с разным положением элементов.- Шаг 3: Очистка рабочего пространства (Canvas Cleanup) — Как только элемент утвержден, прикажите агенту удалить с холста Paper все промежуточные варианты, чтобы модель не ссылалась на них при верстке страниц.
Мы утвердили вариант 2 (иконка-стикер) и фиолетовый акцент.
Удали с холста Paper все промежуточные драфты, неиспользованные палитры и черновые варианты логотипов.
Оставь только финальный Brand Guidelines фрейм.Результат: Чистая дизайн-система в Paper с утвержденной 3-цветной палитрой, готовыми стикер-ассетами и структурированным брендбуком.
4. Бенчмаркинг структуры через Wayback Machine
Контекст: Частая ошибка при создании MVP — копирование структуры текущих сайтов лидеров рынка (например, StockTwits, FanDuel или Polymarket). Современные версии этих сервисов перегружены контентом, баннерами и сложной навигацией, накопленной за 10 лет. Если применить такой шаблон к новому продукту, где еще нет пользовательской базы, интерфейс будет выглядеть пустым и сломанным. Вместо этого нужно анализировать первые версии этих сайтов в веб-архиве (Wayback Machine), когда у них было всего 1–2 функции.
Тайминг: , ,
Выгода: Получение работающей конверсионной структуры лендинга, идеально подходящей для запуска и проверки гипотез на этапе раннего MVP.
Как применить:
- Шаг 1: Поиск ранней версии продукта — Откройте
web.archive.org, введите адрес успешного конкурента в вашей нише (например,stocktwits.com) и выберите снимки за первый год его работы (2009–2011). - Шаг 2: Снятие скриншота Hero-секции — Сделайте скриншот главного экрана (Hero), где сформулировано базовое ценностное предложение и минималистичная форма входа/регистрации.
- Шаг 3: Передача макета в Claude Code — Загрузите скриншот раннего продукта и свяжите его с утвержденным стилем из Paper.
Посмотри на этот скриншот ранней версии StockTwits из веб-архива.
Возьми эту простую структуру первого экрана (лаконичный заголовок, социальное доказательство и поле быстрого ввода),
но полностью перерисуй ее внутри Paper, применив нашу дизайн-систему StockDrop (зелено-фиолетовая палитра, стикер-иконки, фирменные карточки).
Сделай две версии: десктопную Hero-секцию и мобильный экран авторизации.Результат: В Paper появляются два фрейма: чистый десктопный маркетинг-лендинг и адаптированный экран мобильного приложения без информационной перегрузки.
5. Pixel-Perfect экспорт из Paper в локальный фронтенд-код
Контекст: Традиционная попытка скормить скриншот макета в чат нейросети приводит к тому, что Claude верстает лишь 30–40% интерфейса: теряются паддинги, искажаются шрифты, слетает сетка. Преимущество Paper в том, что внутри него заложены строгие дизайн-ограничения (constraints, margins, flexbox-контейнеры), аналогичные верстке. Когда Claude Code работает через Paper MCP, он считывает не просто картинку, а точное дерево свойств компонентов, автоматически скачивает нужные Google Fonts и собирает 100% идентичный код.
Тайминг: , , ,
Выгода: Мгновенный перенос макета в полностью рабочий адаптивный веб-код без ручной верстки и ручного подбора CSS-классов.
Как применить:
- Шаг 1: Промпт на точную компиляцию кода — Дайте Claude Code строгую инструкцию транслировать макет из Paper в локальный проект без домысливания.
claude "Возьми утвержденный дизайн лендинга и мобильного экрана из Paper.
Скомпилируй его в React/Tailwind код.
Точно перенеси все отступы, тени, цвета и радиусы скруглений из Paper 1-в-1.
Автоматически скачай и подключи шрифты, использованные в макете.
Запусти локальный сервер на порту 3100, чтобы я мог проверить результат в браузере."- Шаг 2: Фоновая оптимизация и мобильная адаптивность — Пока код компилируется, убедитесь, что агент сформировал медиа-запросы для мобильных экранов на основе мобильного фрейма из Paper.
- Шаг 3: Верификация на localhost — Откройте
http://localhost:3100и сравните результат с макетом в Paper: шрифты, стикеры, SVG-иконки и фоновые паттерны должны совпадать пиксель в пиксель.
Результат: Готовый, полностью рабочий фронтенд-код лендинга с адаптивной версткой, корректно подключенными веб-шрифтами и запуском на локальном порту 3100.
Claude Code + Paper MCP: ответы на частые вопросы
В: Чем Paper отличается от обычной связки Figma + Claude?
О: Paper изначально спроектирован под работу AI-агентов и имеет нативный MCP-сервер. В отличие от Figma, где плагины часто работают односторонне или требуют сложного парсинга API, Paper позволяет Claude Code создавать, читать, модифицировать и удалять векторные слои в реальном времени, используя точные математические ограничения (constraints), понятные кодогенераторам.
В: Почему генерация интерфейса напрямую в Claude Chat выглядит плохо?
О: В обычном чате Claude генерирует интерфейс «вслепую» на основе усредненного кода из обучающей выборки, используя стандартные безопасные шрифты (Inter, Roboto) и примитивные сетки Tailwind. Без визуального холста модель не видит перегруженности белого пространства, дисбаланса контраста и отсутствия акцентов.
В: Что делать, если у бренда-референса платный закрытый шрифт?
О: Вам не нужно покупать лицензию. Claude Code при анализе бренд-кита считывает пропорции, насыщенность и геометрический тип шрифта (Humanist Sans, Neo-Grotesque, Slab Serif) и автоматически находит ближайший бесплатный аналог в Google Fonts, прописывая его импорт в итоговый CSS.
В: Зачем нужно удалять черновые варианты с холста Paper?
О: Claude Code держит в контексте текущее состояние холста Paper. Если оставить на нем 20 вариантов неудачных кнопок и логотипов, модель при верстке кода может случайно зацепить устаревший стиль или скомбинировать несовместимые цвета из ранних итераций.
В: Можно ли использовать этот подход для создания презентаций и питч-деков?
О: Да. В видео автор демонстрирует, что по тому же брендбуку в Paper можно сгенерировать слайды презентации. Поскольку агент соблюдает утвержденные цвета, шрифты и стиль иконок, презентация выглядит как работа профессионального агентства, а не как стандартный шаблон из PowerPoint.
В: Как обрабатывается адаптивность для смартфонов?
О: В Paper создается отдельный фрейм с шириной мобильного экрана (375–390px). Claude перестраивает элементы Hero-секции в одну колонку, оптимизирует размеры заголовков и затем транслирует эту структуру в адаптивные классы Tailwind (sm:, md:, lg:).
Claude Code + Paper MCP: инструменты и ссылки из видео
- Paper Design & Paper MCP — AI-нативный графический редактор с поддержкой Model Context Protocol для прямого управления холстом из AI-агентов — упомянут в видео.
- Claude Code — Официальный консольный CLI-агент от Anthropic для работы с файлами, кодом и MCP-серверами — упомянут в видео.
- SuperSet — Инструмент для одновременного управления несколькими репозиториями, проектами и сессиями Claude Code — упомянут в видео.
- Wayback Machine (Internet Archive) — Сервис архивации веб-страниц для изучения ранних MVP-версий популярных продуктов (
web.archive.org) — упомянут в видео. - SVG Repo — Каталог свободных векторных иконок, используемый моделями для генерации SVG-графики — упомянут в видео.
Конспект создан на основе видео «How to Make AI Design Actually Look Good (Claude + Paper MCP)» канала Cody Schneider. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=sjylqqozYfc
