skills.rest
constellos
constellosOFFICIAL
Explore all skills by this author →
Website𝕏@constellosaiGitHub

UI Wireframing

Generate mobile-first ASCII wireframes and WIREFRAME.md files for UI planning.

5|3|Updated Nov 30, 2025
Search Tags:#mobile-first#wireframing#design documentation#UI design#wireframe#ASCII diagrams#layout planning
One-click install
npx skills add https://github.com/constellos/claude-code-plugins --skill ui-wireframing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI Wireframing
Source: https://github.com/constellos/claude-code-plugins/tree/main/plugins/nextjs-supabase-ai-sdk-dev/skills/ui-wireframing
Command: npx skills add https://github.com/constellos/claude-code-plugins --skill ui-wireframing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps UI teams and developers quickly communicate layout structure by producing mobile-first ASCII wireframes before implementation, reducing misalignment and rework.

Core Features & Use Cases

  • Mobile-first ASCII wireframes for components and pages to visualize structure early
  • Automatic creation of WIREFRAME.md files in component or page directories to document layouts
  • Comprehensive wireframe workflows including identifying components, stepwise layout expansion across mobile, tablet, and desktop breakpoints, interaction annotations, and accessibility notes
  • Use Case: when planning a new UI module, generate a wireframe to align on hierarchy and data flows, then proceed to design and code with confidence

Quick Start

Create WIREFRAME.md in the target component or page directory to generate a mobile-first ASCII wireframe draft.

Frequently Asked Questions about UI Wireframing

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

FAQPage Schema
How do I generate ASCII wireframes for UI layout planning?▼

UI wireframing with ASCII diagrams helps teams quickly communicate layout structure before implementation, reducing misalignment and rework by visualizing hierarchy and data flows early.

How do I document mobile-first wireframes across multiple breakpoints?▼

The skill produces a WIREFRAME.md file containing stepwise layout expansions across mobile, tablet, and desktop breakpoints, complete with interaction annotations and accessibility notes.

Can I use ASCII wireframes for responsive component design?▼

Yes, the skill supports responsive component design by generating structural ASCII layouts for both individual components and full pages, applying mobile-first logic to visualize UI hierarchy before coding.

What is the best way to version control UI wireframes alongside code?▼

The best way to version control UI wireframes is to commit the generated WIREFRAME.md file directly into your component or page directories, keeping design documentation synchronized with your codebase.

Do I need any design software dependencies to create mobile ASCII wireframes?▼

No, you do not need any design software dependencies to create mobile ASCII wireframes, as the skill operates without external components and outputs plain text markdown files.

Related Skills

Explore More Design & Creative Skills→
Vivekmano27Vivekmano27

ui-wireframes

Generate structured UI wireframes and component specifications in Markdown.

Community
Intermediate
avgarciaavgarcia

ui-from-mockup

Convert HTML/CSS mockups into Angular Material 3 components.

Community
Advanced
Owl-ListenerOwl-Listener
2.0k

wireframe-spec

Specify annotated wireframe layouts with content priority and component placement.

Community
Intermediate
tomada1114tomada1114
4

designing-wireframes

Design ASCII wireframes and UX flows from detailed requirements.

Community
Basic