Day 1 Textbook Getting Started with Codex & Antigravity β€” Self-Study Guide
🏫 Return to AI Self-Study Classroom
ACE AI Startup Bootcamp Β· Self-Study Textbook
D1

AI Development Tools and
Workflows

Your first step toward turning an idea into a working service with AI tools

πŸ€–
Chapter 1
Introduction to AI Development Tools
βš™οΈ
Chapter 2
Codex vs Antigravity
πŸ“
Chapter 3
Setting Up the Development Environment
πŸš€
Chapter 4
Your First AI Practice
Training Provider
ODA AI SW Β· ACE Program
Course
AI Web Development for Aspiring Founders
ACE AI Startup Bootcamp Β· Day 1 Introduction and Learning Guide
ACE AI Startup Bootcamp Β· Day 1 Self-Study Textbook

AI Development Tools and Workflows

πŸ“š This textbook is designed so that you can read, fully understand, and follow it independently.
It follows a clear sequence: concept explanation β†’ real example β†’ step-by-step practice β†’ self-check.

1. Why Use AI Development Tools?

πŸ’¬ A Founder's Real-World Story
Mr. Kim wanted to build a dog-walking match app, so he outsourced the development. Three months later, the app had a Walk Request button, but clicking it did nothing. It was not what he wanted, and the developer requested an additional β‚©5 million to revise it.

The root cause: Mr. Kim could not express his idea in a precise specification.
Using AI development tools, founders can write a document themselves about what to do and how to do it. AI reads the document and creates a web service that actually works.

The core values we learn in this process are:

✍️
Turn ideas into documents
It transforms the ideas in your mind into clear requirements documents that AI can understand.
πŸ€–
Turn documents into code
The AI reads the document and automatically generates the code for a web service that actually works.
πŸ”„
Rapid repeat improvement
If you don't like it, you edit the document and quickly improve the way you request it again.
Self-Study AI Web Development Textbook for Founders Page 1 of 10
ACE AI Startup Bootcamp Β· Day 1 Comparing Codex and Antigravity

2. Codex and Antigravity β€” What Is the Difference?

️ Understanding architectural metaphors
Imagine you're building a house.
Codex = the architect The person who draws plans that specify three bedrooms, one living room, and two bathrooms.
Antigravity = the builder The team that reads the plans and builds the actual house.
If you ask a timekeeper to build a house without a drawing, you don't get the house you want.
Category πŸ€– Codex (OpenAI) 🌐 Antigravity (Google AGY)
Key roles Organize your thoughts, write your papers, review them. Read the document and generate code that actually works.
When to Use It When you're writing requirements, reviewing content, supplementing documents. When you implement a web screen, modify a code, add a feature,
The main output PAGE_REQUIREMENTS.md, VALIDATION.md index.htmlCSS, JavaScript files.
Analogy Designer. Construction is real.

πŸ“Œ The Complete Development Pipeline

1. Codex
Write requirements β†’ 2. Antigravity
Implementation of the Service β†’ 3. Browser
Confirm the results. β†’ 4. Codex
Quality validation β†’ 5. As Needed
Repeat.
Key principles: Codex and Antigravity are always The same project folderWe have to look at it. If two tools look at different folders, they can't read the documents they've created on one side.
Self-Study AI Web Development Textbook for Founders Page 2 of 10
ACE AI Startup Bootcamp Β· Day 1 Understanding Folders and Absolute Paths

3. Understanding Folders, Files, and Absolute Paths

When you tell an AI tool, "Edit this file," it needs an exact locationto find it. This address is called an absolute path.

You can't do that.
"Edit the requirements file in the Project folder".

The problem is: AI doesn't know where the project folder is, what the requirements file is.
This is what we have to do.
"C:\Users\kim\Desktop\my-project\PAGE_REQUIREMENTS.md file can be modified".

The reason: If you give me the exact address where the computer is, the AI will find it right away.

πŸ“‚ How to Find an Absolute Path

A
Windows (windows)
If you open the folder and click on the β†’ address window, you'll see the entire path.
Example: C:\Users\your-name\Desktop\my-project
B
Mac (Macbook)
Click the folder in the Finder β†’ "Import information" β†’ "High" to see the item
Example: /Users/your-name/Desktop/my-project

