Project 1: Link-in-Bio

This tutorial proves that Docs = Source Code. You will write a “Golden PRD” (a Blueprint), give it to the AI, and get a working app.

Step 1: The Blueprint (Copy This)

We don’t start by writing code. We start by writing the spec. Copy this entire block. This is your “Source Code”.

# Blueprint: Vibe Link-in-Bio
 
## Objective
Build a mobile-first personal landing page that displays a profile picture, name, bio, and a list of clickable links to social media/projects.
 
## Critical Constraints (Tech Stack)
- Use **React 18** (Functional Components).
- Use **Tailwind CSS** for all styling (no external CSS files).
- Use **Lucide React** for icons.
- Background: A modern, subtle animated gradient (dark mode).
- Aesthetic: "Glassmorphism" (translucent cards with blurring).
 
## Data Model
const LINKS = [
  { title: "GitHub", url: "https://github.com", icon: "Github" },
  { title: "Twitter", url: "https://twitter.com", icon: "Twitter" },
  { title: "Portfolio", url: "https://myportfolio.com", icon: "Globe" }
]
 
## User Stories
1. User sees a centered avatar and "Vibe" bio.
2. User sees a vertical list of links.
3. Hovering over a link card causes a "glow" effect.

Step 2: The Prompt

Now, open your AI IDE (Cursor, Windsurf, or generic Chat) and use this prompt:

“Act as a Senior React Engineer. I have a Blueprint defined below. Implement this as a single file App.js.

[PASTE BLUEPRINT HERE]“

Step 3: The Result (Interactive)

If you did it right, the AI should generate something like this. Try it yourself: Change the name in the code below or add a new link to the array!

Why This Worked

1. Strict Constraints: We told the AI exactly what tech stack to use (Tailwind, Lucide).
2. Visual Language: We asked for “Glassmorphism” and “Glow effects”, terms LLMs understand well.
3. Data First: We provided the LINKS array, so the AI didn’t have to guess the structure.