Implementation

In the previous sections, we wrote a PRD that defines exactly what our Text Comparer should do, then turned it into a technical design that specifies how we'll build it — the component architecture, file structure, Web Worker protocol, scroll sync strategy, and test plan. Both documents went through multiple rounds of review and revision until no issues remained.

Now it's time to write code. We have two finalized documents guiding us:

• PRD.md — the what: features, requirements, edge cases, and quality goals
• DESIGN.md — the how: components, data flow, file structure, and implementation decisions

This is the payoff of the planning work. Instead of vaguely asking the AI to "build a text compare tool," we can point it to precise specifications. The AI knows exactly what components to create, where each file goes, how the diff algorithm communicates through the Web Worker, how scroll sync keeps both panels aligned, and what edge cases to handle — because we wrote it all down.

Build Everything in One Shot#

Because this project is a single-page client-side app — two editor panels, a diff engine running in a Web Worker, and a toolbar — we can ask Claude Code to implement the entire app in a single prompt. This works because the scope is manageable and the hard decisions — what to build, how to structure it, where each file goes — have already been made in the PRD and design. The AI isn't guessing; it's following a blueprint.

For larger projects with multiple pages, server-side logic, database interactions, or complex state management, you'd want to break the implementation into smaller prompts — one feature or module at a time. But for a focused tool like this, one shot is the way to go.

Before prompting, make sure your conversation context is clean. If you've been chatting with Claude Code about the PRD or design, run /clear to start fresh. This forces the AI to work from the finalized documents rather than earlier drafts.

Make sure you have both PRD.md and DESIGN.md in your text-compare project root. Claude Code needs these files in the project directory so it can read them during implementation.

Since this prompt will generate many files, it's best to set Claude Code's permission mode to "Edit automatically" before running it. This lets the AI create and edit files without asking for confirmation on each one — otherwise you'll be clicking "Allow" dozens of times. You can change this in the Claude Code settings or by typing /permissions in the chat.

Claude Code will read both documents, understand the full scope, and generate all the files — library code, worker, components, context, and page. Because the design specifies every file path, component interface, and data flow, the AI can produce a coherent, working app rather than a collection of disconnected pieces.

What to Expect#

Depending on the complexity, Claude Code may take a few minutes to generate everything. You'll see it creating files one by one — typically starting with the types and core library, then the worker, then the UI components, and finally wiring everything together.

Once it finishes, you should have:

• Types (src/types/diff.ts) — Shared type definitions for diff segments, chunks, modes, and settings
• Core library (src/lib/) — diff-computation.ts (pure diff logic using diffLines, diffWords, diffChars), diff-protocol.ts (worker message types), scroll-sync.ts (alignment anchors and offset mapping), export.ts (unified diff, plain text, and HTML generators), file-upload.ts (validation and reading), and settings.ts (localStorage persistence)
• Web Worker (src/workers/diff.worker.ts) — Validates input size limits, delegates to computeDiff(), posts results or errors back
• Context (src/context/DiffContext.tsx) — DiffProvider managing editor content, diff results, settings, debouncing, and navigation state
• UI components (src/components/) — CompareView (orchestrator), EditorPanel (textarea with line numbers and inline highlights), DiffLine (rendered line with highlight spans), Toolbar (mode toggle, nav, swap, clear), ExportMenu, SettingsPopover, StatsBar, WarningBanner, and UndoToast
• Page (src/app/page.tsx) — Main page composing the CompareView
• Tests (__tests__/) — Unit tests for diff-computation, scroll-sync, export, file-upload, settings, and the worker

With the code generated, it's time to verify everything works. In the next section, we'll test the app, run the test suite, and fix any issues with Claude Code's help.