$ cat layout-prompts.md

UI prompt examples & mockdowns for AI‑powered layout generation

Generate dashboards, landing pages, and more with structured prompts for ChatGPT

./browse-layouts./read-blog

20+

layouts

23+

ui patterns

16+

ai tools

// featured

Popular UI Prompt Examples

Start with these popular UI prompts or browse the full library

┌───────────────────────────────────────────────┐
│  Logo        Features  Pricing  ◆ Get Started │
├───────────────────────────────────────────────┤
│                                               │
│         Build something amazing.              │
│      The fastest way to ship your app.        │
│                                               │
│    [ Get Started ]    [ Learn More → ]        │
│                                               │
├───────────────────────────────────────────────┤
│  ┌───────────┐ ┌───────────┐ ┌───────────┐   │
│  │  ⚡ Fast  │ │  🔒 Safe  │ │  📦 Easy  │   │
│  │  Feature  │ │  Feature  │ │  Feature   │   │
│  │  desc...  │ │  desc...  │ │  desc...   │   │
│  └───────────┘ └───────────┘ └───────────┘   │
├───────────────────────────────────────────────┤
│  "Loved by 10,000+ developers" ★★★★★         │
├───────────────────────────────────────────────┤
│  Logo · Twitter · GitHub · © 2026             │
└───────────────────────────────────────────────┘
Landing Page

AI Tool Landing Page

A conversion-focused AI tool landing page with a live demo embed, before/after comparison, feature grid, social proof metrics, and a playground CTA section.

--ai-tool--demo--before-after
Medium
┌──────────┬────────────────────────────────────┐
│ ☰ Menu   │  ◉ Dashboard        🔔  👤        │
│          ├────────────────────────────────────┤
│ ● Home   │  ┌────────┐ ┌────────┐ ┌────────┐ │
│ ○ Stats  │  │ ▲ 1,234│ │ ● 87%  │ │ $9.4K  │ │
│ ○ Users  │  │ KPI ···│ │ KPI ···│ │ KPI ···│ │
│ ○ Config │  └────────┘ └────────┘ └────────┘ │
│          │  ┌──────────────────────────────┐  │
│          │  │  📈 Chart                    │  │
│          │  │  ╱╲    ╱╲  ╱╲               │  │
│          │  │ ╱  ╲╱╱  ╲╱  ╲╱───          │  │
│          │  └──────────────────────────────┘  │
│          │  ┌──────────────────────────────┐  │
│          │  │  Name    Role     Status     │  │
│          │  │  ─────   ─────   ────────   │  │
│          │  │  Alice   Admin    ● Active   │  │
│          │  │  Bob     User     ○ Idle     │  │
│          │  └──────────────────────────────┘  │
└──────────┴────────────────────────────────────┘
Dashboard

CRM Contact Dashboard

A full-featured CRM dashboard with a deal pipeline, contact table, activity feed, and sidebar nav — ideal for sales teams managing leads and revenue.

--crm--pipeline--contacts
Complex
┌──────────┬────────────────────────────────────┐
│ ◉ App    │  Search [____________]  🔔  👤    │
│          ├────────────────────────────────────┤
│ ● Home   │                                    │
│ ○ Inbox  │  ┌───────────────────────────────┐│
│ ○ Tasks  │  │  ⌘K  Quick Actions            ││
│ ○ Docs   │  │  ─────────────────────────    ││
│ ○ Team   │  │  📄 New Document              ││
│ ○ API    │  │  👥 Invite Team Member        ││
│          │  │  ⚙  Open Settings             ││
│ ──────── │  │  📊 View Analytics            ││
│ Settings │  │  ...                           ││
│ Help     │  └───────────────────────────────┘│
│          │                                    │
│          │  ┌──────────┐ ┌──────────────────┐│
│          │  │ Projects │ │  Recent Activity ││
│          │  │ ──────── │ │  ─────────────── ││
│          │  │ ▸ Alpha  │ │  ● Deploy v2.1   ││
│          │  │ ▸ Beta   │ │  ○ PR merged     ││
│          │  │ ▸ Gamma  │ │  ○ Issue #42     ││
│          │  └──────────┘ └──────────────────┘│
└──────────┴────────────────────────────────────┘
SaaS

Data Table CRUD Interface

A full-featured data table CRUD interface with column filters, inline row editing, bulk actions, add/delete controls, CSV export, and pagination for SaaS admin screens.

--data-table--crud--filter
Medium
┌───────────────────────────────────────────────┐
│  Logo        Features  Pricing  ◆ Get Started │
├───────────────────────────────────────────────┤
│                                               │
│         Build something amazing.              │
│      The fastest way to ship your app.        │
│                                               │
│    [ Get Started ]    [ Learn More → ]        │
│                                               │
├───────────────────────────────────────────────┤
│  ┌───────────┐ ┌───────────┐ ┌───────────┐   │
│  │  ⚡ Fast  │ │  🔒 Safe  │ │  📦 Easy  │   │
│  │  Feature  │ │  Feature  │ │  Feature   │   │
│  │  desc...  │ │  desc...  │ │  desc...   │   │
│  └───────────┘ └───────────┘ └───────────┘   │
├───────────────────────────────────────────────┤
│  "Loved by 10,000+ developers" ★★★★★         │
├───────────────────────────────────────────────┤
│  Logo · Twitter · GitHub · © 2026             │
└───────────────────────────────────────────────┘
Landing Page

Developer Tool Landing Page

