Home / Learn
10 patterns that separate good vibecoders from great ones. Learn these and watch your scores jump.
Describe structure before style
“make a dashboard sidebar”
“Build a 240px wide dark sidebar. Top: logo. Middle: 5 nav items with icons. Bottom: user avatar and name.”
Why it works: Structure first prevents the AI from guessing your layout intent.
Use hex codes, not adjectives
“make it look modern and dark”
“Background #0f0f0f, cards #1a1a1a, accent purple #8b5cf6, text white #f9fafb”
Why it works: Vague color words mean random results. Hex codes mean consistent results.
Name every element you need
“build a music player”
“Music player with: album art (200px circle), track title + artist, progress bar with timestamps, prev/play/next buttons, volume slider”
Why it works: Every component you don't name won't be built.
Define must-haves AND must-nots
“build a todo app”
“Build a todo app. Must have: add input, checkbox complete, delete button, 3 filter tabs. Must NOT use: external libraries, alerts, or prompts.”
Why it works: Telling AI what to exclude is as powerful as telling it what to include.
Anchor changes to the existing output
“(round 2) make it look better”
“(round 2) Keep the structure exactly. Only change: button border-radius to 12px, add box-shadow to cards, make heading font-weight 800”
Why it works: Without "keep the structure" the AI rebuilds everything from scratch.
Name a real UI as your mental model
“make a nice profile card”
“Profile card like Twitter/X — avatar top center, name + handle below, bio text, follower/following stats row, blue follow button”
Why it works: Referencing a known UI gives the AI a mental model to work from.
Specify font sizes and weights explicitly
“show the temperature big”
“Temperature: 72px font-weight 800. City name: 18px font-weight 600. Condition: 14px text-gray-400”
Why it works: Explicit font sizes create real visual hierarchy instead of guessed proportions.
Define every interactive state
“make the button look clickable”
“Button default: bg purple. Hover: bg darker purple + shadow glow. Active: scale 0.97. Disabled: opacity 40% cursor not-allowed”
Why it works: Interactive states make the output feel like a real product, not a static mockup.
Give exact padding, gap, and radius values
“give it some padding”
“Card padding 24px. Gap between sections 16px. Button padding 12px 24px. Border radius 12px on cards, 8px on inputs”
Why it works: Specific spacing values are the difference between cramped and polished.
Pack structure → style → behavior into one prompt
“todo app with all features”
“Self-contained todo app. Dark bg #0f0f0f. Add input top with + button. Below: scrollable list, each item has checkbox (green when done), text (strikethrough when done), red delete button. Bottom: 3 filter tabs All/Active/Done. Pure JS, no libraries.”
Why it works: Elite allows 1 prompt. Every word must earn its place. Structure → style → behavior in that order.
Pick a challenge and put what you learned into practice.