EXP. 01  ·  tutorial + live demo

Vibe Coding
for Researchers

>
this deck was
vibe coded too
00 · Before we start

These slides were vibe coded.

I didn't write HTML for this deck. I described what I wanted, and an AI agent built it.

What I typed (lightly trimmed)
> I want to create a vibecoding tutorial that introduces my audience to the huge world of vibe coding. Structure: 1) a brief intro 2) how it helps researchers 3) terminology (prompt eng, agent.md, skills, MCP, agent…) 4) a demo… Flow: start with vibecoded slides, then a live demo building an academic portfolio webpage.
What the agent did next
  • Asked me questions: format, audience, length, demo subject
  • Wrote a plan, which I reviewed and approved
  • Loaded a “slides” skill with design know-how
  • Made 3 style previews, and I picked this one
  • Built & screenshot-checked every slide, fixing overlaps

Every term in today's talk was used to make these slides.

Vibe Coding for Researchers
§1
  • 04A definition
  • 05From typing to directing
  • 06The tool landscape
  • 07Honest caveats
Part one

What is vibe coding?

Programming by describing intent, not by typing syntax.

§1 · What is vibe coding

A definition

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

By the end of 2025 it was Collins Dictionary's Word of the Year. Today it broadly means building software mostly through conversation with an AI.

01 · DESCRIBESay what you want

In plain language: the goal, the data, the constraints.

02 · GENERATEAI writes & runs it

Code, files, commands, often in one go.

03 · STEERJudge the result

Look at the output, not the syntax. Give feedback. Repeat.

Vibe Coding for Researchers
§1 · What is vibe coding

From typing code to directing it

Each generation of tools takes on a bigger piece of the work.

~2021Autocomplete

Finishes the line you're typing.

e.g. early GitHub Copilot

~2023Chat assistant

Answers questions; you copy-paste snippets back and forth.

e.g. ChatGPT, Claude.ai

~2024AI-native editor

Edits across many files in your project.

e.g. Cursor, Copilot edits

2025 →Autonomous agent

Plans, writes, runs, tests and fixes, then reports back.

e.g. Claude Code, Codex

Your role moves from typist → reviewer → director.

The spectrum runs from pure vibes (accept everything) to AI-assisted engineering (review everything). For research, aim for the second.

Vibe Coding for Researchers
§1 · What is vibe coding

The landscape

Many tools, same ideas. Learn the concepts once and they transfer.

IN THE BROWSERChat + canvas

  • Claude.ai (Artifacts)
  • ChatGPT (Canvas)
  • Gemini

Quick scripts, one-off questions.

APP BUILDERSPrompt → app

  • Lovable
  • Bolt
  • Replit, v0

Web apps with zero setup.

AI EDITORSIDE + AI

  • Cursor
  • VS Code + Copilot
  • Windsurf

You see and edit the code.

TERMINAL AGENTSAutonomous

  • Claude Code
  • OpenAI Codex
  • Gemini CLI

Read, edit and run your project files.

Today's demo: Claude Code inside VS Code.

Vibe Coding for Researchers
§1 · What is vibe coding

Honest caveats

It's powerful, and it can be confidently wrong.

01Plausible ≠ correct

Invented functions, wrong units, silently dropped rows. Code that runs can still produce the wrong science.

02Security & privacy

Leaked API keys, unsafe dependencies, unpublished data sent to a cloud model. Know your institution's policy.

03Faster isn't guaranteed

A 2025 METR study: experienced developers were 19% slower with AI tools on their own repos, while believing they were ~20% faster.

04You own the output

Your name is on the paper. If you can't explain and defend the code, you can't trust the result.

Vibe Coding for Researchers
§2
  • 09Where research time goes
  • 10Use cases
  • 11Before / after: a SLURM job
  • 12Coders vs non-coders
  • 13Research hygiene
Part two

Why researchers should care

Less time on plumbing, more time on science.

§2 · Why researchers should care

Where does research time actually go?

The work around the work
  • Converting and cleaning data formats
  • Plotting… and re-plotting for reviewer 2
  • Writing job scripts, fighting the scheduler
  • One-off analysis scripts nobody can re-run
  • Porting legacy MATLAB / Fortran code
  • Websites, posters, forms, admin

Vibe coding shrinks the distance between a research idea and a working tool.

The science stays yours. The plumbing gets delegated.

Vibe Coding for Researchers
§2 · Why researchers should care

What researchers build with it

Data pipelines

Clean, merge & convert CSV, HDF5, NetCDF, FITS.

Figures

Publication-quality plots with one consistent style.

HPC & SLURM

Draft job scripts on your laptop; you review before submitting.

Simulations

Quick models and prototypes to test an idea first.

Literature tools

Parse BibTeX, organise papers, extract tables from PDFs.

Code translation

MATLAB / Fortran → Python, with comments and docs.

Reproducibility

Tests, READMEs, environment files, notebooks → scripts.

Web presence

Lab sites, project pages, portfolios. ← today's demo

Vibe Coding for Researchers
§2 · Why researchers should care

Before / after: drafting a SLURM job script

