02-PLAN-mockup

Generates ASCII wireframes with interaction annotations and microcopy for UI design.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/medtrics/medtrics-acumen --skill 02-plan-mockup
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: 02-PLAN-mockup
Source: https://github.com/medtrics/medtrics-acumen/tree/main/templates/shared/skills/02-PLAN-mockup
Command: npx skills add https://github.com/medtrics/medtrics-acumen --skill 02-plan-mockup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps product teams visualize user interfaces by generating detailed ASCII wireframes and crafting precise microcopy, ensuring clarity and consistency in the design phase before development begins.

Core Features & Use Cases

  • ASCII Wireframing: Create visual representations of screen layouts using text characters.
  • Interaction Flow Mapping: Define how users navigate and interact with the interface.
  • Microcopy Generation: Write clear, concise, and user-friendly text for UI elements.
  • Use Case: When designing a new feature, use this Skill to quickly generate wireframes for the main screens, map out the user flow for creating a new record, and write all the button labels and form field hints.

Quick Start

Generate ASCII wireframes and microcopy for a new user profile page.

Frequently Asked Questions about 02-PLAN-mockup

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

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

ASCII wireframes for UI design are generated using text characters to visualize screen layouts and interaction flows. This approach translates user needs into visual representations, enabling rapid planning of page layouts and new features before development begins.

What is microcopy in product design and when do I need it?

Microcopy in product design refers to the concise, user-friendly text for UI elements like button labels and form field hints. You need it during the design phase to ensure clarity and consistency when translating user needs into textual interface elements.

Can I map user interaction flows using ASCII art?

Yes, you can map user interaction flows using ASCII art by generating detailed wireframes with interaction annotations. This visual representation helps define how users navigate and interact with the interface throughout the design phase.

Does this approach work for planning new features and page layouts?

Yes, generating ASCII wireframes and microcopy works for planning new features and page layouts by providing visual and textual representations of the interface. It facilitates translating user needs into structured UI design elements before development.

What is the best way to write microcopy for UI elements?

The best way to write microcopy for UI elements is to generate clear, concise, user-friendly text tailored to your interface. This involves crafting precise button labels and form field hints that translate user needs into actionable textual elements.

What are the limitations of using ASCII wireframes for UI design?

A limitation of using ASCII wireframes for UI design is that they rely entirely on text characters, which may limit visual fidelity compared to graphical tools. They are best suited for rapid layout planning and conceptualizing interaction flows rather than high-fidelity visual design.