Describe what you want clearly, and AI gets it right the first time
The core bottleneck of designing with vibe coding is not being able to say what you want. Call “that layout where uneven images flow downward” what it is — “Masonry” — and AI is far more likely to nail it in one shot. These sites do that translation for you. Start here.
A visual UI dictionary: describe the effect you want in plain words and get the exact term plus a prompt you can paste straight into your AI coding assistant. Covers 100+ patterns — Bento Grid, carousels, skeleton screens, Toasts — each with a ready-made prompt.
26 UI terms in Chinese — learn to say “add a Tooltip to the button” instead of “that little hint when the mouse hovers”. Also includes a four-element method for writing requirements; good for first-time AI builders.
From prompts and context management to a full engineering loop — pick one path and walk it end to end.
A Chinese tutorial from zero to mastery: prompts, skills, context management, quality gates, and the complete loop from idea to shipped product.
A free learning roadmap combining The Vibecoder's Handbook (free chapters), DeepLearning.AI's Vibe Coding 101, and Codecademy's intro course into one curriculum.
Seven courses compared: Coursera (best for beginners), Udemy (learn by building), Codecademy (interactive practice), freeCodeCamp (free), and more.
Course comparison for non-technical founders — DataCamp's hands-on Replit course gets you to a deployable app in about 3 hours.
A cure for vague prompts: change one thing at a time, give narrowly-scoped correction instructions, plus reusable prompt templates (role / goal / constraints / don't-do list / acceptance criteria).
Find references before asking AI to build, and you'll redo half as much. Split into real product screenshots (learn UX decisions, borrow layout logic) and creative concepts (set the visual direction).
Screenshots and full user flows from real apps (Airbnb, Spotify, Duolingo…) organized by scenario — onboarding, checkout, empty states. Free tier is limited; Pro is about $10/mo.
Mobbin for the web: 110k+ real SaaS pages organized by component — pricing pages, docs, testimonials — with a free tier.
Dribbble shots aggregated by component — login forms, 404 pages, personal homepages. Free and updated daily; the fastest way to see 20 approaches to one component.
Designer community — follow trends in typography, color, and motion.
Full project case studies — see how designers put together an entire solution.
The world's top web design awards — where to look for cutting-edge interaction ideas.
A landing-page-only inspiration library with a large collection of real landing page designs.
Another landing-page inspiration library — filter homepage designs by style and industry.
A side-by-side comparison of the sites above: pick by need (Mobbin for app patterns, Refero for SaaS components, Lapa Ninja for landing pages…).
In a hurry? Generate directly and take the prompts and components for free. Solves the blank-canvas problem.
By Vercel: describe in words, get production-grade React + Tailwind + shadcn/ui components.
An open-source React component marketplace: every component ships with a one-click prompt — paste it into Cursor / v0 to generate code adapted to your project. Also supports MCP.
Copy-paste React component library (the same set v0 generates with). The code is yours — change it freely.
10 complete website ideas (thermal-imaging-style homepage, audio visualization…) each with a ready-to-use prompt and implementation notes (Traditional Chinese).
After AI generates the code and you want to tweak the styles, these tutorials explain how things work underneath.
On the new CSS Grid Lanes feature: display: grid-lanes builds a masonry layout in three lines — no JS position math — plus advanced newspaper-style layouts. (Note: Grid Lanes is still experimental CSS.)