Your companion guide for building things with AI — no coding experience needed. Prompt examples, styling tips, and a step-by-step approach.
Vibe coding is writing software by describing what you want in plain English. You type a prompt, the AI writes the code, and you iterate by refining your instructions. Think of it as directing a very fast, very literal assistant.
Be specific. “Make it look good” fails. “Use a dark theme with frosted glass cards and a teal accent color” works.
Quality of your output = quality of your prompt. Be specific. Be descriptive. Use the magic words.
Describe
Tell the AI exactly what you want. Be specific!
→Generate
AI writes the code based on your prompt.
→Look
Open the result in your browser and review.
→Refine
Fix one thing at a time with targeted prompts.
→Repeat
Iterate until you’re happy with the result.
Load a dataset, explore it, and find interesting insights — all through prompts.
Read the CSV file in this folder. Show me the column names, data types,
number of rows, any missing values, and 5 random sample rows.
Summarize what this dataset is about in 2-3 sentences.Analyze this dataset and find the 5 most interesting insights.
Look for: which categories have the highest/lowest values,
any surprising outliers, trends over time, and correlations
between columns. Present each insight with the actual numbers.Group the data by [column name] and compare the average values
of [metric column] across groups. Which group ranks highest?
Are there any unexpected results? Show me a summary table.Using this dataset, answer: [your question here]?
Show me the data that supports your answer, including
specific numbers and how you calculated them.Replace [column name] and [metric column] with actual column names from your dataset. The more specific your question, the better the answer.
Turn your data insights into a visual, interactive HTML dashboard using Chart.js and Papa Parse — loaded via CDN (no installs needed).
Build a single-page HTML/CSS/JS dashboard that loads the CSV file
using Papa Parse from CDN. Display a styled data table showing the
first 20 rows. Use Chart.js from CDN to add a bar chart showing
[metric] grouped by [category]. Put everything in one index.html file.Add a second chart: a donut/pie chart showing the distribution of
[category column]. Place it next to the bar chart using CSS Grid
with two columns. Add clear chart titles and a color legend.Improve the styling: use a dark background (#0f0f0f), white text,
and rounded card containers for each chart with subtle box shadows.
Use the font "Inter" from Google Fonts for body text and a monospace
font for all numbers. Add padding and spacing so nothing feels cramped.Add a row of 4 stat cards at the top of the dashboard showing:
total rows, average of [metric], highest value, and the name of
the top-performing [category]. Style them as KPI cards — big bold
number with a small muted label underneath.Add a dropdown filter that lets me select a [category] value.
When selected, update all charts and the stat cards to show only
data for that category. Include an "All" option to reset.
Add smooth CSS transitions when charts update.You don’t need to know CSS — you just need the right words.
| Term | What it does |
|---|---|
| glassmorphism | Frosted glass cards with backdrop-blur |
| bento grid layout | Trendy grid with mixed card sizes (think Apple’s website) |
| typography-driven hierarchy | Big bold numbers, small muted labels |
| KPI cards | Stat boxes with icon + number + label |
| editorial data story | Clean, NYT/Bloomberg-style data viz |
| gradient mesh background | Soft blurred color blobs in background |
| neumorphism | Soft embossed/extruded card style |
| monospace for numbers | Makes data look professional instantly |
| subtle box shadows | Soft shadow beneath cards for depth |
| backdrop blur navbar | Sticky nav that blurs content behind it |
| skeleton loading states | Gray pulsing placeholders while loading |
| Vercel/Linear-quality | AI tools know these brands = clean minimal design |
| smooth CSS transitions | Micro-interactions on cards/buttons |
| cohesive color palette | Prevents AI from using random mismatched colors |
| responsive with CSS Grid | Better than just saying “make it responsive” |
| fade-in on scroll | Elements animate in as you scroll down |
| premium / editorial / minimal | General quality boosters for any design |
“Make it look nice”
“Use a dark theme with glassmorphism cards, a gradient mesh background, Inter font for text, monospace for numbers, and a cohesive teal + warm orange accent palette”
Take any idea — a club page, portfolio, event site, project showcase — and build a full website using vibe coding.
Before prompting, organize your raw materials in a text file or markdown file.
Put in content.md: Site name & tagline, section headings & text, team member names & bios, links/dates/contact info, image file names or URLs.
This is the most important tip in vibe coding. Always ask the AI to plan before it builds.
I want to build a website for [your idea]. Here's my content:
[paste or attach content.md]. Before writing any code, give me a plan:
- What sections should the site have?
- What layout would work best?
- What design style would fit the theme?
- What fonts and colors do you suggest?Once you approve the plan, prompt for the full build.
Now build it as a single-page HTML/CSS/JS website. Use all the content
from my content file. Use the [chosen style] design we discussed.
Load fonts from Google Fonts CDN. Make it responsive. Put everything
in one index.html file.Don’t try to fix everything at once. Go section by section.
The hero section looks great. Now improve the [team/about/gallery]
section: make it [your specific feedback]. Keep everything else the same.Final quality pass before going live.
Final pass: check all alignment, add hover effects on buttons and cards,
add a smooth scroll behavior, make sure mobile layout stacks properly,
and add a fade-in animation on each section as I scroll down.Build a single-page website for [club name]. Include: a hero section with the name and mission statement, an "About" section, a team grid with photos and roles, an events section with dates, and a contact footer. Use a [dark/light] theme with [style term].Build a personal portfolio site for [name]. Include: a hero with name and one-line bio, an "About Me" section, a project showcase as a bento grid with project cards (title, description, image, link), a skills section, and a contact section. Use a minimal editorial design.Build a landing page for [event name] on [date] at [location]. Include: a countdown timer, event description, schedule timeline, speaker cards with photos, a registration CTA button, and a FAQ accordion. Use a bold, high-energy design.Prevents wasted iterations and gives you control over direction
Single index.html with inline CSS and JS is simplest for beginners
Say “improve the X section” instead of regenerating the whole page
Use terms from the styling cheat sheet — the AI knows them
“Use #0f0f0f background with teal (#14b8a6) accents” beats “dark theme”
“Make the navbar sticky with backdrop blur” not “fix everything”
“Only change the footer — do not modify any other sections”
“Stack cards vertically on screens below 768px”
Real text and images always look better than placeholders
Drag your index.html to Vercel or Netlify — live in 30 seconds
Make sure your site is clean, complete, and ready to go live.
Review my index.html file and check if it's ready to deploy on Netlify.
Specifically check for:
- Are all CSS and JS inline (no missing external files)?
- Are all image URLs absolute (https://...) or properly referenced?
- Are there any broken links or placeholder text left in?
- Does the page have a proper <title> and meta description?
- Is it responsive on mobile?
- Are there any console errors?
List anything that needs fixing before deployment.Fix all the issues you found. Also add:
- A proper page <title> and meta description for SEO
- A favicon (use a simple emoji favicon with the link tag)
- An Open Graph image and description so it looks good when
shared on social media
- Make sure all fonts load from Google Fonts CDN
Do NOT change any design or layout — only fix deployment issues.Give me a final deployment checklist for this HTML site going to Netlify.
Format it as a numbered list I can go through one by one.Everything you need to continue your vibe coding journey.
awesome-vibe-coding →
The master list of everything vibe coding
VibeCodex →
Curated prompt collection for Cursor, Windsurf, Bolt
Trickle’s 50 Prompts →
50 prompts organized by category with explanations