Кейси Программирование без программирования

Возможностей много, но новичку достаточно запомнить три комбинации клавиш:

Ctrl+L (на Mac — Cmd+L) - открыть чат с AI. Спрашивайте что угодно.

Ctrl+K (Cmd+K) - изменить выделенный кусок кода. Выделили написали, что поменять готово .

Ctrl+I (Cmd+I) - «режим агента». Для больших задач: «Создай страницу с формой обратной связи» .

Бесплатной версии хватит для старта. Платная ($20/мес) открывает больше возможностей, но в первых главах этой книги она не понадобится .

Совет: Если Cursor кажется сложным - не пугайтесь. В следующей главе мы пошагово запустим ваш первый проект. Это как первый раз за руль: страшно, пока не попробуешь.

Claude - «думающий» помощник

Claude от Anthropic - это AI, который славится умением работать с большими объёмами кода и сложными задачами . Он хорош для ситуаций, когда нужно не просто сгенерировать код, а разобраться в проблеме.

Когда использовать: вы запутались в ошибках, Cursor не справляется, нужно спокойно обсудить архитектуру. Claude «думает» аккуратнее многих конкурентов и неплохо объясняет свои решения .

Есть бесплатная версия на claude.ai. Оплата зарубежной картой, что сейчас может быть проблемой, но для первых шагов бесплатного лимита достаточно.

ChatGPT - универсальный солдат

ChatGPT от OpenAI - инструмент, с которого многие начинали. Хорош для быстрых вопросов, генерации отдельных функций, объяснения ошибок. Уступает Claude в глубине работы с большим проектом, но берёт доступностью и скоростью.

Бесплатная версия доступна без всяких карт. Для вайб-кодинга подходит на старте, но по мере усложнения проектов вы, скорее всего, перейдёте на специализированные инструменты.

Replit - облачная песочница

Replit - это браузерная среда, где можно писать код, запускать его и тут же публиковать результат . Внутри есть AI-помощник. Главный плюс: не надо ничего устанавливать. Открыли сайт написали промпт получили работающее приложение .

Хорош для: быстрых прототипов, обучения, работы с компьютера, на который нельзя устанавливать программы (например, рабочего ноутбука с ограничениями). Минус: платный на сколько-нибудь серьёзном использовании, от $18/мес .

Bolt.new и v0 - «сделай мне красиво»

Эти инструменты заточены на быструю генерацию веб-интерфейсов. Описываете, как должен выглядеть сайт или компонент - получаете готовый код. Bolt.new умеет создавать полноценные приложения с фронтендом и бэкендом прямо в браузере . v0 (от Vercel) специализируется на React-компонентах .

Хороши для: дизайнеров, которым нужно быстро превратить идею в работающий интерфейс. Минусы: ограниченный контроль над результатом, платные тарифы от $20-25/мес .

Что выбрать прямо сейчас?

Если голова пошла кругом от выбора - вот простой алгоритм. Никакой аналитики, чистая практика.

Шаг 1. Заведите аккаунт в Claude или ChatGPT (бесплатно). Это ваш «советчик» на случай, если что-то пойдёт не так.

Шаг 2. Скачайте и установите Cursor с сайта cursor.com . Это ваш основной инструмент для всей книги.

Шаг 3. Зарегистрируйтесь в Replit (бесплатного тарифа хватит) . Это запасной вариант для случаев, когда Cursor покажется слишком сложным, или захочется быстро что-то задеплоить без лишних движений.

Всё. Три инструмента, один час на настройку - и вы вооружены для любой задачи из этой книги.

Зачем нужен «запасной» инструмент? Потому что AI иногда тупит. Бывает, Cursor зацикливается на ошибке и не может вылезти. В таких случаях вы открываете Claude, скармливаете ему проблему и просите подсказать решение. Два AI лучше, чем один, как два мозга лучше, чем один.

Настройка Cursor: без паники

Установка Cursor предельно проста. Заходите на cursor.com, жмёте Download, запускаете установщик. Всё как с любой программой .

При первом запуске Cursor предложит войти в аккаунт. Заведите бесплатный через Google или GitHub. Это нужно, чтобы AI заработал .

Если вы раньше пользовались VS Code, Cursor предложит перенести настройки. Если не пользовались просто пропустите этот шаг.

