Your AI builds boring UI.
Let's fix that.

Copy-paste battle-tested design prompts to force Codex, Claude, and v0 to generate high-end, intentional interfaces

Engineered for
Claude
v0.dev
Cursor
GPT-4o
Gemini

A little design direction

Same brief. Two very different results.

Generic AI output01

The familiar default.

With our prompt02
Glassmorphism

A point of view. In every detail.

View prompt
29
design styles
1-click
copy & paste
Any
AI tool

Glassmorphism preview selected.

How it works

From generic to distinctive in 4 steps

01

Pick a design style

Browse the curated design systems. Each has a distinct personality, use case, and set of rules.

02

Copy the prompt

Each style includes a ready-to-paste skill prompt with exact colors, typography, spacing, and component rules.

03

Paste into your AI workflow

Drop it into ChatGPT, Claude, Cursor, v0, or any AI tool. Ask it to apply the guidelines to your UI.

04

Get UI with actual identity

Instead of generic defaults, your AI output now follows a specific design direction — with personality and purpose.

Find Your Style

What are you building?

Not sure where to start? Pick what you're building and jump straight to styles that fit.

SaaS landing page

Clean, conversion-focused, built to look credible from day one.

Portfolio or personal site

Let the work speak — minimal chrome, maximum clarity.

E-commerce store

Product-first layouts that build trust and drive checkout.

Newsletter or publication

Editorial weight that makes readers take you seriously.

Dashboard or admin panel

Data-dense interfaces that stay legible under pressure.

Bold launch / indie product

Loud, memorable, impossible to scroll past.

Design Systems

29 styles that escape AI defaults

Each comes with a full design brief — palette, typography rules, spacing guidelines, and a ready-to-paste skill prompt.

Warm editorial article layout
  • Article Canvas / Card: #FFFFFF
  • Brand Orange: #FB991C
  • Heading Navy: #022539
  • Peach Icon Surface: #F6D7A8

Blog Detail Page UI Design

Clear advice. Warm details. Built for reading.

Best for
Long-form buying guides and practical technology advice
Consumer fintech landing page
  • Warm Off-White: #F8F9F6
  • Primary Green: #176B52
  • Deep Ink: #142722
  • Fresh Mint: #B7E4C7

Fintech UI

Bold. Precise. Money made simple.

Best for
Consumer fintech startup landing pages
Human-centered healthcare landing page
  • Primary Background: #F7FAF9
  • Primary Brand: #176B68
  • Primary Text: #183B3C
  • Secondary Accent: #DCEFEB

Healthcare Startup UI Design

Calm. Human. Built on Trust.

Best for
Healthcare startup websites and digital health brands
DTC brand landing layout
  • Off White: #F8F6F2
  • Brand Black: #0A0A0A
  • True White: #FFFFFF
  • Dark Section: #111111

DTC Brand UI

One hero. One product. All conviction.

Best for
Physical product brands with 1–3 hero products
Cinematic scroll storytelling
  • Scene Black: #040407
  • Accent Gold: #C9A96E
  • Void Dark: #08080D
  • Scene Overlay: rgba(4,4,7,0.72)

Cinematic UI

The screen is a lens. Scroll is the director.

Best for
Luxury automotive and electric vehicle brands
Motion-first SaaS layout
  • Background: #09090B
  • Orange Primary: #F97316
  • Text Primary: #FAFAFA
  • Surface: #111113

Kinetic UI

Motion that works. Interaction that feels alive.

Best for
SaaS product landing pages where polish signals quality
Dark mode SaaS layout
  • Near Black: #0A0A0A
  • Accent Blue: #3B82F6
  • Dark Gray: #111111
  • Soft White: #E5E5E5

Modern Elite

Engineered light. Polished to perfection.

Best for
Premium SaaS products
Frosted glass layout
  • Background Warm: #F5F0E8
  • Violet Accent: #6B4EFF
  • Text Primary: #1A2E1F
  • Background Sage: #DCE8DC

Glassmorphism

Frosted glass. Morning light. Depth without weight.

Best for
Consumer fintech — personal finance, banking, investing
Geometric grid layout
  • Off White: #F7F5F0
  • Bauhaus Red: #E63329
  • Structure Black: #111111
  • Bauhaus Blue: #1A3A6B

Bauhaus / Swiss Modern

Form follows function. Grid is law. Color is structure.

Best for
Design studios, architecture firms, and cultural institutions
Zero color layout
  • Pure Black: #000000
  • Off Black: #111111
  • Dark Gray: #222222
  • Mid Gray: #888888

Monochrome / High Contrast

Zero color. Maximum craft. Nothing to hide behind.

