О чём этот эфир

Девятый живой эфир сообщества, часть 1. Строим маркетплейс услуг с нуля. Аналог TaskRabbit для Испании, проект называется Mano (от исп. «рука»). Клиент пишет задачу: повесить полку, починить кран, доставить документы. Исполнители подают заявки, у них рейтинг, отзывы, своя цена. Платформа берёт комиссию.

Покрываем: PRD, дизайн-систему, кодовую базу. И главное, я показываю как реально веду проект в Claude Code: от пустой папки до работающего прототипа.

Основной фокус эфира не на конкретной нише маркетплейса, а на процессе. Как составить PRD, чтобы и дизайн, и код собрались правильно. Как обходить шаблонный AI-дизайн. Какие скиллы и MCP я подключаю на старте каждого проекта.

Что вы увидите

Почему я работаю в терминальной версии Claude Code, а не через VS Code extension: видны Team Agents, лимиты, какую модель выбрал orchestrator
Структура папок My Projects и зачем у каждого проекта свой claude.md поверх глобального
Локальные MCP для конкретного проекта, чтобы не тащить лишнее во все остальные
Plan Mode и как я «надиктовываю» Клоду PRD голосом через Wispr Flow
PRD как отдельный документ, не путать с дизайном: что туда писать, что не писать
Почему дизайн вынесен в отдельный design.md: PRD задаёт что делаем, design.md задаёт как это выглядит
Проблема шаблонного AI-дизайна: почему все vibe-coded проекты выглядят одинаково и как этого избежать
Скилл design-orchestrator: оркестрирует несколько дизайн-скиллов сразу, выбирает подходящий под задачу
Google Stitch как новый AI-дизайнер: что это, чем отличается от шаблонных решений, как подключить через MCP
Behance как источник референсов, чтобы Клод не уехал в шаблон
Как скармливать Клоду референсы дизайна, чтобы он понимал желаемый стиль, а не выдумывал свой
Сборка дизайн-системы перед началом кодинга: что должно быть готово до первого npx create
Дебаг по ходу: MCP-подключение, обновление Claude Code, что делать когда модель «обижается» и зависает
Лендинг для маркетплейса: первая страница, которую вообще видит пользователь, и почему её делаем первой
Чем заняться в части 2: подключение Supabase, авторизация, заявки от исполнителей, чат

Таймкоды

