skills.rest
apadern
apadernCOMMUNITY
Explore all skills by this author →
GitHub

ui-prototyper

Generate UI specifications, navigation diagrams, and ASCII wireframes from functional analysis artifacts.

Updated Aug 27, 2026
Search Tags:#prototyping#ui-design#diagrams#wireframes#ascii-wireframes#navigation-diagrams#functional-analysis
One-click install
npx skills add https://github.com/apadern/.github_tailormade --skill ui-prototyper
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-prototyper
Source: https://github.com/apadern/.github_tailormade/tree/main/skills/ui-prototyper
Command: npx skills add https://github.com/apadern/.github_tailormade --skill ui-prototyper

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diseña interfaces de usuario, diagramas de navegación y prototipos textuales (wireframes ASCII) para análisis funcional. Usar cuando se necesite generar las secciones 10, 11 y 12 de un análisis funcional.

Core Features & Use Cases

  • Genera interfaces de usuario inferidas a partir de HUs y RFs.
  • Crea diagramas de navegación (mermaid) que muestran flujos entre pantallas y actores.
  • Produce wireframes ASCII para cada pantalla, alineados con las interfaces y casos de uso.
  • Soporta la generación de las secciones 10 (interfaces), 11 (diagramas de navegación) y 12 (wireframes textuales).
  • Ejemplo de uso: dado un conjunto de HUs, RFs y actores, el skill genera las secciones correspondientes para un análisis funcional.

Quick Start

Genera las secciones 10, 11 y 12 de un análisis funcional a partir de las HUs y RFs disponibles, con interfaces, diagramas y wireframes ASCII conforme a las convenciones.

Frequently Asked Questions about ui-prototyper

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

FAQPage Schema
How do I generate ASCII wireframes from functional analysis artifacts?▼

To generate ASCII wireframes from functional analysis artifacts, provide user stories, functional requirements, and actor models to produce aligned textual wireframes for each screen.

What is a navigation diagram and how does it map UI screens?▼

A navigation diagram maps UI screens by using Mermaid syntax to visualize flows between interfaces and actors, ensuring structural consistency across the functional analysis.

Can I infer user interface specifications directly from user stories and functional requirements?▼

Yes, you can infer user interface specifications directly from user stories and functional requirements to populate section 10 of a functional analysis with validated interface definitions.

Does this prototyping approach support generating Mermaid navigation diagrams automatically?▼

Yes, this prototyping approach supports generating Mermaid navigation diagrams automatically by processing functional analysis sections to validate screen flows and actor interactions.

What is the best way to structure sections 10, 11, and 12 of a functional analysis?▼

The best way to structure sections 10, 11, and 12 is to sequentially generate interfaces, navigation diagrams, and ASCII wireframes while validating formatting and alignment consistency.

Why do my UI wireframes lack consistency with my functional requirements?▼

Your UI wireframes lack consistency when they are not validated against functional requirements and actor models, a step this process enforces by aligning interfaces with use cases.

Related Skills

Explore More Design & Creative Skills→
schpetschpet
5

speccer

Convert unstructured notes into a structured docs/spec.md specification document.

Community
Intermediate
yunshu0909yunshu0909
742

prd-doc-writer

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

Community
Advanced
sirkirbysirkirby
62

research-synthesis

Synthesize research findings into structured markdown files for OAK planning.

Community
Basic
bipinksbipinks
3

wireframing-prototyping

Generate ASCII wireframes, information architecture diagrams, and Mermaid user-flow diagrams from design briefs.

Community
Intermediate