Skeuomorphism
Example Prompt:
Design a skeuomorphic UI element, like a leather-bound notebook app interface. Use realistic leather texture, stitching details, drop shadows, and maybe a textured paper background. Font like Georgia or a classic serif.
Swiss Style / International Typographic Style
Example Prompt:
Create a website layout in the Swiss Style for a design conference. Use a strict grid, Helvetica or Univers font, strong typographic hierarchy (different weights/sizes), maybe one bold accent color (like red), and black/white photography.
Grunge Style
Example Prompt:
Design a grunge-style band website. Use distressed paper or concrete textures, ripped edges, layered elements, maybe some 'dirty' brush strokes, dark colors (browns, greys, muted reds), and a typewriter or stencil font.
Modern Tech Style
Example Prompt:
Design a modern tech dashboard UI for data analytics. Use a clean layout with cards, charts (bar, line), Inter or Poppins font, a cool color palette (blues, purples, greys), clear data visualization, and subtle hover effects.
Brutalism
Example Prompt:
Create a brutalist website for an art zine. Use default system fonts (Arial, Times), stark high-contrast colors (black/white or black/yellow), hard borders, no rounded corners, and maybe harsh block shadows.
Retro - 90s Web
Example Prompt:
Generate a 90s Geocities style fan page. Use Times New Roman or Comic Sans, bright clashing colors (blue background, yellow text), animated GIFs (under construction!), maybe a visitor counter, and a table-based layout feel.
Retro - Y2K Aesthetic
Example Prompt:
Design a Y2K aesthetic fashion blog. Use glossy/metallic textures, semi-transparent elements, bubbly fonts, pastel or neon colors (like hot pink, lime green, iridescent blues), and maybe some abstract blob shapes.
Retro - Pixel Art
Example Prompt:
Generate a retro pixel art website for an indie game studio. Use a pixel font (like Press Start 2P), a dark background, bright accent colors (like #00ff00), pixelated icons/logo, and sharp edges.
Illustration Focused
Example Prompt:
Design a website for a children's bookstore heavily featuring whimsical, hand-drawn illustrations. Integrate illustrations around content blocks. Use a warm, friendly color palette and a playful font.
3D Elements / Interactive
Example Prompt:
Create a website product page showcasing an interactive 3D model (e.g., using Three.js or Spline). Allow users to rotate/zoom the model. Use a clean, modern UI around the 3D view.
Dark Mode
Example Prompt:
Create a modern dark mode theme for a tech blog. Use a deep charcoal or navy background (#1a1f2c), light grey text (#e0e0e0), a vibrant accent color (#4d5bff) for links/buttons, and Poppins font.
Bold Typography
Example Prompt:
Design a landing page using oversized, bold typography (e.g., Montserrat ExtraBold) as the main visual element. Keep the layout simple, possibly black and white, to emphasize the text.
Glassmorphism
Example Prompt:
Design a website section using glassmorphism. Use a colorful, blurred background image/gradient. Create semi-transparent white cards with backdrop-filter: blur(10px) and a subtle white border.
Aurora UI
Example Prompt:
Create a website header with an Aurora UI background effect. Use soft, blurred, colorful radial gradients positioned off-canvas that subtly animate or shift.
Natural / Organic Style
Example Prompt:
Design a website for an organic farm using earthy tones (browns, greens, creams), perhaps a subtle paper texture background, rounded corners, and a friendly, legible font like Lato.
Monochromatic Design
Example Prompt:
Create a monochromatic portfolio website using only shades, tints, and tones of blue (e.g., #0d6efd). Vary the lightness and saturation for contrast between text, background, and elements.
Maximalism / Collage
Example Prompt:
Design a maximalist website for an art collective. Use overlapping elements, a mix of fonts, bold and contrasting colors, patterns, textures, and maybe a collage-like feel. Embrace visual richness.
Claymorphism
Example Prompt:
Design UI elements (buttons, cards) using claymorphism. Use soft, rounded shapes, light background colors (like #e0e5ec), and inner/outer shadows to create a fluffy, clay-like 3D effect.
Abstract / Geometric Shapes
Example Prompt:
Design a website background using abstract geometric shapes (circles, triangles, lines) in a pastel color palette. Shapes can be static or subtly animated.
Sustainable / Green Design
Example Prompt:
Design a sustainable brand website focusing on low environmental impact. Use system fonts, a simple layout, optimized images (maybe duotone or grayscale), dark mode option, and clear messaging about sustainability.
Art Deco Style
Example Prompt:
Design a website header or invitation card in Art Deco style. Use strong geometric patterns (chevrons, sunbursts), a black and gold color scheme, sharp lines, and a stylized sans-serif font like 'Poppins' (used geometrically) or a specific Art Deco font.
Neomorphism
Example Prompt:
Design a web interface using Neomorphism. Elements should appear as if they are extruding from the background or pressed into it, using subtle inner and outer shadows. Use a monochromatic color scheme with soft, rounded shapes.
Bento Grid
Example Prompt:
Design a Bento Grid section for a product page. A single 12-column grid with a constant gap of 16px. Tiles span 3, 4, 6 or 8 columns and may span two rows.
Liquid Glass
Example Prompt:
Design a Liquid Glass interface layer. Panels use backdrop-filter: blur(24px) saturate(160%) over a saturated, slightly out-of-focus background.
Editorial / Magazine
Example Prompt:
Design an editorial page layout. Display face: a serif with a strong contrast axis, used for the headline only. Body: a neutral sans or a text serif at 17-19px with line-height 1.6.
Neo-Brutalism
Example Prompt:
Design a neo-brutalist interface. Every card, button and input uses a 3px solid #000 border. The same weight everywhere, no exceptions. Border radius 0. Nothing rounded.
Neo-Swiss
Example Prompt:
Design a neo-Swiss layout. A 12-column grid with a 24px gutter and a consistent outer margin. Place headline across columns 1-9, standfirst across 7-12, body copy across 1-6. The deliberate overlap creates the asymmetry.
Acid Graphics
Example Prompt:
Design an acid-graphics landing page. Background near-black (#0a0a0a). Two accent fills only: acid green (#c6ff00) and electric magenta (#ff2bd1). Never blend them into a gradient.
A working library of AI website prompts, not just a gallery
Every entry on this page answers three practical questions: what the style actually looks like, when it is the right choice for a project, and the exact prompt you can paste into an AI website builder to reproduce it. There are currently 22 documented styles, each with a full breakdown page covering colour tokens, typography, layout rhythm, common failure modes, and a downloadable CSS starter.
Most prompt lists stop at a one-line description. That is not enough to build with. A prompt like "make it glassmorphism" produces wildly different results depending on which model you use, what container it is dropped into, and whether contrast was specified. So each prompt here is written with explicit constraints: what to include, what to forbid, and which CSS properties carry the effect.
How to use this library
- Pick a direction. Browse the 22 styles below. Use "Apply Theme" to preview the palette directly on this page before committing.
- Read the breakdown. Open a style to see its design tokens and the failure cases — the parts that break first when generated by an AI.
- Copy the prompt. Paste it into your builder, then append your own product details. The prompts are written to be extended, not used verbatim.
- Start from the CSS. If the model drifts, take the downloadable stylesheet as ground truth and ask it to match.
Frequently asked questions
Can an AI actually build a good-looking website from a single prompt?
A single sentence will get you a layout, but not a coherent visual system. The prompts that work specify five things: the visual direction, the constraints (fonts, spacing, radius), the content structure, the interaction behaviour, and what to avoid. Leaving out constraints is why most first-attempt results look generic.
Which style should I start with for a SaaS landing page?
For most product sites in 2026 the safe defaults are Modern Tech (clean cards, restrained accent colour) or Bento Grid (modular tiles that carry many features without visual noise). Choose Brutalism or Maximalism only when the brand voice is explicitly loud, because they are hard to keep readable.
Why do AI-generated designs all look the same?
Because the model defaults to the statistical average of its training data: Inter, a soft purple gradient, and 16px rounded cards. Breaking out of that requires naming an alternative typographic tradition and an explicit palette, which is exactly what each prompt here does.
Do these prompts work with v0, Lovable, Bolt and Claude?
Yes, with small edits. Tools that output React components respond well to component-level prompts. Tools that output a single HTML file need the structure spelled out as a page outline instead. The style prompts here are tool-agnostic; only the delivery instructions differ.
Are the downloadable CSS files free to use?
Yes. Each style page offers a standalone CSS file you can drop into any project. Attribution is appreciated but not required.