A developer-focused tool landing page featuring a live terminal demo, install command, code snippet hero, integration logos, and a docs-first CTA section.

--developer-tool--cli--terminal
Medium
┌──────────┬────────────────────────────────────┐
│ ◉ App    │  Search [____________]  🔔  👤    │
│          ├────────────────────────────────────┤
│ ● Home   │                                    │
│ ○ Inbox  │  ┌───────────────────────────────┐│
│ ○ Tasks  │  │  ⌘K  Quick Actions            ││
│ ○ Docs   │  │  ─────────────────────────    ││
│ ○ Team   │  │  📄 New Document              ││
│ ○ API    │  │  👥 Invite Team Member        ││
│          │  │  ⚙  Open Settings             ││
│ ──────── │  │  📊 View Analytics            ││
│ Settings │  │  ...                           ││
│ Help     │  └───────────────────────────────┘│
│          │                                    │
│          │  ┌──────────┐ ┌──────────────────┐│
│          │  │ Projects │ │  Recent Activity ││
│          │  │ ──────── │ │  ─────────────── ││
│          │  │ ▸ Alpha  │ │  ● Deploy v2.1   ││
│          │  │ ▸ Beta   │ │  ○ PR merged     ││
│          │  │ ▸ Gamma  │ │  ○ Issue #42     ││
│          │  └──────────┘ └──────────────────┘│
└──────────┴────────────────────────────────────┘
SaaS

Inbox and Messaging Layout

A three-pane inbox and messaging layout with a contacts sidebar, thread list panel, and full conversation view — modeled after Gmail, Linear, and Intercom.

--inbox--messaging--three-pane
Complex
┌──────────┬────────────────────────────────────┐
│ ◉ App    │  Search [____________]  🔔  👤    │
│          ├────────────────────────────────────┤
│ ● Home   │                                    │
│ ○ Inbox  │  ┌───────────────────────────────┐│
│ ○ Tasks  │  │  ⌘K  Quick Actions            ││
│ ○ Docs   │  │  ─────────────────────────    ││
│ ○ Team   │  │  📄 New Document              ││
│ ○ API    │  │  👥 Invite Team Member        ││
│          │  │  ⚙  Open Settings             ││
│ ──────── │  │  📊 View Analytics            ││
│ Settings │  │  ...                           ││
│ Help     │  └───────────────────────────────┘│
│          │                                    │
│          │  ┌──────────┐ ┌──────────────────┐│
│          │  │ Projects │ │  Recent Activity ││
│          │  │ ──────── │ │  ─────────────── ││
│          │  │ ▸ Alpha  │ │  ● Deploy v2.1   ││
│          │  │ ▸ Beta   │ │  ○ PR merged     ││
│          │  │ ▸ Gamma  │ │  ○ Issue #42     ││
│          │  └──────────┘ └──────────────────┘│
└──────────┴────────────────────────────────────┘
SaaS

Kanban Task Board

A Kanban task board with draggable columns, task cards with assignees and labels, add task inline, and a board header with sprint controls and filter bar.

--kanban--task--board
Medium
ls ./layouts →

// categories

Browse by Category

Find UI prompts for any layout type

./dashboard

3 prompts

./landing

4 prompts

./pricing

1 prompt

./settings

1 prompt

./onboarding

1 prompt

./auth

1 prompt

./ecommerce

3 prompts

./blog-layout

1 prompt

./saas

4 prompts

./marketing

1 prompt

// patterns

UI Pattern Library

Learn the UI patterns behind great layouts — each with mockdown examples for AI tools

```
▶ What is the refund policy?
  — When you request a refund, ...
▶ How do I change my plan?
  — Go to account settings → Billing.
```

Accordion

Collapsible panels that expand to reveal content, useful for FAQs and dense regions

--accordion--collapse--expand+1
```
[◯ AB]  Alice Baker
[◯ JS]  John Smith
```

Characteristics:

Avatar

User avatar component (image, initials) used in lists, nav, and profiles

--avatar--profile--image+1
```
Home  /  Category  /  Subcategory  /  Current Item
```

Characteristics:
- Compact, horizontal trail

Breadcrumb

Hierarchical trail showing the user's location within a site or app

--breadcrumb--navigation--hierarchy
```
[Primary] [Secondary] [Ghost] [Outline] [🔍]
```

Characteristics:
- Clear primary vs secondary emphasis

Button Variants

Common button styles: primary, secondary, ghost, outline, and icon buttons

--button--cta--primary+2
ls ./patterns →

// blog

From the Blog

UI prompt tips and guides for ChatGPT, v0, Cursor & Bolt.new

GuidesMar 8, 2026

Vibe Coding with AI: How to Describe Layouts That Actually Work

The trick to getting good UI from AI isn't the tool — it's how you describe what you want. Here's the method that works every time.

#vibe-coding#prompting#mockdown
RoundupsMar 8, 2026

20 Vibe Coding Prompts You Can Copy-Paste Right Now

No theory, no fluff — just 20 tested layout prompts for dashboards, landing pages, e-commerce, auth, and more. Copy them into v0, Bolt, or Cursor and go.

#vibe-coding#prompts#copy-paste
ComparisonsMar 8, 2026

Vibe Coding Tools Compared: v0 vs Bolt vs Lovable vs Cursor

Same prompt, four tools, very different results. Here's a real side-by-side of what v0, Bolt.new, Lovable, and Cursor actually produce.

#vibe-coding#tools#v0
ls ./blog →