UI Prompty do Vibe Codingu
Kompletna biblioteka promptów layoutu i gotowych komponentów Tailwind CSS dla Vibe Coderów. Wybierz sekcję UI, skopiuj prompt, wklej do Cursor / Claude / v0 / Bolt / ChatGPT i otrzymaj czysty, gotowy do wdrożenia kod.
Split-screen with visual
form on one side, brand imagery on the other
Centered card sign-up
minimal boxed form, great for modals too
One-time code (OTP)
six-digit verification input
Magic link request
passwordless email sign-in card
Reset password with strength meter
new password form with live requirements
Two-factor setup with QR
pair an authenticator, then save backup codes
Workspace SSO gate
email first, then sso or password
Passkey sign-in with fallback
biometric prompt first, password as the escape hatch
Account chooser
pick a signed-in identity or add another
New device approval
approve or block a sign-in from another machine
Workspace invite acceptance
join a team from an emailed invitation link
Verify email with resend timer
waiting state with a cooling-off resend button
OAuth consent screen
granting an app access, scope by scope
Account locked with recovery
too many attempts, and the way back in
Active sessions manager
every signed-in device, with a way to end it
Guest or account checkout gate
three ways past the sign-in wall
Trial signup with plan summary
form on the left, what you are getting on the right
Three-tier with highlight
classic 3 plans, middle one featured
Single plan focus
one bold plan with a monthly/yearly toggle
Comparison table
feature matrix across plans
Usage-based estimator
slider that prices metered consumption
Base plan with add-ons
core price plus optional modules
Credit pack top-up
one-time bundles with volume discounts
Prices in local currency
region switcher that converts every plan
Per-seat pricing with quantity stepper
team size drives the monthly total
Change plan with prorated preview
what the upgrade actually costs today
Plan slider with feature reveal
drag a range to land on the right tier
One-time licence versus subscription
two purchase models weighed side by side
Enterprise quote request panel
sales-assisted tier with a short qualifying form
Module bundle builder
tick the parts you need and watch the total settle
Marketplace take-rate tiers
commission that falls as volume climbs
Sliding scale supporter pricing
pay what the project is worth to you
Device plus plan pricing
hardware up front or spread across the term
Discount programmes panel
reduced rates for the groups that qualify
Bento grid
asymmetric tiles of varying size
Three-column icons
simple icon + title + text triad
Alternating showcase
text and media rows that flip sides
Tabbed feature switcher
css-only tabs, no javascript needed
Grouped capability checklist
dense four-column feature index
Before and after split
the old way beside the new one
Scroll-snap feature carousel
swipeable cards with arrows and dots
Integrations directory with filter
searchable logo grid grouped by purpose
Sticky visual with scrolling steps
panel stays put while the story scrolls past
Hover-to-preview feature list
a list on the left swaps the panel on the right
Security and compliance panel
certifications, controls and a link to the trust centre
API block with language tabs
developer-facing feature with switchable snippets
Public roadmap columns
shipped, in progress and under consideration
Buy versus build panel
an honest cost comparison against doing it yourself
Platform availability matrix
what works on web, mobile, desktop and cli
Accessibility commitments
conformance, keyboard support and how to report gaps
Architecture flow diagram
how data moves, drawn in boxes and arrows
Centered headline
big type, subtext, dual ctas
Split hero with screenshot
copy left, product image right
Gradient spotlight
dark hero with a radial glow
Left-aligned hero with stat strip
editorial copy over a metric footer
Waitlist hero with social proof
signup form plus overlapping avatars
Install command hero
developer landing with a copyable command
Before/after drag hero
copy beside a draggable comparison panel
Search-first hero
a single query field carries the whole page
Mobile app hero with phone frame
copy on the left, a css-drawn handset on the right
Hero with rotating role
one headline that cycles through audiences
Marquee logo hero
headline over a continuously scrolling customer row
Editorial rule hero
magazine masthead with hairlines and a dateline
Booking hero with date fields
search widget sitting under the headline
Event hero with countdown
date, venue and a ticking clock to the doors
Portfolio hero with work strip
introduction over a row of recent projects
Donation hero with amount chips
cause on the left, giving form on the right
Local business hero with hours
address, opening times and a call button
Full-width dark banner
bold end-of-page call to action
Inline newsletter
text left, email form right
Two-path CTA split
self-serve versus talk-to-sales cards
Sticky bottom conversion bar
persistent offer strip with dismiss
Countdown launch banner
live timer over an early-access signup
Exit-intent offer modal
one-shot offer as the visitor leaves
Referral link CTA
copyable invite link with a reward tracker
In-app upgrade nudge
usage meter that makes the limit concrete
Trial CTA with reassurance
big ask, softened by four small promises
App download CTA with QR
desktop visitors get a code, phones get the buttons
Community join banner
live member count and a preview of the chatter
Webinar registration strip
session details and a two-field signup
Renewal reminder banner
contract end date with the two decisions available
Free shipping progress bar
how far the basket is from the threshold
Gated asset download
a report preview traded for an email address
Hiring call-to-action
open roles listed under a short pitch
Four-metric row
big numbers with labels
Stats on dark card
metric trio inside a panel
Metric cards with sparkline bars
kpi tiles with a css-only trend chart
Goal progress bars
targets with completion percentages
Uptime status strip
per-service history bars with a live summary
Cohort retention heatmap
shaded grid of weekly retention
Count-up metrics on view
figures that animate the first time they appear
Ring gauge trio
three svg donuts with a figure in the middle
Conversion funnel steps
tapering bars with drop-off called out
Week-over-week delta table
compact metric table with signed changes
Live counter ticker
a number that keeps moving while you watch
Leaderboard with rank movement
positions, scores and which way they moved
Benchmark against industry
your figures next to the median and the top decile
Poll results breakdown
survey answers with counts and a total
Sustainability impact panel
emissions, energy and materials with context lines
Milestone counters timeline
company numbers pinned to the years they happened
Sticky top nav
logo, links, and cta
Nav with mega dropdown
hover panel of grouped links
Floating pill nav
detached rounded bar over the page
App bar with search and tabs
product header plus section tabs
Collapsible sidebar nav
grouped vertical menu that shrinks to icons
Docs bar with version switcher
breadcrumb, version dropdown, older-release notice
Mobile drawer menu
hamburger that slides a full-height panel in
Nav with announcement bar
dismissible notice sitting above the header
Sliding underline tabs
indicator that animates between sections
Workspace switcher nav
app bar with a searchable tenant dropdown
Shrink-on-scroll nav
tall header that compacts once the page moves
Shop nav with cart badge
category row, search and a basket count
Breadcrumb page header
location, title and the actions for this record
Bottom tab bar
mobile app navigation pinned to the bottom edge
Nav with currency and language
international storefront controls in the bar
Anchor nav with scroll spy
section links that follow the reader down the page
Three-card grid
quote cards with avatar footer
Featured single quote
one large centered testimonial
Logo wall + quote
social proof strip with a highlight
Masonry quote wall
uneven columns of varied-length quotes
Rating summary with reviews
score breakdown beside recent reviews
Video story cards
play-button thumbnails with a pull quote
Auto-advancing quote slider
one quote at a time with a progress ring of dots
Case study result card
a quote anchored to the number it produced
Social post wall
screenshots of praise, laid out as posts
Review badges with quote
third-party ratings framing a single endorsement
Avatar tab quote switcher
a row of faces selects which story shows
Scrolling wall of love
two rows drifting in opposite directions
Filterable quote grid by industry
chips narrow the wall to your own sector
Interview-style testimonial
a conversation, with pull quotes lifted out
Quote over product screenshot
endorsement laid across the thing being praised
Team voices for careers
what the people who work there actually say
Logo wall with hover quotes
customer marks that reveal what they said
Multi-column footer
brand + link columns + legal row
Minimal centered footer
logo, inline links, copyright
Dark footer with newsletter
signup panel above the link columns
Oversized wordmark footer
giant brand type with a thin link row
Footer with overlapping CTA card
white conversion card sitting on a dark footer
Compact app footer bar
slim in-product strip with status and locale
Footer with status and region
operational badge and locale controls in the base
Mega footer with app badges
six link columns and mobile download blocks
Footer with latest updates
recent posts sit beside the navigation columns
Studio contact footer
address, hours and a direct email in place of links
Regulated disclosure footer
dense small print for financial or medical products
Accordion footer for mobile
link columns that collapse on small screens
Docs footer with prev and next
page navigation, edit link and feedback in one bar
Sponsors and partners footer
tiered supporter logos above the small print
Footer with office locations
three cities with addresses and local contacts
Footer with careers highlight
open roles promoted alongside the navigation
Accordion list
expandable questions using <details>
Two-column FAQ
heading left, questions right
Searchable FAQ with filters
search field, topic pills, results list
FAQ card grid with support tile
three-up answers plus a contact card
Accordion with helpful votes
answers that collect feedback as they close
FAQ with category rail
sticky topic list beside grouped answers
FAQ with copy-link anchors
each answer has its own shareable url
Billing FAQ with plan recap
answers beside a sticky summary of the current plan
Conversational FAQ bubbles
questions and answers styled as a chat thread
FAQ with expand-all control
counter and a single switch for every answer
FAQ tabs by audience
different answers for buyers, admins and developers
Troubleshooting decision tree
one question at a time until the answer appears
Glossary index A to Z
terms defined, jumpable by first letter
Shipping and returns FAQ
policy answers with a delivery cost table
FAQ with related articles rail
answers beside the documentation they point to
FAQ with demo video cards
short clips answering the visual questions
Sidebar + stat cards
app shell with metric row
Data table with toolbar
searchable list with status chips
Chart card with legend
css-only stacked bars and range picker
Activity feed panel
timeline of events with actor avatars
Kanban board with drag and drop
four columns, movable cards, live counts
Inbox split view
conversation list beside a reading pane
Analytics overview with range chips
date range switches every figure on the page
Usage and billing meters
every metered resource against its allowance
Incident board
live incidents ranked by severity with owners
Team and roles admin
member table with inline role controls
Week schedule grid
seven columns of time blocks with a now line
Log viewer with live tail
streaming lines with severity filters and pause
Cost explorer by service
spend split across services with a forecast
Feature flag rollout panel
percentage targeting with environment toggles
Regional performance board
latency and uptime per region beside a map block
Approvals queue with detail drawer
list on the left, the selected request on the right
Stepper progress
numbered steps with a current state
Checklist card
getting-started tasks with progress
Role picker cards
selectable tiles that tailor the setup
Product tour coachmark
spotlight tooltip anchored to a button
Invite teammates step
add addresses, set roles, send or skip
Connect your stack step
integration tiles that flip to connected
Two-step account wizard
validated fields gate the next button
CSV column mapping step
match uploaded headers to expected fields
Brand your workspace step
logo, colour and preview side by side
Goal picker with chips
multi-select intent that shapes the setup
Setup complete celebration
closing screen with the obvious next actions
Install the CLI step
copyable commands per operating system
Notification preferences step
choosing what reaches you and where
Sample data or your own
a fork in the road at the start of setup
Resume onboarding banner
picking setup back up where it stopped
Welcome tour modal
a first-run dialog with three things to try
Blog card grid
cover image, tag, title, meta
Article prose layout
readable single-column post body
Featured post with side list
one large story plus compact runners-up
Filterable post index
topic pills over a dense row list
Article with sticky contents
reading progress bar and live table of contents
Changelog timeline
release notes down a dated rail
Newsletter archive list
numbered issues with subjects and open rates
Author profile with posts
byline page pairing a bio with recent writing
Podcast episode list
player rows with duration and show notes link
Guide library with difficulty tags
learning content sorted by level and length
Article end matter with share rail
what sits under the last paragraph of a post
Series navigation for a post
part three of five, with the whole arc visible
Article with margin notes
sidenotes and footnotes beside the prose
Comment thread with replies
discussion under an article, one level deep
Content search results
matches across posts, docs and videos
Case study layout
client facts in a rail beside the narrative
Split contact form
info panel + form fields
Simple support card
compact centered message form
Support channel grid
route people to the right team
Demo booking with time slots
pick a day, then a slot, then confirm
Offices with live local time
city cards that know whether the desk is open
Support chat widget
floating bubble with a canned-reply thread
Routed enquiry form
picking a department rewrites the form around it
Feedback rating widget
score first, then a comment box appears
Bug report form
severity, steps and environment in one submission
Request a callback card
phone number, timezone and a preferred window
Press and media contact
media enquiries beside downloadable brand assets
Store locator with results
postcode search beside a list of nearby shops
Department directory table
who handles what, with a route for each
Email preferences page
unsubscribe options short of leaving entirely
Partnership enquiry form
qualifying questions with a budget range
Priority escalation card
the route for something genuinely on fire
Toast notification
floating success message
Empty state
friendly no-data placeholder
Cookie consent
bottom privacy banner
Pricing badge / callout
small promo strip
Command palette
spotlight-style ⌘k search overlay
File upload dropzone
drag area with in-progress file rows
Type-to-confirm delete dialog
destructive action gated by an exact match
Skeleton loading state
pulsing placeholders that swap for content
Inline workspace slug editor
edit, validate, and save a url without leaving the page
Keyboard shortcut recorder
capture accessible key combinations and flag conflicts
Selective diff staging
review and stage individual code hunks
WCAG contrast checker
test color pairs with live accessibility results
Cron schedule builder
plain-english controls that emit a cron expression
One-time API key reveal
shown once, with a countdown and a copy gate
Markdown live preview
split editor rendering as you type
Timezone overlap planner
four cities lined up to find a workable hour
Passphrase generator
word-based secrets with a live strength readout
Regex tester
pattern, flags and highlighted matches
JSON tree viewer
collapsible nodes with types and counts
Design token swatch sheet
palette, spacing and radii with copyable values
Keyboard shortcuts sheet
a searchable cheat sheet in a dialog
Prompt token counter
live estimate against a model context window
Agent run trace
expandable tool-call timeline for an ai run
Feature flag rollout dial
percentage slider with a live bucket grid
Webhook delivery inspector
delivery log with backoff-aware retries
Release notes composer
conventional commits to a version bump
Drag-to-reorder priority stack
pointer and keyboard reordering with live ranks