Best for
Luxury and fashion brands where restraint signals premium
CLI hacker layout
  • Terminal Black: #0A0E0A
  • Phosphor Green: #00FF41
  • Surface Dark: #0D1210
  • Surface Card: #111714

Terminal Design

Command-line aesthetic. Zero decoration. Pure signal.

Best for
CLI tools and command-line adjacent products
Design system
  • Page Background: #FAFAF7
  • Ink Primary: #1A1917
  • Surface Warm: #F2EDE4
  • Surface Sand: #E8DCC8

Pure Minimalist

Every word earns its place. Every pixel does a job.

Best for
Writing studios, content agencies, and editorial services
Modern casual dining layout
  • Page Bg: #FFFCFA
  • Orange Primary: #FF7A2B
  • Charcoal: #1C1917
  • Hero Peach: #FFEFE7

Restaurant UI

Fresh. Local. Built to make you hungry.

Best for
Local restaurants wanting a site that actually drives orders
Team collaboration layout
  • Workspace Rail: #1A1D21
  • Purple Accent: #6C5CE7
  • Sidebar Dark: #19171D
  • Sidebar Hover: #27242D

Chat App UI

Three columns. One purpose. Always in context.

Best for
SaaS products that need an in-app messaging or notification feed
Split-screen dev portfolio
  • Page Navy: #0F172A
  • Cyan Accent: #2DD4BF
  • Card Navy: #1E2A3A
  • Panel Overlay: #162032

Developer Portfolio

Dark. Minimal. Built to get hired.

Best for
Software engineers looking for their next role
Design system
  • Page Background: #F2F2EF
  • Ink Black: #0D0D0D
  • Section Background: #FFFFFF
  • Body Text: #1A1A1A

Indie SaaS

Honest. Direct. Built by one person who means it.

Best for
Indie SaaS products and solo-founder tools
Hand-drawn layout
  • Paper White: #FAFAF5
  • Accent Terracotta: #C2410C
  • Pencil Dark: #1C1917
  • Sketch Gray: #78716C

Sketch Design

Looks hand-drawn. Feels alive.

Best for
Creative and artistic products
Technical spec layout
  • Blueprint Vellum: #F5F0E8
  • Dimension Red: #C2410C
  • Draft Ink: #1C1917
  • Grid Line: #D6CFC0

Engineering Blueprint UI

Precise. Technical. Drawn to spec.

Best for
UI kit documentation and design system showcases
Admin dashboard layout
  • Background: #F6F7FB
  • Brand Indigo: #5A6ACF
  • Text Primary: #14152B
  • White Surface: #FFFFFF

Admin Dashboard UI

Colorful data. Clear hierarchy. Built to be lived in.

Best for
SaaS analytics and reporting dashboards
Dark docs site layout
  • Canvas: #0A0A0F
  • Accent Violet: #8B7CF6
  • Text Primary: #F4F4F5
  • Surface: #13131A

Documentation UI

Dark. Structured. Built for finding answers fast.

Best for
Developer documentation sites
Editorial publication layout
  • Paper: #FAF7F2
  • Rust Accent: #C4442A
  • Ink: #1A1410
  • Muted Text: #6B6560

Newsletter UI

Editorial. Subscriber-first. Built to convert readers into fans.

Best for
Newsletter landing pages and publication homepages
Bold conversion layout
  • Paper Beige: #FFFEF0
  • Black: #0A0A0A
  • Electric Yellow: #FFE600
  • Hot Magenta: #FF3EA5

NeoBrutalism

Bold. Loud. Systematic. Usable.

Best for
SaaS landing pages that need to stand out immediately
Quiz app layout
  • Background Tint: #F5F3FF
  • Brand Purple: #8B00B0
  • Brand Pink: #E040A0
  • Gradient: #8B00B0 → #E040A0

Quiz App UI

Timed. Scored. Beautifully purple.

Best for
Quiz and trivia web applications
Editorial print layout
  • Newsprint White: #F7F4EF
  • Rule Red: #CC0000
  • Ink Black: #111111
  • Column Gray: #6B6860

Newspaper Design

Authority. Ink. Editorial weight.

Best for
Content-first and publishing products
Product directory layout
  • Background: #F9F9F7
  • Brand Orange: #F5852A
  • Text Primary: #0D0D0D
  • White Surface: #FFFFFF

Launchpad / Directory UI

Community-driven. Votable. Built to surface the best.

Best for
Product launch and directory platforms
Indie founder layout
  • Cream Background: #FDF9E3
  • Brand Orange: #F0603A
  • Accent Yellow: #F5D800
  • Dark / Text: #1A1A1A

Whimsical SaaS

