skills.rest
tomada1114
tomada1114COMMUNITY
Explore all skills by this author →
Website𝕏@muscle_codingGitHub

designing-wireframes

Design ASCII wireframes and UX flows from detailed requirements.

4|Updated Dec 11, 2025
Search Tags:#design#UI#UX#wireframes#flows#ASCII
One-click install
npx skills add https://github.com/tomada1114/tomada-claude-plugins --skill designing-wireframes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designing-wireframes
Source: https://github.com/tomada1114/tomada-claude-plugins/tree/main/agile-tools/skills/designing-wireframes
Command: npx skills add https://github.com/tomada1114/tomada-claude-plugins --skill designing-wireframes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams quickly visualize UI/UX by generating ASCII wireframes and user flows from detailed requirements, bridging gaps between needs and design outputs.

Core Features & Use Cases

  • ASCII Wireframes: Create screen-level wireframes in plain text to communicate layout without visual design tools.
  • User Flows: Diagram typical user journeys and interactions across screens.
  • Cross-Cutting Documentation: Include sections for errors, accessibility, loading states, and form validation within designs.
  • Use Case: Given a feature spec, produce a thumb-zone optimized layout and a step-by-step user flow to guide implementation.

Quick Start

To start, provide a requirements document or feature brief and request: "Design wireframes for the login screen." The skill will return ASCII wireframes, user flows, and cross-cutting sections ready for review.

Frequently Asked Questions about designing-wireframes

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

FAQPage Schema
How do I create ASCII wireframes for UI design without design tools?▼

ASCII wireframes use plain text to visualize screen layouts and components, enabling quick communication of structure and spacing without requiring visual design software. This Skill generates wireframes from requirements, making them accessible for teams using any text editor.

Can I design mobile and desktop layouts with wireframes?▼

Yes. This Skill produces wireframes optimized for both mobile thumb-zones and desktop interfaces, accommodating different screen sizes and interaction patterns within a single ASCII representation.

How do I document user flows alongside wireframes?▼

User flows diagram the sequence of screens and decisions a user encounters. This Skill generates both wireframes and accompanying flow diagrams from feature specifications, showing interactions across screens in a single output.

What cross-cutting concerns does wireframe design address?▼

Wireframes produced by this Skill include sections for error handling, accessibility considerations, loading states, and form validation logic—documentation layers that guide implementation beyond visual layout alone.

Do I need to provide detailed requirements to generate wireframes?▼

Yes. Input a requirements document or feature brief specifying the feature scope, user interactions, and constraints. The Skill then produces screen layouts and flows ready for design and implementation review.

Related Skills

Explore More Design & Creative Skills→
avav25avav25
2

feature-design

Convert raw feature ideas into structured PRDs with goals, user stories, and acceptance criteria.

Community
Intermediate
Shaarav4795Shaarav4795

wireframe-prototyping

Automate creation of wireframes and interactive prototypes for UI feedback.

Community
Intermediate
oakossoakoss
14

ux-designer

Designs user experiences and interfaces with WCAG 2.2 AA compliance.

Official
Intermediate
jeffwweeejeffwweee

ui-designer

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

Community
Intermediate