1. Введение и настройка
Добро пожаловать
Привет! Добро пожаловать на Coding Jam. В течение следующих 75 минут вы создадите настоящее, работающее веб-приложение с искусственным интеллектом.
Посмотреть сайт можно здесь : Сайт Codeing Jam
Что вы построите
Веб-приложение на основе искусственного интеллекта, созданное по заданию этой недели . Работает в вашем браузере. Использует Google Gemini AI . Полностью станет вашим к концу занятия.
Установите антигравитацию
Antigravity — это ИИ-помощник, которого мы будем использовать для всего. Это приложение, которое устанавливается на ваш компьютер.
Шаг 1 — Скачать
👉 Перейдите по ссылке https://antigravity.google/download в вашем браузере.
👉 Нажмите кнопку загрузки Antigravity 2.0 для вашей операционной системы (Mac, Windows или Linux).
👉 Запустите загруженный установщик. Настройки по умолчанию подойдут — следуйте им.
Шаг 2 — Запуск и вход в систему
👉 Запустите Antigravity из папки «Приложения» (Mac) или меню «Пуск» (Windows).
👉 При появлении запроса нажмите «Войти» .
👉 Используйте свой аккаунт Google .
Шаг 3 — Проверьте экран приветствия
Вы должны увидеть приветственный экран Antigravity с тремя большими кнопками :
- Открыть папку — открывает существующую папку в качестве рабочей области.
- Откройте Agent Manager — это переведет вас на панель управления агента (именно здесь будет выполняться большая часть нашей работы).
- Клонирование репозитория — загружает проект с GitHub (мы будем использовать это в разделе 3A).
Больше документации можно найти по адресу https://antigravity.google/, если вы захотите углубиться в тему.
✅ Контрольная точка: Antigravity установлен, вы вошли в систему, и видите приветственный экран с тремя кнопками.
2. Установите необходимые инструменты (с помощью антигравитации)
Для работы Antigravity на вашем компьютере необходимы два вспомогательных инструмента:
Инструмент | Что это такое (простым языком) |
ув | Управляет Python — языком программирования, используемым в бэкэнде вашего приложения. |
git | Загружает файлы проекта из интернета (Antigravity использует это для клонирования). |
Вам не придётся самостоятельно вводить команды установки. Вы спросите Antigravity на английском языке; остальное она сделает сама.
Шаг 1 — Создайте временное рабочее пространство
Для работы чата в Antigravity необходимо открыть папку. (Нет папки = нет чата.)
👉 На экране приветствия нажмите «Открыть папку» .
👉 Создайте или выберите любую пустую папку. Рекомендуется: создать новую папку с названием coding-jam-setup в удобном месте (например, на рабочем столе).
👉 Нажмите «Открыть» (или «Выбрать папку »).
В окне «Диспетчер агентов» будет выбрано ваше новое (пустое) рабочее пространство.
Шаг 2 — Попросите компанию Antigravity проверить и установить инструменты.
👉 Нажмите Cmd+L (Mac) или Ctrl+L (Win/Linux), чтобы сфокусироваться на поле ввода чата.
👉 Убедитесь, что в нижней части окна выбора модели отображается Gemini 3 Flash (по умолчанию — для этого подходит).
📝 Самый простой запрос — вставьте это в чат:
Install uv and git on my computer if they're not already there.
Don't install Node.js. Ask permission before each install command.
📝 Более подробная версия (по желанию):
Check whether uv and git are installed by running their --version commands.
For any tool that's missing, install it using the best method for my OS:
- Mac: prefer `brew install` (install Homebrew first if missing)
- Windows: prefer `winget install`
- Linux: prefer `apt install` or `dnf install`
Ask permission before each install command.
Do NOT install Node.js — we'll install it later only if needed.
When done, give me a summary of what's installed.
👉 Нажмите Enter для отправки.
🤖 Наблюдайте за работой агента, нажимайте «Разрешить» во всплывающих окнах.
Шаг 3 — Ознакомьтесь с кратким содержанием.
Когда агент закончит работу, вы увидите что-то подобное:
✅ Setup complete:
- uv 0.4.18 ✅ (installed)
- git 2.42.0 ✅ (already had it)
- Node.js: skipped (will install later if needed)
Если что-то пойдёт не так
✅ Контрольная точка: Агент подтверждает установку uv и git. Общее время: ~3-5 мин (или ~7 мин, если на Mac сначала требуется установка Homebrew).
Клонируйте свой проект
Шаг 1 — Выберите проект на эту неделю
Coding Jam — это 8-недельная программа, в рамках которой каждую неделю предлагается новый мини-проект. Ваш куратор сообщит вам, на какой неделе мы работаем сегодня. Найдите соответствующую строку и скопируйте URL-адрес.
Неделя | Проект | URL репозитория |
1 | Примерка прически с помощью ИИ | |
2 | Генератор аватаров с искусственным интеллектом | |
3 | Мой особенный годовой календарь | |
4 | От холодильника до рецепта | |
5 | Банка настроения ИИ | |
6 | Портфолио на одной странице | |
7 | Корректор резюме | |
8 | Чат с персонажами, управляемыми ИИ. | |
Шаг 2 — Клонирование с помощью антигравитации
Нам нужно вернуться на стартовый экран, чтобы использовать кнопку «Клонировать репозиторий».
👉 В Antigravity клонируйте проект по вашему выбору. Пример клонирования за первую неделю, но вам нужно указать правильный репозиторий.
📝 Справочная информация
Git clone ⚠️ PASTE_YOUR_PROJECT and save to my local folder: ⚠️ PASTE_YOUR_LOCATION
Шаг 3 — Осмотр объекта
Посмотрите список файлов. Вы должны увидеть:
Файл / Папка | Что это такое |
BRIEF.md | Идея продукта — что мы создаём, простыми словами. |
ссылка/ | Папка с рабочим примером приложения. Искусственный интеллект будет считывать его при написании вашего кода , чтобы ваше приложение соответствовало заданным шаблонам. |
.gitignore | Список файлов, которые Git должен игнорировать (технически — игнорировать). |
👉 Нажмите
Откройте файл BRIEF.md , и вот идея проекта.
✅ Контрольная точка: Вы клонировали проект, открыли его как рабочую область и прочитали файл BRIEF.md.
3. Установите навыки работы в мастерской.
«Навык» — это набор инструкций, хранящихся на GitHub, которые вы можете передать своему ИИ.
Шаг 1 — Попросите Антигравитацию установить навыки.
📝 Вставьте этот запрос в чат:
Please install the workshop skills into this workspace's .agent/skills/
folder. Run these two git clones from the project root:
1. git clone https://github.com/gca-americas/skills-garden .agent/skills/skills-garden
2. git clone https://github.com/google-gemini/gemini-skills .agent/skills/gemini-skills
When Antigravity asks permission to run each command, I'll click Allow.
When done, list the skills that are now available in this workspace.
Шаг 2 — Нажмите «Разрешить» во всех двух всплывающих окнах.
🤖 Вам бы следовало увидеть что-то вроде этого
I'll create the .agent/skills/ folder and clone both repos into it.
Running: git clone https://github.com/gca-americas/skills-garden .agent/skills/skills-garden
Разрешите любые действия, если агент запросит их.
👉 Проверьте список файлов. Теперь вы должны увидеть новую папку .agent/ . Щелкните по ней, чтобы развернуть, и убедитесь, что в этой папке находится несколько навыков, например, skills-garden и gemini-skills .
Что делает каждый навык (для справки, никаких действий не требуется)
Навык | Что это делает |
| Пишет документ по дизайну продукта. |
| Пишет документ по UX-дизайну. |
| Составляет проектную документацию (включая раздел о стратегии тестирования). |
| Пишет тесты, запускает их, автоматически исправляет ошибки (максимум 3 попытки). |
| Официальный навык Google — как правильно использовать API Gemini. |
| Более простой вариант резервного копирования на случай недоступности официального навыка. |
| Ссылки на визуальный стиль |
✅ Контрольная точка: В списке файлов отображается новая папка .agent/skills/ содержащая папки skills-garden/ и gemini-skills/ .
4. Обзор технических характеристик
Spec Talk — это двухминутная беседа, в ходе которой вы рассказываете ИИ, что хотите создать. Никакого кода, никакой документации, ничего ещё не создано. Мы просто обсуждаем это .
Единственный необходимый вопрос
Самое важное, что должен знать ИИ:
"Что входит, что выходит?"
🎯 МОДЕЛЬ: Gemini 3 Flash (по умолчанию) — простые вопросы и ответы.
📝 Вставьте это:
Here's what's in @BRIEF.md. Before we lock the spec, ask me 3 short
questions to refine it:
1. What's the one input I want the user to provide?
2. What's the magical moment for the user?
3. What are we deliberately NOT building (to keep scope tight)?
DO NOT generate any plans, docs, or code yet. Just ask me the questions
and wait for my answers.
DO NOT NEED TO WRITE implementation plan.
🤖 Пообщайтесь с ИИ и уточните свой план
Пока не создавайте документы.
В конце этапа Spec Talk агент НЕ должен был создавать никаких файлов. Если вы видите, что появляются файлы product.md или другие новые файлы, вы можете сказать агенту: «Стоп — удалите все только что созданные документы. Мы все еще находимся на этапе Spec Talk».
Советы
✅ Контрольная точка: Вы провели короткий разговор с Antigravity о вашей идее продукта, и система понимает входные и выходные данные. Файлы еще не сгенерированы.
5. Создайте 3 проектных документа.
Теперь ИИ составляет три плана на бумаге , прежде чем приступить к написанию кода. Мы же делаем все три плана в рамках одного задания, последовательно используя три навыка проектирования документации.
Три врача
Файл | Что в нём содержится? | Использованный навык |
продукт.мд | Кто пользователь, какую проблему мы решаем, какие функции нам нужны? | |
ui.md | Как выглядят экраны, цвета, шрифты, расположение элементов. | |
инженерия.мд | Технологический стек, файловая структура, а также раздел стратегии тестирования. | |
Шаг 1 — Создайте все три документа одновременно.
🤖 Переключитесь на Gemini 3.1 Pro с функцией Low Thinking (рекомендуется)
📝 Вставьте это — один запрос выполнит все три действия:
Apply all three design-doc skills in this order:
1. pm-design-doc from .agent/skills/skills-garden/design-doc-skills/pm-design-doc/
→ Generates product.md
2. ux-design-doc from .agent/skills/skills-garden/design-doc-skills/ux-design-doc/
→ Generates ui.md (based on the product.md you just created)
3. eng-design-doc from .agent/skills/skills-garden/design-doc-skills/eng-design-doc/
→ Generates engineering.md (based on product.md, ui.md, and @BRIEF.md)
→ MUST include a "Testing strategy" section with real content
(specific functions to unit-test, one integration test per major flow,
and what's deliberately NOT being tested)
Use the patterns in @reference/ as guidance for the engineering doc
(but vary if the brief justifies it).
Save all three files in the project root. After each one is saved,
briefly confirm what you saved before moving to the next.
When all three are done, give me a final summary listing the section
titles in each file.
DO NOT NEED TO WRITE implementation plan. ONLY show me all three generated files and a final summary
Шаг 2 — Проверьте сохраненные файлы
👉 Проверьте список файлов. Теперь вы должны увидеть (в дополнение к тому, что было раньше):
codingjam-week-1/
├── product.md ← NEW
├── ui.md ← NEW
├── engineering.md ← NEW
├── BRIEF.md
├── reference/
└── .agent/
Шаг 3 — Обзор и доработка
Вы здесь главный. План разработал искусственный интеллект. Теперь вы его читаете и просите внести изменения.
Самая важная привычка
Если вы хотите внести изменения, изменяйте документацию, а не код. Документация — это источник истины.
🤖 Прочитайте и оставьте отзыв обо всех трех документах
👉 В списке файлов (левая панель) щелкните по имени файла ( product.md ).
Предварительный просмотр документа отображается в панели справа.
Шаг 2 — Прочтите и прокомментируйте, в стиле Google Docs.
👉 После предварительного просмотра каждого документа, прочитайте его от начала до конца и задайте себе следующие вопросы:
-
product.md— Соответствует ли это тому, что мне нужно? -
ui.md— Правильно ли отображаются экраны? -
engineering.md— Имеет ли смысл предложенная стратегия тестирования? (Вам не нужно разбираться в технологиях — просто убедитесь, что план ЕСТЬ.)
🤖 После того, как агент учтет ваши комментарии и документы будут понятны, переходите к следующему разделу .
6. Внедрение + Тестирование
Самый большой раздел практического занятия. Искусственный интеллект берет три документа и создает приложение — код и тесты одновременно. По завершении этого раздела у вас будет работающий код, который проходит собственные тесты.
Почему код и тесты должны быть объединены?
В вашем engineering.md уже указано, какие тесты должны существовать (раздел «Стратегия тестирования»). Реализация не будет завершена, пока эти тесты не пройдут успешно. Поэтому мы выполняем оба этапа за один раз.
🤖 Переключитесь на Gemini 3.1 Pro с High Thinking (рекомендуется)
Шаг 1 — Попросите ИИ написать код И тесты.
📝 Вставьте это:
You're going to do two things in one shot.
PART 1 — IMPLEMENT THE APP CODE
- Build it according to @engineering.md (stack, file structure)
- Match the UI described in @ui.md
- Use the patterns in @reference/ as guidance for code style
- Backend: use Python with `uv` for dependency management
- If your chosen stack requires Node.js and it isn't installed on my
system, install it via Antigravity (use brew/winget/apt) — ask
permission first
- DO NOT start any dev servers — that's a later section
PART 2 — APPLY THE TEST-GATE SKILL
After the code is written, apply the test-driven-dev skill from
.agent/skills/skills-garden/eng-skills/test-driven-dev.md.
Use the "Testing strategy" section in @engineering.md as the test plan.
IMPORTANT: Mock the Gemini API calls in tests — use a stub that returns
fake response data. The real API key isn't set up yet, and tests should
be deterministic and free anyway (best practice).
The skill should:
1. Write the tests described in the Testing strategy
2. Run them (use pytest for Python, Vitest or Jest for JS)
3. If any fail, fix the CODE (not the tests) and re-run
4. Up to 3 retry attempts max
5. If still failing after 3 tries, STOP and tell me what's broken
When Antigravity asks permission to run commands (uv sync, uv pip
install, pytest, etc.), click Allow.
Report results when both parts are done.
🤖 Нажмите «Разрешить» для всплывающих окон (несколько)
Шаг 2 — Ознакомьтесь с итоговым отчетом
После завершения проверьте следующее:
- ✅ В папке
backend/находится код. - ✅ В папке
frontend/находится код. - ✅ В папке
tests/находятся тестовые файлы. - ✅ В сводке указано: «все тесты пройдены успешно» (а не «провал после 3 попыток»).
- ✅ Агент НЕ запустил ни одного сервера
Что произойдет, если все 3 попытки повторной проверки завершатся неудачей?
Редко, но возможно. Обычно это означает, что стратегия тестирования, разработанная инженерным отделом, нереалистична для того, что в итоге было создано.
📝 Вставьте это:
The auto-fix loop hit the 3-try cap. Pull up @engineering.md and look
at the Testing strategy section. Is the strategy realistic for what
got built? Suggest updates to the doc so the tests align with reality.
Don't change the code yet — update the doc, then re-apply the
test-driven-dev skill.
Что, если что-то покажется подозрительным?
👉 Если ИИ создал что-то, что не соответствует документации, вернитесь к документации — не просите ИИ «исправить код» в отрыве от контекста.
Пример:
I see you built the chat as a popup, but @ui.md says it should be a
full page. Either update ui.md if a popup is actually better, OR
rebuild the chat as a full page to match the current ui.md.
Всегда: врач — источник истины.
✅ Контрольная точка: Код существует, тесты существуют, тесты пройдены. Готово к настройке ключа API.
7. Настройка Google Cloud + API-ключа
Шаг 1 — Получите свой API-ключ Gemini в AI Studio (1 мин)
- Откройте https://aistudio.google.com/app/apikey в новой вкладке браузера.
- Войдите в систему, используя ту же учетную запись Google.
- Нажмите кнопку "Создать ключ API" (в правом верхнем углу).
- Открывается диалоговое окно с выпадающим списком проектов:
- Если у вас уже создан проект Google, выберите его и нажмите «Создать ключ API в существующем проекте».
- Если проекта нет в списке, нажмите «Создать проект» .
- Скопируйте появившийся ключ API . Он начинается с
AIza..., примерно 40 символов.
✏️ Приклейте это куда-нибудь в надёжное место — вы отдадите это Антигравитации в следующий раз.
Шаг 2 — Дайте Antigravity команду настроить .env (30 сек)
Вернувшись в режим «Антигравитация», откройте чат.
📝 Предложение вставить (заменить)
⚠️ PASTE_...
Сначала маркеры!):
Apply the gemini-api-dev skill from .agent/skills/gemini-skills/skills/gemini-api-dev/.
(If that skill isn't found, fall back to .agent/skills/skills-garden/eng-skills/gemini-api.md)
Create a .env file in the backend folder with these settings:
- GEMINI_API_KEY= ⚠️ PASTE_YOUR_API_KEY_HERE
- Any other env vars the app needs based on @engineering.md
Also verify:
- .env is in .gitignore so the key never gets committed
- The backend code reads GEMINI_API_KEY at startup
- The Gemini SDK is initialized correctly (use google-genai for Python)
When Antigravity asks permission to install Python packages, click Allow.
When done, show me the .env contents with the KEY redacted (just first 6 chars + ...).
🤖 Ожидаемый результат: Агент создает .env , устанавливает google-genai (вы нажимаете «Разрешить»), подтверждает установку с помощью скрытого ключа:
✅ .env created at backend/.env
GEMINI_API_KEY=AIzaSy... (40 chars, redacted)
.env is already in .gitignore ✓
Backend reads GEMINI_API_KEY via os.getenv() ✓
Gemini client initialized ✓
8. Предварительный просмотр и проверка
Код создан. Тесты пройдены. Ключ API настроен. Теперь откройте приложение и посмотрите, что внутри.
Что подхватывают люди (что не обнаруживают анализы)
Тесты на улов | Люди ловят |
Неверные возвращаемые значения | Уродливые цвета |
Неработающие вызовы функций | Запутанный текст |
Отсутствующие импортные товары | Пуговицы в странных местах |
Ошибки, смещенные на единицу | Анимация выглядит корявой. |
Логические ошибки | Атмосфера не та. |
Шаг 1 — Попросите Antigravity запустить сервер для разработчиков.
🎯 МОДЕЛЬ: Прошивка по умолчанию работает нормально.
📝 Вставьте это:
Please start the dev server(s) so I can preview the app in my browser.
Tell me the URL when it's ready. When Antigravity asks permission to
run the server command, I'll click Allow.
🔔 Всплывающее окно: uv run uvicorn main:app --reload (или аналогичное) → Нажмите « Разрешить»
Шаг 2 — Откройте URL-адрес предварительного просмотра
🤖 Агент сообщает:
Backend running at: http://localhost:8000
Frontend served at: http://localhost:8000 (backend serves it)
URL обычно имеет http://localhost:8000 или http://localhost:5173 .
👉 Перейдите по ссылке в чате или скопируйте и вставьте её в новую вкладку браузера.
Шаг 3 — Пощелкайте мышью
Используйте его так, как это делал бы обычный пользователь:
- Нажмите на каждую кнопку
- Вводите текст
- Наведите курсор на объекты
- Попробуйте выполнить основной алгоритм от начала до конца.
Если всё выглядит и ощущается правильно, переходите к следующему шагу.
Шаг 4 — Напишите файл README
Ниже. В противном случае, сначала полистайте страницы и сообщите о любых проблемах компании Antigravity, прежде чем писать файл README.
Шаг 4 — Напишите файл README
Как только ваше приложение заработает, закрепите его:
📝 Вставьте это:
The app works! Please create a README.md in the project root that explains:
- What this app does (in plain English)
- How to install it on a new machine (uv sync, etc.)
- How to run the dev server(s)
- The 3 design docs (@product.md, @ui.md, @engineering.md) are the
source of truth — anyone can read them to understand the system
Save it as README.md.
🤖 Ожидается: README.md должен присутствовать в списке файлов.
Почему файл README важен
✅ Контрольная точка: Вы просмотрели приложение, исправили все ошибки (если таковые были) и сохранили файл README.
9. 🎉 Вы выпустили MVP!
Вы это сделали.
Что ты построил
- ✅ Веб-приложение на основе искусственного интеллекта
- ✅ Три проектных документа (
product.md,ui.md,engineering.md) - ✅ Настоящий набор тестов, который запускается каждый раз, когда вы вносите изменения в код.
- ✅ Файл
README.md, чтобы вы могли вернуться к нему в любое время. - ✅ Связь с Google Gemini AI
Вы прошли путь от идеи до работающего приложения, не написав ни единой строчки кода самостоятельно. Это невероятно.
Что вы узнали
Навык | Почему это важно |
Спецификация → Код + Тест → Проверка | Сначала планируйте. Создавайте код и тесты одновременно. В последнюю очередь — экспериментируйте. Всегда именно в таком порядке. |
Исправьте документацию, а не код. | Если что-то пошло не так, измените план и перестройте систему. Не используйте патчи. |
Испытания как защитный барьер | Искусственный интеллект встроен в систему — он выявляет ошибки еще до того, как они произойдут. |
Правило регрессии | Каждая обнаруженная человеком ошибка становится проверкой. Эта ошибка никогда не повторится. |
Сводные данные, управляемые документами | Когда направление меняется, измените документ — остальное сделает ИИ. |
Трехслойный поток в условиях антигравитации | В чате на английском языке → агент выбирает команду → вы подтверждаете. |
Вернусь на следующей неделе?
- Выберите другую строку из таблицы за 8 недель.
- Клонируйте репозиторий за эту неделю с помощью кнопки "Клонировать репозиторий" на сайте Antigravity.
- Навыки устанавливаются заново для каждого рабочего пространства (в рамках рабочего пространства = никаких остаточных состояний не остается).
- Вы можете повторно использовать тот же самый проект Google Cloud.
- Всё остальное — это тот же рабочий процесс, который вы только что изучили.
Что дальше?
- Опубликуйте свой проект: Опубликуйте свой проект на сайте Coding Jam !
- Разрабатывайте дома: ваши три документа портативны. Открывайте их в любом инструменте искусственного интеллекта и продолжайте разработку.
- Пригласите друга: пройдите этот практический урок в паре с новичком. Обучение — самый быстрый способ усвоить материал.