Prototyping using Gemini & Claude – Part I

Prototyping using Gemini & Claude – Part I
Guides

It is truly an exciting time to be in Product right now. The world of AI has dropped a whole new set of cheat codes into our laps, giving us incredible ways to accelerate our workflows and boost productivity. For me, the magic wasn’t just in automating tasks; it was in reclaiming my calendar. By simplifying my workflows with AI, I’ve been able to free up more time to speak with users or work with engineering teams to brainstorm on some of macro and micro aspects of the overall product delivery. In this series, I will explore some of these accelerators.

While one of the most basic accelerators I have explored is using AI to write PRDs and BRDs, I will jump ahead to one of the topics that has been the most transformative for me personally: The ability to rapidly prototype applications to gather early and frequent user feedback.

Over the past few months, I’ve gone down the rabbit hole exploring platforms like Lovable.Dev, Replit, and Bolt.New, alongside tools like Figma Make and GitHub CoPilot, all in the name of building rapid prototypes and gathering user feedback sooner.

While I plan to share a detailed comparison of these options in a future post, in this multi-part article I will focus on setting oneself up with the right mindset for rapid prototyping and leveraging the strengths of Gemini CLI & Claude Code at the same time for rapid prototyping.

After a number of trials with the other approaches outlined earlier, I found that the approach of using CLI (Command Line Interface) based tools like Gemini CLI and Claude Code provided me with the largest amount of the one superpower that one needs when prototyping applications using AI: Control.

When you’re a one-person band trying to spin up a new application prototype, you need to be the puppet master, able to tweak every detail at will. This is where Gemini CLI and Claude Code truly shine.

Think of them as a partner that has access to your entire codebase and understands your project inside and out. This approach allows you to scaffold and build a prototype from the ground up, giving you full command over the code. The result? You can iterate, fix, and improve things at lightning speed, shrinking your time to market.

Now, for the reality check: this method does have a steeper learning curve than its point-and-click cousins. If the thought of getting your hands dirty doesn’t make your eyes glaze over, then you’re in for a treat. Let’s dive in.

Depending on where you work, your organization may have different regulatory and compliance aspects limiting what options are available to you. This is true, especially in Enterprise settings and in that case I’d advise making a case to the powers that be to implement new tooling, or taking advantage of whatever is available.

There is no substitute for basics

Just like any other application build, the basic building blocks for getting an application prototype do not have a substitute and should be approached in the same way as one would approach an actual development lifecycle. The key difference here is in understanding that you are the product lead, the UX lead, the development lead and the test lead all rolled into one.

It is essential to have a clear product vision about what you want to build and a strategy for how you want to build it. Using coding assistants places us firmly in the Realize phase, takes us to Actualize and allows us to rapidly iterate and Crystallize based on user feedback.

This multi-part article will walk you through my methodology in leveraging CLI coding assistants within an application development framework and generate rapid prototypes.

So, what exactly are Gemini CLI & Claude Code?

Before we get into Gemini CLI & Claude Code, let’s understand some basics.

What is a Terminal?

Ever seen any troubleshooting guide or heard floor support asking you to press the Windows + R key on your keyboard and asking you to type in the command, “cmd”, or asking you to launch the command prompt? If yes, that is a terminal you launched. In Windows, it is called the Command Prompt.

A terminal, in the context of computing, is a software program that provides a text-based interface to interact with a computer’s operating system. It’s essentially a window where you can type commands to run programs, manage files, and perform various system tasks. This is in contrast to the graphical user interface (GUI) most people are used to, which relies on icons, windows, and a mouse.

Think of it like this: if your computer’s operating system is the engine of a car, the GUI is the dashboard with all its buttons and displays, while the terminal is like opening the hood and directly interacting with the engine components using specialized commands.

Why Use a Terminal?

While a graphical interface is often easier for everyday tasks, the terminal offers several advantages, especially for developers, system administrators, and power users:

  • Speed and Efficiency: For many tasks, typing a single command can be much faster than clicking through multiple menus and windows.
  • Automation: You can write scripts to automate repetitive tasks, saving a significant amount of time and effort.
  • Power and Flexibility: The command line provides access to a wide range of powerful tools and settings that may not be available through the GUI.

Modern operating systems all come with a terminal application. On macOS, it’s simply called Terminal. On Windows, you have the Command Prompt and the more modern Windows Terminal, which can run different shells like PowerShell & WSL (Windows subsystem for Linux).

Gemini CLI is an open-source command-line interface that brings the power of Google’s LLM (large language model), Gemini directly to your terminal. It allows developers and other users to interact with Gemini for a wide range of tasks, from coding and debugging to content creation and research, all within their familiar command-line environment.

Gemini Documentation: Official Google Documentation

Intro Video: Gemini CLI in 6 Minutes!

Claude Code is a powerful, agentic coding assistant developed by Anthropic that operates directly within your terminal. Unlike traditional code completion tools, Claude Code is designed to understand the full context of your codebase. This allows it to perform complex, multi-step tasks through natural language commands.

Claude Documentation: Official Claude Documentation

Intro Video: Introducing Claude Code

But, why do we need both? Why not use just one?

You’re probably wondering this and to be fair, I asked myself the same. At the very start, I wanted to evaluate the approach of using a CLI coding assistant to prototype an application and I landed in a bit of analysis-paralysis trying to decide on one assistant. But then, the thought struck me. Why not both? Now, this is not one of those gotchas where I answer a question of “Why?” with “Why Not?” I did a fair bit of reasoning and analysis and concluded that this would indeed be the best path forward.

Gemini CLI vs Claude Code – A Feature Comparison