BEFOREAn afternoon of docs

Search “SLURM job array”, copy a colleague's script, guess the flags, fail, read logs, retry.

After: one prompt, on your laptop
> Write a SLURM array job that runs simulate.py for 100 temperatures between 1 and 5 K. 4 GB and 2 h per task, one log per task, results in results/.

Then ask: “what could go wrong?” (one real bug is hiding in there)

sweep.sbatch · drafted locally · human-reviewed before sbatch#!/bin/bash #SBATCH --job-name=temp_sweep #SBATCH --array=0-99 #SBATCH --time=02:00:00 #SBATCH --mem=4G #SBATCH --output=logs/%x_%A_%a.out # map task id 0..99 → temperature 1..5 K T=$(python -c "import numpy as np; \ print(np.linspace(1, 5, 100)[$SLURM_ARRAY_TASK_ID])") mkdir -p results logs python simulate.py --temperature "$T" \ --out "results/run_${SLURM_ARRAY_TASK_ID}.h5"
Vibe Coding for Researchers
§2 · Why researchers should care

Something for everyone in the room

IF YOU RARELY CODEYou can now build

  • Tools you couldn't build before
  • Learn by asking “why?” and “explain this”
  • Prototype an idea before hiring a developer

Watch out: you can't spot subtle bugs yet. Test against cases where you know the answer.

IF YOU ALREADY CODEYou can now skip

  • Boilerplate, glue code and config files
  • Documenting and refactoring legacy code
  • Tests, CI, packaging, and new languages fast

Watch out: over-trust and review fatigue. Read the diffs, keep commits small.

Vibe Coding for Researchers
§2 · Why researchers should care

Good research hygiene with AI

Five habits that make vibe-coded research trustworthy.

01Use git

Commit before every AI change. It's your undo button and your audit trail.

02Verify

Check against analytic results, small cases and unit tests, not vibes.

03Protect data

No sensitive, unpublished or human-subject data in cloud tools without approval.

04Pin environments

requirements.txt / environment.yml. Record the tool and model you used.

05Disclose

Follow journal and funder AI policies. Mention AI assistance in methods.

Rule of thumb

If it ends up in a paper, a human has read every line of it.

Vibe Coding for Researchers
§3
  • 15The big picture
  • 16LLM & context window
  • 17Prompt engineering
  • 18Agent
  • 19Plan mode
  • 20CLAUDE.md / AGENTS.md
  • 21Skills
  • 22MCP
  • 23Subagents
Part three

The vocabulary

Eight terms. Every one appears in the live demo.

§3 · Vocabulary

How the pieces fit together

prompt results

You

the researcher, the director

Agent

an LLM working in a loop: plan → act → observe

[ context window: everything it can “see” ]

AGENTS.md

always loaded

Skills

loaded on demand

Plan mode

plan → you approve → act

Built-in tools

read / edit files, run terminal commands

MCP servers

browser, Drive, GitHub, databases…

Subagents

parallel helpers with fresh context

Vibe Coding for Researchers
§3 · Vocabulary · 1 / 8

LLM & the context window

LLM: the engine

A Large Language Model predicts the next piece of text (a token, roughly ¾ of a word). Trained on huge amounts of text and code. Claude, GPT and Gemini are LLMs.

Context window: its working memory

Everything the model can see right now: instructions, your messages, files it read, tool output. Today that's roughly 200K–1M tokens. Anything outside it doesn't exist for the model.

A typical agent session, filling up
system
AGENTS
.md
skills
your messages
files it read (CV, code…)
tool output
free space

Tip: one task per session. When it gets long, start fresh.

Vibe Coding for Researchers▶ IN THE DEMO · the context fills as the agent reads the CV & profiles
§3 · Vocabulary · 2 / 8

Prompt engineering

Writing instructions the way you'd brief a smart new colleague who knows nothing about your project.

Weak
> make me a website
The ingredients
contextgoalinputsconstraintsdone-whenexamples

The first answer is a draft. Iterate.

Strong
> [context] I'm a physics PhD student. Build me a one-page academic portfolio. [inputs] cv.pdf, my GitHub and Google Scholar profiles. [goal] Sections: bio, research, publications, projects, contact. [constraints] Plain HTML/CSS, no frameworks, mobile-friendly, accessible, deployable to GitHub Pages. [done-when] No console errors, and you've checked it in a browser at phone and desktop widths.
Vibe Coding for Researchers▶ IN THE DEMO · weak vs strong brief for the portfolio
§3 · Vocabulary · 3 / 8

Agent: an LLM in a loop with tools

Think Act Observe repeat until the goal is met read file · run code · search · edit
ChatbotAgent
seewhat you pasteyour files & folders
doonly talksedits files, runs commands
errorsyou report themreads them & fixes itself
youcopy & pastereview & approve

You stay in control: agents ask permission before risky actions (editing, running commands, using the network), and you choose how much to auto-approve.

Vibe Coding for Researchers▶ IN THE DEMO · it reads, builds, runs, and fixes on its own
§3 · Vocabulary · 4 / 8

Plan mode: measure twice, cut once

