Design.dev design.dev

Templates

UI components and landing pages as copy-paste prompts.

  1. Copy the prompt
  2. Paste it into Cursor, Claude Code, Codex, v0, or Lovable
  3. Ship it in your own stack

Landing pages

Complete pages for SaaS, apps, studios, and events.

SaaSNew

SaaS Landing Page

Dev tool page with a live dashboard as the hero.
Mobile appNew

Mobile App Landing Page

Consumer app page with a CSS phone mockup.
AgencyNew

Agency Landing Page

Editorial studio site with huge type.
EventNew

Event Landing Page

Conference page with a countdown and schedule.
Browse all landing pages →

Components

Backgrounds, text effects, cards, forms, overlays, and data.

BackgroundsNew

Aurora Background

Slow curtain aurora on canvas behind a hero, with stars and a ridge line.
CardsNew

Border Beam Card

A single amber beam tracing a pricing card’s border at constant speed.
Text EffectsNew

Text Scramble

Monospace headline that decodes character by character, plus scramble-on-hover links.
SectionsNew

Bento Grid

Six-tile feature grid with a cursor spotlight that lights the borders.
Overlays

Command Palette

Cmd+K menu with grouped results, match highlighting, and full keyboard control.
Data

Real-Time Data Chart

Streaming multi-series line chart on Canvas with hover tooltips and pause.
Data

Data Table

Sortable, searchable, paginated table with a sticky header.
Forms

Date Picker & Date Range Picker

Single-date and range calendar built on the ARIA grid pattern.
Browse all 16 components →

Frequently Asked Questions

What is a prompt template?

A prompt template is a complete, copy-paste instruction set for an AI coding agent. Instead of shipping code you install, it describes the look, motion, structure, behavior, and accessibility of a component precisely enough that the agent builds a near-identical result inside your own project.

Why prompts instead of code?

Code goes stale and is tied to one stack. A prompt adapts to whatever you already use and gets better as models improve. There is no package to install, no version to upgrade, and nothing to maintain in your repo except the code your agent writes for you.

Which AI tools do these work with?

Any coding agent or AI assistant that can write front-end code: Cursor, Claude Code, Codex, GitHub Copilot, Windsurf, v0, Lovable, Bolt, and ChatGPT or Claude in the browser.

Will I get exactly what the demo shows?

Very close. Each prompt pins down exact colors, sizes, timing, and easing, and lists the generic defaults the agent must avoid. Results vary slightly between models; if something drifts, paste the relevant section of the prompt again and ask the agent to match it.

Are the templates free?

Yes. Every template on this page is free to copy and use in personal and commercial projects.

Copied to clipboard