Что это такое?
Ты работаешь с AI-инструментами для создания интерактивных прототипов Doppy. Пишешь задачи Claude Code прямо в VS Code — он верстает, деплоит на Cloudflare и достаёт компоненты из Figma. Тебе нужно объяснить что нужно сделать — Claude делает остальное.
Чеклист установки
Пройди по порядку. Каждый шаг — 2–5 минут.
- Установить VS Code — редактор, в котором всё происходит
- Установить расширение Claude Code — AI-ассистент внутри VS Code
- Установить расширение Markdown Preview Mermaid — для диаграмм в документах
- Открыть папку проекта в VS Code (архив от Родиона)
- Авторизоваться в Claude Code — войти через claude.ai
- Установить Node.js — нужен для запуска прототипов (промт ниже)
- Установить Wrangler и войти в Cloudflare — для деплоя (промт ниже)
- Убедиться что Figma MCP работает — проверить подключение
- Отправить стартовый промт Claude (см. ниже)
Стартовый промт — отправь это первым
Скопируй и вставь в чат с Claude Code после того как всё установил.
Как общаться с Claude: пиши по-русски, простыми словами. "Сделай кнопку зелёной", "добавь экран с балансом", "задеплой". Не нужно разбираться в коде — объясняй что хочешь, Claude разберётся как это сделать.
Что где лежит
| Папка | Что там |
|---|---|
| buyboost/ | Прототип экрана Earn + покупки буста — основной рабочий прототип |
| flow1-playtest/ | Flow 1 — просмотровый флоу |
| flow2-playtest/ | Flow 2 — просмотровый флоу |
| flow3-playtest/ | Flow 3 — просмотровый флоу |
| market-playtest/ | Маркет — покупка NFT |
| onboarding/ | Этот файл и документация |
| .claude/ | Настройки Claude и все скиллы (команды) |
| .mcp.json | Конфиг подключений (Figma, Atlassian, Slack) |
Установка VS Code
-
Скачать и установить VS Code
Переходи на code.visualstudio.com → нажми Download for Windows. Устанавливай как обычную программу, жми Next → Next → Install.
-
Открыть папку проекта
Запусти VS Code → File → Open Folder → выбери папку for-cheelee-employees. Вся работа будет здесь.
Нужные расширения
Открой панель расширений: Ctrl+Shift+X
1. Claude Code Обязательно
Главный инструмент — AI-ассистент прямо в VS Code.
Ищи: Claude Code от Anthropic → нажми Install.
После установки нажми на иконку Claude в левом сайдбаре → Sign in with Claude.ai → авторизуйся в браузере. Для работы нужна подписка Claude Pro или Team.
2. Markdown Preview Mermaid Support Рекомендуется
Красивые диаграммы в документах вместо сырого текста.
Ищи: Markdown Preview Mermaid Support от Matt Bierner → Install.
Node.js
Скачай и установи LTS-версию с nodejs.org/en/download → Windows Installer (.msi). Жми Next → Next → Install.
После установки закрой терминал в VS Code и открой новый (Ctrl+`). Проверь:
node --versionДолжно показать что-то вроде v20.x.x. Если нет — используй промты ниже.
Горячие клавиши VS Code (Windows)
| Клавиши | Действие |
|---|---|
| Ctrl+` | Открыть / закрыть терминал |
| Ctrl+Shift+X | Открыть расширения |
| Ctrl+, | Открыть настройки |
| Ctrl+P | Быстрый переход к файлу |
| Ctrl+Shift+V | Превью / редактирование MD |
| Enter в чате Claude | Отправить сообщение |
| Shift+Enter в чате Claude | Новая строка |
Настройки VS Code уже настроены для проекта — файл .vscode/settings.json применяется автоматически. MD-файлы открываются в превью, автосохранение включено.
Как работает Claude Code
Claude Code — AI в твоём редакторе. Ты пишешь задачу текстом, он читает файлы проекта, пишет код, запускает команды в терминале и отвечает. Всё в одном окне VS Code.
-
Открыть чат с Claude
Нажми на иконку Claude в левом сайдбаре VS Code. Откроется панель чата.
-
Написать задачу
Просто опиши что хочешь. Например: "Добавь в buyboost новый экран с историей транзакций".
-
Claude делает работу
Он будет читать файлы, писать код, запускать команды. Иногда спрашивает разрешения — нажимай Approve.
Команды (скиллы) — начинаются с /
Для дизайнера
Для документации
Примеры задач — как писать
# Добавить новый экран
Добавь в buyboost новый экран "История транзакций".
Кнопка "Назад" сверху и список. Дизайн как в остальных экранах.
# Взять компонент из Figma
Возьми из Figma UIKit Doppy компонент кнопки "Primary Aquamarine"
и добавь на главный экран buyboost.
# Задеплоить
Собери buyboost и задеплой на Cloudflare.
# Если что-то сломалось
Что-то пошло не так, вот ошибка: [вставь текст ошибки из терминала]Правила общения
| Делай | Не делай |
|---|---|
| Описывай что хочешь получить | Не объясняй как это реализовать технически |
| Ссылайся на конкретный экран: "в экране buyboost" | Не давай расплывчатые описания типа "сделай красиво" |
| Скажи "не то, переделай вот так" | Не бойся просить переделать — это нормально |
| Прикрепляй скриншоты когда говоришь про дизайн | Не описывай визуал только словами |
Что такое Figma MCP?
MCP — подключение которое позволяет Claude напрямую читать файлы Figma. Говоришь "возьми кнопку из UIKit" — Claude открывает нужный файл, находит компонент и переносит в код. Без ручного экспорта.
✅ Figma MCP уже настроен — конфиг лежит в .mcp.json в папке проекта. API-ключ вшит туда же. Просто открой папку проекта в VS Code.
Файлы дизайна Doppy
Figma MCP ломается — промты для починки
MCP-сервер может не запуститься, потерять соединение или выдать ошибку. Используй эти промты.
⚠️ Главное правило ассетов
Никогда не используй Figma CDN URLs в коде
Когда Claude достаёт изображение из Figma, оно приходит по URL типа:
https://www.figma.com/api/mcp/asset/...Такой URL перестаёт работать через 7 дней. На задеплоенном сайте будут битые картинки.
Правильно: Claude должен скачать изображение в public/img/ и использовать путь /img/название.png.
Скажи Claude: "Скачай все Figma-ассеты локально в public/img/ чтобы они не протухли"
Всегда после добавления новых картинок из Figma — проверяй что они сохранены в public/img/, а не лежат как CDN-ссылки прямо в коде.
Стек прототипов
Все прототипы: Vite + React + TypeScript + Tailwind CSS v4. Это современный фронтенд. Знать его не нужно — Claude пишет код. Нужно понимать структуру чтобы правильно ставить задачи.
Структура прототипа (buyboost)
buyboost/
├── src/
│ ├── App.tsx ← Корень: две вкладки (Earn + Market)
│ ├── app/
│ │ ├── EarnApp.tsx ← Экран "Earn" (баланс, виджеты)
│ │ └── MarketApp.tsx ← Маркет (купить буст)
│ └── imports/ ← Все экраны и компоненты
│ ├── 01MainBalance/ ← Главный экран (бесплатный)
│ ├── 01MainBalancePaid/ ← Главный экран (платный)
│ └── ...
├── public/
│ └── img/ ← ВСЕ картинки лежат здесь
├── package.json
└── vite.config.tsКонцепция Free vs Paid
В buyboost два состояния: до покупки буста и после. Для каждого экрана — два варианта компонента:
| Экран | Бесплатная версия | Платная версия |
|---|---|---|
| Главный баланс | 01MainBalance/ | 01MainBalancePaid/ |
| Инфо о бусте | 02BsAboutBoost.../ | 02BsAboutBoostPaid/ |
| Кошелёк | 07WalletTapWithdraw/ | 07WalletTapWithdrawPaid/ |
Когда добавляешь новый экран — часто нужно делать оба варианта. Скажи Claude: "Добавь экран X в обоих состояниях — free и paid".
Запуск прототипа локально
# Открой терминал в VS Code (Ctrl+`) и выполни:
cd buyboost
npm install # только первый раз
npm run dev # запустить локальный серверОткроется по адресу http://localhost:5173 — открой в браузере.
Можно попросить Claude: "Запусти buyboost локально" — он сам выполнит нужные команды.
Как работают клики на Figma-компонентах
Компоненты из Figma имеют атрибут data-name на каждом элементе. Claude ищет по этому атрибуту чтобы понять на что нажали.
Если кнопка не реагирует на клик: скажи Claude "кнопка [название] не работает, проверь data-name". Проблема обычно в том что атрибут называется чуть иначе.
Как это работает
Все прототипы деплоятся на Cloudflare Pages через аккаунт Nutson. GitHub используется для хранения кода. Тебе не нужно знать команды — просто скажи Claude что задеплоить, он сам попросит авторизацию там где нужно.
Шаг 1 — авторизуйся (один раз)
Cloudflare
Зайди на dash.cloudflare.com → войди через Google — аккаунт Nutson (спроси у Родиона доступ). Это нужно сделать один раз в браузере.
GitHub
Зайди на github.com → войди через Google — аккаунт Nutson. Коды подтверждения приходят на Google-почту Nutson — проверь входящие там.
Когда Claude будет деплоить — он сам запустит wrangler login в терминале, откроется браузер с Cloudflare OAuth — просто нажми Allow. То же с GitHub. Claude скажет что делать в каждый момент.
Шаг 2 — попроси Claude задеплоить
Активные прототипы
Здесь собраны все реальные проблемы с которыми мы сталкивались. Если что-то сломалось — сначала смотри сюда.
Figma
"Найди все Figma CDN ссылки в коде buyboost и замени на локальные файлы в public/img/"
1. Закрой VS Code полностью и открой снова
2. Убедись что папка проекта открыта (File → Open Folder → for-cheelee-employees)
3. Попроси Claude: "Проверь подключение Figma MCP"
npm install -g figma-mcpCloudflare / Деплой
npx wrangler logout
npx wrangler login"Создай новый Cloudflare Pages проект с именем [название] через API"
Или создай вручную на dash.cloudflare.com → Pages → Create a project.
npx wrangler pages deploy dist --project-name=buyboost-playtest --commit-dirty=true"Не могу запушить на GitHub — ошибка аутентификации. Помоги настроить токен"
Прототип / Код
"Кнопка [название] не работает — проверь data-name, возможно имя не совпадает. Открой DevTools и покажи как это отладить."
"Не забудь обновить и платный вариант этого экрана (Paid-версию компонента)"
"Вот ошибка при сборке: [текст ошибки] — почини"
Кошелёк: 200 · Streak: 300 · Popup активации: 500
Решение: Попроси Claude: "Экран [название] отображается под другим — поправь z-index"
"Подсказка стоит слишком [высоко/низко] — поправь CARD_H в компоненте WalletTooltip"
"Шторка [название] не перетаскивается — оберни её в BottomSheetOverlay"
Node.js / npm
1. Закрой терминал в VS Code и открой новый (Ctrl+`)
2. Если не помогло — переустанови Node.js с nodejs.org, при установке поставь галочку "Add to PATH"
npm cache clean --force
npm install