Langkau ke kandungan utama

Prompts

Copy a design into your AI tool

Browse an original website design, preview it, copy the prompt and paste it into Claude, Cursor, v0, Lovable or Bolt. Two prompts are free to copy; the rest are included with every Dapols plan, from $99 once. See the plans.

  • Quiet Grain Hero preview

    HeroWith a plan

    Quiet Grain Hero

    A calm, confident hero on a sheet of grainy paper: one huge tight-tracked headline with a hand-drawn accent loop, a topographic contour map of a mountain lake as the only graphic, one button and one quiet link. Warm off-white, near-black and one restrained accent.

    • Minimal
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View
  • HeroFree

    Aurora Glass Hero

    A night-sky hero lit by real aurora curtains of mint, lime and cyan rays, with the headline held in a frosted-glass card with a specular rim, fine grain and floating glass tiles. Includes a pale-fog light theme with the same hues.

    • Dark
    • Glass
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View and copy
  • Murmur Particle Field Hero preview

    3D and Three.jsWith a plan

    Murmur Particle Field Hero

    A cinematic full-viewport hero over 52,000 GPU particles that breathe between a ribbon and a sphere, with depth of field, bokeh, additive glow, a hot core thread, film grain and a lens reticle. Three.js, dark and light.

    • Dark
    • Bold
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    View
  • Pastel Bento Features Grid preview

    FeaturesWith a plan

    Pastel Bento Features Grid

    A premium six-tile bento features section in warm pastels, deep ink and tomato. Each tile carries an illustrated mini interface that bleeds off its edge: a progress card, a fan of version cards, switches, tags, a bar chart and a heat strip.

    • Bold
    • Playful
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View
  • Emerald Glow Three-Tier Pricing preview

    PricingWith a plan

    Emerald Glow Three-Tier Pricing

    Three pricing plans with a deep emerald, glowing middle plan, a glossy ribbon, a real monthly and yearly switch, icon chips, check-bubble feature lists and an all-plans strip. Aurora glow, fine grid and grain behind a calm emerald palette.

    • Minimal
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View
  • Editorial Serif Hero preview

    HeroWith a plan

    Editorial Serif Hero

    A magazine-style hero on grainy paper: an oversized serif headline with an italic spot-colour word, a flat-shadow button, a framed riso-print plate collage built only from CSS shapes, halftone dots and two tiny pictograms, and a numbered issue strip. Ink on paper with one spot colour.

    • Editorial
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View
  • Isoline Contour Hero preview

    HeroWith a plan

    Isoline Contour Hero

    A bold editorial hero built around a luminous self-drawing SVG contour map: dozens of flowing lines trace themselves in over a soft sun glow, glowing routes ignite, nodes pulse, and hovering lights the nearest line.

    • Bold
    • Editorial
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    View
  • Facet Scroll Product Showcase preview

    3D and Three.jsWith a plan

    Facet Scroll Product Showcase

    A four-chapter product page with one sticky canvas: a procedural gem in transmissive, dispersive glass lit by a baked studio, on a lit sweep with a rim glow, while the camera dollies along a spline and the finish changes as you scroll. Three.js, no HDR files.

    • Bold
    • Minimal
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    View
  • Warm Marquee Testimonial Wall preview

    TestimonialsWith a plan

    Warm Marquee Testimonial Wall

    A layered testimonial wall of three tilted card rows drifting in opposite directions, with faded edges, glass cards, star rows, avatar rings, bold feature cards and a pause switch. Pure CSS, a warm amber and terracotta palette, and a calm static grid for visitors who prefer reduced motion.

    • Playful
    • Bold
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View
  • Loam Liquid Features preview

    FeaturesWith a plan

    Loam Liquid Features

    A playful, premium features section: glossy liquid SVG blobs with lit gradients and specular highlights behind four cards, gooey beads that merge on hover or focus, and glossy icons that reveal a flowing gradient through a clip mask.

    • Playful
    • Bold
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    View
  • Morphing Glass Navbar preview

    NavbarWith a plan

    Morphing Glass Navbar

    A sticky navbar that starts as a full-width bar with a text link and, after a little scroll, shrinks into a floating glass pill with a filled button. Shown over an aurora hero with glass cards and a refraction-edge rim. Includes an accessible mobile sheet.

    • Minimal
    • Glass
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View
  • Ember Field preview

    GradientsWith a plan

    Ember Field

    A full-bleed animated gradient background in pure CSS: luminous persimmon, saffron and rose-magenta light drifting over deep plum, with a light bloom, vignette and film grain, one reusable class and five variables.

    • Bold
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View
  • Isoline Waves Background preview

    3D and Three.jsWith a plan

    Isoline Waves Background

    A drop-in animated background: one full-screen shader plane drawing luminous contour lines with relief tints, a key light and depth fog, four CSS-driven colours, a pointer bend and a refined glass card on top.

    • Dark
    • Glass
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    View
  • Redline Kinetic Type CTA preview

    Call to actionWith a plan

    Redline Kinetic Type CTA

    A closing call to action set like a film-title poster: giant SVG type with a flowing red gradient and a hard offset shadow, a timeline ruler with a red playhead, a rotating circular text badge, crossing marquee bands, a liquid ripple that follows the pointer and a magnetic button.

    • Bold
    • Editorial
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    View
  • FAQFree

    Smooth Editorial FAQ Accordion

    An editorial FAQ with a sticky green illustration panel, large serif numerals and a numbered accordion whose open item lifts into a glowing card. Built on native details and summary, with smooth height animation, one answer open at a time and no JavaScript.

    • Minimal
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View and copy
  • Mainmast preview

    FooterWith a plan

    Mainmast

    A premium editorial footer: a giant gradient wordmark that fills the width and glows from below, a glass newsletter card that works without JavaScript, four link columns, an email call to action and a legal row.

    • Bold
    • Editorial
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View

How it works

  1. Pick a design

    Browse by category or search. Every card is a live preview, not a screenshot.

  2. Preview it

    Open a prompt to see it large, in light and dark, at phone width or on a desktop screen.

  3. Copy and paste

    Copy the prompt, choose your AI tool and paste it in. Swap the bracketed slots for your own words.

Hear about new prompts first

We add designs as we finish them. Leave your email and you will be first to know. We are not sending emails yet, and we will never sell your address.

Need a whole site, not a section? Pick the designs you like, choose colors and fonts, and Dapols builds the website for you in your plan. Find my plan or see the plans.

Questions

What is a UI prompt?

A UI prompt is a written brief for an AI coding tool. It names the exact colors, fonts, spacing, layout, motion and accessibility rules of a design, with clearly marked slots for your own content, so the tool builds that design instead of guessing one.

Which AI tools do the prompts work in?

Each prompt has short notes for the tools it is written for, such as Claude, Cursor, v0, Lovable and Bolt. A prompt page marks a tool as tested only when it has really been run there.

Are the prompts free?

Two prompts are free to copy in full. The rest are included with every Dapols plan (from $99 once, or the optional monthly subscription), so owners of a plan get every prompt unlocked at no extra cost. Every live preview, description and FAQ is free to view.

Can I use the designs in my own projects?

The designs are original Dapols work, made to be built from. The licence page explains exactly what you can and cannot do with them.