wireframe creator skill by jmsktm

Wireframe Creator

A UX design expert that creates low-fidelity wireframes for rapid prototyping and iteration. This skill focuses on structure, hierarchy, and user flow without the distraction of visual design, enabling quick validation of concepts before investing in high-fidelity design.

Whether you need a quick sketch of a landing page, a complete user flow for an app, or a dashboard layout, this skill produces clear, annotated wireframes that communicate information architecture and interaction patterns.

Core Workflows

Workflow 1: Website/Landing Page Wireframe

Define page structure
- Header/navigation
- Hero section
- Content sections
- Footer
Create ASCII wireframe
- Use boxes, lines, and text to represent layout
- Show hierarchy with spacing and sizing
- Indicate interactive elements
- Label all components
Add annotations
- Content descriptions
- Interaction notes
- Responsive behavior
- Priority markers
Define user flow
- Entry points
- CTAs and paths
- Exit points
Provide next steps
- Content requirements
- Design considerations
- Development notes

Workflow 2: App Screen Wireframes

Map user journey
- List all screens needed
- Define flow between screens
- Identify decision points
Design each screen
- Navigation structure
- Content placement
- Interactive elements
- States (empty, loading, error, success)
Show connections
- Arrows indicating flow
- Numbered steps
- Decision trees
Document interactions
- Tap/click actions
- Swipe gestures
- Long-press behaviors
- Transitions

Workflow 3: Dashboard Wireframe

Define data hierarchy
- Most important metrics
- Secondary information
- Detail views
- Filter/control placement
Layout panels
- Primary content area
- Sidebar navigation
- Top bar utilities
- Widget placement
Design data visualizations
- Chart placeholders
- Table structures
- Card layouts
- Empty states
Plan interactions
- Drill-down flows
- Filter behaviors
- Export/actions
- Refresh patterns

Workflow 4: User Flow Wireframes

Map complete flow
- Start state
- All decision points
- Success paths
- Error paths
- End states
Wireframe each step
- One screen per step
- Show state changes
- Indicate validation
Connect flow
- Arrows between screens
- Annotate triggers
- Note conditional logic
Document edge cases
- What if scenarios
- Error handling
- Validation feedback

Quick Reference

Action	Command/Trigger
Landing page wireframe	"Wireframe a landing page for [product]"
App screen wireframe	"Create wireframe for [feature] screen"
User flow	"Map user flow for [task]"
Dashboard	"Wireframe dashboard for [use case]"
Form wireframe	"Design form for [purpose]"
Navigation	"Wireframe navigation for [site]"

Wireframe Elements Library

Layout Components

+----------------------------------+
|           HEADER                 |
| [Logo]    [Nav] [Nav] [Nav] [CTA]|
+----------------------------------+

+----------------------------------+
|         HERO SECTION             |
|                                  |
|   [Headline]                     |
|   [Subheading]                   |
|   [CTA Button]                   |
|                                  |

Form Elements

Data Display

Annotation Symbols

Wireframe Best Practices

Keep it low-fidelity: Resist urge to add visual polish
Focus on structure: Hierarchy and layout, not colors/fonts
Use real content: Actual text, not lorem ipsum when possible
Show states: Empty, loading, error, success for each component
Annotate heavily: Explain interactions, behaviors, constraints
Think mobile-first: Start with smallest screen
Number elements: Make annotations easy to reference
Use consistent spacing: Visual rhythm even in wireframes
Indicate content types: [Headline], [Body text], [Button label]
Show all interactions: Hovers, clicks, swipes, gestures
Document edge cases: What happens when things go wrong
Keep it simple: Boxes, lines, and labels are enough

Common Patterns

Landing Page Structure

Dashboard Layout

Form Flow

Deliverables Format

Tools Integration

Use layout-designer skill for detailed grid specifications
Use ui-builder skill to convert wireframes to code
Use Midjourney to generate visual design from wireframes
Use Playwright to test wireframe interactions

Wireframe Fidelity Levels

Low-Fidelity (this skill)

Boxes and lines
Grayscale
Placeholder content
Focus: Structure
Speed: Very fast
Use: Early ideation, quick iteration

Mid-Fidelity

More refined shapes
Some real content
Basic interactions shown
Focus: Layout + content
Speed: Moderate
Use: Stakeholder reviews, user testing

High-Fidelity

Visual design applied
Real content
Interactive prototype
Focus: Final design
Speed: Slower
Use: Developer handoff, final approval

Common Requests

E-commerce product page: Hero image + details + CTA + related products SaaS signup flow: Multi-step form with progress indicator Blog homepage: Featured post + grid of articles + sidebar Mobile app onboarding: 3-4 swipeable screens + skip/next Admin dashboard: Sidebar nav + metric cards + data tables Profile page: Header + tabs + content sections