Getting Started with
Codex & Antigravity
Mastering AI Development Tools & Standard Workflow (6 Hours / 360 Mins)
Day 1. Getting Started with Codex & Antigravity Session Start
Mastering AI development tools and standard workflows
- Survey Purpose: Assess prior experience with AI/Web MVP development & understand learning expectations.
- Target Audience: All enrolled students across Cohort 1 and Cohort 2.
- How to Participate: Scan your cohort's QR code or click the direct survey link below.
- Workflow: After completing the survey, our hands-on 5-day AI MVP build begins immediately.
- Data Usage: Used exclusively for personalized coaching and educational performance analysis.
Open the exact same project absolute directory (`my-project`) across both Codex and Antigravity.
Draft a structured `PAGE_REQUIREMENTS.md` in Codex containing goals, layout, and acceptance criteria.
Let Antigravity parse the markdown spec and autonomously build the functional `index.html` web application.
Test and verify implementation against specs in Codex, producing a structured `VALIDATION.md`.
Structure ideas into clean markdown specification documents.
AI agent generates full-stack web code strictly from the spec.
Compare output with specs, perform browser checks & fix issues.
Standard Project Architecture:
- Root Directory: `~/workspace/my-project`
- README.md: High-level service overview & goals.
- PAGE_REQUIREMENTS.md: UI layout, features & acceptance criteria.
- VALIDATION.md: Quality inspection checklist & test logs.
- index.html: Self-contained single-page web application.
├── 📄 README.md (Service Overview)
├── 📄 PAGE_REQUIREMENTS.md (Codex Spec)
├── 📄 VALIDATION.md (Codex QA Report)
└── 🌐 index.html (Antigravity Web App)
Opening different folders in Codex and Antigravity prevents the tools from sharing files and breaks the feedback loop.
Must open: /Users/<user>/workspace/my-project
Must open: /Users/<user>/workspace/my-project
Requirements drafting, spec refining, QA testing checklists & automated validation reports.
Spec parsing, project scaffolding, UI/UX implementation, and full-stack single-file web code generation.
The ultimate source of truth for visual rendering, interaction responsiveness, and user experience.
Clearly define what needs to be created or modified (e.g., single-page portfolio with glassmorphism UI).
Set technical boundaries (single HTML file, inline CSS, responsive layout, Pretendard font, no external build tools).
Define measurable completion checks (mobile rendering without horizontal scroll, working contact button hover effects).
Create a new project directory `my-project` and initialize README.md with the following: # Founder Intro & Problem Definition - Founder Profile: Name, background, target market - Core Problem: The key friction your target users face today - Solution Concept: How your proposed web app solves this problem
Read README.md and draft a structured PAGE_REQUIREMENTS.md containing: 1. Target Audience & Core Value Proposition 2. UI Layout Specifications (Hero Header, Problem/Solution Grid, Interactive Contact CTA) 3. Design System (Dark theme, glassmorphism card styling, responsive grid) 4. Acceptance Criteria (Single file index.html, no broken styles, mobile-ready)
Read PAGE_REQUIREMENTS.md and build a complete index.html that satisfies all requirements: 1. Layout & Design: - Apply modern dark glassmorphism UI with Pretendard typography. - Consolidate CSS within <style> tags with responsive flex/grid layouts for mobile and desktop. 2. Required Components: - Header: Founder profile (avatar, name, tagline, 3 domain tags) - Body: Problem & Solution comparison cards (icons, titles, descriptions) - Footer: Interactive contact CTA button with smooth hover micro-animations 3. Delivery: Output a single, production-ready index.html file that opens cleanly in any modern browser.
Review index.html against PAGE_REQUIREMENTS.md: 1. Identify any missing requirements or rendering inconsistencies. 2. Create VALIDATION.md containing a structured QA checklist (Pass/Fail) with rationales. 3. If issues exist, document actionable remediation prompts for Antigravity.
📱 Mobile Viewport & Responsive Layout Optimization
Refine CSS media queries for seamless 1-column layouts on smartphones (360px–480px) without horizontal scrolling.
🌓 Interactive Dark/Light Mode Toggle Switch
Implement an interactive theme toggle switch with JavaScript event listeners and CSS custom property transitions.
Day 2: AI-Powered Project Planning
Transforming raw ideas into the single source of truth: PROJECT.md
Great work today! Please make sure your Day 1 lab deliverables are submitted. See you tomorrow! 🎉
Project Planning
with AI
From Raw Ideas to PROJECT.md — Codex-Driven Planning Documents (6 Hours / 360 Mins)
Day 2. Project Planning with AI
- MVP Definition: Not a feature-depleted product, but the minimum build needed to test your core business hypothesis.
- Day 2 Constraint: Zero application coding. 100% focus on specification documentation and requirements scoping.
- Deliverable: The completed `PROJECT.md` becomes the authoritative guide for Day 3 Antigravity development.
"I want to build an AI-powered travel planner app."
→ Starts from solution. Target customer and pain point remain ambiguous.
"Solo travelers in their 20s-30s spend over 2 hours creating daily itineraries."
→ Persona + Context + Core Pain Point + Desired Outcome.
Specify clear characteristics (e.g., Early-stage founders lacking developer resources, Freelance designers managing invoices).
What single transformation does the user experience? (e.g., Reduce 2 hours of manual planning to a 3-minute AI workflow).
- Key: Focus on 1 primary persona and 1 core value proposition for MVP success.
Describing UI hierarchy clearly in Markdown allows AI coding agents to produce clean HTML grids without Figma.
- Header: Logo, navigation tags, theme toggle
- Main Hero: Headline, description, input box
- Results Section: Card grid, data badges, copy buttons
| [Logo] AI Trip Planner [Theme] |
+-----------------------------------+
| "Enter destination & duration" |
| [ Tokyo, Japan ] [ 3 Days ] [Go] |
+-----------------------------------+
| Day 1: Shibuya / Shinjuku [Copy] |
| Day 2: Asakusa / Ueno [Copy] |
+-----------------------------------+
{
"destination": "Tokyo",
"days": 3,
"theme": "Gourmet & Culture",
"itinerary": [
{ "day": 1, "spots": [...] }
]
}
For Day 3 MVPs, use `localStorage` to save user history seamlessly without requiring a backend database setup.
Project Overview, Target Problem, Core Value Proposition.
User Flow, Screen Wireframes, Data Structures & State.
Tech Stack Constraints, Acceptance Criteria, Out-of-Scope.
I want to plan an AI Web App MVP. My initial concept is [Explain concept in 2-3 sentences]. Please help me structure Section 1 (Overview), Section 2 (Problem Definition), and Section 3 (Target Persona & Core Value) following the standard PROJECT.md specification format.
Based on the problem definition, design: 1. End-to-end user journey (Max 4 steps) 2. UI layout wireframes in Markdown for each screen 3. Complete Section 4 (User Flow) and Section 5 (Screen Specifications) for PROJECT.md.
Consolidate all sections and generate the authoritative `PROJECT.md` file: - Ensure Tech Constraints specify: Single HTML, Vanilla JS, inline CSS, Pretendard font, mock AI logic. - Include explicit Acceptance Criteria and an Out-of-Scope list to prevent feature creep.
Why HANDOFF.md is Critical:
- Context Preservation: Records what was accomplished in Day 2 for instant startup in Day 3.
- AI Briefing: Provides Antigravity with a concise executive summary before building begins.
- Action Checklist: Lists the exact first 3 implementation steps for tomorrow morning.
## 1. Day 2 Completed Deliverables
- PROJECT.md fully finalized
## 2. Day 3 Action Items
- Initialize HTML skeleton in Antigravity
- Build Hero & Input form components
Is the core user journey achievable within 3 screens?
Are button actions, data keys, and UI states clearly specified?
Can an AI engineer build the page without asking further questions?
Day 3: Building MVP from PROJECT.md
Transforming specifications into working software with Antigravity (MVP v0.1)
Planning is complete! Tomorrow we bring your product to life. Fantastic work today! 🚀
Building MVP
from PROJECT.md
Spec-Driven Antigravity Implementation & Codex QA Validation (MVP v0.1)
Day 3. Building MVP from PROJECT.md
- MVP v0.1 Goal: Complete the single primary user journey from input to output without crashes.
- Implementation Rule: Feed PROJECT.md to Antigravity step-by-step; verify in Chrome at each stage.
- QA Rule: Use Codex to run structured regression checks against the specification checklist.
Header, hero section, input forms, and card containers with responsive CSS layout.
Form event handling, state manipulation, and simulated AI output generation.
Saving to `localStorage`, copy/share actions, and loading spinner micro-animations.
Read PROJECT.md thoroughly and scaffold the initial `index.html` structure: - Follow the design system and screen layout defined in Section 5. - Implement responsive CSS for mobile and desktop screens. - Build the Header, Hero section, and Input form controls.
Add core interactivity to `index.html`: 1. Form submission handler: Validate user input and display a loading spinner state. 2. Output generation: Produce rich structured result cards matching Section 6 data schemas. 3. Handle empty input validation with friendly error hints.
Implement local storage features: 1. Save generated outputs to `localStorage` under a dedicated key. 2. Render a "Recent Generations / History" list allowing users to reload previous results. 3. Add a "Copy to Clipboard" button with instant visual feedback.
Perform a full code review of `index.html` against `PROJECT.md`: 1. Verify each acceptance criterion defined in Section 7. 2. Check for JavaScript console errors, responsive layout bugs, and broken interactions. 3. Update `VALIDATION.md` with test logs and remediation recommendations.
Display clear helper messages instead of failing silently or crashing.
Always provide spinners or skeleton loaders during async operations.
Show friendly guidance when no search results or history entries exist.
📥 Export Results as PDF / Markdown
Add a 1-click export button allowing users to download their generated plan as a clean `.md` or `.txt` file.
📊 Usage Counter & Filter Tabs
Track the total number of generations and add category filter buttons to the history view.
- Functional Web App: `my-project/index.html` runs locally and executes the full user journey.
- Data Persistence: Results are stored in `localStorage` and persist across page refreshes.
- Validation Report: `my-project/VALIDATION.md` confirms all core acceptance criteria pass.
## Completed:
- MVP v0.1 core flow fully functional in index.html
## Day 4 Goals:
- Add selective track extensions (API integration / Advanced UI)
- Implement comprehensive error recovery
Day 4: Feature Expansion & Polish
Selective track extensions, exception handling, and regression verification (MVP v1.0)
You built a working software prototype today! Tomorrow we level it up into a polished MVP v1.0. 🎉
Feature Expansion
& Product Polish
Selective Tracks, Exception Recovery & Regression Verification (MVP v1.0)
Day 4. Feature Expansion & Polish
- Selective Tracks: Choose 1 track suited to your product (Track A: Interactive UI/UX or Track B: Data & Export).
- Resilience: Handle network timeouts, empty queries, and local storage limits gracefully.
- Regression Verification: Re-test Day 3 core features in Codex every time new code is added.
Focus on visual polish: custom tabs, smooth accordion reveals, modal dialogs, and celebratory confetti effects upon completion.
Focus on utility: CSV/JSON/PDF export engines, multi-filter search sorting, and tag-based categorization.
Review `PROJECT.md` and append Section 9: MVP v1.0 Feature Expansion: - Selected Track: [Track A: Advanced UI / Track B: Data & Export] - Specify exact new components, user actions, and acceptance criteria. - Confirm that existing Day 3 core features remain untouched.
Read Section 9 of `PROJECT.md` and upgrade `index.html`: 1. Implement the requested Track A / Track B features cleanly. 2. Maintain full backward compatibility with existing form inputs and local storage keys. 3. Ensure no regressions occur in the core user flow.
Provide a "Retry" button when an operation encounters unexpected state.
Wrap storage calls in `try...catch` blocks to protect against quota exceptions.
Add confirm dialogs before destructive actions like "Clear All History".
Enhance error resilience in `index.html`: 1. Add input sanitization and length limits on all form fields. 2. Guard `localStorage` JSON parsing with try/catch and fallback defaults. 3. Provide a Toast Notification banner for success and error messages.
Conduct a complete regression audit of `index.html`: 1. Re-validate all Day 3 core features to ensure zero regressions. 2. Test new Day 4 track extensions across desktop and mobile viewports. 3. Update `VALIDATION.md` to certify MVP v1.0 release readiness.
🔔 Audio/Visual Feedback Effects
Add subtle Web Audio API chimes or visual ripple animations upon successful generation.
⌨️ Power-User Hotkeys (Ctrl+Enter)
Allow users to submit forms with `Ctrl+Enter` / `Cmd+Enter` and close modals with `Escape`.
- MVP v1.0 Codebase: Upgraded `index.html` featuring selective track extensions and defensive error handling.
- Updated Specs: `PROJECT.md` Section 9 updated to document all new functionality.
- Release QA Certification: `VALIDATION.md` updated with zero-regression test passes.
## 1. MVP v1.0 Status: Feature-Complete & Tested
## 2. Day 5 Pitch Prep:
- 5-Minute Pitch narrative points
- Live deployment URL readiness check
Day 5: Deployment, Pitch & Roadmap
Live deployment check, 5-minute pitch presentations, peer reviews, and next steps
Your MVP v1.0 is ready! Tomorrow is Demo Day. Let's finish strong! 🚀
Live Deployment,
Demo Day & Next Steps
Live Launch, 5-Minute Pitch Presentations, Peer Reviews & 2-Week Roadmap (6 Hours / 360 Mins)
Day 5. Final Testing, Deployment & Pitch
- Demo Day Goal: Deliver a concise 5-minute pitch demonstrating your live MVP solving a real problem.
- Peer Review: Give and receive actionable feedback on usability, market clarity, and UX friction.
- Future Roadmap: Lay out the next 2 weeks of user testing and feature iteration.
Deploy to GitHub Pages, Vercel, or Netlify to get a shareable HTTPS link.
Open your live URL on a smartphone to verify touch targets and viewport layout.
Have your local `index.html` open in a backup browser tab just in case.
Who is suffering? What is the tangible friction?
How does your AI web app uniquely solve it?
Demonstrate the full user journey in your live app.
Next 2 weeks: User testing & business milestones.
- Prepare Sample Data: Keep realistic inputs ready on your clipboard so you don't waste time typing.
- Focus on the 'Aha!' Moment: Highlight the exact screen where your user gets instant value.
- Don't Explain Code: Investors and users care about business value, simplicity, and speed — not CSS lines.
Is the customer persona clearly defined and relatable?
Is the navigation intuitive without instruction?
Did the live demo execute cleanly without errors?
- Push `index.html` to your GitHub repo and enable GitHub Pages under Settings ➔ Pages.
- Copy your live HTTPS URL (e.g., `https://username.github.io/my-project/`).
- Test the live link on both your laptop and mobile device.
Read `PROJECT.md` and draft a concise 5-Minute Pitch Script (`PITCH.md`): 1. Hook & Problem Statement (1 min) 2. Solution & Live Demo Narrative (2 mins) 3. Competitive Edge & Tech Stack (1 min) 4. 2-Week Post-Bootcamp Milestone Roadmap (1 min)
- Time Limit: Exactly 5 minutes pitch + 2 minutes peer Q&A.
- Live Screen Share: Show your deployed URL in real-time.
- Peer Scorers: Fellow founders submit constructive feedback on the peer review sheet.
Share your live URL with 10 real target users and log their feedback.
Refine `PROJECT.md` and use Antigravity to deploy v1.1 improvements.
Collect first 50 organic signups or letters of intent (LOI).
Draft `ROADMAP.md` incorporating feedback received during Demo Day: 1. Top 3 user friction points to resolve 2. Week 1 user interview schedule (Goal: 10 target users) 3. Week 2 technical improvements and deployment milestones
- 1. Live Web App: Deployed, public HTTPS URL running your MVP v1.0.
- 2. Complete Spec Repository: `PROJECT.md`, `VALIDATION.md`, `PITCH.md`, `ROADMAP.md`.
- 3. Pitch Presentation: Completed 5-minute live demo.
- Completion Certificate: Issued upon successful submission of all 4 key artifacts and survey completions.
- Alumni Network: Join the ACE Startup Slack community for ongoing peer collaboration and mentoring.
- Investor Office Hours: Top-rated demo day projects will receive 1-on-1 investor advisory sessions.
- Evaluation Purpose: Comprehensive assessment of learning outcomes, curriculum satisfaction, and mentoring quality.
- Target Audience: All students from Cohort 1 and Cohort 2.
- Certification Prerequisite: Completion of this survey is mandatory for official certificate issuance.
- Continuous Improvement: Your feedback directly shapes future cohorts and advanced incubation programs.
5-Day AI Startup Bootcamp
Congratulations on Completing the Journey! 🎉
Day 1 Setup ➔ Day 2 PROJECT.md ➔ Day 3 MVP v0.1 ➔ Day 4 MVP v1.0 ➔ Day 5 Live Launch & Pitch
Your ideas are now live, running web businesses powered by AI. We cheer on your next entrepreneurial adventures! 🚀
📚 5-Day Curriculum Slide Dashboard
Click any slide card to jump directly to that presentation screen.