Skip to content

Form design examples

Forms are where visitors become leads. These keep each step small, give instant feedback and make submitting feel good.

A minimal contact form with floating labels and an underline that draws from the caret side on focus, plus a send button that flies its arrow away.

Interactive Forms

Multi-Step Brief Form

Warm Editorial

A three-step project brief with chip selectors, a segmented budget control and a progress rail; steps slide horizontally with direction-aware springs.

Interactive Forms

Typewriter OTP Input

Warm Editorial

A six-digit verification code input where each digit drops into its slot like a typewriter key and the row stamps green-free 'Verified' in cobalt.

Interactive Forms

Spring Budget Slider

Warm Editorial

A range slider with a chunky draggable thumb that squashes on grab, a tick ruler, and a price label that rolls digits as you drag.

Interactive Forms

A beveled 1995-desktop dialog box: the progress bar fills in chunky blocks and the window can be dragged around the teal desktop.

Interactive Forms

A compact booking form for Grain House: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms

A compact booking form for Studio Salt: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms

A compact booking form for Ben-Ami & Katz: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms

A compact booking form for Fieldnote Roasters: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms

A compact booking form for Petal & Stem: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms

Questions, answered

What is Specimen Design?

A free library of full website designs. Every design runs live in your browser and comes with a detailed prompt you can paste into Claude to build it. Single UI components live separately, in the components lab.

How do I use a Claude prompt to design a website?

Open any design, press “Copy Claude Prompt” and paste it into Claude. You get a complete React component with Tailwind CSS and Framer Motion that you can drop into a Next.js site.

Are the designs free to use?

Yes. All designs and code are free to use in personal and commercial projects under the MIT license.

How do I make an AI-built website not look AI-generated?

Start from a clear design language instead of defaults: a deliberate typeface pairing, a strict palette with one accent, and motion with real spring physics. Every prompt here spells those choices out.

Which design styles are included?

28 design languages, including Neo-Brutalist, Bauhaus, Swiss, Japanese Minimal, Luxury Noir, Retro 70s, Memphis, Y2K, Claymorphism, Risograph, Art Deco and 8-bit.

Can you build a custom website for my business?

Yes. Use the brief form on the homepage and you will get a reply within one working day.