← Index
AI Wireframe Kit · Patterns

Patterns

This isn't meant to be a full UI kit. An AI system doesn't require it. It's a starting system you or AI can reference to build wireframes from either prompts or card photos. Patterns are shown at common wireframe widths with correct proportions: how it looks inside a real wireframe.

This file should stay intact and not grow, especially if you are using it with Wireframe Deck photos. New patterns or components you want in your system should go in kit-components.html. Each pattern is intentionally generic, because wireframes are not design. You can restyle for your needs.

The Wireframe Deck

With the Wireframe Deck, this Kit and the /uxkits-wireframe-deck skill (included), you can give AI a photo of a card layout and it will generate a wireframe. This page contains at least one pattern for every card in the Deck. This way, AI knows what a card should look like as HTML.

Get the Deck →

Text

text-headline-description-cta
Headline + description + CTA. 80px padding. Text 560px max.
Section label

This is the main headline

Supporting paragraph with descriptive text. A few sentences explaining the section or providing context.

Get started free
text-headline-with-description
Headline + description, no CTA. 80px padding.

Headline with supporting text

A paragraph of body copy explaining the topic. Two or three sentences providing more detail.

text-headline-dual-cta
Section label, headline, body text, 2 buttons. 80px padding.
Section label

This headline has two buttons

A description explaining the options. The user can choose between two actions below.

Primary action Secondary action
text-headline
Standalone headline only. 56px padding.

This is just a headline

text-body-with-cta
Body copy + CTA. Smaller/secondary. 56px padding.

Body text without a headline. Just a paragraph with a button below it.

Learn more
text-headline-cta
Headline + button only. No body text. 56px padding.

Headline with a single button

Call to action
text-paragraph
Multiple body paragraphs. 56px padding.

First paragraph of body copy without a headline. A few sentences explaining or describing the content.

Second paragraph continuing the text. More descriptive content or supporting details.

text-title-with-icon
Icon above headline and body text. Left-aligned.

Title with icon

Body text describing the content. A few sentences providing context.

text-title-with-content-and-actions
Eyebrow, headline, body, social action stats below a divider.
Label

Card headline goes here

Body text with descriptive content. Two or three sentences explaining the topic so the card has enough substance to read like real content.

14 62 8
text-bulleted-list
Headline with bulleted list below.

List headline

  • First list item with descriptive text
  • Second item in the list
  • Third item goes here
  • Fourth and final list item
text-checklist-narrow
Single column of checkmarks. 4 items.
Item one with descriptive text
Item two with descriptive text
Item three with descriptive text
Item four with descriptive text
text-checklist-wide
4 columns of 4 items each.
Item one
Item two
Item three
Item four
Item five
Item six
Item seven
Item eight
Item nine
Item ten
Item eleven
Item twelve
Item thirteen
Item fourteen
Item fifteen
Item sixteen
text-icon-list-narrow
Centered headline + description above. 3-column icon grid (3×2 = 6 items), centered.

Section headline

Short description providing context for the icon grid below.

Feature one
Feature two
Feature three
Feature four
Feature five
Feature six
text-icon-list-wide
Centered headline + description above. 5-column icon grid (5×2 = 10 items), centered.

Section headline

Short description providing context for the icon grid below.

Feature one
Feature two
Feature three
Feature four
Feature five
Feature six
Feature seven
Feature eight
Feature nine
Feature ten
text-headline-photo-narrow
Full-bleed dark placeholder, 16:9. White centered headline. Subtle image icon top right.

This is the main headline

text-headline-photo-wide
Full-bleed dark placeholder, 21:9. White centered headline. Subtle image icon top right.

This is the main headline that introduces the section

text-headline-description-cta-photo-narrow
Full-bleed dark placeholder, 16:9. Centered headline + description + CTA. Subtle image icon top right.

This is the main headline

This is supporting description text below the headline.

