skills.rest
williamzujkowski
williamzujkowskiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

UX Wireframe Designer

Convert user stories into wireframes, user flows, and Mermaid diagrams.

6|Updated Oct 25, 2025
Search Tags:#design#accessibility#prototype#ux#wireframe#user-flow#mockup
One-click install
npx skills add https://github.com/williamzujkowski/cognitive-toolworks --skill ux-wireframe-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UX Wireframe Designer
Source: https://github.com/williamzujkowski/cognitive-toolworks/tree/main/skills/ux-wireframe-designer
Command: npx skills add https://github.com/williamzujkowski/cognitive-toolworks --skill ux-wireframe-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translating user needs into visual structure is time-consuming and prone to miscommunication. This skill provides a repeatable process to convert user stories into wireframes, user flows, and interactive mockups that guide design and development.

Core Features & Use Cases

  • Translate user stories into wireframes and annotated flows to clarify requirements.
  • Generate responsive layouts and accessibility considerations for web and mobile.
  • Produce diagrams (Mermaid) and mockups to align stakeholders quickly.

Quick Start

Provide a user story and the skill will generate wireframes and flow diagrams for web and mobile.

Frequently Asked Questions about UX Wireframe Designer

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

FAQPage Schema
How do I convert user stories into wireframes and user flows?▼

To convert user stories into wireframes, provide your user story to generate visual wireframes, user flows, and interaction specifications. The process outputs structured screen inventories and Mermaid diagrams to clarify requirements for web and mobile projects.

What is the best way to generate UX mockups with accessibility considerations?▼

Generating UX mockups with accessibility considerations is handled by converting user stories into responsive layouts. The output includes specific accessibility considerations and component behaviors to ensure inclusive design for web and mobile platforms.

Can I create both low and high fidelity wireframes from user stories?▼

Yes, you can create both low and high fidelity wireframes from user stories. The skill supports a range of fidelities, progressing from basic structural layouts to detailed interactive mockups with specified component behaviors.

How do Mermaid diagrams help align stakeholders on user flows?▼

Mermaid diagrams help align stakeholders by visually mapping user flows and interaction specifications. Generating these diagrams from user stories provides a clear, structured representation of screen inventories and component behaviors for quick review.

Does this wireframe generation process work for both web and mobile projects?▼

Yes, this wireframe generation process works for both web and mobile projects. It translates user stories into responsive layouts and annotated flows, ensuring the resulting wireframes and mockups clarify requirements across different platforms.

Related Skills

Explore More Design & Creative Skills→
magdymohamed78magdymohamed78

speckit-tasks

Generate structured tasks.md files with phases, dependencies, and validation.

Community
Advanced
TrecekTrecek
1

make-arch-diag

Generate component, data flow, and sequence diagrams in mermaid syntax.

Community
Advanced
Logos-LiberLogos-Liber
17

wireframing-prototyping

Create wireframes, user flows, sitemaps, and interactive prototypes for digital products.

Official
Intermediate
tyronerosstyroneross
1

mockup-gallery-bridge

Synchronize design mockup metadata with implementation build targets.

Community
Advanced