flowchart LR
A["Describe what you need\nin plain language"] --> B["AI generates\nthe code"]
B --> C["Run it and\nsee the results"]
C --> D["Verify with your\ndomain expertise"]
D -->|"iterate"| A
Generative AI for East Asian Studies
Session 3: Introduction to Vibe Coding
Agenda
- What is vibe coding?
- Introduction to Google Antigravity
- Demo 1: Build a personal website with Google AI Studio
- Demo 2: Create a data dashboard from a real-world dataset
What Is Vibe Coding?
The Term
“There’s a new kind of coding I call vibe coding, where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.”
— Andrej Karpathy, February 2025
- Named Collins Dictionary Word of the Year 2025
- The idea: describe what you want in natural language, and let AI generate the code
How Vibe Coding Works
You do not need to read the code. You verify the output with your expertise.
Why This Matters for Humanities Scholars
Before vibe coding, building custom tools required:
- Learning a programming language (Python, R, JavaScript)
- Debugging error messages written for developers
- Spending time on Stack Overflow instead of reading primary sources
Now: describe what you need → get a working tool → verify with your expertise
The barrier was never intellectual — it was technical. Vibe coding removes that barrier.
Google Antigravity
What Is Antigravity?
Google Antigravity is an AI-powered development platform announced by Google in November 2025.
- Powered by Google’s Gemini models
- An agent-first paradigm: AI agents operate with greater autonomy
- Available in Google AI Studio — free for individuals
- Can build full-stack applications from a simple prompt
From Prototype to Production
flowchart LR
A["Your prompt"] --> B["Antigravity\ncoding agent"]
B --> C["Generates code\n(frontend + backend)"]
C --> D["Preview in\nbrowser"]
D --> E["Deploy to\nFirebase"]
Antigravity integrates with Firebase, turning prompts into production-ready applications:
- Frontend (HTML, CSS, JavaScript)
- Backend (databases, APIs)
- Deployment (hosting, authentication)
Why Antigravity for This Workshop?
- Free and runs in the browser — no installation needed
- Visual: you see the result immediately in a preview panel
- Full-stack: can generate websites, dashboards, data visualizations
- Ideal for scholars who want to build tools without writing code
Note
Other vibe coding tools include Claude Code, Cursor, and OpenClaw. We use Antigravity today because it requires no setup.
Demo 1: Build a Personal Website
Overview
We will use Google AI Studio to build a personal website in minutes — by uploading your CV and picking a visual style.
No coding. No templates. Just your CV and one prompt.
Step 1: Prepare Your CV
Have a copy of your CV ready — PDF, Word, or even a plain text file. Google AI Studio can read it directly.
Step 2: Open Google AI Studio
- Go to Google AI Studio
- Sign in with your Google account
- Choose “Build” from the left sidebar
- Upload your CV using the attachment button
Step 3: Pick a Style and Prompt
Choose a visual style that appeals to you. Some ideas:
| Style | Description |
|---|---|
| Cyberpunk | Neon colors, dark background, futuristic fonts |
| 中國風 (Zhongguo feng) | Traditional Chinese aesthetic — ink wash, red accents, calligraphic elements |
| 浮世絵 (Ukiyo-e) | Japanese woodblock print style — wave patterns, earth tones, bold outlines |
| Minimalist | Clean, lots of white space, simple typography |
| Academic | Classic serif fonts, muted colors, traditional layout |
| Bauhaus | Geometric shapes, primary colors, modernist design |
Then enter a prompt like this:
Based on the CV I uploaded, please build me a single-page personal academic website in HTML. Use a [YOUR STYLE] design style. Include sections for: bio, research interests, selected publications, and contact information. Make it visually distinctive and ready to open in a browser.
Tip
Try different styles! You can regenerate with a different style in seconds. Try “Ukiyo-e” first, then “Cyberpunk” — see how the same information looks completely different.
Step 4: Save and Open
- Copy the generated HTML from AI Studio
- Paste it into a text editor and save as
index.html - Double-click the file to open it in your browser
That’s it — you have a personal website.
Step 5: Iterate
Want changes? Just ask:
Add a photo placeholder at the top. Change the accent color to gold. Add a section for teaching experience.
Note
The key takeaway: you built a personal website in minutes without writing any code. Your CV provided the content, AI Studio provided the code, and you chose the style.
Demo 2: Data Dashboard
The Dataset
We will use AidData’s Geocoded Global Chinese Official Finance Dataset (Version 1.1.1):
- 3,485 projects worth $273.6 billion in total official financing
- Chinese government-financed projects across 138 countries
- 6,190 geocoded locations from 2000 to 2014
- Includes both ODA-like (aid) and OOF-like (non-concessional) financing
Source: AidData at William & Mary
What We Will Build
An interactive dashboard that shows:
- A map of Chinese-financed projects by location
- A timeline of financing by year
- Breakdown by sector (transportation, energy, communications, etc.)
- Filters by country, flow type, and year range
All from a single prompt — no code, no GIS software, no spreadsheet formulas.
Step 1: Download the Dataset
- Go to the AidData download page
- Download GeoCoded_China_Data_Merged_Files.zip
- Unzip the file — you will see several CSV files
- Upload
all_flow_classes.csvto your Antigravity project
Step 2: Write Your Prompt
I have uploaded a CSV file of Chinese government-financed development projects around the world (2000-2014). Each row is a project location with columns including:
- latitude, longitude (geocoded location)
- recipient country
- year (commitment year)
- flow_class (ODA-like, OOF-like, Vague OF)
- sector name
- usd_current (amount in current USD)
Please create an interactive dashboard with:
1. A world map showing project locations as dots, colored by flow_class
2. A bar chart showing total financing by year
3. A pie chart showing breakdown by sector
4. Dropdown filters for country, flow_class, and year range
5. A summary card showing total projects, total USD, and number of countries
Use a clean design with a dark header.Step 3: Review the Dashboard
Antigravity will generate a full interactive dashboard. Check:
- Do the map locations look correct? (You know where Chinese development projects are — use your expertise!)
- Are the financing amounts reasonable?
- Do the sector categories make sense?
Important
This is where your domain expertise matters. You are the expert on Chinese foreign aid — not the AI. If something looks wrong on the map or the numbers don’t add up, that is your signal to investigate.
Step 4: Iterate and Refine
Try refining your dashboard:
Add a tooltip to each map dot showing the project title, recipient country, year, and amount. Also add a table below the map that lists all projects, sortable by amount.Change the color scheme: use red for ODA-like flows, blue for OOF-like flows, and gray for Vague flows.Add a new chart showing the top 10 recipient countries by total financing amount.What You Just Did
In about 15 minutes, you built an interactive data dashboard that would have required:
- GIS software (ArcGIS or QGIS) for the map
- Python or R for data processing and chart generation
- HTML/CSS/JavaScript for the interactive frontend
- Hours or days of development time
With vibe coding, you described what you wanted and verified the output with your expertise.
Takeaways
What We Learned
- Vibe coding lets you build tools by describing what you need in natural language
- Google AI Studio and Antigravity are free, browser-based platforms for vibe coding with Gemini
- Personal websites can be built in minutes — upload your CV, pick a style, done
- Data dashboards — including maps, charts, and filters — can be generated from a dataset and a description
- Your domain expertise is the verification layer — you check the output, not the code