Frontend prompt library
Evergreen prompts distilled from public frontend design guidelines by Anthropic, Vercel and others. Paste them straight into Cursor, Claude Code, v0 or any AI coding tool.
13 prompts · updated 2026-10-31
Before writing code, define the theme, audience, and core task, and output a design plan including a color palette, typography, layout, and principles to actively avoid common AI default templates.
Act as a senior design director and first establish a unique design plan for this project: 1. Confirm the core theme and audience; 2. Set 4-6 core hex colors; 3. Plan typography and type scale; 4. Describe the layout in one sentence and using an ASCII wireframe; 5. Establish design principles. Strictly avoid AI default tropes such as warm beige with terracotta, black backgrounds with acid green, newspaper-style columns, and SaaS cards with all rounded corners.
Use this when building UI components and layouts to establish standards for hero sections, type hierarchies, and visual structure, avoiding that generic AI look.
When generating frontend components, please follow these guidelines: 1. The hero section must directly showcase the most distinctive content of the topic, avoiding the blind use of gradient large numbers and default badges; 2. Limit typography to 1-2 curated fonts, and keep body text line lengths under 80 characters; 3. Strictly avoid coloring or bolding a single word within a heading, strictly avoid all-caps tags, and strictly avoid meaningless kickers/pre-titles; 4. Only use numbered lists (01/02/03) when the content is genuinely sequential (such as a timeline).
Use when adding animations and deciding on visual whitespace to ensure a restrained, high-end interface.
Keep the design restrained: 1. Use non-user-triggered animations sparingly, keeping only one well-orchestrated loading or entrance animation; strictly avoid hover transitions on every card or fade-in-and-slide-up effects on every section; 2. Concentrate visual uniqueness in a single spot and keep the rest quiet; 3. Cut all decorations that do not serve the theme; 4. Ensure responsive adaptation, visible keyboard focus, and accessibility.
Use this during the self-review stage or after coding to check copywriting, error messages, and CSS styles.
Review the code against the following rules: 1. Write copy from the user's perspective using simple language, and use active voice for CTA buttons (e.g., use "Save changes" instead of "Submit" for saving edits); 2. Error messages and empty states must clearly state the cause and how to fix it, without apologies or vagueness; 3. Check CSS selector specificity to avoid class name conflicts (like .section and .cta) that break spacing.
Add to rule files to guide keyboard, focus, and state management across all interactive components.
Ensure all flows are fully keyboard-navigable and comply with WAI-ARIA standards. Prioritize `:focus-visible` for visible focus rings, and ensure sticky headers and footers do not obstruct focused elements. On mobile, input fields (`<input>`) must have a font size of at least 16px to prevent automatic zooming. Use URLs for state management (such as deep-linking filters, pagination, etc.). Links must use `<a>` or `<Link>` tags and never be replaced with `<button>` or `<div>`. Icon buttons must provide descriptive `aria-label` attributes.
Source: Vercel Web Interface Guidelines
Self-check when generating animation components or writing CSS styles
You must support `prefers-reduced-motion` reduced-motion variants. Prioritize CSS animations and avoid main-thread JS-driven animations. Animation properties should preferentially use GPU-accelerated `transform` and `opacity`; strictly prohibit using `width`, `height`, `top`, and `left` which trigger layout reflows. Strictly prohibit using `transition: all`; you must explicitly list the animated properties. SVG transformations should be applied to the `<g>` wrapper with `transform-box: fill-box; transform-origin: center;` set.
Source: Vercel Web Interface Guidelines
Use when building form components to ensure a solid user experience and proper form state management.
Every control must be associated with a `<label>` so clicking the label focuses the control. Do not disable the submit button prematurely; allow submissions with incomplete data to trigger validation feedback. Only disable the button and show a loading indicator once submission has started. Never intercept or disable user input or paste operations (even for numeric-only fields, allow any input and validate afterward). In `<textarea>` elements, use ⌘/⌃+Enter to submit and Enter for a new line. Properly configure the `autocomplete` and `name` attributes.
Source: Vercel Web Interface Guidelines
Frontend development checklist to ensure text, localization, and visual alignment meet standards.
Prioritize inline explanations, using tooltips only as a last resort. Empty, sparse, dense, and error states must all be fully designed. Numeric comparisons must use tabular figures (`font-variant-numeric: tabular-nums` or a monospaced font). Status indicators must not rely on color alone and must include text labels. Use curly quotes (“ ”) instead of straight quotes, and use the ellipsis character (…) instead of three dots (...). Use non-breaking spaces (` `) to bind units, shortcuts, and names together (e.g., `10 MB`).
Source: Vercel Web Interface Guidelines
Use when implementing keyboard navigation and focus for navigation, forms, or interactive components.
MUST: Full keyboard support per WAI-ARIA APG; visible, unobscured focus rings (:focus-visible; group with `:focus-within`); sticky/fixed elements never cover focus; manage focus (trap, move, return) per APG patterns. NEVER: `outline: none` without visible focus replacement.
Use when writing forms, input fields, and button submission logic.
MUST: Hydration-safe inputs; loading buttons show spinner and keep original label; Enter submits focused input (⌘/Ctrl+Enter in textarea); keep submit enabled until request starts; accept free text and validate after; errors inline next to fields and focus first error on submit; autocomplete + meaningful name; trim values. NEVER: Block paste in input/textarea.
Use when writing CSS transitions or JavaScript animations
MUST: Honor `prefers-reduced-motion`; animate compositor-friendly props (`transform`, `opacity`) only; animations interruptible and input-driven; correct `transform-origin`. NEVER: Animate layout props (`top`, `left`, `width`, `height`); `transition: all`—list properties explicitly.
Use when handling text truncation, Flex layout children, and long-text content
MUST: Text containers handle long content (`truncate`, `line-clamp-*`, `break-words`); Flex children need `min-w-0` to allow truncation; handle empty states without broken UI for empty strings/arrays.
Use when writing HTML structures, ARIA attributes, or performing accessibility audits.
MUST: Accurate `aria-label`; icon-only buttons have descriptive `aria-label`; decorative elements `aria-hidden`; prefer native semantics (`button`, `a`, `label`, `table`) before ARIA; use `…` character (not `...`); skeletons mirror final content to avoid layout shift.