Vibing with ChatGPT

5 Jul 2025 build the first vibe-coded pass

Architecting the unknown while reverse‑engineering life; perfection is a road, not a destination.

0. Wait … “Vibe‑Coding”?

Picture an impatient engineer (👋 hi, that’s me) sitting at a desk desperately looking for that next dopamine hit. A wild idea appears:

“I want a quirky blog with dark‑mode, Mermaid diagrams, shell‑green buttons … today.”

— Me, a few hours ago

The old turtle would research Astro, Tailwind, GitHub Pages in depth before writing a single line of code. Coderturtle shrugs and says:

“Let’s vibe‑code it with ChatGPT. We’ll correct course on the way.”

🐢 Turtle Tip

1. Real‑Time Ping‑Pong ⏱️

Workflow in the shell:

✍️ Describe a component to ChatGPT → get code
🛠️ Paste into VS Code → run npm run dev
🚨 Error? copy‑paste stack trace back to the AI
🔁 Repeat until browser stops screaming

A Live Example — the Tailwind integration fiasco

> npm install @tailwindcss/vite
> astro dev
[vite] ✨  ready in 304ms
[vite] ssr error: Cannot find module '@astrojs/tailwind'

ChatGPT (politely but incorrectly) insisted the package was @astrojs/tailwind. After three rounds of 404s I went “old‑school”: opened Astro 5 docs, realised Tailwind is built‑in, toggled syntaxHighlight instead and moved on.

🐢 Turtle Tip

2. Architecture Snapshot 🔍

Below is a C4 context diagram showing how everything glues together.

%%{ init: { 'theme': 'base', 'themeVariables': {  'primaryColor': '#4C956C', 'primaryBorderColor': '#1C1C1E', 'fontFamily': 'Inter' } } }%%
C4Context
Person(dev, "Impatient Engineer", "Wants a blog *now*")
System(coderturtle, "Coderturtle Blog", "Astro + Tailwind static site")
System_Ext(github, "GitHub Pages", "Hosts static site")
System_Ext(route53, "Route 53 DNS", "blog.coderturtle.io → GitHub")

Rel(dev, coderturtle, "pushes markdown & components")
Rel(coderturtle, github, "gh‑pages deploy workflow")
Rel(route53, github, "CNAME record")

And a component view zooming into the repo:

C4Component
Person(dev, "Impatient Engineer")
Container(coderturtleSite, "Astro Site", "Node", "Builds & ships HTML/CSS/JS")
Component(content, "Content Collection", "MDX", "Blog & Library posts")
Component(layouts, "Layouts", "Astro Components", "Site chrome, header, footer")
Component(workflow, "GitHub Action", "YAML", "Build + Deploy to gh‑pages")

Rel(dev, content, "Writes")
Rel(content, coderturtleSite, "import")
Rel(layouts, coderturtleSite, "wraps")
Rel(coderturtleSite, workflow, "trigger build")

🐢 Turtle Tip

3. Tech Stack & Why 🛠️

Layer	Tech	Why It Worked for Vibe‑Coding
SSG	Astro 5	Zero JS by default; MDX collections validate front‑matter; builds less than300 ms.
Styling	Tailwind 3 + Shell Palette	Utility classes = brain autocomplete. No CSS files, no BEM debates.
Syntax	Shiki (Ayu Mirage)	Compliments turtle colors, dark‑mode friendly.
Diagrams	Mermaid	Code‑as‑diagram; live‑editable in MDX.
Deploy	GitHub Pages + Actions	Free, automated, no infra yak‑shaving.
DNS	Route 53	Single CNAME, done.

🐢 Turtle Tip

4. Process Reflection 🪞

Phase	AI Vibes	Human Muscle
Scaffold layouts	90 %	10 % naming tweaks
Fix build errors	60 %	40 % StackOverflow + docs
Content writing	80 %	20 % turtle jokes
GitHub Actions	30 %	70 % manual doc reading

The moment the AI looped on that deprecated Tailwind plugin, I switched gears. Traditional docs saved the sprint. Lesson: vibe‑coding accelerates unknown unknowns, but still needs a steering shell.

Others agree …

“ChatGPT got me to a working Next.js build in minutes, but I still had to debug the ESLint config by hand.” — Developer @ Hacker News¹

“Great for scaffolding, dangerous for auth.” — Bloggers @ Dev.to²

(Links in the footnotes.)

🐢 Turtle Tip

5. Sample Code — Prompt Engineering in Practice

const prompt = `You are Coderturtle, an eccentric but reliable AI pair‑programmer.\n
Generate an Astro layout with dark mode, Tailwind, and a turtle‑green accent.`;

const response = await openai.chat.completions.create({
  model: "gpt-4o",
  messages: [{ role: "user", content: prompt }]
});

console.log(response.choices[0].message.content);

🐢 Turtle Tip

6. Lessons Learnt

AI scaffolds ≠ production‑grade. Expect refactors.
Mermaid wins for architecture notes — but keep diagrams minimal.
Shiki themes matter — Ayu Mirage blends with our shell palette.
Reading docs isn’t dead; it’s just postponed until hallucination fatigue kicks in.
Perfection is a road, not a destination — iterate like a turtle: steady, curious, relentless.

7. Where Next? 🛤️

We vibed a hobby‑grade site in hours. To ship enterprise‑grade software we’ll need context engineering: domain models, stricter prompts, tests, budgets. Coming soon to the turtle log!

Until then, keep your shell polished and your stack traces short. 🐢