πŸ“ Recommended Project Folder Structure

If you create a folder with the structure below, it's easy for Codex and Antigravity to find each other's files.

πŸ“ my-project/
β”œβ”€β”€ πŸ“„ README.md Purpose and Summary of Projects
β”œβ”€β”€ πŸ“„ PAGE_REQUIREMENTS.md β˜… Written by Codex, read by Antigravity
β”œβ”€β”€ πŸ“„ VALIDATION.md Codex validation checklist
└── 🌐 index.html β˜… Web services created by Antigravity
️ Frequent mistakes: In the name of the folder or the name of the file. Korean characters, spaces, or special charactersIf you use it, you'll get an error when you read the path.
Recommended: my-project    ❌ Not recommended: My project (1)
Self-Study AI Web Development Textbook for Founders Page 3 of 10
ACE AI Startup Bootcamp Β· Day 1 Three Elements of Prompt Writing

4. Three Elements of a Good Prompt β€” How to Communicate Clearly with AI

When instructing AI, the most important factor that determines response quality is the specificity of the prompt. A vague request produces a vague result.

🎯
β‘  Goal
Specifically specify which output file or screen to create.

Example: "Please create an PAGE_REQUIREMENTS.md file".
πŸ“‹
β‘‘ Constraints
Design style, what to include, what not to do

Example: "Dark mode, use the Pretendard font".
βœ…
β‘’ Acceptance Criteria
It's a set of criteria that can be used to determine what's successful when you see it in your browser.

Example: "Once you click the button, pop-up is done".

πŸ“ Comparing a Weak Prompt with a Strong Prompt

❌ Weak Prompt Example
"Build a website. It's beautiful".

The problem is:
β€’ Uncertainty about the content of the website
β€’ "Pretty" is a subjective criterion
β€’ File name, folder location undefined
β€’ No measure of success
βœ… Strong Prompt Example
"Please create an PAGE_REQUIREMENTS.md file.
Content: an aspiring founder profile page
Configuration: name/submission/tags, issue/resolution cards, two middle ones, contact button, below
Style: dark mode, pretendard font
Acceptance criteria: the card will appear responsive in the browser.

A good reason:
β€’ Clear file name to generate
β€’ Concrete components
β€’ Specify style conditions
β€’ validation acceptability criteria
Let's write a quick tip: If the AI came up with something weird after the request,
"Please correct the [structural issue] in the file that you've created and let me know what you're going to change before you do it".
If you ask for it, you can reduce the error.
Self-Study AI Web Development Textbook for Founders Page 4 of 10
ACE AI Startup Bootcamp Β· Day 1 Practice: Folders and Requirements Documents

5. Today's Practice β€” Step by Step

Today's goal: We use Codex and Antigravity to create a pre-creator introduction webpage from start to finish.

πŸ”§ Before You Begin

1
Creating a project folder
It's on the desktop. my-project It creates a folder.
Example path: C:\Users\name\Desktop\my-project
2
Open the Codex.
Run the Codex app and set the my-project folder above to a project.
Codex β†’ Upper folder icon β†’ Select the folder
3
Open the Antigravity.
You run Antigravity, Antigravity, and you set the same my-project folder as the work path.

πŸ“ Practice 1 β€” Create an Environment Setup Document with Codex

First, use Codex to create README.md, the project's basic description file.

In Codex, type the following prompt: Please define the basic roles of this project folder. The goal of the project is to "practice basic web services using AI development tools". Create the default README.md file and write it down as follows: - Project name. - Purpose. - Use tools (Codex, Antigravity) - The folder structure description. - How to use it.
This is what success looks like:
In the my-project folder, README.md the file is created.
On the Codex screen, you can see that it's written in the same structure as above.

πŸ“ Practice 2 β€” Write a Requirements Specification with Codex

Next, create the key document PAGE_REQUIREMENTS.md. Antigravity will use this document as the basis for building the web page.

