Вкладка Code: 5 задач, после которых ты не вернёшься в чат

Конкретные задачи во вкладке Code: создать сайт, починить файл, сгенерировать структуру проекта, навести порядок в коде, добавить фичу. Без терминала, без опыта в программировании.

Зачем это нужно?

В прошлом гайде ты открыл вкладку Code и попробовал пару запросов. Теперь пора сделать что-то настоящее.

Этот гайд — пять конкретных задач, от простой к сложной. Каждая занимает 5-10 минут и даёт ощутимый результат: файлы, которые можно открыть, показать, использовать. После них станет понятно, почему вкладка Code — это не «ещё один чат», а инструмент совершенно другого уровня.

Никакого опыта в программировании не нужно. Ты описываешь задачу — Claude делает.

Как это работает

Открой Claude Desktop, переключись на вкладку Code. Для каждой задачи создай папку (или используй существующую) и укажи её как рабочую. Каждая задача ниже — готовый промпт: копируешь, при необходимости меняешь детали, отправляешь.

Важное правило: после каждой задачи открой результат и проверь. Открой HTML-файл в браузере (двойной клик), посмотри на текстовый файл, прочитай, что получилось. Если что-то не так — просто скажи Claude, что не нравится, и он исправит.

Задача 1: Создай персональную веб-страницу

Зачем: Ты получишь настоящий сайт — одну страницу с информацией о тебе, которую можно открыть в браузере. Это самый быстрый способ увидеть, как Claude создаёт что-то с нуля.

Промпт:

Создай красивую одностраничную веб-страницу обо мне. Имя: [твоё имя]. Краткое описание: [кто ты и чем занимаешься, 1-2 предложения]. Ссылки на соцсети: [перечисли свои]. Тёмная тема, современный минимализм. Один HTML-файл, чтобы можно было открыть двойным кликом в браузере.

Что произойдёт: Claude создаст файл index.html в твоей папке. Двойной клик по нему — и в браузере откроется полноценная страница с твоим именем, описанием и ссылками. Красиво свёрстанная, с анимациями, адаптированная под мобильные экраны.

Попробуй варианты:

«Добавь секцию с моими проектами: [название] — [описание]»
«Сделай светлую тему вместо тёмной»
«Добавь кнопку для скачивания моего резюме»

Задача 2: Почини сломанный файл

Зачем: Знакомая ситуация: кто-то прислал файл, а он не работает. Или ты сам что-то поменял, и всё сломалось. Вместо того чтобы разбираться, что пошло не так — просто попроси Claude починить.

Подготовка: Создай папку fix-test. Внутри создай текстовый файл data.csv с таким содержимым (скопируй как есть — он намеренно испорчен):

Имя,Возраст,Город,Email
Анна,28,Москва,anna@mail.ru
Борис,,Питер
Вера,35,Казань,vera@mail.ru,лишнее поле
,40,Новосибирск,dmitry@mail.ru
Елена,двадцать семь,Екатеринбург,elena@mail.ru

Промпт:

Открой файл data.csv. Найди все ошибки: пропущенные значения, лишние поля, неправильные типы данных, пустые строки. Исправь всё, что можно исправить автоматически. То, что нельзя угадать — отметь комментарием. Покажи, что было не так и что ты исправил.

Что произойдёт: Claude прочитает файл, перечислит каждую проблему (пропущен возраст у Бориса, лишнее поле у Веры, имя отсутствует в четвёртой строке, возраст Елены записан текстом) и исправит файл. Ты получишь чистые данные и отчёт о том, что было не так.

Попробуй варианты:

Дай Claude любой реальный файл, с которым что-то не так: таблицу с ошибками, документ с битой разметкой
«Проверь все файлы в этой папке на ошибки и покажи сводку»

Задача 3: Сгенерируй структуру проекта

Зачем: Начинать с чистого листа — всегда тяжело. Вместо того чтобы самому придумывать, какие файлы нужны и как их организовать, скажи Claude, что ты хочешь сделать — он создаст всю структуру.

Промпт:

Я хочу вести дневник благодарностей. Каждый день записываю 3 вещи, за которые благодарен. Создай для этого простой сайт: главная страница со списком записей, кнопка «добавить запись», красивое оформление. Всё должно работать в браузере без интернета — просто локальные файлы.

Что произойдёт: Claude создаст папку с несколькими файлами: HTML-страница, стили оформления, логика работы. Откроешь в браузере — увидишь готовое приложение: можно добавлять записи, они сохраняются в браузере, выглядит аккуратно.

Главное здесь не сам дневник, а принцип: ты описал идею на обычном языке — получил работающий продукт за пару минут.