Call to action
text-headline-description-cta-photo-wide
Full-bleed dark placeholder, 21:9. Centered headline + description + CTA. Subtle image icon top right.

This is the main headline that introduces the section

This is a slightly longer supporting description that provides context.

Call to action
text-tags-narrow
Title plus tag cloud. No frame chrome.
Tags
Tag one Tag two Tag three Tag four Tag five Tag six Tag seven
text-tags-wide
Title plus larger tag cloud. No frame chrome.
Tags
Tag one Tag two Tag three Tag four Tag five Tag six Tag seven Tag eight Tag nine Tag ten Tag eleven Tag twelve Tag thirteen Tag fourteen Tag fifteen Tag sixteen

People

people-bio-narrow
Single bio card with container.

Name

Title or role

Short bio describing this person. One or two sentences.

people-bio-wide
Avatar on left, extended bio on right.

Name

Title or role

Extended biography providing context about this person's background, expertise, and role. Two to three sentences works well here — enough to establish credibility and give a sense of who they are.

A second paragraph can add additional context or highlight a specific achievement or responsibility.

people-grid-narrow
2x2 grid of user circles.
people-grid-wide
2x2 grid of widescreen people tiles with dividers.
people-portrait-narrow
Single larger user circle.
people-portrait-wide
Single widescreen portrait with diagonal stripe background.
people-list-narrow
Vertical list. Avatar circle left, eyebrow + name stacked right.
Title

Person Name

Title

Person Name

Title

Person Name

people-list-wide
3 people across, circular avatar with eyebrow + name centered beneath.
Title

Person Name

Title

Person Name

Title

Person Name

people-profile-narrow
Profile card. Banner with centered avatar, name, location, stats, dual buttons.

Person Name

City, Country

Label
142
Label
2.4k
Label
38
people-profile-wide
Featured profile. Banner + avatar left, content stack right, left-aligned.

Person Name

City, Country

Label
142
Label
2.4k
Label
38

UI

ui-stats-grid-narrow
Compact 2×2 grid (320px max). Used with other cards in row.
Total users
2.4M
12%
Revenue
$48K
8%
Completion
94%
3%
Active users
312
5%
ui-stats-grid-wide
4-metric stats strip — full-width 4-col grid. 56px vertical padding.
Total users
2.4M
12%
Revenue
$48K
8%
Completion rate
94%
3%
Active users
312
2%
ui-cta-group-narrow
Three stacked CTAs (480px max). No frame — buttons stand alone.
Secondary Link
ui-cta-group-wide
Three stacked CTAs (640px max). No frame — buttons stand alone.
Secondary Link
ui-event-list-narrow
3 events stacked vertically. Date block left, title + description right.
Mar
15

Event title goes here

Brief description of the event.

Mar
16

Event title goes here

Brief description of the event.

Mar
17

Event title goes here

Brief description of the event.

ui-event-list-wide
3 events in a horizontal row (3 cols). Date block on top, content below.
Mar
15

Event title goes here

Brief description.

Mar
16

Event title goes here

Brief description.

Mar
17

Event title goes here

Brief description.

ui-chart-bar-narrow
5 vertical bars with scattered heights, center bar highlighted (highest). Title above, labels below.
Chart title
38
72
94
22
58
A
B
C
D
E
ui-chart-bar-wide
8 vertical bars with scattered heights, one bar highlighted (highest). Title + range + values + labels.
Chart title
Date range here
42
28
74
96
35
68
22
54
A
B
C
D
E
F
G
H
ui-calendar-narrow
Mini month calendar. Header with month name + nav. Day grid, one date highlighted. Use when 2+ cards in row.
March
M
T
W
T
F
S
S
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
ui-calendar-wide
Week strip. Header with week range + nav. 7-day grid with day name + date. Use when 1 card alone in row.
Week of March 4–10
Mon
4
Tue
5
Wed
6
Thu
7
Fri
8
Sat
9
Sun
10
ui-weather-narrow
Stacked weather widget (480px max). Location + time top, big centered icon, condition, large temperature.
Location
10:30