Handcrafted energy. Indie soul. Surprisingly converts.

Best for
Solo founder and indie hacker SaaS products
Online store layout
  • Page Background: #F8F8F8
  • Brand Orange: #FB991C
  • Product Image Bg: #F6DAB0
  • Card White: #FFFFFF

E-Commerce UI

Warm. Conversion-focused. Product-first.

Best for
Online stores selling physical or digital products
Login & signup layout
  • Input Background: #F5F5F5
  • Brand Green: #3DBE6C
  • Text Primary: #111111
  • Green Dark: #2EA85A

Auth Pages UI

Trust-building. Clean. Conversion-optimized.

Best for
SaaS product login and signup flows

Style explorer

Explore the design before you build.

Switch between 29 live demos, check desktop and mobile layouts, and open the design prompt when you find your direction.

  • Live HTML demos
  • Desktop & mobile
  • Prompt included

Try a direction

Color Palettes

Every design style, deconstructed into color

See the exact color systems behind each style. Copy a color or take the complete palette as CSS.

Warm editorial article layout20 colors

Blog Detail Page UI Design

Clear advice. Warm details. Built for reading.

Color roles
View style

Consumer fintech landing page13 colors

Fintech UI

Bold. Precise. Money made simple.

Color roles
View style

Human-centered healthcare landing page9 colors

Healthcare Startup UI Design

Calm. Human. Built on Trust.

Color roles
View style

DTC brand landing layout7 colors

DTC Brand UI

One hero. One product. All conviction.

Color roles
View style

Cinematic scroll storytelling12 colors

Cinematic UI

The screen is a lens. Scroll is the director.

Color roles
View style

Motion-first SaaS layout13 colors

Kinetic UI

Motion that works. Interaction that feels alive.

Color roles
View style

UI Layout Patterns

Give your next interface a solid structure

Explore visual layout guides, learn when each pattern works, and adapt the structure to your content.

Two-column Layout: structure diagramOne primary reading area, one supporting rail. Primary column. The wider region carries the article, results, or main task. Supporting rail. Filters, related information, or an index stay secondary. Shared navigation. A common header keeps both columns within one page context.

01Layout pattern

Two-column Layout

Divides the page into a wide main content area and a narrower sidebar, creating clear information hierarchy with a primary reading path and supporting context.

  • Blogs
  • SaaS pages
Split Screen Layout: structure diagramTwo equally weighted panels, with a clear relationship. First panel. A message, first choice, or primary task occupies one half. Second panel. A contrasting choice or complementary visual occupies the other half. Shared frame. Navigation and alignment make the two halves feel like one experience.

02Layout pattern

Split Screen Layout

Pairs two equally weighted panels to compare choices or connect a primary task with a complementary message or visual.

  • Portfolios
  • product comparisons
Asymmetrical Layout: structure diagramUnequal shapes can still create a balanced composition. Dominant region. One element establishes the visual anchor and entry point. Counterweight. A smaller or offset region balances the dominant element. Intentional space. Unoccupied areas separate elements and preserve the composition.

03Layout pattern

Asymmetrical Layout

Uses deliberate imbalance — unequal columns, overlapping elements, and offset grids — to create tension and visual energy that symmetric layouts cannot achieve.

  • Creative agencies
  • portfolio showcases

FAQ

Common questions

A few useful answers before you choose a style and start building.

Still have a question?

Email the creator
What exactly is a "design prompt"?
A design prompt is a detailed set of design guidelines — colors, typography, spacing rules, shadow styles, component patterns — written in a format that AI can understand and follow. Instead of asking AI to "make a dashboard," you paste the design prompt and ask it to apply those specific rules.
Which AI tools do these work with?
These prompts work with any AI that accepts text input: ChatGPT, Claude, Gemini, Cursor, v0.dev, Bolt, Lovable, and more. If you can paste text and ask it to generate UI, these prompts will improve the output.
Do I need to be a designer to use these?
Not at all. These are specifically designed for developers, indie hackers, and builders who want better-looking UIs without needing a full-time designer. The prompts give AI the design knowledge — you just pick the style.
Can I mix and match design styles?
You can, but we recommend starting with one style and mastering it. Each design system has its own internal logic and mixing them can create visual inconsistency. Once you understand the rules of one style, you can intentionally borrow elements from others.
Why these 29 styles specifically?
These styles were chosen because they represent distinct, proven design identities used by real products. Each occupies a different position in the design spectrum — from raw utility to hyper-polished. They cover the most common needs for builders and indie makers.
Can I buy this website and domain?
Yes. The website, source code, and uidesignprompts.com domain are available for purchase. See what’s included and how the transfer works, or email the creator with questions.