Seven Design Patterns Every Vibe Coder Should Know

Most apps are the same seven patterns repeated. If you name them, you can ask AI to build them correctly. If you don't, you get pretty demos that fall apart the moment a real user touches them.

1. 1List — render a collection (with loading, empty, error states)
2. 2Detail — one item expanded, with edit and delete
3. 3Form — inputs, validation, submit, success
4. 4Modal — overlay for quick actions without leaving the page
5. 5Auth gate — block a page unless the user is signed in
6. 6Optimistic update — show success instantly, roll back if the server says no
7. 7Search and filter — narrow a list with input

Build a list of journal entries.

Include all three states:
- Loading: six gray skeleton rows
- Empty: a small illustration + Write your first entry button
- Error: a friendly message + Try again

Each row shows: date, first 80 chars of entry, Edit and Delete buttons.
Delete should be optimistic — disappear instantly, undo toast for 5 seconds.

• shadcn/ui gallery — copy the exact components
• Vercel's design system and Geist UI examples
• Refactoring UI (the book) for the visual rules behind the patterns
• Dribbble — but pick one reference, not fifteen

The big idea: you don't need to memorize code, but you do need to name these seven patterns. Name them in your prompts and your AI-built apps will feel handmade.