Соберите рабочее веб-приложение с нуля за один промпт: сравнение Codex и Claude Code
За 10 минут получите два готовых прототипа одного и того же приложения и выберите инструмент, который справился лучше
- 1.Сформулируйте идею приложения в одном предложении. Например: «трекер привычек с календарём и прогресс-баром». Запишите её - один и тот же промпт вы отправите в оба инструмента для честного сравнения.
Выберите идею попроще: список дел, конвертер валют, мини-игра. Чем конкретнее - тем лучше результат.
- 2.Установите Claude Code, если он ещё не установлен. Откройте терминал и выполните команду установки. После установки запустите claude в папке проекта и авторизуйтесь через браузер по ссылке, которая появится в терминале.
Claude Code работает на macOS, Linux и Windows (через WSL). Нужен Node.js версии 18+. Если сервис недоступен в вашем регионе - используйте VPN на этапе авторизации.
Claude Code ↗Об инструменте - 3.Создайте пустую папку проекта, откройте в ней терминал и запустите Claude Code командой claude. Когда появится интерактивная строка ввода, вставьте промпт ниже, заменив [YOUR APP IDEA] на вашу идею из шага 1.
Claude Code сам создаст файлы, установит зависимости и запустит dev-сервер. Следите за терминалом - он может спрашивать разрешения на выполнение команд, отвечайте y (yes).
Claude Code ↗Об инструментеПромптBuild a complete, working web app: [YOUR APP IDEA]. Use React with Vite. Create all necessary components, styles, and logic. The app should run with `npm install && npm run dev` and work in the browser immediately. Include a clean, modern UI with Tailwind CSS. Make sure there are no errors.
Что делает этот промптПромпт на английском просит Claude Code создать полное рабочее веб-приложение по вашей идее на React + Vite + Tailwind CSS, чтобы оно запускалось командой npm install && npm run dev. Замените [YOUR APP IDEA] на описание вашего приложения. - 4.Дождитесь, пока Claude Code закончит генерацию файлов и установки. Откройте браузер по адресу http://localhost:5173 - проверьте, работает ли приложение. Сделайте скриншот результата и сохраните. Закройте Claude Code (Ctrl+C).
Если dev-сервер не запустился автоматически, выполните npm run dev вручную. Запомните, сколько правок пришлось вносить руками - это критерий для сравнения.
Claude Code ↗Об инструменте - 5.Теперь установите OpenAI Codex CLI. В терминале выполните команду npm install -g @openai/codex. После установки создайте новую пустую папку для второго прототипа, перейдите в неё и запустите codex. Авторизуйтесь через OpenAI-аккаунт по ссылке из терминала.
Codex CLI требует Node.js 18+. Для авторизации нужен аккаунт OpenAI. Если сервис недоступен в вашем регионе - используйте VPN.
OpenAI Codex CLI ↗ - 6.В интерфейсе Codex вставьте ТОТ ЖЕ промпт, что и для Claude Code (из шага 3), с той же заменой [YOUR APP IDEA]. Дождитесь завершения генерации, запустите npm install && npm run dev и откройте http://localhost:5173.
Codex может создавать файлы по-другому - иногда через «sandbox» режим. Если он предлагает применить изменения - соглашайтесь (approve).
OpenAI Codex CLI ↗ПромптBuild a complete, working web app: [YOUR APP IDEA]. Use React with Vite. Create all necessary components, styles, and logic. The app should run with `npm install && npm run dev` and work in the browser immediately. Include a clean, modern UI with Tailwind CSS. Make sure there are no errors.
Что делает этот промптТот же промпт на английском: создать полное рабочее веб-приложение на React + Vite + Tailwind CSS. Замените [YOUR APP IDEA] на ту же идею, что в шаге 3 - это важно для честного сравнения. - 7.Сравните два прототипа по трём критериям: 1) запустилось ли без ручных правок, 2) насколько аккуратный интерфейс, 3) насколько логика приложения соответствует вашей идее. Запишите победителя по каждому пункту - это и будет ваш выбор инструмента для будущих проектов.
Сохраните обе папки проектов - они могут пригодиться как шаблоны. Если один из инструментов не запустил приложение вовсе, это тоже важный результат сравнения.
- подпискаClaude CodeВходит в подписку Claude Pro за $20/мес или Claude Max за $100/мес; есть лимиты на количество запросов в зависимости от тарифа.
- подпискаOpenAI Codex CLIТребует подписку ChatGPT Plus ($20/мес) или доступ через API с оплатой за использование; точные лимиты зависят от тарифа - см. страницу тарифов OpenAI.
- бесплатноNode.js + npmСреда выполнения и пакетный менеджер - бесплатно, устанавливается один раз на компьютер.
Почему сегодня
ИИ-сервисы быстро меняются - интерфейсы и бесплатные лимиты могут отличаться от описанных.