Wireframe Patterns is a free tool that shows 64 common website sections as wireframes you can copy as an HTML/CSS skeleton. Stack patterns into a full page and export it as an HTML file, SVG or PNG. No sign-up, and nothing is sent to a server.
What is a wireframe?
A wireframe is a blueprint for a web page. Before adding colors or photos, you use gray boxes and lines to decide where headings, images, buttons and forms go, and in what order. Because personal taste in visuals stays out of it, you can focus on what matters most and avoid rework once design and coding start.
Every pattern in this tool comes with why the layout works and what kind of site it's best for, not just the layout itself.
Basic use
- Find a patternOn Patterns, filter by category, such as Header, Hero or Pricing.
- Check why it worksOpen Details on a card to see what it's best for, why it works and how it's structured. Switch between Desktop and Mobile to see how it adapts on phones.
- Copy or exportIn Details, switch between the HTML, CSS and AI prompt tabs and copy what you need. The SVG and PNG buttons save it as an image.
Build a full-page wireframe
- Add to your pageClick + Add to page on a card or in Details to stack the section on the Build a page screen. Load a basic landing page adds eight sections, from header to footer, in one go.
- Reorder and swapUse ▲▼ to change the order, and the dropdown to swap in another pattern from the same category, keeping the structure while you compare.
- ExportUse the buttons at the top right to copy the HTML or CSS, save a single HTML file, export SVG or PNG, or copy the AI prompt.
Your page is saved automatically in your browser. To continue on another device, use Save as HTML file.
Export options
| Format | Best for |
|---|---|
| HTML / CSS | Using it as a coding skeleton. The CSS includes the shared base styles (classes starting with .wf-), and each section switches to a mobile layout with container queries. |
| HTML file | A single file that opens in any browser. Good for sharing with clients or your team, or saving your work. |
| SVG | Pasting into Figma to edit. It comes in as rectangle, line and text layers. |
| PNG | An image for slides or chat. Exported at twice the original size. |
| AI prompt | Pasting into ChatGPT, Claude and the like to have them build a wireframe or page with the same structure. |
Categories
Header (6), Hero (8), Features (6), Case Studies & Testimonials (5), Card Lists (6), Steps & Flow (4), Pricing (6), FAQ (4), CTA (5), Contact Forms (5), About & Access (4) and Footer (5): 64 patterns in total. It also covers sections that are less common in other libraries, such as a phone bar header, a booking form with time slots, a company profile table and a company history timeline.
FAQ
Is it free?
Yes. It's free with no sign-up, including every pattern and the page builder. You can use the copied HTML/CSS and exported images in commercial projects.
Can I use the copied HTML/CSS in production?
Yes, as a skeleton: the layout and mobile behavior are ready to use. It's all gray, so add your own colors, fonts and images to finish it. The CSS includes the shared base styles (classes starting with .wf-).
Does it work with Figma?
Export as SVG, then drag or paste it into Figma. It comes in as rectangle, line and text layers, and the text stays editable.
How does it handle mobile layouts?
Each section uses container queries (@container), so it switches to a mobile layout based on the width it's placed in. Use the Desktop / Mobile buttons to preview both.
Is my page saved?
Your page structure is saved automatically in your browser and never sent to a server. It doesn't carry over to other browsers or devices, so use Save as HTML file if you want to keep it.
What is the AI prompt for?
It describes the structure and reasoning of the patterns you picked. Paste it into an AI tool such as ChatGPT or Claude to have it build a wireframe or page with the same structure.
What is a wireframe?
A blueprint for a web page. Before adding colors or photos, it uses gray boxes and lines to decide what goes where: headings, images, buttons, forms and so on.
Related tools
- GSAP Animation Gallery — copy-ready GSAP animations
- Hover Effects Gallery — CSS hover effects for links and navigation
- CSS Animation Gallery — copy-ready CSS animations