Vibe Coding Class 02 — Homework

Vibe code a Fitness App with AI

Step-by-step tutorial: 3 implementation tracks using Google AI Studio, Google Stitch, and Claude Code + Claude Kit.

~2 hours Beginner-Friendly Bilingual

What You'll Build

A complete fitness web app — BMI calculation, personalized workout plan, and meal suggestions.

VietFit Bodybuilding Planner

A Vietnamese-context fitness planning app: input your stats, get your macros, workout schedule, and meal plan — all in one HTML file.

BMI Calculator 7-Day Workout Plan Meal Suggestions

Pure HTML/CSS/JS — no frameworks, no build tools

VietFit Bodybuilding Planner app screenshot

Choose Your Track

Pick the AI tool that matches your workflow. All 3 produce the same fitness app.

Track 1: Google AI Studio

Use Gemini's latest model to generate a full fitness app from a prompt — the fastest path from idea to working code.

Steps

Open Google AI Studio & Select Gemini Pro Latest

Navigate to aistudio.google.com, sign in with your Google account, and choose Gemini Pro Latest from the model dropdown.

Paste the Fitness App Prompt

Describe your requirements: BMI calculator, 7-day workout plan, meal suggestions with macro breakdown, Vietnamese food context.

Review the Scaffolded Output

Gemini responds with full app structure, training tiers, and meal planning logic. Copy the generated code into a .html file and open it in your browser.

Track 2: Google Stitch

Generate professional UI mockups for all app screens before writing a single line of code — then use them as your visual blueprint.

Steps

Access Google Stitch

Go to stitch.withgoogle.com and start a new project.

Describe the Gyn Fitness - Body Buidling and Nutrition Plan App

Input your app description: a Vietnamese bodybuilding planner with BMI, workout schedule, and meal plan screens.

Review the 5 Generated Screens

Stitch generates: Dashboard (Bảng điều khiển), BMI Calculator, Workout Plan (Lịch tập luyện), Meal Plan (Thực đơn), Community (Cộng đồng).

Export and Use Mockups

Download the generated mockups and use them as a visual guide when building the actual HTML implementation.

Track 3: Claude Code + Claude Kit

The full AI engineering workflow — from structured brainstorming through automated code generation. Takes more time but produces higher-quality, documented code.

Phase 1: Install Claude Kit

Open Claude Code and ask: "Find and auto-install the Claude Kit package for me." Claude will research, locate the package, and install it step by step with no commands needed from you.

Provide Claude with the ClaudeKit documentation URL and ask it to install. Claude reads the docs and runs the correct installation commands automatically.

Run these commands directly in your terminal:

# Install with npm
npm install -g claudekit-cli

# Or with bun (faster)
bun add -g claudekit-cli

Install using npm add -g claudekit-cli command:

Install using bun add -g claudekit-cli command:

Verify installation:

ck --version
# Expected: CLI v3.41.4, Local Kit v2.13.0

Phase 2: The Workflow (6 Steps)

Once Claude Kit is installed, run these 6 slash commands in sequence inside Claude Code:

Step 1 — Brainstorm

Generate ideas and a high-level architecture plan:

/brainstorm Brainstorm a plan to build a fitness web app
(HTML only): BMI calculator, 7-day workout plan,
and meal suggestions for bodybuilding

Step 2 — Plan

Convert the brainstorm into a structured implementation plan:

/ck:plan & 'path\to\brainstorm.md'

Step 3 — Red-Team

Stress-test the plan to find weaknesses before building:

/ck:plan red-team & 'path\to\plan-dir'

Step 4 — Validate

Confirm the plan is solid and ready to execute:

/ck:plan validate & 'path\to\plan-dir'

Step 5 — Cook

Execute the plan — Claude builds the app automatically:

/ck:cook --auto path\to\plan.md

Step 6 — Docs

Generate project documentation automatically:

/ck:docs init

The Results

What the completed VietFit Bodybuilding Planner looks like after following any of the 3 tracks.

BMI: 26.8 — Thừa cân | TDEE: 1,958 kcal/day

Workout Plan and Meal

Ready to Vibe Code?

Explore the theory behind this homework or dive deeper into the full Vibe Coding curriculum.

Read the Theory Article View Homework PDF

Get In Touch

Questions about this tutorial? Feel free to reach out.

Email

gynlam328@gmail.com

Send email

Phone

+84-83314-1685

Call now

Location

Ban Co Ward - Previously known as District 3, HCMC