In Codex, type the following prompt: I need you to create an PAGE_REQUIREMENTS.md file. Content: "Profile of entrepreneurs and service introduction page" ## Page configuration Title: My Startup Pitch 2. Upper section: Founder name, one-line introduction, two to three key field tags Section 3: Breakdown: Explanation of the problem I'm trying to solve, two solution cards Subsection 4: Contact button (click and indicate email address) ## Design conditions - It's in the dark mode. - Use the Pretendard font. - A responsive layout that looks good on both mobile and PC. ## acceptance criteria - When you open the browser, all sections will be displayed correctly. - When you click the contact button, the email address will appear.
The key to this step is: Codex is going to write this document. Save it as a file.. On the Codex screen, press the "Save files" or "Create files" button to save. Save it and see if there's an PAGE_REQUIREMENTS.md file in the my-project folder.
Self-Study AI Web Development Textbook for Founders Page 5 of 10
ACE AI Startup Bootcamp Β· Day 1 Practice: Web Page Implementation and Validation

βš™οΈ Practice 3 β€” Build a Web Page with Antigravity

Codex reads the document, and Antigravity creates a web page that actually works.

In Antigravity, type the following prompt: Read the PAGE_REQUIREMENTS.md file, and perfectly satisfy the specified requirements. I want you to create an index.html webpage. Conditions: 1. Design: Pretendard fonts and applying modern dark glass graphics UI 2. CSS: Write all in the <style> tag (no external CSS files used) 3. JavaScript: Write it in the <script> tag. Configuration: upper profile, two stop cards, and the door button below. 5. Acceptance criteria: Complete a single index.html file that can be opened directly from the browser Tell me a list of files you've created/corrected after work.
1
Check the Antigravity run
Antigravity waits for a while to generate the file.
2
Verify the generated file
In the my-project folder, index.html Check if the file was generated.
3
Open it in your browser.
index.html You can double-click the file or drag the file to the Chrome browser and open it.
This is what success looks like:
β€’ A dark background introductory page opens in the browser
β€’ Founder's name, introductory phrase, tag displayed at the top
β€’ Two problem/resolution cards for suspension
β€’ The "Down" button is at the bottom, and if you click on it, the email address will appear.

πŸ” Practice 4 β€” Validate Quality with Codex

The result Antigravity created validates with Codex whether the requirements were implemented correctly.

In Codex, type the following prompt: Check the index.html code and compare it to the PAGE_REQUIREMENTS.md content. 1. Check for missing requirements or incorrectly implemented parts. 2. Create a new VALIDATION.md file and fill out the checklist in the following format: - Requirements or Implementation. If there's anything missing, add it to PAGE_REQUIREMENTS.md as a correction request.
VALIDATION.md sample results
# Quality validation checklist
Date of writing: 2026-09-05

## Requirements validation results
| Requirement | Status | Notes |
|---------|--------|------|
| Founder name displayed | βœ… Pass | Displayed correctly at the top |
| Core-field tags displayed | βœ… Pass | Two tags displayed |
| Two solution cards | βœ… Pass | Responsive grid |
| Contact button | βœ… Pass | Displays email when clicked |
| Responsive layout | ⚠️ Fail | Cards overlap on mobile |

## Needs to be corrected
I need to modify the card layout.
Self-Study AI Web Development Textbook for Founders Page 6 of 10
ACE AI Startup Bootcamp Β· Day 1 Challenge: Two Independent Practice Projects

6. Challenge: Two Independent Practice Projects

If you've done the basic exercises, choose one of the topics below and create it yourself from scratch.

πŸ† [Independent Project A] Personal Portfolio Website

I'm going to make: A one-page website that introduces me to my portfolio.
Key composition: Profile headers, five technical/capacity tags, three main project/experience cards, contact information.
Codex start prompt example: I need you to create an PORTFOLIO_REQUIREMENTS.md file. Content: "Developer/developer personal portfolio homepage" ## Page configuration Title: My Professional Portfolio 2. Top: name, profile image area (initial round without image), core capability one-line summary Stop: 5 capacities/technical tags, 3 main experience cards (topic, description, duration) Bottom four: Email contact button ## acceptance criteria - Three experience cards will be sorted from PC to flat, from mobile to zero. - Apply the dark mode style.

πŸš€ [Independent Project B] Service Waitlist Landing Page

