CVEdge: A Vibe Coding Experiment in AI-Powered Career Tools

Project Overview

Over several months of evenings and weekends I built a full-stack AI-powered CV optimisation tool — 11 templates, ATS scoring engine, AI rewrite system, git-diff review UX, job match engine, interview coach, E2E testing infrastructure, CI/CD pipeline, and admin panel — entirely through Claude Code prompts.

This case study is less about the product and more about what I learned designing at the intersection of AI, prompts, and product intuition.

The Vibe Coding Approach

For a designer this is transformative. The gap between having an idea and seeing it rendered — historically measured in days or weeks — collapses to minutes.

My Workflow

Every feature followed this exact sequence:

1. Think through the design problem in conversation with Claude
2. Preview the UI using interactive widgets rendered in chat — before any code is written
3. Lock the design decisions explicitly — colors, interactions, edge cases, what to remove
4. Write a structured prompt to Claude Code with exact specifications
5. Review the output — screenshot back, iterate if needed
6. Ship — push to Vercel, tests run automatically

Why this matters for design leadership

Traditional design → development handoff has a fundamental problem: things get lost in translation. Designers describe intent, developers interpret it, something different ships.

Vibe coding eliminates the translation layer. As a designer I could specify exact hex values, exact interaction states, exact copy, what to remove, and mobile behaviour explicitly. The output was closer to design intent than any handoff process I have experienced.

The Challenge

The Problem

75% of CVs are rejected by ATS software before a human recruiter ever reads them. Most job seekers never know this is happening — they assume their experience isn't good enough, when the real problem is their CV isn't structured the way ATS software expects.

Every tool that tried to solve this charged $19–$29/month — creating a painful irony: the people who most need help getting a job can least afford to pay for it.

The Competitive Gap

Every existing tool either charges users, does only one thing, or is too technical for non-expert job seekers. None close the loop from CV → job match → interview prep.

Research & Discovery

Four research streams ran before designing a single screen.

Method 1: Job Seeker Survey (80+ responses)

Structured survey targeting active job seekers in US, UK, and India. Focused on ATS awareness, tool usage, and where the process broke down.

Top 5 job seeker pain points

Survey of 80+ active job seekers — US, UK, India

ATS awareness gap

Most job seekers have no idea ATS software is filtering them out

01 83%

No feedback loop

Rejected candidates receive no explanation — they repeat the same mistakes

02 82%

Interview prep disconnect

No tool connects CV optimisation to interview preparation in one flow

03 74%

Tool cost barrier

Existing ATS tools cost $19–$29/month — unaffordable while unemployed

04 71%

Repetitive manual process

Job seekers manually rewrite and reformat their CV for every role they apply to

05 67%

% of respondents reporting this as a significant pain point · n=80+ active job seekers

Top Pain Points

• 83% — Didn't know ATS was filtering their applications
• 71% — Found existing tools too expensive during job search
• 67% — Rewrote their CV manually for each role
• 59% — No way to know if their CV matched a specific JD
• 74% — Felt unprepared for behavioral interview questions

Method 2: Application Session Observation (8 participants)

Observed real job application sessions over video call. Timed each activity and noted friction points.

Key finding: 60% of application time is mechanical — reformatting, rewriting, keyword-guessing — tasks that should be automated. Less than 10% is spent on high-value interview preparation.

Method 3: Deep-Dive Interviews (20 job seekers)

Qualitative interviews across experience levels — fresh graduates, mid-level professionals, senior candidates.

"I applied to 40 companies and heard back from 2. I thought my experience wasn't good enough. Nobody told me my CV was being filtered before anyone read it."
— Mid-level Software Engineer, UK

"I pay $29/month for Jobscan but I'm not working right now. It feels wrong to spend that much when I'm trying to find a job."
— Product Manager, USA

"I know my CV needs work but I don't know what to fix. I need someone to tell me exactly what's wrong — and then fix it for me."
— UX Designer, Canada

Method 4: Competitive Teardown (12 tools)

Deep evaluation of every major CV and ATS tool — as a real job seeker would experience them.

The critical gap: Every existing tool stops at diagnosis. None fix the problem. CVEdge closes this loop entirely — score → fix → match → prepare.

Design Process

Phase 2: ATS Score — Designing for Trust

The ATS score is the core value proposition. Getting the design right required solving a fundamental trust problem: job seekers need to believe the score is meaningful, actionable, and honest — not a black box number.

Score Color System

Score	Color	Status	Primary CTA
90–100	Forest green	Interview Ready	Download PDF
70–89	Emerald	Strong	Re-analyse
50–69	Amber	Needs Work	Fix All with AI
Below 50	Red	Needs Improvement	Fix All with AI

