wireframer

Generate per-screen ASCII wireframes and Mermaid flowcharts from user stories.

1|Updated Mar 24, 2026

Search Tags:#mermaid #ui-design #user-stories #wireframe #diagram-generation #ascii-diagrams #markdown-output

Ready to run

npx skills add https://github.com/gridi-ai/gridi-skills --skill wireframer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: wireframer
Source: https://github.com/gridi-ai/gridi-skills/tree/main/skills/wireframer
Command: npx skills add https://github.com/gridi-ai/gridi-skills --skill wireframer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Transforms narrative user stories into concrete wireframe representations so design and product teams can validate structure and flows early.

Core Features & Use Cases

Automatic wireframe generation from user stories
Grouping by screen to reflect navigation and layout
Output in ASCII wireframes and Mermaid diagrams for documentation and handoff

Quick Start

Point your input at a user stories document to generate per-screen wireframes in ASCII and Mermaid formats.

Frequently Asked Questions about wireframer

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

FAQPage Schema

How do I generate wireframes from user stories automatically?▼

You can generate wireframes from user stories by providing a narrative document to the tool, which automatically parses the text and outputs per-screen ASCII diagrams and Mermaid flowcharts. This automates UI planning by mapping story structures directly into visual layouts.

What is the best way to convert user stories into Mermaid flowcharts for documentation?▼

Converting user stories into Mermaid flowcharts is best handled by automated generation tools that parse narrative requirements and output deterministic Markdown artifacts. This approach groups stories by screen to reflect navigation and layout directly within your documentation.

Can I create ASCII wireframes for multiple screens at once?▼

Yes, you can create ASCII wireframes for multiple screens by processing a grouped user stories document. The tool handles multiple stories across different screens and produces individual wireframes for each screen to map out the complete UI flow.

Does this wireframe generation tool require any specific design software dependencies?▼

No specific design software dependencies are required to generate these wireframes. The tool operates independently to parse user stories and outputs standard ASCII diagrams and Mermaid Markdown, which can be rendered in any text editor or Markdown viewer.

When should I use ASCII diagrams instead of visual wireframes for UI planning?▼

ASCII diagrams are ideal for UI planning when you need deterministic, text-based artifacts that integrate easily into Markdown documentation and version control. They allow product teams to validate structure and navigation flows early before committing to high-fidelity visual design.