Как устроен «Первый экран»

Что ты получаешь

Не курс с лекциями, а систему. Это папка с готовыми файлами: в них записано, как вести человека от идеи до работающего экрана. Ты открываешь её в ИИ, говоришь «начинай», и дальше ИИ задаёт вопросы, объясняет каждое решение и не даёт перескочить вперёд.

Твоя работа: отвечать на вопросы и нажимать кнопки. Код писать не придётся. Весь путь занимает день-два.

Архив с системой прикреплён к следующему уроку, в материалах. Он открывается после покупки.

Гайд: как подготовить Windows или Mac к сборке

Эта инструкция поможет установить ИИ-помощника и подготовить компьютер для сборки первого экрана. Выбери один вариант: Codex или Claude Code. Если ты уже работаешь в Cursor, можешь продолжить в нём.

Что понадобится: компьютер, интернет и доступ к выбранному ИИ-сервису. Доступность, условия подписки и лимиты зависят от страны и тарифа; проверь их до начала. Для первого экрана с тестовыми данными сервер, домен и база обычно не нужны.

1. Выбери и установи ИИ-помощника

Вариант А. Codex

1. Открой официальную страницу загрузки ChatGPT и установи приложение для Windows или macOS. Если приложение уже установлено, повторно устанавливать его не нужно.
2. Открой приложение и войди в свой аккаунт ChatGPT. Переключись в Codex и начни новый чат.
3. Распакуй архив курса. При выборе проекта или рабочей папки укажи вложенную папку «Первый-экран». В ней должны лежать файл 00_НАЧНИ_ОТСЮДА.md и папка шаги.
4. В чате напиши: «Прочитай 00_НАЧНИ_ОТСЮДА.md и начинай». Если Codex спрашивает доступ к папке, проверь путь и разреши работу с этой папкой.

Подробнее: официальная инструкция OpenAI по приложению.

Вариант Б. Claude Code

1. Открой официальную инструкцию Claude Code для компьютера и скачай Claude для Windows или macOS. На Mac открой установщик и перенеси приложение в «Программы»; на Windows запусти установщик и следуй подсказкам.
2. Запусти Claude и войди в аккаунт. Открой вкладку Code. Доступ к Claude Code зависит от аккаунта, тарифа и страны; проверь условия в своём аккаунте.
3. Начни новую сессию и выбери локальную папку проекта. Укажи вложенную папку «Первый-экран» из распакованного архива: внутри должны быть 00_НАЧНИ_ОТСЮДА.md и папка шаги.
4. Напиши: «Прочитай 00_НАЧНИ_ОТСЮДА.md и начинай». Если Claude попросит доступ к папке или разрешение на действие, проверь его перед подтверждением.

Если вкладка Code недоступна или возникла ошибка входа, проверь условия и подсказки Anthropic.

Уже пользуешься Cursor? Открой в нём ту же папку через File → Open Folder, открой Agent и отправь ту же фразу. Другой редактор ставить не требуется.

Как проверить, что всё готово

Попроси помощника: «Покажи, какие файлы курса ты видишь в этой папке, и прочитай 00_НАЧНИ_ОТСЮДА.md». Если он не находит файл, проверь, что выбрана именно вложенная папка «Первый-экран», а не папка уровнем выше.

2. Установи Node.js, если он нужен для твоего экрана

Node.js запускает инструменты для сборки веб-страницы; вместе с ним ставится npm, который загружает нужные проекту пакеты. Для обычного интервью Node.js не требуется. Перед сборкой попроси агента проверить, нужен ли он выбранному проекту.

1. Открой официальную страницу Node.js и выбери LTS — стабильную поддерживаемую версию. Скачай установщик для своей системы и архитектуры.
2. Windows: запусти установщик .msi, проходи шаги с настройками по умолчанию. Mac: открой установщик .pkg и следуй подсказкам. Если установщик просит пароль компьютера, введи его только в системном окне, не в чат с ИИ.
3. Полностью закрой и заново открой Codex или Claude, чтобы приложение увидело установленные команды.
4. Открой терминал на компьютере: Windows — нажми Пуск, введи «Командная строка» и открой её; Mac — открой Spotlight (Cmd+Пробел), введи «Терминал» и нажми Enter. Введи по очереди и нажми Enter после каждой команды:

node --version
npm --version

Если обе команды выводят номера версий — Node.js и npm доступны. Например, номер может выглядеть как v24.x.x; точные цифры будут зависеть от версии. Если на Windows PowerShell сообщает, что запуск скриптов запрещён, проверь npm командой npm.cmd --version или открой командную строку Windows и повтори проверку. Менять системную политику безопасности ради этого не нужно.

