Day 3 TextbookBuilding a Working MVP from PROJECT.md β€” Antigravity Implementation + Codex Validation Guide
🏫 AI Self-Study Classroom
ACE AI Startup Bootcamp Β· Self-Study Textbook
D3

From PROJECT.md to a
Working MVP

Turn a project specification into a working service with AI

πŸ—οΈ
Chapter 1
Incremental Development Principles
⚑
Chapter 2
Build an MVP with Antigravity
πŸ”§
Chapter 3
Error Fixing & Debugging
🌐
Chapter 4
Running a Local Server
Training Provider
ODA AI SW Β· ACE Program
Course
AI Web Development for Aspiring Founders
ACE AI Startup Bootcamp Β· Day 3 Introduction and Incremental Development Principles
ACE AI Startup Bootcamp Β· Day 3 Self-Study Textbook

Building a Working MVP from PROJECT.md

πŸ“š Today, you will use the PROJECT.md completed on Day 2 to build a web service that runs in a real browser.
Antigravity (Google AGY) is the primary development tool for today's work.

1. What Are We Building Today?

Day 3 key goal:
You're going to transfer HANDOFF_PROMPT.md to Antigravity, and the browser is going to run the core flow. MVP web serviceI'm going to finish it.

Acceptance criteria: When you open index.html in your browser, you should be able to actually check the core flow defined in PROJECT.md.
πŸ“„
Ready to go.
The PROJECT.md and HANDOFF_PROMPT.md files created in Day 2 should be in the my-project folder.
βš™οΈ
The main tool
Antigravity (Antigravity) generates the hash code
Codex Error correction request, validation
🌐
The final result.
It's a web service that runs as index.html. If you open it in your browser, you can check the core flow.

2. Why You Should Not Request Everything at Once

What are some common mistakes?
"Make all kinds of pet walk matching services, including membership, list of helpers, reservations, payments, chats".

When you try to handle too much of Antigravity at once, you miss an important feature, or you have a screen that doesn't work.
β†’ It's hard to find where I got the error.
You're asking for it all at once.
"Complete all the features".

Problem: You don't know what's wrong.
When you fail, you have to do it all over again.
AI is more likely to add features at will.
Step by step request.
Step one: Just the basic structure and the home screen.
Step 2: Add the helper list screen
Step three: detail view + booking form

Check each step in the browser and then proceed to the next step.
Implementation of priority decision principles:
It's implemented in the core flow sequence of PROJECT.md.
Example: Home β†’ Conditions input screen β†’ List screen β†’ Detailed screen β†’ Finished screen
Self-Study AI Web Development Textbook for Founders Page 1 of 6
ACE AI Startup Bootcamp Β· Day 3 Five Screen-State UX Principles

3. Five Screen States β€” Essential UX Principles

Every screen has five states, and when you ask Antigravity to implement, you specify these five states to create a high-performance service.

1 Empty State empty state
It's a screen that shows when there's no data. It's supposed to tell the user what to do next.
<div class="empty-state"> There's no registered helper yet. Change the <p> condition or choose a different date. </div>
2 Loading State loading state
When the data is being collected, the user needs to know, "You have to wait".
I'm looking for the <div class="loading"> helper... </div>.
3 Success State success state
It's a screen that shows you when you have normal data. It's a clear display of key information.
<div class="helper-list"> It's an hourly rate of 15,000 </div>. <div class="helper-card"> is watching ⭐4.7 ⭐ 12,000 won per hour </div> </div>
4 Error State error state
When a problem arises, you have to let the user know what they can do.
<div class="error-state"> <p>️ There was an error in the search. </p> <button onclick="retry()"> try again </button> </div>
5 Partial State partial state
There's only some data, like, when there's only one helper, if it's only possible today.
<div class="partial-result"> <p> is one of the possible helpers on a selected date. </p>. If you change the <p> date, you can find more helpers. </div>
Self-Study AI Web Development Textbook for Founders Page 2 of 6
ACE AI Startup Bootcamp Β· Day 3 Practice: MVP Structure and Basic Screens

4. Today's Practice β€” Build an MVP with Antigravity

πŸ”§ Pre-Practice Check β€” Confirm Your Day 2 Files

1
Check if there's a file in my-project folder.
PROJECT.md and HANDOFF_PROMPT.md must both be present.
If not, go back to Day 2 and finish it first.
2
Check the Antigravity folder path
Confirm that Antigravity's working folder is set to my-project.

βš™οΈ Practice 1 β€” First Request: Create the Basic Structure

Instead of asking for everything at once, start with the basic structure.

Antigravity first request: Read HANDOFF_PROMPT.md and PROJECT.md and implement the range below. [This is the implementation range] 1. Basic HTML structure (head, body, basic style) 2. Upper navigation bar (service name, background dark navy) 3. home screen (service introduction phrase, start button) [Conditions] - Implemented as a single index.html file. - Pretendard font use (CDN) - The basic style of the dark mode. - Don't implement the Out of Scope item in PROJECT.md. [acceptance criteria] When you open it in your browser, you see the service name and the "Start" button.
βœ“
Check it out.
When you create an index.html file, you open it in your Chrome browser and verify it.
If you see the service name and start button, move on to the next step!
Self-Study AI Web Development Textbook for Founders Page 3 of 6
ACE AI Startup Bootcamp Β· Day 3 Practice: Detail and Completion Flow