Real-time Estimated Score

The full ATS analysis is AI-powered and takes 3–5 seconds. We also run a client-side keyword scan in real time — users see their score update as they type. This creates immediate feedback that makes editing feel responsive and motivating.

Phase 3: Fix All with AI — Designing Human-in-the-Loop

The most complex design challenge. AI rewrites the user's CV automatically — powerful but inherently risky. Users need control over their own career narrative.

Failed

Attempt 1: Auto-apply all changes silently

AI rewrote and applied all changes without review. Users felt like they'd lost their voice. "This doesn't sound like me" was the dominant reaction in testing.

Failed

Attempt 2: Modal with a list of proposed changes

Showed changes in a modal. Users couldn't assess quality without before/after side by side. Most clicked "Accept All" without reviewing — defeating the purpose entirely.

Shipped

Final: GitHub-style git diff drawer

Red line shows original. Green line shows rewrite. User accepts, rejects, or edits each change individually. Live estimated score updates as user makes selections. After accepting — auto re-analyses ATS and re-runs job match so both scores reflect the changes immediately.

Key design rule: AI only rewrites genuinely weak bullets. If a bullet already has action verb + metric + outcome it is skipped. Users only see changes where the AI is confident it can improve — no noise, no false positives.

Phase 4: Job Match Engine

The job match panel needed to answer three questions simultaneously: How well do I match this role? Why don't I match better? What should I do about it?

JD Red Flag Detector

Users were applying to jobs without realising the JD itself had warning signs. The detector flags high-confidence issues only — avoiding false positives that would erode trust.

Flagged signals

• Role title contradicts experience requirement (Red)
• Unreasonable availability demands — "must be available 24/7" (Red)
• No essential benefits mentioned — insurance, transport for night shifts (Yellow)
• "Wear many hats" or "scrappy team" without substance (Yellow)
• Vague responsibilities with no core duties listed (Yellow)

Not flagged

• Missing salary range — could mean open/negotiable
• Contract roles — candidate may prefer
• Long probation — norms vary by country

Offer Evaluation Score

Scores the JOB not the candidate across 5 dimensions: seniority fit, role clarity, growth signals, remote/onsite clarity, work-life balance. Radar chart + signal rows. Always shows: "AI-estimated. Do your own research before any decision."

Phase 5: Interview Coach

Story Sources

Users build their story library from multiple sources:

• CV bullets — AI pre-fills STAR from existing bullets, user fills gaps
• Portfolio URL — AI reads case studies, extracts stories
• GitHub README — AI reads project descriptions, finds technical stories
• Any URL or PDF — Blog posts, project reports, any document

STAR + Reflection + Summary

Each story has: Situation → Task → Action → Result → optional Reflection. After completing all fields, user clicks "Generate story summary" — AI writes a 2–3 sentence natural narrative they can read before walking into the interview.

Interview Prep Mode

User pastes a JD before any interview. CVEdge surfaces top 5 relevant stories ranked by relevance, with suggested behavioral questions each story answers and a suggested opening line for each answer.

Phase 6: Design System

With a product this complex — CV editor, ATS panel, job match, cover letter, interview coach, dashboard, admin panel — a robust design system was essential.

Prompt Engineering — The Real Design Work

The quality of what got built was entirely determined by the quality of my prompts. Prompt writing became a design discipline in itself.

My Prompt Architecture

Every Claude Code prompt followed a strict structure:

Why this structure:

• Reference CONTEXT.md — injects full product context so Claude Code never conflicts with existing patterns
• File path first — Claude Code always knows exactly what to touch
• Numbered parts — separates concerns, prevents instruction drift
• Exact values — eliminates interpretation errors
• "Share screenshot when done" — forces visual verification, not just code output

CONTEXT.md — The Design System as Machine-Readable Document

The most important design decision of the entire project was creating CONTEXT.md — a single source of truth that every Claude Code prompt references. It contains the complete color system, chip variant system, typography conventions, component patterns, business logic, and explicit anti-patterns.

Without this, every prompt rebuilds context from scratch and drifts from the design system. With it, 50+ prompts over 6 months maintained visual and interaction consistency across the entire product.

Multi-Agent Prompting

For complex features I ran multiple Claude Code agents in parallel — each owning a specific concern:

Running agents in parallel compressed what would have been a multi-day feature into a single session.

The Prompts I Designed

Each prompt was designed as a product specification — not just an instruction. Output format, edge case handling, and failure modes were all specified explicitly.

ATS Analysis Prompt — Key Design Decisions

The initial ATS prompt penalised older experience and required specific formats that were unnecessarily restrictive. Iterating the prompt — not the code — fixed scoring accuracy instantly.

