Published on: https://karozieminski.substack.com/p/prompt-pack-100-most-common-ui-elements-for-vibecoding
Author: Karo Zieminski
Date: October 17, 2025
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
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.
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
Best Vibecoding Guides & Prompt Packs - only includes prompts that have been tested in real projects
Vibecoding Tips: The Ultimate Collection - a viral guide on how to go beyond the prototype.