Vibe Coding 101 starter prompt pack.

Build a modern, mobile-friendly link-in-bio website that can be hosted on Vercel.

The site should include:
- A name or brand section
- A short bio section
- A profile image or logo placeholder
- One featured call-to-action button
- A list of important links
- A simple contact form section
- A clean layout that works well on mobile

Style direction: clean, lightweight, modern, friendly, easy to edit later

Technical requirements:
- Keep the project simple
- Use beginner-friendly code
- Avoid unnecessary complexity
- Make it easy to deploy on Vercel
- Add clear comments only where they help

After building it, briefly explain:
1. What files you created or changed
2. How I can preview the site
3. What I should edit first if I want to customize it

Customize this link-in-bio site for my personal brand.

Here is my information:

Name or brand: [YOUR NAME / BRAND]
Short bio: [WRITE 1-2 SENTENCES]
Main call to action: [EXAMPLE: Book a call / Join my newsletter / View my work]
Links to include:
- [LINK TITLE] - [URL]
- [LINK TITLE] - [URL]
- [LINK TITLE] - [URL]

Style I want: [EXAMPLE: warm, minimalist, bold, creator-focused]

Please update the copy, layout, buttons, and sections so the site feels clear, polished, and easy to use on mobile. Keep the structure simple and beginner-friendly.

Review the current design and improve it without changing the core structure.

Please make the site feel more polished, modern, and intentional.

Focus on: spacing, typography, button styling, mobile readability, section hierarchy, visual balance

Do not redesign everything from scratch. Make small, clean improvements and explain what you changed.

Check the mobile layout and improve anything that feels cramped, hard to read, or hard to tap.

Focus on: button size, spacing between sections, text readability, image sizing, form usability, link tap targets

Keep the design simple and clean. After making changes, tell me what mobile issues you fixed.

Improve the copy on this link-in-bio site so it sounds clearer, warmer, and more direct.

Keep the tone: friendly, confident, simple, not hype-y, not corporate

Improve: headline, short bio, button labels, section titles, contact form text

Do not make the copy longer than necessary. Show me a quick summary of what you changed.

Make only one focused improvement:

[DESCRIBE THE ONE CHANGE YOU WANT]

Do not redesign the whole site.
Do not change unrelated sections.
Do not remove existing content unless needed.

After the change, explain exactly what you updated.

Make this site feel more personal and less generic.

Use this information about me or my brand:
[PASTE SHORT BIO, BRAND NOTES, OR STYLE NOTES]

Improve: headline, bio, button labels, section wording, overall tone

Keep the site clean and simple. Do not make it overly salesy, dramatic, or corporate. After updating, explain the main copy and design changes.

Review the current changes and summarize what was updated in plain English.

Then suggest a short Git commit message. Keep the commit message simple, like:
- Built first version of link-in-bio site
- Improved mobile layout
- Updated button styling

Do not make new code changes unless I ask.

Help me prepare this project for Vercel deployment.

Please check:
- Whether the project structure looks ready for Vercel
- Whether any build scripts or settings are missing
- Whether there are obvious deployment issues
- What I should click or choose during setup

Explain the steps in beginner-friendly language. Do not add unnecessary complexity.

My Vercel deployment failed.

Here is the error message:
[PASTE ERROR MESSAGE HERE]

Please explain what went wrong in plain English. Then tell me:
1. The most likely cause
2. The smallest fix to try first
3. Exactly what file or setting needs to change
4. How to test the fix before deploying again

Keep the explanation beginner-friendly.

Can you confirm that my Supabase project is connected and that the contact_submissions table exists?

Please check whether the table has these fields:
- name
- email
- message
- created_at

If anything is missing, explain what needs to be added in plain English. Do not make changes unless I confirm first.

Connect my contact form to Supabase using the contact_submissions table.

The form should collect: name, email, message

After someone submits the form:
- Save the message to Supabase
- Show a success message
- Show a helpful error message if something goes wrong
- Keep the page from feeling broken or confusing

Keep the implementation simple and beginner-friendly.

After making the change, explain:
1. What files changed
2. How the form connects to Supabase
3. How I can test that it worked

My contact form is not saving submissions to Supabase.

Please help me debug it step by step.

Check for common issues like:
- Missing environment variables
- Incorrect Supabase URL or anon key
- Wrong table name or field names
- Form submit handler problems
- Row Level Security or permission issues

Explain each possible issue in plain English and tell me the smallest fix to try first. Do not rewrite the whole project unless absolutely necessary.

Review this link-in-bio site like a real visitor.

Check for: clarity, mobile usability, broken links, confusing wording, weak CTA buttons, spacing issues, anything unfinished

Give me a short prioritized list of improvements, separated into:
1. Must fix before sharing
2. Nice to improve later
3. Optional polish

Do not make changes yet. Just review and recommend.

Make the site feel more polished without changing the core functionality.

Rules:
- Do not remove working features
- Do not rename important files unless necessary
- Do not change deployment settings unless needed
- Do not make the project more complex
- Keep the site easy for a beginner to edit

Focus only on small improvements that make the site cleaner, clearer, or easier to use. Summarize what changed and what I should test.

Explain the code you just created in beginner-friendly language.

Please explain:
- What each main file does
- How the page is structured
- Where the links are stored
- Where the styling happens
- How the contact form works
- What I should avoid changing for now

Keep it practical. I need to understand enough to safely edit the project.

Something broke after my last change.

Here is what I changed: [DESCRIBE WHAT YOU CHANGED]

Here is what is happening now: [DESCRIBE THE PROBLEM OR PASTE THE ERROR]

Please:
1. Identify the most likely cause
2. Suggest the smallest fix
3. Avoid rewriting unrelated code
4. Tell me how to test whether the fix worked

Keep the explanation beginner-friendly.

Update the link section on my link-in-bio site.

Add or update these links:
- [LINK TITLE] - [URL]
- [LINK TITLE] - [URL]
- [LINK TITLE] - [URL]

Make sure the buttons are clear, easy to tap on mobile, and visually consistent with the rest of the design. Do not change unrelated sections.

Add a simple contact form section to this link-in-bio site.

The form should collect: name, email, message

For now, keep the form simple and easy to connect to Supabase later. Do not connect the database yet unless I ask.

Make sure the form looks good on mobile and matches the rest of the site design.

Help me figure out the next small step for this project.

Here is where I am: [DESCRIBE CURRENT STATUS]

Here is what I want next: [DESCRIBE GOAL]

Please give me one clear next action. Do not give me a huge list. Do not overcomplicate the project. Help me keep momentum.