На этом настройка завершена. В следующей главе мы создадим первый проект, и вы увидите, как это работает на практике. Пока что достаточно просто запустить программу и убедиться, что она открылась.

Вайб-момент

На заре автомобилестроения водителю нужно было самому заводить мотор рукояткой, переключать скорости без синхронизаторов и быть немного механиком. Сегодня вы садитесь в машину и едете. Автоматическая коробка передач, кнопка Start, система помощи при парковке.

С инструментами для вайб-кодинга та же история. Раньше «вести машину» означало копаться в моторе. Теперь, просто знать, куда вы хотите приехать.

Cursor, Claude, Replit - это коробка-автомат. Не надо стыдиться, что вы не умеете переключать передачи вручную. Надо радоваться, что доедете быстрее и с комфортом.

Что мы выяснили в этой главе

1. Инструментов много, но начинать надо с трёх: текстовый AI-помощник (Claude или ChatGPT), AI-редактор кода (Cursor) и облачная песочница (Replit). Этого хватит для 95% задач новичка.

2. Не надо настраивать сложное окружение. Современный вайб-кодинг начинается с открытия сайта или установки одной программы. Старая боль «неделя настройки пять минут кода» ушла в прошлое .

3. Cursor - ваш главный инструмент. Освойте три горячие клавиши (чат, онлайн-редактирование, агент) — и сможете создавать проекты, не прикасаясь к коду руками .

Задание для самостоятельной практики

1. Скачайте и установите Cursor с cursor.com. Запустите, войдите в бесплатный аккаунт. Убедитесь, что программа открылась .

2. Зарегистрируйтесь на claude.ai или chatgpt.com (бесплатный аккаунт). Задайте любой вопрос про код, просто чтобы попробовать. Например: «Объясни, как работает цикл for, как будто мне десять лет».

3. Откройте Replit.com, создайте бесплатный аккаунт. Нажмите Create Repl, выберите любой шаблон и просто посмотрите, как выглядит среда .

4. Цель не создать шедевр, а пощупать инструменты. Чтобы в следующей главе, когда мы пойдём в практику, вы не отвлекались на технические мелочи.

Часть II. УЧИМСЯ ГОВОРИТЬ С AI.

Глава 4. Промпт-инжиниринг для простых смертных.

Почему «сделай мне красиво» не работает

Вайб-кодинг начинается с текста. Вы пишете слова, AI превращает их в код. Звучит магически. Но есть нюанс.

Помните старую сказку про золотую рыбку? Старуха просила корыто - получила. Просила избу - получила. Просила стать царицей - стала. Но когда попросила «быть владычицей морскою», всё рухнуло обратно к разбитому корыту.

Почему? Потому что запрос был неконкретным и несоразмерным.

С AI та же история. Если вы пишете: «Сделай мне сайт для бизнеса», он сделает. Какой-то. Возможно, даже красивый. Но почти наверняка не тот, который вы представляли.

И вот вы сидите, смотрите на результат и думаете: «Ну нет, вайб-кодинг - это ерунда, AI ничего не умеет».

AI умеет. Просто вы говорите с ним на разных языках. Вы на языке образов и желаний. Он на языке инструкций.

Промпт-инжиниринг - это искусство перевода с человеческого на «понятный AI».

И нет, это не rocket science. Сейчас разложим.

Формула хорошего промпта

Представьте, что вы нанимаете фрилансера. Допустим, веб-дизайнера. Вы говорите: «Сделай сайт». Он спрашивает: «Какой?» Вы: «Ну, красивый». Он: «О чём сайт? Какие страницы? Какая целевая аудитория? Какой стиль?»

Вы не сможете ответить и получите либо отказ, либо сайт-заглушку с Lorem Ipsum и стандартным шрифтом.

С AI то же самое. Но есть разница: AI не переспрашивает. Он заполняет пробелы сам. И часто заполняет их ерундой.

Формула хорошего промпта:

Контекст + Роль + Задача + Формат + Ограничения

Разберём по косточкам.

1. Контекст: «Кто я и что происходит»

AI не знает ничего о вас и вашем проекте. Если вы не скажете ему — он додумает. А додумывает он из среднестатистических данных интернета, что часто мимо.

Сравните:

