I Built the Same Angular App with Gemini CLI vs Claude — Here’s What I Learned

👋 Hey friends, welcome back to my “AI coding assistant” experiments.
Last week, I built a Deep Work Ritual app with Claude. This week, I gave Gemini CLI a chance to build the exact same app — same stack, same rules, same vision.

The result? Two apps. Same idea. Very different journeys.

---

🎯 The Experiment Setup

Goal: Build the same Angular app using two AI assistants — Gemini CLI vs Claude Code.
App: preSession — a 6-step deep work ritual app.
Stack: Angular 20.1 + Tailwind v4 + Zoneless Angular + modern features.
Rules:

• 100% AI-generated code (no manual typing allowed)

• Step-by-step development, no giant prompts

• Official docs (via MCP) = single source of truth

• UI/UX first → screenshots and design briefs guided the build

If you want to compare both projects, here’s my earlier write-up on Claude’s version 👉 Conscious Vibe Coding — Claude Edition

---

🗂 The App: preSession

A mindful, 6-step ritual app designed to make preparing for deep work feel calming instead of a chore.

Key Features

• Welcome screen with overview

• Customizable preparation checklist

• Ambient sound library

• Guided breathing exercises

• Pomodoro timer with visual feedback

• Post-session reflection + analytics

Design Goals

• Calming palette (sage greens, warm grays, soft blues)

• Smooth animations & transitions

• Minimalist, responsive UI

• Ritual-like flow with micro-interactions

---

🔑 Milestones & Learnings

1. 🚀 Project Setup

• Gemini correctly scaffolded a zoneless Angular app with pnpm.

• I kept a GEMINI.md context file to track everything across prompts.

• Tailwind v4 setup gave Gemini trouble (it defaulted to v3), but with extra nudging, it worked.

---

2. 🏗 Core Features (Scaffolding & Routes)

• Gemini skipped lazy loading and overused Component suffixes.

• Root cause: my Angular CLI MCP wasn’t set up right. Once fixed → cleaner output, less ngClass, modern APIs.

• Claude felt more “consistent” here, while Gemini required more nudges.

---

3. 🎵 Feature Builds (Checklist, Sounds, Breath, Timer, Reflection)

• Checklist: Initially messy, later cleaned up after fixing MCP config.

• Sounds: Structure correct, style mismatched.

• Breath: Minimal static countdown. Claude did better here with animations and explaining the 4–7–8 breathing pattern.

• Timer: Almost pixel-perfect to the screenshot. Functional and connected to sounds. Claude went fancier with SVG volume animations; Gemini went with a simple 🎵 icon.

• Reflection: Gemini’s output = minimal, with a buggy star rating (fixed later). Claude’s version was richer, even generating a recap summary after reflections.

---

4. 🌐 Quote API (httpResource Test)

• Gemini hallucinated syntax at first, inventing its own httpResource API.

• After forcing it to fetch Angular docs via MCP, it worked.

• Gemini nailed CORS handling on the first attempt with a proxy setup. Claude gave up and switched APIs.

---

5. 🎨 UI/UX Design Round

• Asked Gemini to redesign the app in dark, modern, gradient-based UI.

• Gemini nailed the dark theme vibes and even improved accessibility in the Timer.

• Struggled with Tailwind v4 and inconsistent borders. Fixed after /audit-accessibility.

• Both Claude and Gemini defaulted to orange as primary color — warmth vibes, apparently 😅.

---

🔍 Strengths vs Stumbles

Where Gemini Shined ✨

• Fast screenshot → UI translation (except for complex animations).

• Strong handling of CORS + proxy.

• Auto-used modern Angular APIs (signals, control flow).

• Precise commit messages.

• Surprisingly solid as a UI/UX designer — minimal but elegant.

Where Gemini Struggled ⚠️

• Inconsistent with memory (kept forgetting Tailwind v4).

• Broke UI consistency between steps. Claude maintained better flow.

• Fell back to deprecated Angular patterns (ngClass, Component suffix).

• Accessibility = ignored until explicitly audited.

• Drag-and-drop image support regressed in the update.

---

📚 Lessons Learned

1. Always check MCP status → /mcp list saved me hours of confusion.

2. Explicitly guide library versions → created /guard-tailwind-v4 to enforce Tailwind v4 rules.

3. Memory ≠ Reliability → reinforcement commands like /audit-angular were essential.

4. Accessibility won’t happen by accident → /audit-accessibility made it part of the workflow.

5. Self-reflection is underrated → /self-reflect turned AI chat history into insights, scaling my workflow.

👉 Full list of custom slash commands here: Supercharge Your AI Workflow with Custom Slash Commands

---

🧾 The Bottom Line

Neither Claude nor Gemini is perfect. Both are flawed. Both are powerful.

• Claude → richer animations, better flow, anticipates needs… but expensive.

• Gemini → faster at some tasks, stronger CORS handling, cheaper/free via API key, but less consistent in maintaining step-to-step UX.

For me, the real win wasn’t “Gemini vs Claude.” It was learning how to optimize AI workflows. The combination of slash commands, docs integration, and iterative prompting transformed this from “just code generation” into a new way of building software.

And honestly? Both apps work. Both feel calming. Both make me excited to sit down for deep work. Which means the experiment was a success.

🚀 Next up: pushing this workflow into team environments. Can AI coding assistants actually scale across squads? Stay tuned.

---

💬 I’d love to hear your thoughts:
Would you rather have a minimal, clean UI (Gemini) or a richer, animated experience (Claude)?

---