MatchCV: an interactive prototype for an AI resume tailoring tool

MatchCV is a concept we prototyped in-house. It is a clickable front-end prototype running on sample data, with no backend and no real AI calls. We built it to answer one question cheaply: does the product flow make sense to a user before we invest in building the real thing?

Open the live prototype and click "Load example" to walk through the whole flow. Everything runs in your browser on sample data: no files are uploaded and nothing is charged.

The idea

Most resume tools optimize for keyword matching. MatchCV starts from the target job instead: the job description decides what the resume should emphasize, and the STAR framework (situation, task, action, result) is used to find what is missing from each experience entry. Machine readability is treated as a final formatting check.

One rule shaped the design: the tool must never invent facts. When an entry lacks a measurable result, the product asks the user for the real number and leaves the suggestion pending until they provide it.

What we built

A working prototype covering the whole journey:

1. Create a task from a resume and a job description
2. Confirm the parsed details and resolve anything ambiguous
3. Review the analysis, with the evidence behind each finding
4. Work through rewrite suggestions one at a time, adding missing facts
5. Preview the result, compare versions and export
6. Return later through task history and account pages

It also handles the paths that prototypes usually skip: running without a job description, accepting all safe suggestions at once while leaving the ones that need facts, and the sign-in and payment steps.

How we built it

• React, TypeScript and Vite, with typed sample data standing in for the backend
• A minimal design system built on CSS variables, with an internal reference page showing every style
• Documents before code: requirements, information architecture, user flows and a screen list with the states each screen must support
• A usability test script, so the prototype can be put in front of target users with a consistent set of tasks

Sign-in, payment, analysis and export are simulated locally. No files are uploaded and nothing is charged.

The prototype was first written in Chinese for its initial target users. The version linked here is an English translation of the same code.

Why prototype first

A prototype like this takes a fraction of the time of the real product and exposes problems in the flow while they are still cheap to fix. It also gives a precise specification for the build that follows: every screen, every state and every edge case is already decided.

Status

This is a prototype. It has not been developed into a released product.

What this shows

• Turning a product idea into a testable flow quickly
• Designing for edge cases and empty states from the start
• Building AI features around a clear rule about what the model may and may not do

We offer the same prototype-first approach to clients as part of custom web app development. If you have an idea you want to test, get in touch.