ux-wireframing

Community

Quick ASCII wireframes for UI planning

Authorduylinhdang1998
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Rapidly visualize screens and interaction flows without graphic tools to align stakeholders, capture requirements, and iterate UI layouts during early design and planning phases.

Core Features & Use Cases

  • Screen Wireframes: Generate mobile, tablet, and desktop ASCII layouts with consistent box-drawing styles and Unicode icons.
  • Interaction Flows: Produce screen-to-screen diagrams, state transitions, and annotated modal overlays for user journeys and sprint planning.
  • Reusable Components & States: Provide component-level mockups, multiple states (empty, loading, error, success), and exportable files into a .project/wireframes folder for documentation and handoff.
  • Use Case: Create a set of annotated login, home, and detail screens plus a flow diagram to review with product managers and developers before implementation.

Quick Start

Create an ASCII login screen with annotations, include empty/loading/error/success states, and save the outputs to the .project/wireframes directory.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ux-wireframing
Download link: https://github.com/duylinhdang1998/claude-template-agent/archive/main.zip#ux-wireframing

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.