0:00 Приветствие, тема: строим клон TaskRabbit с нуля, проект Mano для Испании
1:00 Что такое TaskRabbit и аналоги в Европе, основные роли (клиент, исполнитель)
2:30 Что не входит в эфир: Stripe, реальная оплата, выплаты исполнителям
3:20 🔧 Открываем пустую папку Stream Project внутри My Projects
4:00 Почему я работаю через терминал, а не VS Code extension. Team Agents, лимиты, модель orchestrator
5:30 Глобальный claude.md в My Projects vs локальный для конкретного проекта
5:45 Локальные MCP для проекта: подключаем только нужное, не загружаем во все остальные
7:30 С чего начинаем: голосовой ввод задачи в Claude через Wispr Flow
10:00 Каркас будущих фич: задача, заявки, оплата, отзыв, рейтинг
10:25 🔧 Создаём первый claude.md прямо из чата с Клодом
10:43 PRD = Project Requirements Document, это бриф для всех агентов
13:00 Goal: PRD должен быть таким, чтобы и дизайн, и код собирались по нему правильно
15:00 🔧 Сохраняем PRD как отдельный файл, разбираемся с режимами Клода
18:00 Как формулировать PRD, чтобы потом не переписывать всё с нуля
20:30 Стоит ли тут же тестировать на тестовом аккаунте
23:30 Тестовый режим: Stripe testing, Supabase dev
25:00 Переход к дизайну, почему он отдельно от PRD
28:00 Дополняем claude.md по ходу разговора с Клодом
30:00 🎨 Дизайн: о чём договариваемся с Клодом отдельно от PRD
30:48 🎨 Google Stitch как новый AI-дизайнер, первое упоминание
32:00 🎨 Создаём отдельный claude-design.md или design.md рядом с PRD
35:00 Полный пайплайн: PRD → design.md → кодовая база. Каждый шаг отдельный
37:00 🎨 Шаблонные AI-дизайны: почему все vibe-coded проекты выглядят одинаково
38:30 Как доулучшать дизайн: скиллы по дизайну, референсы, ручная правка
42:00 База знаний скиллов: что у меня там лежит про дизайн
49:00 🔧 Финальный PRD-промпт: бриф, общение на русском в чате
49:30 🎨 Просим Клода собрать классный дизайн
50:00 🎨 Запускаем opus-модель на дизайн
50:40 🎨 Свои скиллы по дизайну vs дефолт Клода
51:00 Почему первые vibe-coded сайты были все одинаковые
56:30 Pricing: один эфир на месяц включён в стоимость сообщества
59:55 🔧 design.md — что туда писать
1:00:30 🎨 Скилл design-orchestrator, как он работает
1:01:43 design-orchestrator вызывает несколько внутренних скиллов, выбирает подходящий
1:02:00 Web-design patterns как один из скиллов внутри оркестратора
1:05:30 Возвращаемся к Google Stitch
1:06:00 Behance как источник референсов для людей и для Клода
1:09:30 🐛 Обнови Claude Code если у тебя нет нужных команд
1:10:30 Терминал и параллельные сессии Claude Code
1:15:00 🎨 Проверяем какой дизайн Stitch собрал, выбор стиля
1:17:00 Сравнение: лендинги от Клода vs ручные дизайнеры на Behance
1:20:00 🎨 Современный дизайн: что сейчас считается актуальным
1:23:30 🔧 Экспорт дизайна из Stitch
1:24:00 🔧 Подключаем Stitch к Claude Code через MCP
1:26:50 MCP кнопки в Stitch ещё нет, обходим вручную
1:28:00 Stitch определил наши дизайны, переходим к коду
1:30:00 🐛 MCP-подключение долго разбирается, ждём
1:31:00 «Клод обижается» — известный баг когда модель зависает после ошибки
1:34:00 ✅ Лендинг для маркетплейса собран на Stitch
1:38:00 🔧 Дополняем промпт для следующего шага: используй MCP и наши скиллы
1:39:20 🎨 Папка design/ с экспортами из Stitch
1:42:00 design system man и design brief stitch — два уровня документации
1:45:20 Начало работы с дизайном переходит в код
1:50:30 Финальные правки по дизайну перед кодингом
1:55:30 ✅ К концу эфира готовы: PRD, дизайн-система, лендинг
1:56:30 Что будет в части 2: Supabase, авторизация, заявки исполнителей, чат
1:58:30 Завершение эфира, Q&A

Кому будет полезно

Если вы хотите начать свой проект с Claude Code, но не понимаете с чего: с PRD, с дизайна, или сразу с кода. Эфир показывает как я лично делаю это от пустой папки до работающего лендинга, без редактуры и подготовки. Все ошибки, паузы, моменты когда модель зависает или говорит не то, тоже в эфире.

Подойдёт и тем, кто уже строит свои проекты, но всегда получает «AI-шаблон». Я разбираю почему так выходит и какие именно скиллы и референсы спасают от этого. Особенно полезно если вы планируете строить SaaS или маркетплейс: тут показан весь старт от концепта до первой страницы.

Таймкоды с 🔧 отмечают технические шаги настройки и работы с Claude Code, с 🎨 работу с дизайном (PRD, скиллы, Stitch, референсы), с 🐛 моменты живого дебага, с ✅ ключевые результаты эфира.

Инструменты из эфира

Claude Code (терминальная версия, модель Opus, Plan Mode)
Wispr Flow (голосовой ввод PRD на русском)
Google Stitch (AI-дизайнер от Google для лендингов и UI)
design-orchestrator (скилл-оркестратор, выбирает подходящий дизайн-скилл под задачу)
web-design-patterns (один из скиллов внутри оркестратора)
Behance (источник референсов дизайна)
Team Agents в Claude Code (параллельные агенты, видно через терминал)
MCP (подключение Stitch к Claude Code напрямую)
VS Code (как редактор, но запуск Claude через терминал)

Часть 2

Во второй части продолжаем тот же проект Mano: подключаем Supabase (схема, миграции, RLS), авторизацию через Magic Link, заявки от исполнителей, чат между клиентом и исполнителем. Если в первой части мы готовили фундамент, то во второй уже собираем рабочий маркетплейс.