From pretty
to prompt.

A UI prompt library for vibe coding: learn the vocabulary, copy a structured prompt, paste it into your AI coding editor.

01 — Catalog

Name the piece.

Stop saying “a nice button”. Learn the words the model needs.

Button View details Copy modify prompt

EmailHelper text sits under the field.EmailEnter a valid email.WorkspaceSearch

Input View details Copy modify prompt

Usage this week

12.4k prompts copied this month.

Card View details Copy modify prompt

Name	Status	Role	Updated
North	Active	Admin	2h
Pike	Idle	Editor	1d
Harbor	Active	Viewer	3d

Table View details Copy modify prompt

Modal View details Copy modify prompt

06 — Motion

Watch it move.

Stop saying “make it move”. Name the motion, copy the prompt, watch it play.

Pulse CTA Attention · css View details Copy prompt Copy CSS

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.pulse-cta-btn {
  animation-name: pulse;
  animation-duration: var(--anim-duration, 1.8s);
  animation-timing-function: var(--anim-easing, ease-in-out);
  border: 0;
  border-radius: 12px;
  padding: 14px 26px;
  font: 600 15px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #fff;
  background: var(--anim-accent);
  cursor: pointer;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--anim-accent) 45%, transparent); }
  50% { transform: scale(1.05); box-shadow: 0 10px 34px -6px color-mix(in srgb, var(--anim-accent) 65%, transparent); }
}

Card

Hover Lift Hover & focus · css View details Copy prompt Copy CSS

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.hover-lift-card {
  animation-name: lift;
  animation-duration: var(--anim-duration, 2.4s);
  animation-timing-function: var(--anim-easing, ease-in-out);
  width: min(200px, 100%);
  padding: 18px;
  border-radius: 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e6e7ec);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font: 600 14px/1.3 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--ink, #1a1c22);
}
@keyframes lift {
  0%, 60%, 100% { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
  30% { transform: translateY(-12px); box-shadow: 0 20px 34px -14px rgba(0, 0, 0, 0.28); }
}

Button Press Hover & focus · css View details Copy prompt Copy CSS

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.button-press-btn {
  animation-name: press;
  animation-duration: var(--anim-duration, 1.6s);
  animation-timing-function: var(--anim-easing, ease-in-out);
  border: 0;
  border-radius: 12px;
  padding: 14px 26px;
  font: 600 15px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #fff;
  background: var(--anim-accent);
  cursor: pointer;
}
@keyframes press {
  0%, 100% { transform: scale(1); }
  40%, 60% { transform: scale(0.94); }
}

Skeleton Screen Loading & progress · css View details Copy prompt Copy CSS

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.skel-wrap { width: min(220px, 100%); display: grid; gap: 12px; }
.skel-line {
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, #e7e8ee 25%, #f6f7fa 37%, #e7e8ee 63%);
  background-size: 200% 100%;
  animation-name: shimmer;
  animation-duration: var(--anim-duration, 1.4s);
  animation-timing-function: var(--anim-easing, ease-in-out);
}
.skel-line:nth-child(2) { width: 80%; }
.skel-line:nth-child(3) { width: 60%; }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Spinner Dots Loading & progress · css View details Copy prompt Copy CSS

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.dots { display: flex; gap: 12px; }
.dots .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--anim-accent);
  animation-name: dotBounce;
  animation-duration: var(--anim-duration, 1.2s);
  animation-timing-function: var(--anim-easing, ease-in-out);
}
.dots .dot:nth-child(2) { animation-delay: 0.15s; }
.dots .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-9px); opacity: 1; }
}

Loading…

Progress Bar Loading & progress · css View details Copy prompt Copy CSS

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.prog { width: min(240px, 100%); }
.prog-track {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--anim-accent) 16%, #e7e8ee);
  overflow: hidden;
}
.prog-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--anim-accent);
  animation-name: fill;
  animation-duration: var(--anim-duration, 2.2s);
  animation-timing-function: var(--anim-easing, cubic-bezier(0.16, 1, 0.3, 1));
}
.prog-label { margin-top: 10px; font: 500 12px/1 'IBM Plex Mono', monospace; color: var(--mute, #6b6f7a); text-align: right; }
@keyframes fill {
  0% { width: 0%; }
  70%, 100% { width: 100%; }
}

→

02 — Vocabulary