designing-wireframes

Name: designing-wireframes
Availability: InStock
Author: tomada

Design ASCII wireframes and UX flows from detailed requirements.

4|Updated Dec 11, 2025

Search Tags:#design #UI #UX #wireframes #flows #ASCII

Ready to run

npx skills add https://github.com/tomada1114/tomada-claude-plugins --skill designing-wireframes

💬 Prompt for ChatGPT / Claude Chat▼

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.