Claude DesktopОт идеи до чертежа: как заставить Claude собрать ИМЕННО твой продукт
Старт Модуля 3. Claude построит что угодно за час, но он не телепат — без чертежа построит не твоё. Сегодня ты доведёшь свою идею до готового чертежа продукта, увидишь его на экране и не потратишь ни рубля. Главный навык — сверка.
Claude Desktop обновился после того, как мы записали урок. Всё, что показано в видео, работает по-прежнему, но лежит в других местах. Вот что переехало.
Не находишь этих кнопок у себя? Обнови приложение: меню Claude вверху слева → Check for Updates. В браузере переключателя Cowork нет вообще, он есть только в приложении. В шагах ниже к каждому месту приложен короткий клип актуального интерфейса.
Сегодня ты становишься дирижёром своей стройки
Представь, что Claude — гениальная строительная бригада. Скажешь «построй дом» — построит за час. Но есть один нюанс: бригада не телепат. Без чертежа она построит дом, который придумала сама, а не твой. Снесёт стену, переделает, снова переделает — а деньги капают.
Именно так теряют время и деньги почти все, кто бросается «делать с AI» сразу. Мы прошли это на собственном опыте: вели Claude вперёд без плана, он чинил одно и ломал другое, мы откатывались по десять раз и потеряли заметные деньги на пустых переделках.
Сегодня ты научишься делать по-другому. За этот урок ты доведёшь свою идею до чертежа продукта — увидишь его на экране, поймёшь, из чего он состоит, согласуешь, как он выглядит. И всё это не написав ни строчки кода и не потратив ни рубля.
Главный навык, который ты заберёшь, один. Он называется СВЕРКА: сделать своё видение видимым и убедиться, что Claude понял ИМЕННО тебя, ПРЕЖДЕ чем он начнёт строить. Это единственное, что отделяет «получилось» от «беспорядок и потерянные деньги».
Кода сегодня не будет. На следующем уроке твой чертёж оживёт в работающий продукт по ссылке. А пока — поехали чертить. Застрял — пиши помощнику справа внизу.
9 этапов создания твоего продукта
Любой продукт собирается по этапам, один за другим. Сегодня (урок 5) проходим первые 5 — весь ЧЕРТЁЖ, без единой строки кода. На уроке 6 по этому чертежу построим живой продукт. Вот вся карта пути.
Сначала проверь снаряжение
- Перед стройкой убедимся, что инструменты на месте. Тебе понадобятся три сервиса. Руками туда лезть не будешь, всё ведёт Claude — просто проверим, что они подключены:
- GitHub — твой единый пропуск. Один раз завёл, и заходишь во все остальные сервисы кнопкой «Continue with GitHub». Плюс хранит все версии проекта.
- Vercel — где будет жить твой сайт (адрес вида название.vercel.app). Бесплатно, без карты.
- Supabase — где будут храниться данные продукта: заявки, клиенты, записи. Бесплатно, без карты.
- Открой Claude Code и вставь промпт — Claude сам проверит и подключит, чего нет:
- Промпт — скопируй и вставь в Claude
Проверь, всё ли у меня готово для работы: подключены ли GitHub, Supabase и Vercel через мои инструменты. По-русски скажи, что на месте, а что нет. Если что-то не подключено — проведи меня через подключение: сначала GitHub (через него вход во все остальные), потом Supabase и Vercel. Делай всё сам, обращайся ко мне только когда надо нажать в браузере, объясняй простыми словами.
- Ссылки сервисов, если регистрируешься вручную (везде вход через GitHub):
- https://github.com
- https://vercel.com
- https://supabase.com
Тормоза до старта: почему Claude летел и всё ломал
Сначала главное, без чего всё остальное бесполезно. У Claude есть режимы работы, и от выбора режима зависит, будет порядок или беспорядок.
Bypass («делай что хочешь, не спрашивай») — это режим без подстраховки. Звучит быстро, а на деле Claude летит, правит что попало, ломает соседнее, и ты не понимаешь, что вообще происходит. Именно на этом мы потеряли больше всего времени.
Plan Mode — это «сначала чертёж». В этом режиме Claude НЕ трогает код. Он изучает задачу, приносит тебе план на подпись и ждёт твоё «да». Ты видишь, что он собирается сделать, ДО того как он это сделал. Включается кнопкой Shift+Tab (жми, пока не увидишь «plan»).
Auto — если хочешь быстро и без лишних подтверждений. Это правильный «быстрый» режим: та же скорость, что у Bypass, но со страховкой. Встроенный сторож не даст удалить лишнее, выкатить сырое в прод или сломать важное. Используй Auto, не Bypass.
И три кнопки, которые снимают весь страх новичка «а вдруг сломаю и всё пропадёт»:
Из чего собран любой продукт: твой стек простым языком
Прежде чем чертить, пойми, из каких «кубиков» вообще собирается продукт. Это твой стек. Руками туда лезть не будешь, всё ведёт Claude, но знать, кто за что отвечает, важно — иначе не поймёшь, что происходит.
GitHub — проходная и машина времени. Один пропуск во все сервисы (кнопка «Continue with GitHub») плюс история всех версий. Зачем тебе: один вход везде, и любую правку можно отмотать назад — ничего не теряется.
Vercel — где живёт твой сайт. Публичный адрес вида название.vercel.app. Зачем тебе: твой продукт оказывается в интернете за минуту, бесплатно, и его видно по ссылке с любого телефона.
Supabase — картотека продукта. База данных плюс вход пользователей, без своего сервера. Зачем тебе: продукт помнит информацию — заявки, клиентов, записи. Это то, что превращает красивую страницу в рабочий инструмент.
OpenRouter — мозг продукта. Доступ к нейросети внутри твоего продукта. Зачем тебе: когда нужен умный чат или бот, который сам отвечает клиентам. Работает из России, бесплатно. Подключим, когда дойдём до этого.
Railway — мотор для ботов 24/7. Зачем тебе: когда появится бот или автоматизация, которая работает круглосуточно. Для первого продукта не нужен.
Накидай свою идею за 2 минуты
- Прежде чем строить, нужна идея. Не пугайся — не обязательно гениальная и финальная. Сегодня главная цель — пощупать, как всё работает, на простом примере. Свой настоящий продукт спокойно спроектируешь дома.
- Опиши идею коротко. Вставь промпт:
- Промпт — скопируй и вставь в Claude
Помоги сформулировать идею моего продукта в 2-3 фразах: что это, какую проблему решает и для кого. Задай пару наводящих вопросов, если надо. Коротко, без воды.
- Нет своей идеи прямо сейчас? Возьми готовую — простую, быструю, по делу. На выбор:
- Форма заявок — собирает обращения клиентов с лендинга в базу.
- Запись на услугу — клиент сам выбирает время, заявка падает тебе.
- Сбор отзывов — клиенты оставляют отзывы, ты видишь их в одном месте.
- Мини-каталог — список товаров или услуг с кнопкой «оставить заявку».
- Выбрал идею — с ней пройдёшь все шаги сегодня. Это не финал: дома запустишь скилл-проводник и спроектируешь свой настоящий продукт без спешки.
Шаг 1. Claude допрашивает тебя и сверяет, что понял правильно
- Первый ход чертежа — выгрузить твою идею из головы на бумагу так, чтобы Claude понял её ОДНОЗНАЧНО. И сделаем мы это наоборот: не ты пишешь ТЗ, а Claude сам тебя допрашивает.
- Открой Claude Code, зайди в пустую папку. Вставь промпт. Вместо примера в конце впиши свою идею (или возьми болванку: запись для салона / сбор заявок для риелтора / бот ответов для эксперта):
- Промпт — скопируй и вставь в Claude
Я хочу собрать свой продукт, помоги мне его спроектировать. Сейчас НЕ пиши код. Сначала допроси меня детально: задавай вопросы по одному про пользователя, его боль, что продукт должен делать, крайние случаи (что если не оплатил, что показать если пусто, что при ошибке), риски. Спрашивай то, о чём я сам не подумал, не задавай очевидное. Когда всё прояснится — перескажи своими словами, что мы строим и в каком порядке, и запиши это в файл BRIEF. Моя идея: хочу систему записи для моего салона.
- Отвечай словами, как живому человеку. Claude будет задавать вопросы, о которых ты сам бы не вспомнил.
- Ключевой момент сверки: когда Claude перескажет своими словами, что вы строите — ВНИМАТЕЛЬНО прочитай. Если пересказ не совпал с тем, что ты имел в виду — поправь СЕЙЧАС, на словах. Это и есть сверка: исправить недопонимание на бумаге за минуту, а не в готовом продукте за неделю.
- 🎯 Челлендж: когда бриф готов — перескажи свой продукт вслух за 60 секунд, не глядя в текст. Вышло коротко и ясно — бриф зрелый. Сбился или поплыл — попроси Claude сжать, и пробуй снова.
Как выглядят такие схемы — три примера
На следующем шаге ты нарисуешь схему своего продукта. Чтобы было понятно, что получится — вот три вида схем, которые Claude рисует за тебя. Примеры на продукте «запись в салон».
Первая — схема блоков: из каких частей состоит продукт и как они связаны. Вторая — путь пользователя: как человек проходит по продукту шаг за шагом. Третья — поток данных: как информация движется от формы в базу и обратно.
1. Схема блоков — из чего состоит продукт и как связано
2. Путь пользователя — как человек идёт по продукту
3. Поток данных — как информация движется по продукту
Шаг 2. Увидь свою программу как схему из кубиков
- Теперь самое впечатляющее. Сейчас ты ВПЕРВЫЕ увидишь свой продукт не в воображении, а как живую схему: из каких блоков он состоит и как они связаны.
- Вставь промпт:
- Промпт — скопируй и вставь в Claude
По нашему брифу нарисуй схему моего продукта: из каких блоков он состоит (например вход, главный экран, оплата, личный кабинет) и как они связаны стрелками. Покажи схему в браузере, чтобы я видел. Это пока чертёж, код не пишем.
- Claude нарисует схему и откроет её в браузере. Посмотри на свой продукт сверху, как архитектор на чертёж дома.
- А теперь магия контроля: меняй схему ГОЛОСОМ. Скажи «касса должна быть после входа, а не до» или «добавь блок уведомлений» — и стрелки переедут прямо на глазах. Двигай блоки, пока схема не станет точно про твой продукт.
- Заодно согласуй ПОРЯДОК: с какого блока начнём строить, что за чем. Это убирает типичную проблему «Claude сделал наполовину» — теперь есть полный список блоков, ничего не потеряется.
- 🎯 Челлендж: найди в своей схеме блок, без которого первая версия проживёт, и убери его. Чем меньше блоков в первой версии — тем быстрее ты увидишь живой продукт.
Шаг 3. Карта экранов: где что на какой странице
- Схема блоков есть. Теперь разложим продукт по экранам: какие страницы в нём есть и как человек по ним ходит. Это маршрут пользователя ещё до того, как нарисован хоть один экран.
- Вставь промпт:
- Промпт — скопируй и вставь в Claude
Собери карту экранов моего продукта: список всех страниц (что на каждой и какой у неё адрес) и путь пользователя по шагам — с какого экрана он начинает, куда переходит, чем заканчивает. Покажи таблицей. Код не пишем.
- Посмотри весь маршрут глазами своего клиента. Где-то лишний шаг? Чего-то не хватает? Правь словами.
- Теперь ты видишь масштаб своего продукта целиком — и одновременно видишь, что он управляем. Это не страшная стройка, а понятный список комнат.
- 🎯 Челлендж: пройди путь клиента и найди ОДИН экран, где человек может растеряться и уйти. Нашёл слабое место до кода — поздравляю, ты уже думаешь как продакт, а не как исполнитель.
Шаг 4. Дизайн как у дорогих продуктов, а не «фиолетовое как у всех»
- Это сердце урока. Сейчас ты согласуешь, как твой продукт будет ВЫГЛЯДЕТЬ — до кода и без денег. И сделаешь его дорогим, а не дефолтным.
- Сначала инсайт. Если просто сказать Claude «сделай красиво», он выдаст фиолетовый дизайн с одинаковыми кнопками — как у всех. Это не плохой вкус, это статистика: он берёт самое частое из интернета. Создатель самой популярной дизайн-библиотеки в 2025 публично извинился, что из-за него весь AI стал фиолетовым. Значит фиолетовое не приговор — это легко обойти.
- Лекарство одно: не описывать словами, а ПОКАЗАТЬ картинку. Собери 3-5 скриншотов дизайна, который тебе нравится (с Mobbin, Dribbble, Awwwards или у конкурентов). Загрузи их Claude и вставь промпт:
- Промпт — скопируй и вставь в Claude
Вот референсы дизайна, который мне нравится (картинки прикреплены). Опиши их стиль детально: цвета, шрифты, отступы, ощущение. Потом собери ОДИН макет главного экрана моего продукта в этом стиле и открой в браузере, чтобы я посмотрел. Строго запрещено: фиолетовые градиенты, шрифт Inter, три одинаковых бокса с иконками, лишние тени. Это макет, не настоящий код.
- Claude соберёт макет и откроет на localhost. Ходи по нему в браузере, говори «не сюда», «этот цвет другой», правь, пока не «дорого и моё».
- Проверь себя приёмом сверки: «сделай скриншот макета, сравни с моими референсами, перечисли отличия и исправь». Два прохода — и дизайн как ты хотел.
- 🎯 Челлендж: засеки 5 минут и собери 3 референса, которые выглядят на миллион. Загрузи Claude и поймай момент ДО/ПОСЛЕ — как твой серый экран превращается в дорогой. Это самый кайфовый момент урока.
Шаг 5. Заморозь чертёж, чтобы новые идеи его не сломали
- Чертёж готов: бриф, схема блоков, карта экранов, дизайн. Последний шаг — заморозить его, чтобы твой же энтузиазм его не сломал.
- Самая частая ошибка всех: на стройке приходит классная идея, ты говоришь «о, давай ещё вот это», Claude начинает лепить — и ломает всю архитектуру. Дом едет, ничего не выходит.
- Золотое правило: новая идея → СНАЧАЛА в чертёж, ПОТОМ в стройку. Вставь промпт:
- Промпт — скопируй и вставь в Claude
Зафиксируй наш чертёж: создай короткий файл CLAUDE.md с правилами проекта (мой стиль дизайна, запрет на фиолетовое и Inter, ключевые решения — не больше 10-12 строк) и файл с архитектурой как замороженный чертёж. И запомни правило: если я предложу новую фичу на ходу — сначала впиши её в чертёж (что добавляем, что меняем, что убираем, что не трогаем), покажи, что сдвинется, и только после моего согласия меняй. Не лети переделывать сразу.
- Всё. Чертёж заморожен и защищён. Теперь у тебя есть оберег от собственного энтузиазма.
Поставь свой арсенал инструментов
- Чтобы всё это работало, нужны инструменты. Часть уже встроена в Claude Code, ставить ничего не нужно: Plan Mode (Shift+Tab), /rewind (откат), /init (память проекта), /code-review (проверка).
- А пару штук надо поставить один раз. Не набирай команды сам — отдай это Claude. Скопируй промпт и вставь в Claude Code:
- Промпт — скопируй и вставь в Claude
Поставь мне инструменты для проектирования продукта, делай всё сам. 1) claude-mermaid для живых схем: выполни npm install -g claude-mermaid, затем подключи его как MCP командой claude mcp add --scope user mermaid claude-mermaid. 2) Проверь дизайн-скилл ui-ux-pro-max, если не установлен — установи. 3) Проверь, что подключён chrome-devtools для проверки в браузере. В конце скажи, что готово и нужно ли перезапустить Claude.
- После установки перезапусти Claude, чтобы новые инструменты подхватились.
- Сразу проверь, что mermaid работает — нарисуй первую схему. Вставь промпт:
- Промпт — скопируй и вставь в Claude
Нарисуй через mermaid простую схему: три блока (Вход, Главный экран, База данных) со стрелками между ними, и открой её в браузере.
- Если в браузере (адрес localhost:3737) открылась схема — claude-mermaid работает. Это твой инструмент для рисования архитектуры. Первая схема — первая маленькая победа.
- Теперь про дизайн. Тебе понадобятся бесплатные сервисы трёх типов. Все проверены — бесплатные.
- 1. Галереи стилей — отсюда берёшь вдохновение. Как пользоваться: открой, найди 3-5 экранов в стиле, который нравится, сделай скриншоты и загрузи их Claude со словами «сделай мне в таком стиле».
- https://godly.website
- https://land-book.com
- https://lapa.ninja
- https://dribbble.com
- 2. Готовые блоки — 21st.dev, бесплатная библиотека красивых готовых кусков (кнопки, формы, секции, меню). Open-source, всё бесплатно. Как пользоваться: находишь блок, который нравится, копируешь его и говоришь Claude «вставь мне вот этот блок».
- https://21st.dev
- 3. 3D-объекты — Spline, если хочешь оживить продукт трёхмерной сценой. Бесплатный план есть (на экспорте будет маленький водяной знак, для старта это нормально). Как пользоваться: берёшь готовую 3D-сцену из их галереи, а Claude встроит её в твой продукт.
- https://spline.design
Скачай скилл-проводник, который не даст ошибиться
- Чтобы не копировать промпты по одному, у тебя будет проводник — наш скилл. Он сам проведёт тебя по всем 5 шагам чертежа: допросит про идею, нарисует схему, соберёт карту экранов, поможет с дизайном по референсу, заморозит чертёж. И не даст перепрыгнуть или выстроить архитектуру криво.
- Шаг 1. Открой Библиотеку в кабинете и скачай AGINE Kickoff в ZIP.
- Шаг 2. Для Claude Desktop загрузи ZIP через Customize → Skills → Create skill → Upload.
- Для Claude Code прикрепи ZIP и попроси распаковать папку agine-kickoff в ~/.claude/skills/.
- Шаг 3 — перезапусти Claude и запусти проводник одной фразой:
- Промпт — скопируй и вставь в Claude
запусти кикофф
- Дальше скилл сам ведёт тебя по шагам. Можешь идти по нему, а можешь — по промптам в шагах ниже. Результат один: готовый чертёж твоего продукта.
Чертёж готов. На следующем уроке он оживёт
Смотри, что ты сделал за урок, не написав ни строчки кода:
- поставил Claude тормоза (Plan Mode), теперь он не летит и не ломает
- выгрузил идею из головы и сверил, что Claude понял именно тебя
- увидел свой продукт как схему из кубиков и подвигал её голосом
- разложил его по экранам и прошёл путь клиента
- согласовал дорогой дизайн по референсу, а не фиолетовый шаблон
- заморозил чертёж, чтобы новые идеи его не ломали
Это и есть главный навык — СВЕРКА. Ты сделал видение видимым и проверил, что Claude понял тебя, ДО стройки. Именно так не теряют недели и деньги на переделках.
А теперь самое интересное. У тебя на руках полный чертёж продукта. Он тебе нравится. Но это пока чертёж. На следующем уроке мы за 3 часа превратим его в живую штуку по ссылке — которую ты откроешь с телефона и кинешь другу. Не пропусти.
Сегодня ты пощупал на живом примере, как из идеи рождается чертёж. Дома запусти скилл-проводник («запусти кикофф») — он проведёт твой настоящий продукт шаг за шагом, без спешки. Это не финал, у тебя есть время, и мы ещё встретимся.
Забери карточки навыков ниже — в каждой памятка, которая пригодится дальше.
Чеклист
Отметь когда сделал каждый пункт. Когда все галки на месте, откроется квиз.