Wireframes in plain HTML.
One CSS file. Zero JS.

Drop one stylesheet into any page and prototype screens in minutes. Deliberately lo-fi, so feedback stays on structure — not on colors.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wireframe-ui-lite@2/wireframe.css">
<body class="wf">
Landing example Dashboard example Mobile example

Placeholders

The heart of a wireframe: boxes that say "content goes here".

Media .wf-media
Text skeleton .wf-text / .wf-line
Avatar · icon · logo · chart
Markup 
<div class="wf-media"></div>                <!-- X box, 16:9 (or -square -4x3 -wide -tall) -->
<div class="wf-text" style="--lines: 4"></div>  <!-- skeleton paragraph -->
<div class="wf-line wf-w-50"></div>          <!-- one skeleton line -->
<span class="wf-avatar"></span>  <span class="wf-icon"></span>  <span class="wf-logo"></span>
<div class="wf-chart"></div>
<div class="wf-media" data-wf-label="Hero image"></div>  <!-- label any region -->

Layout

.wf-row, .wf-stack, .wf-grid (auto-responsive), .wf-cols-2/3/4, .wf-container, plus .wf-between, .wf-grow, .wf-right, .wf-tight/.wf-loose.

grid 1
grid 2
grid 3
row
.wf-grow
row

Typography

Heading 1

Heading 2

Heading 3

Heading 6 / eyebrow

Paragraph with a link, inline code and small muted text.

"Wireframes should look unfinished — that's the point."
npx serve .   # no build step, ever

.wf-muted for secondary text.

Buttons

Link button
Markup 
<button>Default</button>
<button class="wf-btn-solid">Solid</button>
<a class="wf-btn" href="…">Link button</a>      <!-- variants: -solid -ghost -sm -lg -->

Forms

Bare inputs are already styled. Wrap label + control in .wf-field.

Options

Components

Card title
badge
Alert. Something needs attention.
Annotation note — for spec comments on the wireframe itself.
default solid status
Accordion (native <details>)

No JavaScript needed — it just works.

Dropdown

Native <dialog>

Styled by the kit; opened with one line of your own JS (el.showModal()) or the open attribute.
UserRoleStatus
Ada LovelaceAdmin active
Alan TuringMemberinvited

Frames

.wf-browser and .wf-phone wrap a prototype in device chrome.

Theming

Dark mode

Follows prefers-color-scheme automatically. Force it with .wf-dark / .wf-light on the root — or on any subtree:

.wf-dark island
Sketch mode

Add .wf-sketch next to .wf for the hand-drawn look (wobbly borders, handwritten font). Try the toggle in the navbar ↑

Tokens
.wf { --wf-ink: #1c1c1c; --wf-radius: 6px;
      --wf-gap: 1rem; /* … override any of them */ }

Prototype with your AI agent

Paste this into Claude Code, Cursor, or any coding agent:

Build my prototype as static HTML pages using wireframe-ui-lite:
add <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wireframe-ui-lite@2/wireframe.css">
and class="wf" on <body>. Class reference: https://marcosdocanto.github.io/wireframe-ui-lite/llms.txt
Use semantic HTML + wf-* placeholders (wf-media, wf-text, wf-avatar) instead of real content.