The agent may explore and ask questions, but it can't change anything until you approve a plan.

01Explore & ask

Reads your files, asks clarifying questions.

02Propose a plan

Steps, files to touch, how it will verify.

03You review → approve

Edit it, push back, or start over. Cheap now, expensive later.

The real plan behind this deck (excerpt)
# Plan: Vibe Coding Tutorial — Slide Deck ## Context ~90-min tutorial, mixed audience of researchers. This phase builds only the slides; demo later. ## Approach Use the frontend-slides skill → one HTML deck. ## Slide outline (~22 slides) §1 What is vibe coding · §2 Why researchers… ## Verification Open in browser, step through every slide, check no overflow, all 8 terms covered.
Vibe Coding for Researchers▶ IN THE DEMO · plan the site before a single file is written
§3 · Vocabulary · 5 / 8

CLAUDE.md / AGENTS.md: the project's memory

A plain Markdown file in your project, read automatically at the start of every session.

Same idea, two names

AGENTS.md: open, cross-tool standard (Codex, Cursor, Copilot, Gemini CLI…).
CLAUDE.md: Claude Code's version.

What goes in it

  • What the project is & who it's for
  • How to build / run / test
  • Conventions and hard rules

Short and specific beats long and vague: it costs context every session.

This project's CLAUDE.md
# project context You are an expert in vibe coding, giving an introductory tutorial for researchers along with a live vibe-coding demo. # instructions 1. keep CLAUDE.md updated 2. don't make assumptions, ask questions 3. use available skills and tools

Rule 2 is why the agent asked me questions before writing any slides.

Vibe Coding for Researchers▶ IN THE DEMO · rules for style, privacy & structure
§3 · Vocabulary · 6 / 8

Skills: expertise on demand

A folder of instructions, scripts and references the agent loads only when the task needs it.

How it stays cheap

Only each skill's name + one-line description sits in context. The full instructions load when relevant. This is called progressive disclosure.

AGENTS.mdSkill
whenalways loadedon demand
scopethis projectreusable anywhere
holdsrules & factsa procedure + tools

This deck: built with a “frontend-slides” skill.

academic-portfolio/SKILL.md (we'll write it)
--- name: academic-portfolio description: Build a static academic portfolio from a CV, Google Scholar and GitHub. Use when asked for a personal research website. --- # Steps 1. Extract bio, positions, education from CV 2. Pull publications → BibTeX-style list 3. Pick top repos; write 1-line summaries 4. Generate index.html + style.css 5. Verify in browser; check links scripts/ · templates/ · references/
Vibe Coding for Researchers▶ IN THE DEMO · a design skill + our own portfolio skill
§3 · Vocabulary · 7 / 8

MCP: “USB-C for AI tools”

The Model Context Protocol: one open standard for connecting agents to outside apps and data.

Why it matters

Write a connector once and it works in many AI apps. Introduced by Anthropic (Nov 2024), now supported by most major tools.

What it adds

Tools the agent can call: open a web page, read a Drive file, create a GitHub repo, query a database.

Careful: an MCP server acts with your permissions. Install only ones you trust.

Agent Claude Code MCP Chrome browser GitHub Google Drive Zotero / databases Slack, calendar…
Vibe Coding for Researchers▶ IN THE DEMO · browser reads Scholar & GitHub; GitHub deploys
§3 · Vocabulary · 8 / 8

Subagents: a team, not a soloist

The main agent hands off focused jobs to helpers. Each has a fresh context and returns only a summary.

Why

  • Parallel: independent jobs run at once
  • Clean context: the main agent sees results, not the mess
  • Specialised: each can have its own instructions

Trade-off: more tokens, so more cost. Use them for big, independent, parallel work.

Main agent Scholarpublications GitHubtop repos CV / LinkedInbio & positions profile.json
Vibe Coding for Researchers▶ IN THE DEMO · one helper per source, in parallel
Live demo · roadmap

Let's build your academic portfolio

From scattered profiles to a live website on GitHub Pages, using every term we just covered.

Inputs
cv.pdfLinkedIn (PDF export)GitHubGoogle Scholar
Output
username.github.io

Same tools, your data. You can repeat this tonight.

#StepWhat happensTerm
1Write the briefweak prompt → strong promptprompt eng.
2Plan firstagent asks questions, proposes a planplan mode
3Rules + skillproject rules; a reusable skill, written liveAGENTS.md · skills
4Gather dataparallel helpers read each sourcesubagents + MCP
5Design & builddesign skill + portfolio skillskills · agent
6Verify & shipbrowser check, push to GitHub PagesMCP · agent loop
Vibe Coding for Researchers
Wrap-up

Three things to remember

01You direct, the agent types

…but you own the result. Verify like it's a student's first draft.

02Context is everything

Prompts, AGENTS.md, skills, MCP and subagents are all ways of feeding the right context.

03Start small, use git

Automate one annoying task this week. Commit before every change.

Resources
  • code.claude.com/docs
  • agents.md
  • agentskills.io
  • modelcontextprotocol.io

Let's build.

Mohamed Al-Begaowe

Vibe Coding for Researchers