Гайд для дизайнеров по Claude Code и Superpowers

Разрыв между дизайном и кодом

Дизайнеры слышат “научись кодить” лет десять. Проблема не в способностях. Проблема — в оверхеде. Системы сборки, зависимости, версии Node, переключение контекста между Figma и терминалом. Каждый слой добавляет трение.

Claude Code убирает прослойку между дизайн-мышлением и реализацией. Описываешь что хочешь — агент делает. Но без структуры процесс быстро становится хаотичным: результат непредсказуемый, код одноразовый, откатить невозможно.

Superpowers добавляют структуру. Это набор скиллов для Claude Code: brainstorming, планирование, исполнение субагентами, верификация. Этапы задокументированы, каждое изменение фиксируется в git.

Что можно построить

Реальные проекты, которые дизайнеры собирают через Claude Code + Superpowers:

• Приложение для поиска винтажных часов — AI-агент мониторит маркетплейсы, фильтрует по цене и состоянию, присылает уведомления
• Figma-to-code пайплайн — дизайн-токены из Figma превращаются в React-компоненты с нужными отступами, цветами и типографикой
• Аналитический дашборд за 2 дня — от макета в Figma до работающего деплоя с реальными данными

Ты описываешь задачу — агент собирает.

Установка

Claude Code

npm install -g @anthropic-ai/claude-code

Нужен Node.js 18+. Если не установлен:

# macOS
brew install node

# или через nvm
nvm install 18

Superpowers

Superpowers ставятся как плагин:

/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace

Проверка — набери /help в Claude Code. Должны появиться команды: brainstorm, write-plan, execute-plan.

Терминал: минимум для старта

Если ты никогда не работал с терминалом — вот три команды, которые покрывают 90% навигации:

Типичный старт проекта:

cd ~/Projects
mkdir my-portfolio
cd my-portfolio
claude

Как работает Superpowers

Ключевая идея: скиллы активируются автоматически. Не надо помнить команды и синтаксис. Начинаешь описывать идею — агент сам запускает brainstorming. Говоришь “го делать” — запускает планирование. Говоришь “поехали” — запускает субагентов.

Всё на автомате. Ты управляешь через естественный язык.

Фаза 1: Brainstorming

Скилл: superpowers:brainstorming

Активируется автоматически. Задаёт вопросы по одному — не перегружает. Предлагает 2-3 подхода с компромиссами, объясняя что получишь и чем жертвуешь. Потом показывает дизайн порциями по 200-300 слов, проверяя каждую секцию с тобой.

Результат: документ дизайна в docs/plans/.

Для дизайнера это самая важная фаза. Скилл ловит эстетические предпочтения ДО планирования: цвета, отступы, анимации, адаптив, типографика. Результат — твой дизайн, а не шаблонный Bootstrap.

Пример диалога:

Superpowers: Какой визуальный стиль тебе ближе?
  1. Минималистичный — много воздуха, монохром
  2. Яркий — насыщенные цвета, крупная типографика
  3. Бруталистичный — сырой, контрастный

Ты: 1, но с акцентным цветом

Superpowers: Какой акцентный цвет? Тёплый или холодный?

И так далее — пока не сложится полная картина.

Фаза 2: Writing Plans

Скилл: superpowers:writing-plans

Разбивает работу на микро-задачи по 2-5 минут каждая. У каждой задачи:

• Точные файлы, которые нужно создать или изменить
• Полный код, который нужно написать
• Команды проверки (запустить тесты, открыть в браузере)

Принцип TDD обязателен: сначала тест, потом реализация. Каждая задача заканчивается коммитом. Принципы DRY и YAGNI — не пишем лишнего.

Фаза 3: Subagent-Driven Development

Скилл: superpowers:subagent-driven-development

На каждую задачу запускается свежий субагент с полным контекстным окном (200k токенов). Предыдущие шаги не засоряют память — субагент видит только свою задачу, план и спецификации.

Двухступенчатая проверка:

1. Соответствие спецификации — субагент сделал то, что написано в плане?
2. Качество кода — нет ли дублирования, утечек, хардкода?

Если ревьюер нашёл проблемы — субагент исправляет, ревью повторяется. Цикл идёт пока код не пройдёт оба этапа.

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│ Brainstorm  │ ──▶ │ Write Plan  │ ──▶ │  Execute    │
│  (дизайн)   │     │  (задачи)   │     │ (субагенты) │
└─────────────┘     └─────────────┘     └─────────────┘
                                              │
                    ┌─────────────┐           │
                    │   Spec      │ ◀─────────┘
                    │   Review    │
                    └──────┬──────┘
                           │
                    ┌──────▼──────┐
                    │  Quality    │
                    │  Review     │
                    └──────┬──────┘
                           │
                    ┌──────▼──────┐
                    │   Commit    │
                    └─────────────┘

