skills.rest
SufficientDaikon
SufficientDaikonCOMMUNITY
Explore all skills by this author →
GitHub

wireframing

Generate wireframe HTML templates with layout grids and responsive breakpoints.

8|Updated Mar 8, 2026
Search Tags:#responsive design#wireframing#ux design#ui design#layout patterns#html template
One-click install
npx skills add https://github.com/SufficientDaikon/omniskill --skill wireframing-sufficientdaikon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframing
Source: https://github.com/SufficientDaikon/omniskill/tree/main/.cursor/rules/wireframing
Command: npx skills add https://github.com/SufficientDaikon/omniskill --skill wireframing-sufficientdaikon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and patterns for creating effective wireframes, defining user interface layouts, and planning responsive design behavior across different devices.

Core Features & Use Cases

  • Layout Grid Systems: Understand 12-column grids, CSS Grid vs. Flexbox, and common column splits.
  • Content Block Patterns: Implement reusable patterns for hero sections, feature grids, testimonials, pricing tables, CTAs, and footers.
  • Responsive Breakpoints: Learn strategies for mobile, tablet, and desktop layouts, including content adjustments and mobile-first approaches.
  • Wireframe Conventions: Follow visual design rules, typography representation, and annotation formats.
  • Use Case: When designing a new landing page, use this Skill to quickly select and implement appropriate layout patterns, content blocks, and ensure a responsive design strategy from the start.

Quick Start

Generate a wireframe HTML template for a landing page using the wireframing skill.

Frequently Asked Questions about wireframing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a responsive wireframe layout for a landing page?▼

To create a responsive wireframe layout, you can use structured UI planning patterns covering 12-column grids, content blocks like hero sections and CTAs, and specific mobile, tablet, and desktop breakpoints. This approach ensures cross-device compatibility from the start.

What is the best way to plan content blocks for a dashboard UI design?▼

The best way to plan dashboard UI design is by applying reusable wireframe patterns for content blocks. This method provides visual design rules and HTML templates to structure complex layouts, ensuring consistent typography representation and layout grids.

How does a mobile-first approach affect UI layout patterns and responsive breakpoints?▼

A mobile-first approach affects UI layout patterns by prioritizing content adjustments for smaller screens before scaling up to tablet and desktop layouts. It relies on defining specific responsive breakpoints and utilizing CSS Grid or Flexbox for column splits.

Can I generate an HTML template directly from a UI wireframe design?▼

Yes, you can generate an HTML template directly from UI wireframe design. The process provides predefined wireframe conventions and visual design rules that translate into structured HTML templates for landing pages, dashboards, and forms.

What are the standard wireframe conventions for visual design rules and annotations?▼

Standard wireframe conventions for visual design rules include specific formats for typography representation and annotation. These conventions facilitate structured UI planning by providing clear guidelines for layout grids and content block placement.

When should I use CSS Grid vs Flexbox for wireframing column splits?▼

You should choose between CSS Grid and Flexbox for wireframing column splits based on your layout complexity. CSS Grid is ideal for two-dimensional 12-column grid structures, while Flexbox suits one-dimensional content adjustments across responsive breakpoints.

Related Skills

Explore More Design & Creative Skills→
rafael-hcrafael-hc

frontend-blueprint

Guide UI discovery and generate atomic HTML/CSS components.

Community
Advanced
jpoindexterjpoindexter
1

responsive-and-multi-device

Provides a reference guide for responsive and adaptive web design techniques and testing across devices.

Community
Advanced
jikig-aijikig-ai
12

ux-design-lead

Generates wireframes, high-fidelity screens, and design specs as Markdown or Pencil MCP files.

Official
Advanced
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate