Написание первого приложения

В этом гайде мы за 5 минут напишем рабочее веб-приложение (список задач с сохранением) полностью с помощью промптов.

1. Запуск и создание папки

Откройте Матрёна Coder. Нажмите `File → Open Folder` и создайте пустую папку на рабочем столе — например, `ai-todo-app`. Изначально проект пуст.

2. Использование панели агента

Вызовите боковую панель ИИ-агента сочетанием `Cmd/Ctrl + J` (или через иконку чата слева).
Напишите в поле ввода свой первый промпт:

Создай простое веб-приложение ToDo list. Используй чистый HTML, CSS и Vanilla JS. Задачи должны сохраняться в localStorage браузера. Создай три файла: index.html, styles.css и app.js. Сделай дизайн минималистичным и современным.

3. Автономный процесс (Agent Mode)

В отличие от обычного чата, где модель просто плюет код в окно переписки, Coder переходит в Agent Mode:

  1. Агент сам создает файлы index.html, styles.css, и app.js в вашей папке.
  2. Вы видите, как код "печатается" прямо в редакторе (как будто работает живой программист-напарник).
  3. Агент автоматически линкует стили и скрипты в HTML-файле.

4. Проверка и принятие изменений

После того как генерация завершена (обычно 10-20 секунд), файлы в боковом меню (Explorer) подсвечиваются зеленым цветом — это означает, что ИИ внес в них диффы (изменения).

Режим дифа: Если вы откроете файл, вы увидите предложенный код с зеленой подсветкой. Нажмите Accept All (Принять все) на панели агента, чтобы сохранить изменения.

5. Запуск (Live Preview)

Как посмотреть результат?

  1. Кликните правой кнопкой мыши по файлу index.html.
  2. Выберите Open with Live Server (эта функция встроена в Coder).
  3. В браузере откроется окно, и вы увидите созданный ToDo list. Попробуйте добавить пару задач и обновить страницу — они останутся на месте, так как работают через `localStorage`.

6. Итерация (Рефакторинг)

Допустим, нам не нравится цвет кнопки добавления задачи. Не нужно искать CSS-класс вручную.

Снова откройте панель агента и отправьте новый промпт:

Измени цвет кнопки добавления задачи на оранжевый. И добавь кнопку "Очистить всё" внизу списка.

Агент самостоятельно найдет нужные файлы. Он обновит styles.css для цвета кнопки, добавит HTML в index.html и привяжет логику очистки в app.js. Вам останется только нажать Accept, и Live Server обновит страницу в браузере.

Итог

Вы только что создали полноценно работающее микроприложение из трех файлов, не написав самостоятельно ни строчки кода. Это и есть парадигма "Prompt → Code".

Подключение LLM Следующая: Шаблоны (Scaffolds)