Fix All Prompt — The Hardest Prompt to Write

Getting the Fix All prompt right took 6 iterations. The core challenge: an AI that is too aggressive rewrites everything and loses the user's voice. An AI that is too conservative doesn't help. The prompt constraints are the design work.

Story Extraction Prompt — Seniority-Aware

A prompt that generates the same output regardless of career stage creates poor experiences at both ends. Seniority detection inside the prompt means the AI adapts without any conditional logic in the application code.

Technical Integrations

These were not built for me — I designed, specified, and directed every integration through prompts.

Gemini 2.5 Flash — AI Integration

The AI client is model-agnostic. Switching from Gemini to GPT-4o or Claude requires changing one environment variable. No vendor lock-in at the AI layer.

Token cost analysis:

Action	Tokens	Cost
ATS analysis	~3,000	$0.0003
Fix All — full CV	~10,000	$0.001
Portfolio scanning	~20,000	$0.002
Heaviest power user/week	~176,500	$0.013

At Gemini Flash pricing a free-forever model is financially viable — a design insight that changed the entire product strategy.

Playwright E2E Testing — Infrastructure I Designed

Getting Playwright to work with Google OAuth was a significant problem. Three approaches, one solution:

Failed

Approach 1: Header bypass

Supabase middleware runs before custom middleware.

Failed

Approach 2: Magic link

Redirect chain didn't complete in headless browser.

Shipped

Approach 3: API route test-auth

Created a development-only route that creates a real Supabase session, sets cookies in the correct chunked format, saves storageState for all subsequent tests.

6 tests, all green, running on every push to main via GitHub Actions.

Maintainability & Admin

Most side projects are built to ship — not to maintain. CVEdge was built as if a team would inherit it.

The Admin Panel — Operating the Product Without Code

The admin panel is the operational layer that makes the product maintainable without touching code.

What I can change without a single code deploy:

Prompts as a Database — Not Code

The problem with hardcoded prompts:

The prompts table approach:

Every AI behaviour is editable from the admin panel in 30 seconds. When Fix All was generating too-aggressive rewrites during testing, I fixed the prompt mid-session — without stopping, committing, or deploying anything.

Each prompt has a version integer. Full rollback available instantly.

Ten Autonomous Design Decisions

These weren't requested features — they were product design choices made independently, each reflecting a deliberate philosophy.

Summary — What These Decisions Say

Key Features & Design Decisions

1. Resume Card Dashboard

Contact name and job title instead of filename. Template and date on one muted metadata line. ATS score colored by range. Match % in blue, Cover Letter indicator in purple — only shown if completed. Download and delete icons. Entire card clickable.

Impact: Users immediately see which CVs need attention and which are ready — without opening any of them.

2. Template System — 11 Designs

All designed from scratch. Every template tested in both the visual PDF layer and the ATS text extraction layer — a template can look beautiful but fail ATS parsing. Both dimensions tested on every design.

Design constraints across all templates:

• No profile photos — ATS systems can't parse images
• No skill progress bars — decorative and misleading
• No tables for layout — ATS parsers misread table-based layouts
• All respect design settings — font size, spacing, accent color, paper size

5. Mobile Experience

Full editor functionality on mobile. Tab-based navigation. ATS and job match panels fully responsive. PDF export on all devices.

Impact & Results

What Got Shipped

Design System Outcomes

• Single semantic color system used consistently across 40+ components
• 5-variant chip system handles all signal types without new patterns
• Design decisions documented and reproducible by any engineer

Business Model Insight

Making CVEdge free required understanding the unit economics of AI infrastructure. At Gemini Flash pricing, the heaviest power user costs $0.013/week in AI tokens. That single calculation — which I ran myself — changed the entire product strategy from a subscription model to a free-forever model monetised through job board PPC.

Key Learnings

Reflection

CVEdge taught me that designing for scale means designing for trust — not just for tasks.

The easy version of this product was a CV scoring tool with a paywall. The hard version — the one worth building — required rethinking the business model, the interaction patterns for AI-assisted editing, the trust framework for automated rewrites, and the mental models of users who don't know what ATS means.

The 8-minute fix time isn't a performance metric. It's a design metric. It means we removed everything that didn't need to be there.

As design tools become more capable and AI becomes a collaborator rather than just a subject — the designers who understand how to direct AI precisely, maintain systems across long build cycles, and make the product decisions that AI cannot make will have a compounding advantage.

CVEdge is the proof of concept for that thesis.

CVEdge is a personal side project. All design, architecture, and prompt engineering by B. Sivarami Reddy. Built entirely through Claude Code prompts — zero manually written code.