Заходим на stitch.withgoogle.com, регистрируем аккаунт. Создаём проект, выбираем веб-интерфейс (16:9). Перед промптом собираем референсы с Godly Website и Dribbble - 3-4 скриншота в стиле Apple/Tesla. Прикрепляем картинки в окно и выбираем режим Redesign.
Привет, хочу сайт для компании Mastodont - производство гитар. Полностью автономная компания, где роботы-гуманоиды всё делают и управляют. Используй референсы как вдохновение: минимализм, гигантская типография. Возьми шрифт с первого референса - большой, смелый, жирный, качественный. Робота возьми с третьего референса.
⚙️
Альтернатива: Stitch может работать по URL чужого сайта (например, gibson.com) в режиме Gemini 3.1 Pro Syncing. Картиночные референсы дают результат чище.
02
Доработка дизайна и настройка палитры
Из набросков выбираем 2-3 лучших варианта (через Ctrl). Просим Stitch собрать финальную страницу. Дальше в правой панели крутим систему дизайна - основной/дополнительный цвет, шрифты. Один клик - палитра разлетается по всему сайту.
Что делаем
Через Ctrl выдели 2-3 лучших варианта
В правой панели открой Design System
Поменяй Primary (фон), Secondary (акцент) - например на токсичный лайм в стиле Apple/Tesla
Главные страницы располагай вверху рабочей области, второстепенные внизу
💬 Промпт 2 - финальная сборка страницы
Хорошо, идём дальше. Возьми этот текущий визуал как референс - типография, матовый стиль. Сохрани это и доработай весь сайт. Сделай полную страницу: секция «Автономное производство» с цифрами, большой фуллскрин-блок с роботом-сборщиком, блок подписки на закрытый клуб коллекционеров. Все гитары - матово-чёрные.
💡
Можно говорить голосом - кнопка микрофона в интерфейсе. Stitch понимает правки на лету.
03
Экспорт в Claude Code
Выделяем нужные файлы в Stitch, жмём Export → ZIP. Распаковываем папку. Открываем Claude Code и подключаем папку как рабочую (выбор папки).
Я создал дизайн в Stitch. Все файлы у тебя, бро. Получится превратить это в красивое приложение, используя любые библиотеки, которые посчитаешь нужным? Используй уникальную типографию с поддержкой кириллицы. Stitch выдал статику HTML/CSS - перепиши в динамичное React-приложение с анимациями.
04
Форма регистрации и 3D-компонент с 21st.dev
После первого драфта на localhost добавляем форму регистрации в подвал и заменяем статичную картинку на интерактивный 3D Spline-компонент с 21st.dev.
На странице компонента нажми «Copy prompt» и «Copy link»
💬 Промпт 4 - форма регистрации
Дизайн классный, но в самом низу страницы размести форму регистрации, которую мы потом привяжем к базе данных.
💬 Промпт 5 - 3D Spline-компонент
Добавим интерактивного 3D-робота в hero вместо текущей статичной картинки. Вот компонент: https://21st.dev/community/components/serafim/splite/default
[ВСТАВЬ СЮДА PROMPT, который скопировал с 21st.dev]
Замени статичного робота на интерактивный Spline scene. Сохрани композицию, размеры и позицию справа - по красоте.
05
Подключаем Supabase (авторизация + база)
Создаём аккаунт на supabase.com и проект. Дальше говорим Claude Code подключить Supabase MCP - он сам опросит про токен, project ref и всё остальное, что нужно. После этого создаст таблицу profiles, настроит Row Level Security и подключит регистрацию.
В Claude Code вставь промпт ниже - Клод сам опросит, что ему нужно
Когда попросит токен: Supabase → Account → Access Tokens → Generate new token (длительность 1-7 дней)
💬 Промпт 6 - установка Supabase MCP
Подключи Supabase MCP к этому проекту через Claude Code. Опроси меня по очереди обо всём что нужно: токен, project ref, ключи. Скажи где их взять, я добавлю. Когда MCP заработает - проверь подключение через list_tables.
💬 Промпт 7 - интеграция Supabase в сайт
Теперь интегрируй Supabase в сайт. Пользователи должны регистрироваться: email, имя, пароль. Всё сохраняй в Supabase с включённым Row Level Security. Добавь форму регистрации и входа: кнопка «Войти», окошко с полями, после логина - личный кабинет с приветствием по имени. Создай таблицу profiles если её ещё нет.
06
Деплой на Vercel через токен
На vercel.com заходим в Account → Tokens, создаём токен. Передаём в Claude - он сам поставит Vercel CLI, залогинится, прокинет env-переменные (Supabase URL и ключи) и задеплоит. Минуя GitHub - быстрее.
Задеплой проект на Vercel напрямую через Vercel CLI, без GitHub. Используй мой токен: [ВСТАВЬ ТОКЕН]. Установи Vercel CLI если не установлен. Залогинься через токен, пропиши env-переменные (Supabase URL + Anon Key + Service Role Key), запусти продакшн-деплой, верни мне публичную URL.
💡
Для клиентов из РФ потом переноси на бегет или любой российский хостинг. Для теста Vercel идеален.
07
Подключаем приём платежей через Stripe
В Stripe sandbox (обязательно sandbox, не боевые ключи!) создаём продукт. Получаем ключи. Открываем НОВУЮ сессию в Claude Code - свежий контекст работает точнее на сложных задачах.
Интегрируем Stripe в личный кабинет. Когда залогиненный пользователь нажимает «Оформить подписку» - он переходит на Stripe Checkout и платит $99/мес за закрытый клуб коллекционеров. В Stripe Sandbox у меня уже создан продукт. Скажи, что тебе нужно от меня - токены, ключи, всё что угодно. После оплаты в дашборде должен показываться статус «Pro» и доступ к закрытому контенту.
🔧
Если после оплаты статус «Pro» не подтянулся - просто скажи Клоду: «оплата прошла, но статус не обновился, почини». Он сам найдёт где webhook отвалился и пропишет.