βš™οΈ Practice 2 β€” Second Request: Add the Core Screens

Antigravity second request: Add the bottom screens to the existing index.html. Reference document: PROJECT.md ##8. [Further screen] 1. Conditional input screen: input fields specified in PROJECT.md [Service key] List screen: Display card form with three dummy data (On the card is PROJECT.md ##9. Data Model reference field) [screen switching] - Home "Start" button click β†’ condition input screen - Enter the "Search/Find" button β†’ list screen [Empty State] - When the list is empty, "No result" message is displayed. [acceptance criteria] If you click on the button, the screen switches, and you see three dusty data cards, you're done.

βš™οΈ Practice 3 β€” Third Request: Detail View + Completion Flow

Antigravity third request: Add the following feature to index.html. [Additional screen/feature] 1. detail view screen: Click on the card from the list to show details 2. Reservation/Request Form: Date, time, etc. Input field specified in PROJECT.md Completed screen: When you click the Apply button, "Application completed!" message [Save the data] Save the request information to localStorage (Key: 'reservations') [acceptance criteria] Click the card β†’ detail view β†’ apply button click β†’ complete the message If the entire core flow runs on one index.html, complete.
βœ… core flow completion criteria check:
When you're done with the above three steps, the following flow should be running in your browser:
Home screen β†’ [Click to Start] β†’ Conditions input β†’ [Click to Browse] β†’ List(3 cards) β†’ [Click to Card] β†’ Detail view β†’ [Click to Start] β†’ Complete message
Self-Study AI Web Development Textbook for Founders Page 4 of 6
ACE AI Startup Bootcamp Β· Day 3 Three-Step Error Response & Copyable Prompt

5. What Should You Do When an Error Occurs?

Errors in code created by Antigravity are normal. What matters is learning how to read the error and make a specific correction request.

πŸ”΄ Check Errors in the Browser Console

1
Open the Chrome developer tool
Windows: F12 Or Ctrl + Shift + J
Mac: Cmd + Option + J
2
Click on the Console tab.
You'll see an error message in red. Copy this message.
3
Send an error message to Codex
If you insert an error message and describe the situation, Codex analyzes the cause.

πŸ“‹ How to Handle Each Type of Error

Error message patternMeaningHow to Solve It
is not defined Using a function or a variable that doesn't exist Insert an error message into Codex and request "fix undefined error".
null Related There's no HTML element, and JS is trying to find it. Request to verify that HTML and JS ID match and modify.
It's a white screen. JS error rendering failure Request for correction to the corresponding error message after verifying the console error.
Button clicks not responding The event is the Lisner Unity. Request: "Click the event button does not work. Please confirm the event link".

πŸ”§ Example Prompt for Requesting an Error Fix from Antigravity

How to request error correction: There's been a problem down at index.html. [Problem situation] If you click on the helper card, you don't go to the detail view screen. [Browser console error] Uncaught TypeError: Cannot read properties of undefined (reading 'id') at showDetail (index.html:124) [Repair request] Fix the above error, and let the detail view function normally when you click the card. First, explain to me what part of the problem is before you fix it.
Self-Study AI Web Development Textbook for Founders Page 5 of 6
ACE AI Startup Bootcamp Β· Day 3 Independent Practice and Checklist

6. Challenge: Two Independent Practice Projects

πŸ† [Independent Project A] Reading Log & Summary Service MVP

It's a service you can manage as a list by entering a book title, author, date of reading, review note.
Core flow: book add β†’ check the list β†’ see details
Antigravity request: Read the BOOK_REQUIREMENTS.md and make a record of the MVP. Must feature: 1. Book Additional Form (subject, author, date read, highlights, notes) 2. book list screen (card form, localStorage storage) 3. book detail view Empty State: "There's no book written yet, add the first book!" Techniques: single index.html, localStorage

πŸš€ [Independent Project B] Improve Your MVP

After you've done the basic MVP, just add one of the following:
β€’ Search feature added (filtering by name/subject in list)
β€’ Delete feature added (delete button on card)
β€’ empty state/loading state message added

7. Day 3 Completion Checklist

  • Antigravity recognizes the my-project folder as a work path.
  • Completed the first request and verified in the browser.
  • Finish the second request and you'll see three deck cards.
  • The third request has been completed.
  • Home β†’ Enter β†’ List β†’ Details β†’ Complete the entire flow is running
  • There's an empty state message.
  • If there's been an error, check the console and ask for correction.
  • The request information is stored in localStorage.
Day 4: Service feature expansion and improvement
Based on today's MVP, we're adding features that enhance the user experience like search, filters, error handling.
Self-Study AI Web Development Textbook for Founders Page 6 of 6