Partly Sunny

58°
ui-weather-wide
Horizontal weather widget. Header row, then big icon + temp grouped left, condition + meta right.
Location
10:30
58°

Partly Sunny

Wind 8mph · Humidity 62%

ui-date-display
Typographic date — day above, large number, month below. Single pattern (no variants).
Thursday
28
January
ui-map-narrow
Full-bleed map placeholder with centered location pin (4:3).
ui-map-wide
Full-bleed wider map placeholder (21:9), larger pin.
ui-chart-donut-narrow
Centered chart title, donut, color-swatch legend below.
Chart title
Data label 60% Data label 15% Data label 13% Data label 12%
ui-chart-donut-wide
Donut on left, detailed legend on right with row breakdown.
Chart title
Data label Data value 60%
Data label Data value 15%
Data label Data value 13%
Data label Data value 12%
ui-add-button
Add/create button — outlined circle with green plus. Single pattern (no variants).
ui-table-basic-narrow
3-column table. Dark header row. 3 data rows with action icons in last cell.
Title Title Actions
Table data Table data
Table data Table data
Table data Table data
ui-table-basic-wide
Wider 5-column table. Dark header row. 3 data rows with action icons in last cell.
Title Title Title Title Actions
Table data Table data Table data Table data
Table data Table data Table data Table data
Table data Table data Table data Table data
ui-chart-gauge-narrow
Centered chart title, gauge ring with metric inside, supporting caption below.
Chart title
75
Score

Brief supporting caption describing the metric.

ui-chart-gauge-wide
Dashboard-style gauge — large gauge left, supporting stats panel right.
75
Score
Chart title

Brief supporting caption describing the metric and what the score represents.

Target
80
Last period
68
Change
+10%
ui-task-list-narrow
"Today" header, 4 checklist items with drag handles, "+ Add a task" link.
Today
A to-do list item
An incomplete task
Something to do
Something that's done
ui-task-list-wide
Wider task list with date column and right-aligned action icons per row.
Today
Sort Filter
A to-do list item Today
An incomplete task Tomorrow
Something to do This week
Something that's done Yesterday
ui-table-data-narrow
3-column data table — title (no wrap), progress bar, currency.
Title Title Title
Table data title row
$450
Table data title row
$128
Table data title row
$329
ui-table-data-wide
Wider 5-column data table — adds a category/text column.
Title Title Title Title Title
Table data Table data Mar 10 2024
$450
Table data Table data Mar 11 2024
$128
Table data Table data Mar 12 2024
$329
Table data Table data Mar 13 2024
$324
ui-chart-line-narrow
3 KPI tiles + small wavy line chart with x-axis labels.
Metric one
48
Metric two
11k
Metric three
57
JanFebMarAprMayJunJul
ui-chart-line-wide
4 KPI tiles + larger wavy line chart, 12 x-axis labels.
Metric one
48
Metric two
11k
Metric three
57
Metric four
2.4%
JanFebMarAprMayJunJulAugSepOctNovDec
ui-table-status-narrow
3-column status table — checkbox+#id, avatar circle, status badge.
Title Title Title
#9238
 AS Active
#9237
 JB Pending
#9236
 DW Review
ui-table-status-wide
Wider 5-column status table — adds role/team and date columns.
Title Title Title Title Title
#9238
ASAndrew Smith
 Table data Mar 10 2024 Active
#9237
JBJanet Brown
 Table data Mar 11 2024 Pending
#9236
DWDavid Wilson
 Table data Mar 12 2024 Review
#9235
STSara Tyson
 Table data Mar 13 2024 Draft
