ASK KNOX
beta
LESSON 464

The Master Prompt for Rebuilds

Seven parts: Role → Goal → Lock Reference → Design System → Section Breakdown → Visual Accuracy → Close. Skip any part and AI fills the gap with interpretation.

9 min read·Design-System-Driven Frontend with AI

Why Rebuilds Fail

A rebuild is the hardest AI-assisted task in frontend work. You have a working reference. You want an accurate reproduction — same sections, same typography, same spacing, same component language. What you get from a vague prompt is a creative reinterpretation: similar in structure, different in every detail that matters.

The gap between "accurate reproduction" and "creative reinterpretation" is the master prompt. Without a structured prompt that constrains AI at every decision point, it defaults to interpretation. With the seven-part master prompt, it has no decisions to make — only specifications to satisfy.

Knox uses a master-prompt-template.md file at ~/dev/master-prompt-template.md for every site rebuild. The same seven-part structure is used for jeremyknox.ai, the academy, indecision.io, and mission-control rebuilds. The template is the constraint system — fill it in with the project's specifics and AI has no room to improvise.

The Seven Parts

Part 1 — Role. "Act as an expert front-end engineer and creative UI developer." This is not fluffy framing. It sets the agent's frame of reference. A generic role ("help me build a website") produces generic choices. A specific role signals the level of expertise the output should reflect.

Part 2 — Goal. "Recreate the reference.png homepage with pixel-accurate fidelity." The goal must reference the locked artifact — not describe it. "Build a dark mode homepage" is a description. "Recreate reference.png" is a target.

Part 3 — Lock Reference. "Do not redesign, simplify, or reinterpret. The reference is the only source of truth." This is the most critical part. Without it, AI will make every improvement it thinks is obvious: modernize the gradient, improve the typography hierarchy, consolidate the sections. All of these improvements are wrong when the task is accurate reproduction. The lock instruction removes AI's permission to improve.

Part 4 — Design System. Paste MASTER.md token values verbatim. Not a summary. The exact hex codes, exact pixel values, exact weight numbers. Inter 700 at 72px for h1. body: Inter 400 16px line-height 1.625. --accent: #00E5FF. glass-card: rgba(255,255,255,0.03) bg, 1px rgba(255,255,255,0.08) border, 12px radius.

Part 5 — Section Breakdown. Name each section in order. State the dominant elements. "Section 1: hero — 72px h1 centered, 18px body at slate-400, single cyan CTA. Section 2: stats row — 3 figures Inter 700 40px, labels mono 700 10px. Section 3: track grid — 3 col glass-cards, badge top-right, progress bar bottom." Without this, AI compresses sections and reorders content.

Part 6 — Visual Accuracy. "Font sizes, weights, and spacing must match. Do not omit elements. Do not add elements not in reference." This reinforces Part 3 at the implementation level. Part 3 prevents redesign at the structural level. Part 6 prevents redesign at the CSS level.

Part 7 — Close. "All instructions above must be followed with extreme precision." Not optional. AI models weight closing tokens in the prompt — the final constraint reminder lands with extra weight.

The Full Flow Before Prompting

The master prompt is the culmination of preparation work. It is not the starting point.

Phases A and B (Gather + Build MASTER.md) must be complete before writing the master prompt. You cannot write Part 4 (Design System) without extracted token values. You cannot write Part 5 (Section Breakdown) without the reference locked.

The most common mistake is starting at Phase C (Write Master Prompt) without Phases A and B. This produces a master prompt with vague token values and generic section descriptions — which is almost as bad as no master prompt at all. Vagueness in the master prompt is vagueness in the output.

Feed the Visual First

There is one instruction that precedes the written master prompt: feed the reference image to AI before any text.

AI models are multimodal. They process images and text together, but visual input establishes the primary context that text modifies. If you paste the master prompt first and then attach the image, AI may process the text description as the primary spec and use the image as a check. If you attach the image first, the visual becomes the anchor — and the text modifies that anchor with constraints.

This sequencing matters most for Phases D (Feed AI) and E (Surgical Fix). When a correction is needed, feed the reference image before the correction prompt: "In the attached reference, Section 2 has three columns. The current build has two. Fix only the column count in Section 2. Do not change anything else."

The master prompt is the specification that a rebuild needs to succeed. It is not a creative document — it is a constraint document. Every part eliminates a category of AI deviation. Together, the seven parts leave AI no room for the creative choices that cause rebuilds to drift from the reference.