🔐 Prompt Pack: 100 Most Common UI Elements For Vibecoders
What It Is
A Notion database cataloging 100+ common UI elements with ready-to-use vibecoding prompts for each one. It’s essentially a prompt library specifically designed for building interfaces with AI.
Structure of each entry:
UI Element name (Button, Text Input, Modal, Chat Message, etc.)
Category (Navigation, Input, Display, Feedback, Layout, Media, Interactive, Data)
Description (what the element does)
Complexity (Simple/Medium/Complex)
Backend Required (Yes/No)
Database Required (Yes/No)
Vibecoding Prompt - This is the gold: detailed, structured prompts covering frontend, backend, and database considerations
Example from “Text Input Field”:
Create a text input field for [email/name/search]. Requirements:
1) Frontend: Style with focus states, borders, proper padding
2) Add real-time validation with error messages
3) Include character counter if max length specified
4) Support placeholder text and labels
5) Implement debouncing for search inputs
6) Backend: Create validation endpoint if needed
7) Sanitize input to prevent XSS attacks
8) Database: Design table column with appropriate varchar length
For best results, read the guide first.
The guide teaches you how to vibecode (validation, Git, debugging, etc.).
This database gives you what to say when building specific UI elements.
Why This is Valuable
Prevents prompt amnesia - Each element has thought-through requirements
Full-stack thinking - Covers frontend, backend, and database together
Accessibility baked in - ARIA labels, keyboard navigation mentioned
Security conscious - XSS prevention, validation, sanitization
Performance hints - Debouncing, indexed search, proper data types
How To Use It
👉 Download the database from the link below 👇: