skills.rest
duylinhdang1998
duylinhdang1998COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ux-wireframing

Create ASCII wireframes for web and mobile interfaces with box-drawing characters.

Updated Apr 16, 2026
Search Tags:#design#ui#prototype#ux#ascii#wireframe#mockup
One-click install
npx skills add https://github.com/duylinhdang1998/claude-template-agent --skill ux-wireframing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-wireframing
Source: https://github.com/duylinhdang1998/claude-template-agent/tree/main/plugins/vfm-agent-company/skills/ux-wireframing
Command: npx skills add https://github.com/duylinhdang1998/claude-template-agent --skill ux-wireframing

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about ux-wireframing

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

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

ASCII wireframes visualize web and mobile interfaces using box-drawing characters and Unicode icons. You can generate mobile, tablet, and desktop layouts to align stakeholders and capture requirements during early design phases.

Can I mockup different UI states like loading and error using text-based wireframes?▼

Text-based wireframes support multiple UI states including empty, loading, error, and success. You can create component-level mockups with annotated state variations to review user journeys and sprint planning scenarios.

What's the best way to document interaction flows for sprint planning?▼

Interaction flows map screen-to-screen transitions and modal overlays using ASCII diagrams. This approach helps product managers and developers visualize user journeys and requirement reviews before implementation begins.

Does this wireframing approach work for both mobile and desktop screen layouts?▼

ASCII wireframing supports mobile, tablet, and desktop screen layouts with consistent box-drawing styles. It produces text-based mockups applicable for UX planning, stakeholder reviews, and quick UI iteration.

How do I save and export ASCII wireframes for developer handoff?▼

ASCII wireframes export into a .project/wireframes folder for documentation and handoff. This organizes screen layouts, interaction flows, and component states into accessible files for developers.

When should I use ASCII wireframes instead of graphic mockup tools?▼

ASCII wireframes suit rapid visualization during early design and planning phases when you need to iterate quickly. Use them for requirement reviews and stakeholder alignment before investing in detailed graphic mockups.

Related Skills

Explore More Design & Creative Skills→
ngochuy13ngochuy13

wireframe-helper

Create annotated ASCII wireframes for page layouts and responsive behavior.

Community
Basic
truchottruchot
2

ux-ui-design

Design UX/UI experiences from user research through interactive prototypes.

Community
Advanced
yunshu0909yunshu0909
742

prd-doc-writer

Write and iteratively refine PRDs and user stories with ASCII wireframes and Mermaid diagrams.

Community
Advanced
zli5460zli5460
2

claude-design

Generate self-contained HTML prototypes with embedded CSS and JS.

Community
Intermediate