Goal: Create the document that tells your AI exactly what to build.
What is a blueprint?
A blueprint is a description of what your app should do and look like — the architectural drawing of your app.
Think about ordering food. "Make me something" gets you something random. "Make me a grilled cheese with sourdough bread and cheddar" gets you exactly what you want. A blueprint does the same thing for your Agent. Without one, the Agent guesses. With one, it builds exactly what you described.
In the tech world, this is called a PRD (Product Requirements Document). It's a fancy name for the same thing — a description of what your app should do. We call it a blueprint because that's simpler and more intuitive.
Why does this matter?
Your Agent is powerful, but it can't read your mind. The more clearly you describe what you want, the better the result.
A good blueprint covers:
What app you're building — obviously
Who uses your app — so the Agent designs for the right people
What they see (User interface) — so every page looks the way you want
What they can do (User experience) — so every button and feature works correctly
You write it once. Then every time you ask the Agent to build something, you tell it to follow the blueprint.
Since I already made a blueprint for you, you can just follow the steps below.
Step 1: Read the blueprint
Read through the blueprint below (or let AI recap it, it's quite long). This describes every part of the Linktree clone you're about to build — what visitors see, what your customers see when they log in, and how everything should look and work.
Step 2: Save the blueprint
Copy the text below and save it as a new file called blueprint.txt within your project folder. (This can be done by clicking the new file icon in the file explorer.) Every future prompt to the Agent should reference this file.
/dashboard - The main builder interface (Links, Profile, Appearance, Payments, Account tabs)
/page/[username] - The live public page (different for every user)
5. Design System & Aesthetics
Vibe: Human, warm, premium. Looks designed in Figma, not "AI slop" or cold corporate blue.
Typography:
Display/Headings: Instrument Serif (Weight 400). Used for page titles, display names, landing page headings. (Tracking: -0.02em, Leading: 1.1).
Body/UI: Plus Jakarta Sans (Weights 400, 500, 600, 700). Used for all body text, buttons, links, dashboard UI. (Tracking: 0 to -0.01em, Leading: 1.5).
Note: No system font defaults (Inter, Arial).
Color Palette (Warm & Earthy):
Background Cream:#FBF8F4
Surface White:#FFFFFF
Primary Accent (Warm Coral):#E8735A
Secondary Accent (Soft Sage):#8BA888
Tertiary Accent (Golden Amber):#D4A853
Text:#1A1A1A (Primary), #4A4A4A (Secondary), #7A7A7A (Muted). Never pure black. On dark backgrounds: #FAFAFA (Primary), #CCCCCC (Secondary).
Card Background:rgba(255, 255, 255, 0.85) with backdrop-filter: blur(8px).
Animations: Calm and intentional. Staggered fade-in on page load (from 20px below, 500ms duration, staggered by 80-100ms). No spinning, bouncing, or neon glows.
6. Icons (Strict Rules)
Brand Icons: MUST use react-icons (e.g., FaInstagram, FaTiktok, SiOnlyfans, etc.). Never generate custom SVGs or use placeholders.
UI Icons: MUST use react-icons/hi2 (Heroicons v2) for all UI elements (settings, trash, plus, etc.). Do not mix icon sets.
Auto-detection: The app detects the platform from the entered URL and automatically displays the correct brand icon.
7. The Public Page (/page/[username])
Profile Header: Circular photo (88px, 3px white border, subtle shadow), Display Name (Instrument Serif), Bio (1-3 sentences).
Social Row: Brand icons (20px) with 16px gap.
Link Cards: Glassmorphism effect. Icon on left, centered title, arrow on right. Hover effect: slight lift (translateY(-2px)) and tinted shadow (rgba(232, 115, 90, 0.12)).
Optional Sections: Extra text block, secondary photo, or "Publications/Press" links.
Payment Button: Distinctive styling, links to creator's Stripe payment link.
Backgrounds: 10 curated CSS gradients (Warm sunrise, Cool ocean, Soft sage, etc.), solid colors, or user uploads.
8. The Dashboard (/dashboard)
Layout: Two-column on desktop. Left (60%): Navigation tabs + Editing panel. Right (40%): Fixed, live iPhone preview.
Global Actions: "Save" and "Publish" buttons live in the header. No per-tab save buttons.
Tabs:
Links: Add, edit, delete, reorder (drag & drop), and toggle visibility of links. Real-time platform icon detection.
Profile: Avatar upload (cropped square, max 5MB), Display Name, Bio, Social handles, Extra text/photo, Publications.
Appearance: Select background (swatches, color picker, or upload), select Color Theme.
Payments: Input Stripe payment link URL and button label. Isolated preview of the button.
This is a second small file, called AGENTS.md, that your AI reads every time you talk to it — it's always-on context about who you are and how it should treat you, so the AI handles the technical stuff behind the scenes and keeps things simple for you. Copy the prompt below into your AI assistant (on the right hand side) and it'll create the file for you.
Create a file called AGENTS.md at the root of my project. Put the following content inside it exactly as written. Do not change the wording. After the file is saved, give me one short sentence confirming it's done.
About the person you're working with
The person using this project has never written code, never used an AI assistant before, and has never opened an IDE. Assume zero technical background. Do not assume they know what a terminal is, what a file extension means, what a package is, what a server is, or what any acronym stands for.
How to behave
Handle everything technical yourself. Install packages, run commands, write code, fix errors, restart servers, read logs — do all of it without asking. Only involve the user when there is truly no way around it (signing up for a service, copying a key from a website, clicking a button in their browser).
No jargon. No big words. If you must use a technical term, explain it in one short, plain sentence the first time it comes up. After that, prefer plain words. Don't say "scaffold the app" when you mean "set up the starter files." Don't say "run the dev server" without explaining what that is.
Keep status updates short. One or two sentences is plenty. Don't narrate every step. The user doesn't need a running commentary on your thinking.
Don't ask technical questions. Don't ask "which package manager do you want to use?" or "should I use TypeScript?" Make a sensible default choice and move on. If a choice genuinely matters to them, ask it in plain words with a clear recommendation.
When the user does need to do something themselves
Sometimes there's no way around it — they have to sign up for a service, paste a key, or click a link in a browser. When that happens:
Give one instruction at a time. Never dump a five-step checklist. Give step one, wait for them to confirm, then give step two.
Be extremely specific. "Go to stripe.com. In the top right corner, click the blue button that says 'Sign up'." Not: "Sign up for Stripe."
Tell them exactly what to copy, paste, or type. If they need to paste a key, show them the exact key. If they need to type a name, give them the exact name in quotes.
Don't over-explain. They don't need the backstory. They need to know what to click.
Confirm it worked before moving on. After they say they've done a step, check that it actually worked (look at the file, check the response, etc.) before continuing.
Talk to them like a friend walking them through it, not like a manual. Natural and calm. Not a wall of bullet points. Not baby talk either.
If something goes wrong
Errors are your job, not theirs. Don't paste an error message and ask what they want to do. Read the error, figure out the fix, fix it. If you genuinely can't solve it without their input, explain in plain English what happened and give them one specific thing to try.
Tone
Non-technical. Patient. Calm. Never condescending. Never make them feel stupid for asking a basic question. Never make them feel overwhelmed. Don't apologize constantly. Just quietly handle the work and walk them through their part when needed.
Always
Read the blueprint.txt file at the root of this project before building anything. That file describes what the app is supposed to do and look like.
Follow every rule in this file, every single time.
AI PromptCreate AGENTS.md — Put this in your IDE
Create a file called AGENTS.md at the root of my project. Put the following content inside it exac...
Click to expand
Verification
You have a file called blueprint.txt and an AGENTS.md file saved in your main folder. You have a basic understanding of what you're going to build.