Самый важный вопрос перед началом: «Что я хочу создать?»
Многие новички застревают на этом этапе, потому что думают: «Я ничего не умею, как я могу что-то создать?» Но с Claude Code всё наоборот — ты НЕ СОЗДАЁШЬ сам, ты ОБЪЯСНЯЕШЬ Claude, что тебе нужно.
Твоя задача — выбрать простую идею, которую можно сделать за 1-2 часа. Не сайт интернет-магазина на 100 страниц, а что-то маленькое и законченное.
В этом уроке ты попросишь Claude Code предложить тебе актуальные идеи проектов, которые релевантны СЕЙЧАС. Никаких устаревших примеров — только то, что работает в современном вебе.
ШАГ 1: Генерируем идеи
Первым делом попросим Claude Code предложить тебе 5 актуальных идей для первого проекта. Не нужно придумывать самому — пусть AI поработает.
Предложи мне 5 идей для первого веб-проекта с такими критериями:
ВАЖНО:
- Простые (можно сделать за 1-2 часа)
- Актуальные для 2026 года (современные цифровые инструменты)
- Полезные в реальной жизни (не учебные примеры)
- Интересные (хочется показать друзьям)
Для каждой идеи укажи:
1. Название проекта
2. Что это делает (1 предложение)
3. Основные функции (3-4 пункта)
4. Почему это актуально сейчас
Примеры направлений (но не ограничивайся ими):
- Productivity tools (продуктивность, планирование)
- AI-инструменты (работа с API, промпты, генерация)
- Персональные проекты (визитки, портфолио, биолинки)
- Финансы (трекеры, калькуляторы)
- Развлечения (генераторы, квизы, игры)
- Здоровье и фитнес
- Креатив (дизайн-инструменты, галереи)
Идеи должны быть КОНКРЕТНЫМИ и ЦИФРОВЫМИ (веб-приложения, не физические продукты).
ЗАДАНИЕ 1: Получи идеи от Claude Code
- Открой VSCode
- Нажми
Ctrl+Shift+P → «Claude Code: New Chat»
- Скопируй промпт выше
- Отправь Claude Code (Enter)
- Получи 5 идей проектов
ЗАДАНИЕ 2: Выбери одну идею
Прочитай все 5 идей и выбери ту, что:
- ✦ Тебе действительно интересна
- ✦ Решает реальную проблему (твою или чужую)
- ✦ Хочется показать друзьям
Не выбирай «самую простую» — выбирай ту, что ГОРИТ! Энтузиазм и интерес к проекту — твоё главное топливо.
ЗАДАНИЕ 3: Не понравились идеи? Перегенерируй!
Если ни одна из 5 идей не зацепила — это нормально. Просто попроси Claude предложить другие:
Эти 5 идей мне не подходят. Предложи ещё 5, но с уклоном в [твоя тема].
Например:
- «с уклоном в музыку и творчество»
- «с уклоном в спорт и здоровье»
- «с уклоном в бизнес и продажи»
- «с уклоном в игры и развлечения»
- «с уклоном в обучение и саморазвитие»
Можешь перегенерировать сколько угодно раз, пока не найдёшь идею, которая тебе реально нравится. Нет ограничений!
ЗАДАНИЕ 4: Уточни детали
Если идея понравилась, но хочешь что-то добавить или изменить — спроси Claude:
Мне понравилась идея "[название]". Но я хочу добавить:
- [твоя фича 1]
- [твоя фича 2]
Как это повлияет на сложность проекта? Это всё ещё можно сделать за 1-2 часа?
ШАГ 2: Анализ конкурентов
Идея выбрана. Но прежде чем писать код — нужно посмотреть, как это делают лучшие в мире. Claude Code умеет анализировать рынок и находить лучшие практики.
Я хочу создать [название твоего проекта].
Проведи глубокий анализ конкурентов:
1. Найди 5-7 лучших мировых аналогов (не только русские — смотри глобально)
2. Для каждого аналога укажи:
- Название и ссылка
- Что делает хорошо (сильные стороны)
- Что делает плохо (слабые стороны)
- Уникальная фича, которую стоит позаимствовать
3. Выдели ТОП-10 лучших практик, которые встречаются у лидеров:
- UX/UI решения
- Функции, которые есть у всех лидеров
- Тренды 2026 года в этой нише
4. На основе анализа предложи ЛУЧШИЙ вариант моего проекта:
- Какие фичи взять у конкурентов
- Что сделать по-другому (уникальность)
- Конкретный список функций (с приоритетами: must-have / nice-to-have)
- Рекомендация по дизайну (стиль, цвета, настроение)
Важно: проект должен оставаться простым (1-2 часа на создание).
Не раздувай — выбери только самое важное из лучших практик.
Claude проанализирует рынок и предложит оптимальный набор функций для твоего проекта, основанный на лучших мировых практиках. Ты получишь не «ещё один проект», а продукт, собранный из лучших решений индустрии.
ШАГ 3: Критический анализ
Теперь у тебя есть предложенный вариант проекта. Но перед тем как его делать — попросим Claude сам себя проверить. Это ключевой навык: заставлять AI критически оценивать собственные решения.
Проведи критический анализ предложенного варианта проекта.
Оцени по 5 критериям (от 1 до 10):
1. ПОЛЕЗНОСТЬ — решает ли это реальную проблему? Будут ли этим пользоваться?
2. УНИКАЛЬНОСТЬ — чем это отличается от 100 других таких же проектов?
3. РЕАЛИЗУЕМОСТЬ — можно ли это РЕАЛЬНО сделать за 1-2 часа с нуля?
4. WOW-ЭФФЕКТ — захочет ли человек показать это друзьям?
5. АКТУАЛЬНОСТЬ — это релевантно для 2026 года или уже устарело?
Для каждого критерия:
- Поставь оценку (1-10)
- Объясни почему
- Предложи как улучшить
В конце дай:
- Общую оценку (среднее)
- ТОП-3 слабых мест, которые ОБЯЗАТЕЛЬНО нужно исправить
- ТОП-3 сильных сторон, которые нужно усилить
- Конкретные рекомендации по улучшению
Без критического анализа ты сделаешь «просто ещё один проект». С ним — ты сделаешь проект, который реально выделяется. Claude честно покажет слабые места и подскажет, как их закрыть.
ШАГ 4: Финальное описание проекта
Последний шаг перед созданием — собрать всё вместе: идею + лучшие практики + исправления из критического анализа = финальное описание, по которому Claude создаст проект.
На основе:
1. Выбранной идеи
2. Анализа конкурентов и лучших практик
3. Критического анализа и рекомендаций
Составь ФИНАЛЬНОЕ описание проекта для создания.
Формат:
НАЗВАНИЕ ПРОЕКТА: [название]
ОПИСАНИЕ: [1-2 предложения — что это и для кого]
ФУНКЦИИ (must-have):
- [функция 1]
- [функция 2]
- [функция 3]
- [функция 4]
ФУНКЦИИ (nice-to-have, если останется время):
- [функция 5]
- [функция 6]
ДИЗАЙН:
- Стиль: [минимализм / неоморфизм / glassmorphism / другое]
- Цветовая схема: [конкретные hex-коды]
- Настроение: [например: "профессиональный, но дружелюбный"]
- Адаптивный под мобильные
УНИКАЛЬНОСТЬ (чем отличается от конкурентов):
- [отличие 1]
- [отличие 2]
ФАЙЛЫ: index.html, styles.css, script.js
Важно: описание должно быть ГОТОВЫМ ПРОМПТОМ, который я смогу
скопировать и отправить в новый чат для создания проекта.
Готовый промпт для создания проекта — не из головы, а основанный на анализе лучших мировых практик и прошедший критическую проверку. Это промпт профессионального уровня.
ШАГ 5: Создаём проект
Финальное описание готово. Теперь отправляем его Claude Code и получаем готовый продукт.
ДЕЙСТВИЕ 1: Открой новый чат
- Нажми
Ctrl+Shift+P → «Claude Code: New Chat»
- Скопируй финальное описание проекта из Шага 4
- Добавь в конец промпта следующий текст:
Создай этот проект по шагам.
Перед началом составь пошаговый план создания.
Затем выполняй план по шагам, отмечая каждый выполненный шаг.
После каждого шага показывай:
✓ [Шаг N] — что сделано
⏳ [Шаг N+1] — что будет дальше
Не останавливайся, пока не выполнишь ВСЕ шаги плана.
- Нажми Enter и наблюдай, как Claude создаёт проект
ДЕЙСТВИЕ 2: Если Claude остановился
Claude Code может остановиться посреди работы — это нормально. Просто отправь:
Продолжай выполнять план, пока не выполнишь все шаги.
Повторяй эту команду каждый раз, когда Claude останавливается, пока не увидишь что все шаги отмечены как выполненные.
ДЕЙСТВИЕ 3: Запусти результат
Когда все шаги выполнены, отправь Claude:
Запусти проект в браузере через свой терминал. Не показывай мне команду — выполни её сам.
Claude сам выполнит команду в терминале и откроет проект в браузере. Тебе ничего вводить не нужно.
Работающий проект в браузере — с дизайном, функциями и интерактивностью.
Практика: Проверка и доработка
ЗАДАНИЕ: Проверь работу
Протестируй все функции из финального описания:
- ✦ Все кнопки работают?
- ✦ Дизайн соответствует описанию?
- ✦ На мобильном выглядит нормально? (уменьши окно браузера)
ЕСЛИ ЧТО-ТО НЕ РАБОТАЕТ
Не паникуй. Скажи Claude:
[Описание проблемы]. Исправь это.
Примеры:
- «Кнопка "Добавить" не работает. Исправь.»
- «На мобильном текст обрезается справа. Исправь.»
- «Цвета не такие, как в описании. Нужен фон #0a0a0a, акцент #8b5cf6. Исправь.»
Чеклист урока:
- Я получил 5 идей от Claude Code
- Я выбрал идею, которая мне действительно интересна
- Я провёл анализ конкурентов (получил лучшие практики)
- Я получил критический анализ с оценками и рекомендациями
- У меня есть финальное описание проекта
- Claude создал проект по шагам
- Проект открывается в браузере и работает
- Я исправил баги (если были)
Все галочки стоят? Отлично! В следующем уроке мы улучшим дизайн: добавим градиенты, тени, анимации и сделаем проект по-настоящему красивым.