I'm going to make: I create a landing page that introduces services and gathers interested people.
Key composition: Headline, three benefit cards, a pre-application email form, a completed application message.
Codex start prompt example: I need you to create an LAUNCH_REQUIREMENTS.md file. Content: "New service pre-application landing page" ## Page configuration Title: [name of my service] - Pre-launch Top two: logo area, intense headline, benefit three cards. Stop: Pre-application form (name, email, application button) Fourth: Frequently Asked Questions Three Acordians ## acceptance criteria - After entering the email, when you click the button, the message "Completed!" will appear on the screen.
Self-Study AI Web Development Textbook for Founders Page 7 of 10
ACE AI Startup Bootcamp Β· Day 1 Troubleshooting Guide

7. Troubleshooting Guide

If there's a problem during practice, check the checklist below in order.

πŸ”΄ When the AI Produces the Wrong Result

1
Did you specify the file name in the prompt?
"Create a file" β†’ "Create an PAGE_REQUIREMENTS.md file"
2
Do you have any acceptance criteria for Prompt?
Add validation criteria such as "acceptance criteria: popup will appear when you click the button"
3
Explain exactly what's wrong with the correction request.
"Wonderful" β†’ "The button is not clicked. The click event doesn't appear to be connected. Please edit".

πŸ”΄ When a File Does Not Appear in the Folder

1
Is Codex/Antigravity seeing the right folder?
Check if the current work path in each tool is my-project folder
2
Did you press the file save button?
After you create a file in Codex, you need to click on the "Connect" or "Create" button.
3
The folder is re-opened.
Close the F5 or folder in the browser/finder and reopen it.

πŸ”΄ When the Page Does Not Open in the Browser

1
Check if the file name is index.html.
Watch out for index.HTML, index.html, and so forth.
2
Open it in the Chrome browser.
Just drag and drop the file directly into the Chrome browser window.
Self-Study AI Web Development Textbook for Founders Page 8 of 10
ACE AI Startup Bootcamp Β· Day 1 Key Terms Glossary

8. Key Terms Glossary

Codex
OpenAI's AI coding assistant, which is used in this process to write requirements documents and validate them.
Antigravity
Google's AI development tool, AGY, reads the written document and generates the actual web code.
.md (Markdown)
It's a text format that allows you to write titles, lists, tables in simple phrases. AI likes to read.
absolute path
The exact location of the file. Example: C:\Users\kim\Desktop\my-project
MVP
Minimum Viable Product. Minimum version of a product with only the core features. It's a strategy to quickly create and verify user reactions.
Requirements
It's a document that clearly describes what a service should do and how it should be displayed.
Reactive layout
It's a design that automatically adjusts layouts to PC, tablet, and smartphone screen sizes.
Prompt, please.
Input text that directs the AI to do the work. The more specific and clear it is, the better the results.
Self-Study AI Web Development Textbook for Founders Page 9 of 10
ACE AI Startup Bootcamp Β· Day 1 Checklist and Safety Principles

9. Day 1 Completion Checklist

Check the items below in order. Once all checked, Day 1 is complete!

  • I created the my-project folder on the desktop.
  • Open Codex and set the my-project folder to work folder.
  • Open Antigravity and set the same my-project folder as the work path.
  • I created an README.md file with Codex.
  • I created and saved the PAGE_REQUIREMENTS.md file with Codex.
  • I created an index.html webpage with Antigravity.
  • I opened index.html in the browser and confirmed normal operation.
  • I've compiled an VALIDATION.md quality validation checklist for Codex.
  • I understood the three elements of Prompt: goals, conditions, acceptance criteria.
  • (Voice) I've tried Autonomy subjects A or B myself.

10. Safety Principles and Precautions

Security principles that must be followed.

β€’ API key, personal password.Never type in the prompt.
β€’ Personal data of others.Don't use (name, phone number, email etc.) in practice.
β€’ Pre-check before running the AI-corrected file list.
β€’ Make copies of important files before asking AI to edit them.
Day 2: Design a project that can be developed with AI.
Day 2 teaches me how to make a service idea that I create into a systematic project specification that AI can understand. The Codex we learned today will be the foundation of Day 2!
Self-Study AI Web Development Textbook for Founders Page 10 of 10