Попробуй варианты:

Замени «дневник благодарностей» на свою идею: трекер привычек, список книг для чтения, калькулятор расходов
«Добавь возможность экспортировать все записи в текстовый файл»

Задача 4: Наведи порядок в чужом коде

Зачем: Допустим, тебе достался проект от коллеги, фрилансера или из интернета. Файлы называются непонятно, структура — хаос. Claude разберётся и приведёт всё в порядок.

Подготовка: Создай папку messy-project. Внутри создай три файла с любым содержимым:

page.html — любой HTML (или скопируй результат из Задачи 1)
s.css — пустой файл или с парой строк
func.js — пустой файл или с парой строк

Промпт:

Посмотри на этот проект. Файлы названы как попало, структура отсутствует, непонятно что за что отвечает. Сделай ревизию: 1) Переименуй файлы так, чтобы было понятно, что в каждом. 2) Создай осмысленную структуру папок. 3) Создай файл README.md с описанием проекта: что это, какие файлы за что отвечают, как открыть. Покажи мне план перед выполнением.

Что произойдёт: Claude сначала покажет план: “Предлагаю переименовать s.css в styles.css, func.js в main.js, создать папки css/, js/…” Ты подтверждаешь — он выполняет. В конце ты получаешь аккуратный проект с понятной структурой и документацией.

Ключевой момент: Claude сначала показывает план, а потом спрашивает разрешение. Это нормальное поведение — он не будет ничего менять без твоего согласия. Привыкай работать в таком режиме: «покажи план — я подтвержу».

Попробуй варианты:

Дай Claude реальную папку с проектом, который достался тебе от кого-то
«Найди в проекте файлы, которые не используются, и предложи, что с ними делать»

Задача 5: Добавь фичу в существующий проект

Зачем: Самый частый сценарий: у тебя уже что-то есть, и нужно добавить новую функцию. Это сложнее, чем создать с нуля, потому что нужно не сломать то, что работает. Claude справляется отлично — он читает весь проект и вносит изменения аккуратно.

Подготовка: Используй сайт из Задачи 1 или Задачи 3 — любой файл, который уже работает.

Промпт (для сайта из Задачи 1):

Возьми мою персональную страницу и добавь туда секцию «Блог»: три карточки с заголовком, датой и коротким текстом-заглушкой. При клике на карточку пусть открывается полный текст прямо на этой же странице. Сохрани существующий стиль оформления.

Промпт (для сайта из Задачи 3):

Добавь в дневник благодарностей функцию «настроение дня»: при добавлении записи можно выбрать эмодзи настроения. На главной странице рядом с каждой записью показывай выбранное настроение. Добавь статистику настроений за последнюю неделю.

Что произойдёт: Claude прочитает существующие файлы, разберётся в их структуре и аккуратно добавит новую функцию, не сломав то, что уже работает. Обновишь страницу в браузере — увидишь новую секцию, которая вписалась в дизайн.

Попробуй варианты:

«Добавь переключение языка: русский и английский»
«Сделай так, чтобы сайт хорошо выглядел на телефоне»
«Добавь поиск по записям»

Что ты только что сделал

Пять задач — и каждая показала другую грань вкладки Code:

Создание с нуля — описал идею словами, получил готовый файл
Диагностика и починка — дал сломанный файл, получил чистый + отчёт об ошибках
Генерация структуры — описал концепцию, получил работающее приложение
Ревизия и порядок — дал хаос, получил организованный проект с документацией
Расширение существующего — попросил добавить фичу, ничего не сломалось

Обрати внимание на разницу с обычным чатом. В чате Claude объяснил бы, как создать сайт: «создайте файл index.html, вставьте этот код…» Во вкладке Code он создал этот файл, написал содержимое, проверил, что всё работает. Ты направляешь — он делает.

Следующие шаги

Ты попробовал основные сценарии. Следующий шаг — научить Claude запоминать твои предпочтения: какой стиль кода тебе нравится, какие правила соблюдать, как оформлять проекты. Для этого существует файл CLAUDE.md — о нём в следующем гайде.

А пока — попробуй свои задачи. Вспомни, что ты давно хотел сделать, но не хватало технических навыков: простой сайт, калькулятор для работы, красивое оформление данных. Вкладка Code — это место, где «хочу, но не умею» превращается в «готово».

Если что-то пошло не так

Claude создал файл, но он не открывается? Сайт выглядит не так, как ты хотел? Не знаешь, как сформулировать свою задачу? Не мучайся в одиночку — приходи на бесплатную консультацию: /consult. Полчаса разговора экономят полдня проб и ошибок.