3. Как появятся Vue и Vite

Vue помогает собрать интерфейс, Vite запускает и собирает его. Они нужны, только если агент выбрал их для твоего экрана. Отдельно устанавливать их на весь компьютер не надо: агент создаст проект или предложит добавить пакеты в его папку.

Попроси агента:

Проверь, доступны ли Node.js и npm. Если для первого экрана нужны Vue и Vite, объясни, какие файлы и команды ты предлагаешь, сначала проверь, есть ли уже проект и package.json, и дождись моего подтверждения. Не удаляй и не перезаписывай файлы курса.

Если проект уже создан и в его папке есть package.json, агент может предложить установить зависимости командой npm install, а затем запустить экран командой, указанной в проекте, часто npm run dev. Выполняй команды в папке проекта, которую назовёт агент. Если package.json ещё нет, сначала попроси агента создать проект в отдельной подпапке, не стирая файлы системы и твои документы.

После запуска в терминале появится локальный адрес, например http://localhost:5173/. Открой адрес, который показал твой терминал: порт может отличаться. Терминал должен оставаться открытым; чтобы остановить запущенный экран, нажми в нём Ctrl+C.

Если что-то не получилось

• Команда не найдена. Закрой и заново открой приложение и терминал после установки. Если не помогло, проверь, завершилась ли установка Node.js, и покажи агенту текст ошибки.
• Не знаешь, куда вводить команду. Открой командную строку Windows или Терминал на Mac и попроси агента назвать нужную папку до запуска команды. Можно также попросить агента выполнить команду, если ему разрешена работа с терминалом.
• Агент не видит файлы. Проверь в настройках чата или проекта, что выбрана папка «Первый-экран», а не её родительская папка.
• Ошибка при установке пакетов или страница не открывается. Скопируй сообщение об ошибке и адрес, который показал терминал, и попроси агента объяснить причину и предложить одну проверку. Не отправляй в чат пароли, ключи и токены.
• ИИ предлагает установить Docker или базу. Уточни, действительно ли они нужны для первого экрана с тестовыми данными. Для будущего полного продукта они могут понадобиться позже.

Справка: Codex, Claude Code, Node.js, Vite.

Как пользоваться пакетом

1. Создай отдельную папку для проекта, например «мой-проект», и распакуй в неё архив.
2. Внутри появится папка «Первый-экран». Выбери именно её как рабочую папку в Codex, Claude Code или ИИ-редакторе: в ней лежит файл 00_НАЧНИ_ОТСЮДА.md и папки «шаги», «шаблоны», «справочники».
3. Если начинаешь в обычном чате, загрузи в него файлы из этих папок. Для сборки понадобится ИИ-агент с доступом к проекту либо ручное выполнение инструкций и сохранение файлов.
4. Напиши: «Прочитай 00_НАЧНИ_ОТСЮДА.md и начинай.»

Дальше ИИ ведёт тебя по шагам. Если используешь обычный чат, он попросит тебя передавать файлы и выполнять необходимые действия самостоятельно.

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

Шесть шагов

После каждого шага у тебя остаётся документ. Его надо сохранить в файл: тогда ничего не потеряется.

Шаг	Что происходит	Что остаётся на руках
1	Интервью: вытаскиваем идею из головы	karkas.md
2	Инструменты, окружение, доступы	stack.md
3	Правила и память для агента	agent-rules.md
4	Вырезаем один экран	screen-spec.md
5	Сборка экрана	работающий экран
6	Что делать, когда ИИ делает не то	умение починить, а не бросить

Если чат оборвался

Это случается, и бояться тут нечего. Открываешь новый чат, говоришь, на каком шаге остановился, и прикладываешь сохранённые файлы. ИИ прочитает их, перескажет своими словами, чтобы ты убедился, что он в курсе, и продолжит с нужного места. Начинать сначала не придётся.

Именно поэтому файлы надо сохранять после каждого шага, а не «потом».

Три правила

Один вопрос за раз. ИИ не должен вываливать на тебя список. Если вываливает, скажи: по одному.

Технические решения принимает ИИ. Ты не выбираешь между технологиями и не гуглишь «с чего начать». Он выбирает, берёт ответственность на себя и объясняет, зачем это в твоём продукте.

Не забегай вперёд. Захочется спросить «а на чём это делать» посреди интервью. Этот вопрос будет шагом позже, и ответ окажется точнее, потому что к тому моменту система будет знать твой проект. Порядок шагов и есть система.

Чего здесь не будет

Кнопки «сделай всё за меня» не существует, и готового бизнеса в конце тоже нет. Будет один работающий экран твоего продукта: свой, открытый в браузере, собранный тобой.

Дальше урок про первый шаг.