CategoryGemini CLIRatingClaude CodeRating
Cost & AccessibilityFree with Google account, 1,000 requests/day, 60/min⭐⭐⭐⭐⭐Requires Anthropic subscription, pay-per-use⭐⭐⭐
Context Window1M tokens – excellent for large codebases⭐⭐⭐⭐⭐~200K tokens – good for focused work⭐⭐⭐⭐
Code QualityGood for rapid prototyping⭐⭐⭐High-quality, production-ready code⭐⭐⭐⭐⭐
SpeedFast code generation⭐⭐⭐⭐⭐Moderate speed, prioritizes quality⭐⭐⭐⭐
Error HandlingBasic error handling⭐⭐⭐Superior error handling & debugging⭐⭐⭐⭐⭐
User InterfaceAction boxes, summarized outputs⭐⭐⭐⭐Step-by-step announcements, readable format⭐⭐⭐⭐⭐
Enterprise FeaturesLimited enterprise support⭐⭐Enterprise-level security & support⭐⭐⭐⭐⭐
Documentation QualityStandard documentation⭐⭐⭐Detailed, structured documentation⭐⭐⭐⭐⭐
Learning CurveStraightforward setup⭐⭐⭐⭐⭐Requires subscription setup⭐⭐⭐⭐
Multi-file AnalysisExcellent cross-file relationships⭐⭐⭐⭐⭐Good for focused file work⭐⭐⭐⭐
Code ArchitectureBasic architectural insights⭐⭐⭐Strong architectural reasoning⭐⭐⭐⭐⭐
Integration CapabilitiesGood Google ecosystem integration⭐⭐⭐⭐Strong CLI integration, workflow focus⭐⭐⭐⭐⭐
Debugging SupportBasic debugging assistance⭐⭐⭐Advanced debugging & troubleshooting⭐⭐⭐⭐⭐
Code Review QualitySurface-level reviews⭐⭐⭐Thorough, detailed code reviews⭐⭐⭐⭐⭐
Performance OptimizationBasic optimization suggestions⭐⭐⭐Advanced performance insights⭐⭐⭐⭐⭐

Overall Ratings

ToolOverall ScoreBest For
Gemini CLI⭐⭐⭐⭐ (4.0/5)Rapid prototyping, learning, cost-conscious development
Claude Code⭐⭐⭐⭐⭐ (4.5/5)Production code, enterprise projects, quality-focused development

In conclusion, while I could’ve achieved a lot of what I wanted to using Gemini CLI, I didn’t want to sell myself short and wanted to use the best of both worlds to not only generate an app prototype rapidly, but also ensure that the underlying code could be productionized with minimal churn.

In the next article, I will document how I used Claude and Gemini, not only in the Realize phase, but also in the Visualize and Strategize phase to document my vision and implementation plan. I’ll end this article however with a quick installation guide in case anyone’s interested in getting this setup up and running.

Step-by-Step Setup Guide (for Windows)

Step 1: Install Visual Studio Code and Extensions

  1. Download and Install VS Code: Go to **https://code.visualstudio.com/** Download and install VS Code for Windows
  2. Install Essential Extensions: Open VS Code Go to Extensions (Ctrl+Shift+X) Install these extensions: WSL (by Microsoft) – to connect VS Code to your WSL environment Claude Code – Find and install the Claude Code extension from the marketplace

Step 2: Set Up Your Development Environment

  1. Open WSL in VS Code: Open VS Code Press Ctrl+Shift+P to open command palette Type “WSL: New WSL Window” and select it This opens VS Code connected to your WSL environment
  2. Install Shell Command for VS Code (if not already done): Press Ctrl+Shift+P Search for “Shell Command: Install ‘code’ command in PATH” Run this command

Step 3: Authentication Setup

If you haven’t authenticated Claude Code yet:

  1. Get Your API Key: Go to **https://console.anthropic.com/** Create an account or log in Navigate to API Keys section Generate a new API key Important: Keep this key secure and never share it
  2. Authenticate Claude Code: In your WSL terminal, run: claude Follow the prompts to enter your API key Choose your preferred color theme

Step 4: Install Claude Code

# In WSL terminal
npm install -g @google/gemini-cli
gemini auth
# Follow authentication with Google account

Step 7: Configure Both Extensions

Claude Code Setup:

# In VS Code integrated terminal
claude
# Extension auto-installs
# Use Ctrl+Esc to launch directly from editor

Gemini Code Assist Setup:

  1. Click Gemini icon in VS Code activity bar
  2. Sign in with Google account
  3. Accept privacy notice
  4. Enable agent mode toggle for advanced features

Gemini CLI Setup:

# In VS Code integrated terminal
gemini
# Follow on screen prompts for any additional configurations

Step 6: Create Project with Dual AI Context

mkdir my-app-prototype
cd my-app-prototype

Now, perform the below steps:

  1. Open VSCode in your project directory (or create a new folder for your website project)
  2. Create the claude.md file: Right-click in the Explorer panel → “New File” Name it claude.md (exactly this name – it’s what Claude Code looks for) Or use Ctrl+N to create a new file and save it as claude.md
  3. Add the content: Copy the entire enhanced description from the md file that Claude generated above Paste it into your claude.md file Save the file (Ctrl+S)
  4. Create the GEMINI.md file: Right-click in the Explorer panel → “New File” Name it GEMINI.md (exactly this name – it’s what Claude Code looks for) Or use Ctrl+N to create a new file and save it as GEMINI.md

Whew! And that’s it! In the next article, we will go over what needs to be added to the claude.md and gemini.md files to get truly set up to start prototyping. But for that, we need to start with the Visualize and Strategize phase.

If you found this article helpful, drop in a comment; I’d love to discuss!