Доводим прототип до ума

У тебя уже есть первый прототип. Теперь доводим его до ума: добавляем механики и внедряем их так, чтобы ИИ не сломал то, что уже работает.

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

01 Получи идеи механик

Не выдумывай механики с нуля — пусть нейросеть продиагностирует прототип: где он рассказывает вместо «прожить» и что можно добавить. Отдай ей HTML-файл прототипа и этот промпт:

Промпт — забирай:

Дам HTML-прототип электронного курса — предложи механики, которые можно вписать. 1. ДИАГНОЗ. Где курс РАССКАЗЫВАЕТ о навыке вместо того, чтобы дать его ПРОЖИТЬ? Назови конкретные экраны. 2. ИДЕИ. Предложи 3–5 механик, где пользователь проживает концепцию, а не читает про неё (сам попадает в ловушку, ощущает соблазн, ловит себя на ошибке). Не предлагай то, что уже есть. Для каждой укажи: название, чему учит, к какому экрану прицепить, как сделать в чистом HTML/JS (1–3 предложения), сложность (низкая/средняя/высокая), чем лучше текущего варианта на этом экране. ОГРАНИЧЕНИЯ: — Механики вытекают из ТЕМЫ, а не универсальная геймификация сбоку. Проверка: «Эта механика заставляет именно ЭТОТ навык проявиться?» — Конкретно: не «добавьте интерактива», а «на экране X замени Y на Z, потому что…». — Правки в код не вноси и не начинай переписывать сразу код. Сначала идеи — потом ты получаешь моё согласие, и только потом вносишь правки в код.

В ответ получишь список идей с привязкой к экранам и сложностью. Это не приказ: нейросеть только предлагает. Что подходит твоей теме — выбираешь и решаешь ты.

02 Внедряй, не ломая

Идеи есть — внедряем. И вот тут важное: когда проект растёт, нейросеть начинает ломать то, что уже работало, — забывает переменные, переписывает рабочие куски. Шесть приёмов, чтобы этого не было. Фразы в рамках — забирай и вставляй в запрос.

1. Ванильный стек

ИИ любит сложные фреймворки (React, Vue, Tailwind) — для простого курса и финальной SCORM-сборки это лишние проблемы. Сразу задай рамку.

в ТЗ / запросИспользуй СТРОГО JS, HTML и чистый CSS. Никаких фреймворков и Tailwind.

2. Микрошаги и откат

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

новый чатВот рабочий код. Добавляем функцию X.

3. Запрет на переписывание

ИИ любит «заодно» переписать то, о чём не просили. При каждой правке прямо запрещай трогать остальное.

к каждой правкеВАЖНО: не меняй предыдущую логику. Измени ТОЛЬКО функцию X и выдай только этот кусок кода.

4. Сброс «ИИ-усталости»

Если ИИ начал забывать переменные и путаться — это перегруз памяти диалога. Лечится новым чатом: загружаешь файлы и начинаешь заново с рабочего кода.

новый чатВот мой рабочий код. Ничего не ломай. Добавляем функцию Y.

5. Требуй комментарии

Тогда мелочь сможешь править сам, не тратя лимиты ИИ: открыл код, нашёл по комментарию /* Отступы кнопок */ и поменял 10px на 20px.

в запросПиши подробные комментарии на русском.

6. Правильный дебаггинг

Не пиши «код не работает» — ИИ будет гадать. Нажми F12 в браузере, открой вкладку Console, скопируй красный текст ошибки и отдай его нейросети. По ошибке она обычно сразу видит, в чём дело.

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

Итог недели

К концу недели у тебя — итоговый прототип, его и сдаёшь в домашке.

Дальше по курсу: на 4 неделе наполняешь курс настоящим контентом (пока он может стоять на «рыбьем тексте»), на 5 — занимаешься оформлением и CSS.

Готово — к неделе 3