☕🤖Tutorial: Build a Simple Client Tracker With Claude Code (No Spreadsheet Chaos)
PLUS: everything you need + all prompts inside...
Hey AI Breakers 👋
Your client info is everywhere.
One client lives in a Google Sheet. Another in your notes app. A third buried in an email thread from three months ago.
And that deal you’ve been nursing along? You genuinely can’t remember where it stands without digging through five different places to find out.
Today, you’ll build an AI Client Command Center using Claude Code. A clean, browser-based tracker that lives on your computer, needs no subscription, and shows you everything at a glance in one place.
✅ A full client list with status, contact info, and deal value
✅ Color-coded pipeline stages (Lead, Active, Paused, Closed)
✅ Per-client notes and next action reminders
✅ A summary dashboard showing total pipeline value and active count
✅ Search and filter so you find anyone in seconds
✅ A “Needs Attention” view that surfaces clients you haven’t contacted recently
Let’s build it 👇
🧠 How the AI Client Command Center Works
Here’s what’s happening under the hood:
You’ll use Claude Code to build a custom HTML file from scratch, based on your business needs.
The system is built across 5 prompts, with each one adding a new layer. By the end, you’ll have a fully working tracker tailored to your workflow, not a generic template you need to force into place.
What used to require hiring a developer, waiting days, and paying for custom work can now be done yourself in about 45 minutes. That’s what makes Claude Code such a powerful shift for non-technical business owners.
🗺️ Prompt #1 → The Requirements Mapper (define exactly what you need before a single line of code)
The most common mistake people make with Claude Code: jumping straight into “build me a thing” without giving it enough context about how your business actually works.
This prompt fixes that. You give Claude Code the full brief, and it confirms the plan back to you before building anything. Catch misunderstandings now, not after it’s written 300 lines of code you have to redo.
What fields matter to your business specifically
What pipeline stages a client moves through in your world
What “I need to follow up” actually means for how you work
✅ Use this every time you start a new build in Claude Code. The confirmation step saves enormous amounts of back-and-forth.
Prompt:
You are a senior web developer and business systems designer specializing in practical tools for small business owners.
I want to build a simple client tracker that lives as a single HTML file I can open in my browser. No frameworks, no backend, no internet required.
About my business:
- My role: [YOUR ROLE: e.g., freelance consultant / agency owner / coach / service provider]
- What I do: [DESCRIBE YOUR BUSINESS IN 1-2 SENTENCES]
- How many clients I typically manage at once: [NUMBER]
Fields I need to track for each client:
- Client name and company
- Contact email and phone number
- Current status (Lead, Active, Paused, Closed Won, Closed Lost)
- Deal or project value ($)
- Start date and last contact date
- Next action (text) and next action due date
- Notes (freeform text area)
- [ADD ANY OTHER FIELDS SPECIFIC TO YOUR BUSINESS: e.g., referral source, industry, contract type]
My pipeline stages in order: [e.g., "Lead > Discovery Call Booked > Proposal Sent > Active > Closed"]
Before writing any code, confirm back to me:
1. The full list of fields you'll include with their data types
2. The pipeline stages and what color you'll use for each status badge
3. The key features you'll build (table, dashboard, search, filter, notes)
4. Any clarifying questions before you start
Do NOT write any code yet. Just confirm the plan.💡 Tip: The “do NOT write any code yet” line is non-negotiable. Without it, Claude Code will start building immediately and you’ll end up correcting a half-built tracker instead of a clean brief. Always confirm the plan first on any build.
🏗️ Prompt #2 → The Tracker Builder (the full working file in one shot)
Once you’ve confirmed the plan from Prompt #1, this is where the magic happens. Claude Code builds the complete tracker: HTML, CSS, and JavaScript all in a single file, ready to open and use.
This prompt produces a working tool. Not a skeleton. Not a “you’ll need to add X.” The whole thing.
Full client table with all your confirmed fields
Add, edit, and delete client rows
Color-coded status badges so you can scan the list at a glance
Data saves automatically using localStorage so nothing disappears when you close the tab
A summary bar at the top showing total clients, total pipeline value, and active count
✅ Use this immediately after confirming the plan. Save the output as client-tracker.html on your desktop and double-click to open it in Chrome or Safari. You’re live.
Prompt:
You are a senior web developer building a clean, practical business tool for a non-technical business owner.
Build the full client tracker based on the plan we just confirmed.
Technical requirements:
- Single HTML file (HTML + CSS + JavaScript all in one file, no external dependencies)
- Works offline in any modern browser
- Data persists using localStorage so it survives page refreshes and browser restarts
- No frameworks, no CDN links, no internet required to function
Design requirements:
- Clean, professional look: white background, subtle card shadows, readable sans-serif font
- Responsive layout that works on laptop screens
- A sticky header bar showing: [YOUR BUSINESS NAME] Client Tracker | Total Clients: X | Active: X | Pipeline Value: $X
- The pipeline value and counts update live as you add or edit clients
Table requirements:
- One row per client with all confirmed fields as columns
- Status column shows color-coded badges: green for Active, blue for Lead, yellow/orange for Paused, dark green for Closed Won, red for Closed Lost
- An "Actions" column with Edit and Delete buttons on each row
- Clicking Edit opens an inline form or modal to update that client's details
- Rows are sorted by status by default (Active first, then Lead, then others)
Add Client form:
- A prominent "Add Client" button at the top of the page
- Clicking it opens a clean form with all fields
- Required fields: client name, status
- All other fields optional
- A "Save" and "Cancel" button
[PASTE THE CONFIRMED PLAN FROM PROMPT #1 HERE]
Output the complete, working HTML file. No placeholders, no TODOs, no "you'll need to add X" comments. Give me the full working file I can open immediately.🧠 Tip: After Claude Code outputs the file, copy everything from
<!DOCTYPE html>to the closing</html>tag. Paste it into a text editor (TextEdit on Mac, Notepad on Windows), save it as client-tracker.html, then open it in your browser. That’s it. Your tracker is running.
📊 Prompt #3 → The Status Board (filtering and pipeline visibility)
A table with 5 clients is fine. A table with 20 clients where you can’t filter is a mess. This prompt turns your tracker into an actual pipeline management view.
Filter by status with clickable buttons (All, Lead, Active, Paused, Closed)
Sort any column by clicking the header
Search bar that filters as you type
A “Needs Attention” tab for clients overdue for follow-up
✅ Use this after you’ve verified the basic tracker works. The “Needs Attention” filter becomes your daily morning check.
Prompt: