ЛЕКЦИЯ 8
ОБЗОР ИНСТРУМЕНТОВ И ПРИНЦИПЫ РАБОТЫ С AI-АГЕНТОМ, СВЯЗЬ С ДИЗАЙНОМ
важные таймкоды внизу страницу
Андрей Карпаты
“...вы полностью отдаетесь вайбу… и забываете, что код вообще существует”
Ловушка быстрого старта
Как выйти из этой ситуации?
Реализацию можно поручить агенту. Цель, ограничения и критерии результата выбираете вы. Крайне важно проверять данные, доступы, деньги
Веб-приложение. Оно будет работать в браузере: список задач, дневник, карта иди другой интерактивный сервис.
PWA - Progressive Web App: веб-приложение, которое можно установить, наапример, на устройство. Работа без интернета возможно, если ее специально реализовать
Для курса достаточно браузерной версии, PWA - возможное продолжение
PWA - Progressive Web App: веб-приложение, которое можно установить, наапример, на устройство. Работа без интернета возможно, если ее специально реализовать
Для курса достаточно браузерной версии, PWA - возможное продолжение
Фронтенд и бэкенд
В ИДЗ1 бэкэнд может не понадобиться: данные можно хранить в браузере или в локальном файле. Ключи и пароли на фронтенд класть нельзя: его код доступен любому пользователю
React - JavaScript-библиотека для создания интерфейсов. В этом курсе работаем на React.
Компонент - часть интерфейса со своим внешним видом и поведением
Компонент - часть интерфейса со своим внешним видом и поведением
лучше использовать готовые библиотеки, т.к. ИИ-агенты часто могут создавать свою библиотеку
Harness - некий набор инструментов, который работает вокруг модели и позволяет использовать различные инструменты (открывать браузер, открывать терминал, устанавливать модули).
Может быть локальным и облачным, локальный агент может использовать облачную модель
LLM генерирует ответ. Доступ к файлам, запуску и проверке дает harness
Может быть локальным и облачным, локальный агент может использовать облачную модель
LLM генерирует ответ. Доступ к файлам, запуску и проверке дает harness
Выбор модели сильно влияет на результат
Где работает агент и где ваш проект?
Какого агента выбрать?
Если начинаете с бесплатного пути:
DeepSeek Harness с триалкой на гмейл почту + бесплатная модель OpenRouter. Яндекс Облако - возможная альтернатива с 6 ноября, пока не подтверждено
Если инструменты оплачены:
DeepSeek Harness с триалкой на гмейл почту + бесплатная модель OpenRouter. Яндекс Облако - возможная альтернатива с 6 ноября, пока не подтверждено
Если инструменты оплачены:
- Claude: открыть Claude Code, выбрать папку проекта
- ChatGPT: открыть Codex для работы с локальным проектов
- Kimi: открыть Kimi Code и папку проекта
Агент: “ No JavaScript runtime … is installed” - не хватает среды выполнения
- Подготовить Node.js для JavaScript / react или другую среду (например Python для Python-проекта)
- Попросить: “Запусти проект и скажи, какой адрес открыть”
- Открыть адрес вроде localhost:5173 и проверить приложение
Вы задаете цель, согласуете решения и проверяет результат. Агент помогает планировать и выполнять
После правки -снова запуск и проверка
После правки -снова запуск и проверка
- Режим планирования: агент не трогает проект - рассуждает, задает вопросы, показывает план
- Вы правите план и только потом говорите “делай”
- Запрос: “Хочу [что делаем] для [кого]. Не пиши код. Задай вопросы, предложи варианты и составь PRD”
- Замените поля в [скобках] своими словами
- PRD сохраняет договоренности. Для крупной доработки - отдельный план и ссылка из PRD
Как включить режим планирования в агенте?
Долгая работа в одной сессии проекта - плохо, дрейф, автосжатие
Перед новой сессией сохраните:
Перед новой сессией сохраните:
- что уже работает
- какие решения согласованы
- что делаем следующим шагов
- какие вопросы остаются открытыми
- второй чат для глупых вопросов: рабочий не засоряется, а спрашивать не стыдно
- скриншот + “что тут происходит?” - когда не можешь даже сформулировать вопрос
- “сделай сам” - только в папке проекта и с пониманием, куда даешь доступ
Если не включить режим планирования, агент может сделать много состояний, которые не нужны, без дизайн-системы
Прежде чем рисовать: какой один сценарий нужен и какие состояния и компоненты для него нужны, какие есть варианты решений
Прежде чем рисовать: какой один сценарий нужен и какие состояния и компоненты для него нужны, какие есть варианты решений
Передаем концепт скриншотом
Не требует связок с MCP, фигмой
Откуда взять картинку:
Запрос: “Это образец стиля для [ваш проект]. Сопоставь с PRD, опиши целевой стиль в DESIGN.md. Функции с картинки пока не переноси. Код пока не меняй”
Не требует связок с MCP, фигмой
Откуда взять картинку:
- набросать от руки и сфотографировать, сгенерить
- собрать в фигме
- найти референс
Запрос: “Это образец стиля для [ваш проект]. Сопоставь с PRD, опиши целевой стиль в DESIGN.md. Функции с картинки пока не переноси. Код пока не меняй”
Важный таймкоды
Как тебе конспект?
Расскажи, чего не хватило. От похлавы мы тоже не откажемся))
ПРЕДЫДУЩАЯ
ЛЕКЦИЯ 7. Дизайн-документация ч. 3
СЛЕДУЮЩАЯ
ЛЕКЦИЯ 9. АРХИТЕКТУРА ПО И РАБОТА С ДАННЫМИ В PRD