ui-chat-widget-narrow
Popup chat — bordered panel with header, messages, input. FAB overlaps bottom-right corner.
Chat title
Sample inbound message.
Sample outbound message.
Another inbound message line.
ui-chat-widget-wide
Wider docked chat — intro panel left, conversation + input right (not a popup).
Need help?

Brief intro message inviting the user to start a conversation.

Average reply time: 2 min
Sample inbound message.
Sample outbound reply.
Another inbound line for context.
ui-tooltip
Dark tooltip — bold title + body, triangular pointer notch. Single pattern (no variants).
A Tooltip Title
Brief descriptive text explaining the UI element being annotated.
ui-arrow-right-dark
Right nav arrow on solid dark, full-bleed 16:9. Single pattern (no variants).
ui-arrow-right-photo
Right nav arrow on dark photo placeholder texture, full-bleed 16:9. Single pattern (no variants).
ui-arrow-right-light
Right nav arrow on white, no border, gray arrow. Pattern-only (no card).
ui-arrow-left-dark
Left nav arrow on solid dark, full-bleed 16:9. Single pattern (no variants).
ui-arrow-left-photo
Left nav arrow on dark photo placeholder texture, full-bleed 16:9. Single pattern (no variants).
ui-arrow-left-light
Left nav arrow on white, no border, gray arrow. Pattern-only (no card).

Forms

form-short-narrow
Short form, centered (480px max). 80px vertical padding.

Form heading

Brief description of what this form does or why the user should fill it out.

form-short-wide
Wider form (640px max). 80px vertical padding.

Form heading

Brief description of what this form does or why the user should fill it out.

form-single-field-narrow
Single field form, centered (480px max). 80px vertical padding.

Single field form

form-single-field-wide
Wider single field form (640px max). 80px vertical padding.

Single field form

form-long-narrow
Dense field block, centered (480px max). Four stacked text inputs, no submit.
form-long-wide
Dense field block, wider (640px max). Four stacked text inputs, no submit.
form-mixed-narrow
Mixed fields, centered (480px max). Two-up text + selects, full-width textarea, no submit.
form-mixed-wide
Mixed fields, wider (640px max). Two-up text + selects, full-width textarea, no submit.
form-with-extras-narrow
Form with checkbox + footer note, centered (480px max).

Footer note text. Optional link.

form-with-extras-wide
Form with checkbox + footer note, wider (640px max).

Footer note text. Optional link.

form-ui-controls-narrow
Mixed control types (settings/filter), centered (480px max). 2-col pairs of dropdown, toggle, checkbox, radio + full-row slider.
form-ui-controls-wide
Mixed control types (settings/filter), wider (640px max). 4-col grid: 2 rows of dropdown/toggle/checkbox/radio pairs + full-row slider.

Commerce

commerce-pricing-narrow
Single card in narrow context. Full-width in grid.

Pro

For growing teams who need more.

$49
per month, billed annually
Everything in Starter
Feature four included
Feature five included
Feature six included
Get started
commerce-pricing-wide
Featured pricing plan, highlighted. Centered with breathing room.

Pro

For growing teams who need more.

$49
per month, billed annually
Everything in Starter
Feature four included
Feature five included
Feature six included
Get started

Testimonials

text-testimonial-narrow
Narrow variant. Single card with quote mark, italic quote, and avatar.
Sample testimonial text placeholder. Additional testimonial content goes here.
Name
Title · Company
text-testimonial-wide
Wide variant. Avatar on left, featured quote on right.
Testimonial placeholder text. Additional content for the testimonial block appears here with more context and detail.
Name
Title · Company

Products

commerce-product-narrow
3-col grid. Image top, category eyebrow, name + price, description, star rating. 56px vertical padding.
Category

Product name

$49

Short description of the product and key features or why it stands out.

(128)
commerce-product-wide
Featured product with image on left, details on right. Full-height layout.
Category

Product name

$149

Detailed description of the product highlighting key features, benefits, and what makes this offering special. Two to three sentences works well here.