Каждая задача завершается коммитом. Если что-то пошло не так — откатить один шаг, а не весь проект.

Фаза 4: Verification

Скилл: superpowers:verification-before-completion

Железное правило: никаких заявлений о готовности без свежих доказательств.

Агент запустил команду. Прочитал вывод. Только тогда говорит, что работает. “Должно работать” — не считается. “Я проверил, и вот результат” — считается.

Это защита от галлюцинаций. Агент может быть уверен, что код правильный — но без реального запуска это ничего не значит.

Пример: сайт-портфолио

Разберём полный цикл на конкретном примере.

Требования (V1)

• Полноэкранный герой с именем и слоганом
• Сетка проектов (4 работы)
• Секция “обо мне”
• Контакты (LinkedIn, email)
• Адаптив для мобильных
• Загрузка < 2 секунд

Brainstorming

Ты описываешь идею. Скилл ловит детали:

Всё это фиксируется в документе дизайна до того, как написана хоть одна строчка кода.

Plan

Скилл разбивает на фазы:

Фаза 1 — Дизайн-система:

• CSS-переменные для цветов, шрифтов, отступов
• Базовая типографика
• Сетка и контейнер

Фаза 2 — Основные лейауты:

• Hero-секция с анимацией появления
• Сетка проектов с hover-эффектами
• Секция “обо мне”
• Контакты

Фаза 3 — Контент и полировка:

• Заполнение реальным контентом
• Оптимизация изображений
• Мета-теги и SEO
• Финальная проверка адаптива

Execute

Субагенты собирают каждую фазу. TDD на каждом шаге — сначала тест (элемент рендерится, стили применяются, адаптив работает), потом реализация. Коммит за коммитом. В итоге — чистая git-история, где каждый шаг виден и откатим.

GitHub

Инициализация репозитория:

git init
git remote add origin https://github.com/username/portfolio.git

Superpowers автоматически коммитит атомарно — одна задача, один коммит. Чистая история. Можно найти проблемный шаг через git bisect.

Типичная история коммитов:

feat: add design system (CSS variables, typography)
feat: add hero section with fade-in animation
feat: add project grid with hover effects
feat: add about section
feat: add contact section with links
fix: adjust grid breakpoint for tablets

Каждый коммит — рабочее состояние. Любой можно откатить без ущерба для остального.

Деплой на Vercel

Vercel деплоит фронтенд-проекты за минуту:

1. Зарегистрируйся на vercel.com через GitHub
2. Нажми “Import Project” и выбери репозиторий
3. Vercel автоматически определит фреймворк
4. Каждый push в main — автоматический деплой

Кастомный домен:

1. Купи домен (Namecheap, Cloudflare Registrar)
2. В Vercel Dashboard → Settings → Domains
3. Добавь домен, пропиши DNS-записи

Всё. Портфолио онлайн.

Веб-приложения с данными

Портфолио — это статика. Но через Claude Code + Superpowers можно строить полноценные приложения с базой данных, авторизацией и AI-функциями.

Стек

Supabase — open-source альтернатива Firebase. Бесплатный план покрывает личные проекты. Google OAuth — чтобы пользователи входили через Google, без регистрации с паролем. OpenRouter — единый API к 288+ моделям (Claude, GPT, Gemini, DeepSeek). Один ключ, одна интеграция — переключаешь модель параметром, без переписывания кода. Для AI-чата в приложении не обязательно брать дорогую модель. Kimi K2.5 ($0.50/$2.40 за 1M токенов) — open-source, мультимодальный, конкурирует с GPT-5 на бенчмарках. GLM-5 от Z.AI ($1/$3.20) — заточен под агентские задачи и кодинг, SWE-bench 77.8%. А GLM-4.7-Flash вообще бесплатный — для простого чата хватит с запасом.

Порядок реализации

1. Google OAuth — сначала авторизация, чтобы данные были привязаны к пользователю
2. AI-чат со стримингом — если нужна AI-функция, добавляем после авторизации
3. Комментарии с real-time — Supabase Realtime для обновлений без перезагрузки

Безопасность

API-ключи хранятся в переменных окружения. Файл .env — в корне проекта, добавлен в .gitignore. Никогда не коммитится.

# .env (локально)
SUPABASE_URL=https://xxx.supabase.co
SUPABASE_ANON_KEY=eyJ...
OPENROUTER_API_KEY=sk-or-...

В продакшене переменные задаются через Vercel Dashboard → Settings → Environment Variables.

Ключ OpenRouter никогда не должен попадать в клиентский код. Вызовы к API идут через серверную функцию — Supabase Edge Functions или Vercel Serverless Functions.

Row Level Security в Supabase — данные пользователя видны только ему. Настраивается на уровне базы, а не кода.

Figma MCP