«Сделай калькулятор»

и

«Я владелец пекарни, мне нужен калькулятор для расчёта стоимости тортов. Клиент выбирает размер, начинку и оформление, калькулятор показывает итоговую цену»

Почувствовали разницу? Во втором случае AI понимает не просто «что делать», а «зачем и для кого». Это критически меняет результат.

Что сообщить в контексте:

- Кто вы (новичок, владелец бизнеса, дизайнер).

- Что за проект (сайт-портфолио, бот для сотрудников, игра для ребёнка).

- Кто конечный пользователь.

2. Роль: «Кем ты должен быть»

Это опциональный, но мощный приём. Вы можете сказать AI: «Ты - опытный Python-разработчик» или «Ты - дизайнер интерфейсов». AI подстроит стиль ответа и уровень сложности.

Для вайб-кодинга особенно хорошо работает: «Ты - терпеливый преподаватель, который объясняет код новичкам».

Это снижает шанс, что AI выдаст простыню сложного кода без комментариев.

3. Задача: «Что конкретно сделать»

Главное правило: одна задача - один промпт.

Не «Сделай сайт с каталогом, корзиной и чатом». Разбейте:

Сначала: «Создай главную страницу с шапкой и пятью разделами».

Потом: «Добавь в шапку логотип и меню из трёх пунктов».

Потом: «Сделай раздел "О компании" с текстом и фотографией».

AI, как и человек, лучше справляется с маленькими чёткими задачами, чем с гигантским расплывчатым заданием.

4. Формат: «В каком виде выдать ответ»

Не стесняйтесь указывать формат. AI может выдать просто код, может код с пояснениями, может пошаговую инструкцию.

Примеры:

«Выдай HTML-код целиком, без пояснений»

«Объясни каждую строчку кода комментарием»

«Разбей ответ на шаги: сначала создай структуру, потом стили, потом логику»

Без указания формата AI выберет сам. Иногда угадает, иногда нет.

5. Ограничения: «Что важно и чего нельзя»

Это простая, но часто забываемая часть. AI нужно сказать, что для вас приоритетно, а чего вы точно не хотите.

Примеры ограничений:

«Используй только чистый HTML и CSS, без фреймворков»

«Кнопка должна быть зелёной»

«Сайт должен открываться на мобильных устройствах»

«Не используй внешние библиотеки»

«Код должен работать в браузере без сервера»

Ограничения сужают поле фантазии AI и приближают результат к вашей картинке в голове.

Собираем всё вместе: примеры

Давайте посмотрим, как формула работает на практике. Возьмём одну и ту же задачу и прокачаем её от «новичкового» промпта до «профессионального».

Уровень «Новичок» (плохо):

«Сделай таймер»

Результат: AI сделает какой-то таймер. Возможно, консольный. Возможно, на Python. Возможно, без кнопок. Что вы хотели - неизвестно.

Уровень «Средний» (уже неплохо):

«Сделай таймер обратного отсчёта на веб-странице. Чтобы были кнопки Старт, Пауза и Сброс. Таймер показывает минуты и секунды»

Результат: рабочий таймер в браузере. Но дизайн стандартный, цвет серый, шрифт системный. Работает, но скучно.

Уровень «Профи» (отлично):

«Я ведущий онлайн-тренировок. Мне нужен таймер обратного отсчёта для сайта — буду проецировать на экран во время занятий.

Контекст: тренировки групповые, люди смотрят на экран с расстояния 3-5 метров.

Задача: Создай веб-страницу с таймером обратного отсчёта. Таймер показывает минуты и секунды крупными цифрами. Кнопки: Старт, Пауза, Сброс. При достижении нуля таймер меняет цвет фона на красный и издаёт звуковой сигнал (без внешних файлов, через Web Audio API).

Формат: Один HTML-файл, всё в одном и разметка, и стили, и скрипт.

Ограничения: Цифры должны быть видны с пяти метров (крупный шрифт, контрастные цвета). Кнопки крупные, чтобы нажимать на бегу. По умолчанию 60 секунд отсчёта. Не используй библиотеки, только нативные технологии.»

Конец ознакомительного фрагмента.

Текст предоставлен ООО «Литрес».

Прочитайте эту книгу целиком, купив полную легальную версию на Литрес.

Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.