(156)
commerce-review-narrow
Single review card. Reviewer header, stars, title, body.
Reviewer Name
15 minutes ago

Review title placeholder

Sample review body text. Two or three sentences from the reviewer about their experience with the product.

commerce-review-wide
Featured review. Reviewer panel left, review title and body right.
Reviewer Name
15 minutes ago

Review title for the featured layout

Longer sample review body. Three or four sentences elaborating on the reviewer's experience and impressions of the product in detail.

commerce-reviews-aggregate-narrow
Title, average score with stars, 5-row breakdown bar chart.
Reviews
4.5
5 Star
142
4 Star
98
3 Star
54
2 Star
22
1 Star
8
commerce-reviews-aggregate-wide
Aggregate score panel left, breakdown bar chart right.
Reviews
4.5
324 reviews
5 Star
142
4 Star
98
3 Star
54
2 Star
22
1 Star
8
commerce-product-configurator-narrow
Price, color swatches, size selectors, primary CTA.
$29
Color
Size
commerce-product-configurator-wide
Image-thumbnail variant picker. Price, image-based color picker, size selectors, CTA.
$29
Choose color
Choose size

Media

image-photo
Full-bleed image placeholder. 400px height standalone; 560px+ for hero. Responsive on mobile.
image-with-title-description-narrow
3-col grid card. Dark image placeholder top, title and description below.

This is the title

Supporting description below the image. Two or three sentences explaining the content.

image-with-title-description-wide
Featured layout. Dark image left, title and description right.

This is the title that introduces the content

More detailed description text providing context and explaining the content in greater depth.

image-list-narrow
Vertical list. Small thumbnail left, title and description right.

List item title

Short supporting description for this list item.

List item title

Short supporting description for this list item.

List item title

Short supporting description for this list item.

image-list-wide
3 images across, content beneath each. No per-item chrome.

Item title

Short supporting description for this item.

Item title

Short supporting description for this item.

Item title

Short supporting description for this item.

image-grid-narrow
2×2 grid of square thumbnails with padding around.
image-grid-wide
4×2 grid of square thumbnails.
image-social-post-narrow
Photo card. Stats row above caption, author meta below.
24 8 3

Caption text describing the post. A short note from the author about the photo.

Author Name
2 hours ago
image-social-post-wide
Featured post. Image left, stats and caption right, author meta below.
248 34 52

Longer caption describing the post in more detail. Two or three sentences explaining the moment captured here.

Author Name
2 hours ago
image-browser
Desktop browser frame illustration with wireframe content inside. Single pattern (no variants).
image-browser-phone
Responsive comparison — browser frame with phone frame overlapping bottom-left. Single pattern (no variants).
image-phone
Mobile/phone frame illustration with wireframe content inside. Single pattern (no variants).
media-video-player-narrow
Narrow variant. 16:9 aspect with play overlay and controls.
1:24 / 4:38
media-video-player-wide
Wide variant. 16:9 aspect with play overlay and controls.
1:24 / 4:38
media-headline-video-narrow
Full-bleed dark video placeholder, 16:9. Centered headline with play icon below.

This is the main headline

media-headline-video-wide
Full-bleed dark video placeholder, 21:9. Centered headline with larger play icon.

This is the main headline that introduces the video

media-video-with-details-narrow
Video card. 16:9 with play overlay, title, description, social stats.

Video title

Short description below the video. Two sentences summarizing what the video covers.

1.2k 84 12
media-video-with-details-wide
Featured video. Player left, title + description + stats right.

Video title for featured layout

Detailed description providing context for this video. Two or three sentences describing the content in greater depth.

12.4k 842 124
media-audio-narrow
Audio player. CD-style art, title, progress bar, playback controls.

Audio track title

Artist name

1:24
3:42
media-audio-wide
Featured audio player. Dark theme. CD art left, title and controls right.
Album / Source

Audio track title

Artist name

1:24
3:42