Figma через Model Context Protocol позволяет Claude Code читать дизайн-файлы напрямую. Агент вытягивает токены, спецификации компонентов, структуру лейаутов.

Рабочий процесс:

Дизайн в Figma
      │
      ▼
Извлечь через MCP
      │
      ▼
Построить через Superpowers
      │
      ▼
Деплой на Vercel
      │
      ▼
Тест → Итерация

Фазы для Figma-проекта

1. Извлечь дизайн-токены — цвета, типографика, отступы, радиусы скруглений
2. Построить компоненты — кнопки, карточки, инпуты из спецификаций Figma
3. Собрать экраны — лейауты страниц из компонентов
4. Проверить pixel-perfect — визуальное сравнение с макетом
5. Итерации — правки по изменениям в Figma

Таймлайн: дашборд за 2 дня

Полный цикл — два рабочих дня: день на дизайн и инициализацию, день на сборку и деплой.

Почему это работает

Контекстная инженерия

При обычной работе с Claude Code к пятидесятому промпту агент путается в собственных решениях. Забывает ранние договорённости. Генерирует противоречивый код.

Superpowers решают это архитектурно: каждый субагент начинает с чистого контекста. Видит только свою задачу и план — никакого мусора от предыдущих шагов. Структурированная файловая система хранит решения между сессиями.

Мультиагентная оркестрация

Специализированные агенты для каждой фазы:

┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐
│Brainstorm│  │ Planner  │  │Implement │  │ Reviewer │
│  Agent   │  │  Agent   │  │  Agent   │  │  Agent   │
└──────────┘  └──────────┘  └──────────┘  └──────────┘
     │              │              │              │
     ▼              ▼              ▼              ▼
  Дизайн-        Микро-         Код +         Проверка
  документ       задачи         тесты         качества

Параллельное выполнение где возможно. Цикл пока планы и код не пройдут проверку.

Атомарные коммиты

Одна задача — один коммит. git bisect находит проблемный шаг за ~7 проверок в проекте со 100 коммитами — бинарный поиск вместо ручного перебора.

Бонус: когда возвращаешься к проекту через месяц, агент читает git log и понимает что было сделано и почему. Чистая история = контекст для будущих сессий.

Мышление дизайнера

Superpowers задают правильные вопросы ДО написания кода. Что происходит когда данных нет? Как выглядит ошибка? Что на маленьком экране? Какой hover-эффект?

Эстетические предпочтения фиксируются рано и превращаются в спецификацию. Не хаотичный “попробуй так, нет, не так” — а задокументированные решения.

Обработка ошибок

Ошибки неизбежны. Формула проста:

1. Копируешь сообщение об ошибке
2. Вставляешь в Claude Code
3. Описываешь что делал перед ошибкой
4. Агент разбирается

Чем больше контекста даёшь — тем быстрее агент найдёт причину. “Не работает” — плохо. “При клике на кнопку Submit форма не отправляется, в консоли TypeError: Cannot read property ‘value’ of null” — хорошо.

Superpowers помогают и здесь: атомарные коммиты позволяют откатить последний шаг через git revert, если исправить не получается.

Частые вопросы

Нужно ли уметь кодить?

Нет. Но базовые знания помогут ревьюить результат. Понимание HTML-структуры, CSS-свойств, разницы между клиентом и сервером — этого достаточно, чтобы заметить проблему.

Сколько стоит?

Для реальной работы с Superpowers нужен Max за $100/мес — субагенты расходуют контекст быстро. Остальная инфраструктура (Vercel, Supabase) бесплатна для личных проектов.

Качество кода продакшн-ready?

TDD + двухступенчатый ревью (спецификация + качество) + верификация реальным запуском. Каждый шаг проверяется до того, как агент переходит к следующему.

Как насчёт безопасности?

API-ключи хранятся в переменных окружения, не в коде. Row Level Security в Supabase — данные пользователя изолированы. Код проходит ревью на утечки секретов.

Могу ли я потом передать код разработчику?

Да. Атомарные коммиты, TDD, чистая структура — разработчик увидит стандартную кодовую базу. Superpowers генерируют код, который следует общепринятым практикам.

С чего начать

1. Установи Claude Code и Superpowers
2. Создай папку для проекта
3. Опиши свою идею агенту
4. Superpowers запустят brainstorming — отвечай на вопросы
5. Дай добро на план
6. Смотри как субагенты собирают проект
7. Верифицируй результат в браузере
8. Задеплой на Vercel

Первый проект займёт больше времени — ты привыкаешь к процессу. Второй пойдёт быстрее. К третьему ты будешь знать, как формулировать требования так, чтобы агент делал ровно то, что ты хочешь.

Дизайн-мышление — навык, который агенты пока не заменят. Ты знаешь, как должен выглядеть и ощущаться продукт. Claude Code + Superpowers берут на себя реализацию.