skills.rest
GDSDN
GDSDNCOMMUNITY
Explore all skills by this author →
GitHub

ux-create-wireframe

Design wireframes, prototypes, and interaction flows from user research insights.

3|Updated Feb 7, 2026
Search Tags:#prototyping#wireframing#ux design#ui design#interaction design#developer handoff
One-click install
npx skills add https://github.com/GDSDN/kord-aios --skill ux-create-wireframe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-create-wireframe
Source: https://github.com/GDSDN/kord-aios/tree/main/src/features/builtin-skills/kord-aios/design-system/ux-create-wireframe
Command: npx skills add https://github.com/GDSDN/kord-aios --skill ux-create-wireframe

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of designing wireframes, prototypes, and interaction flows, translating user research into actionable visual designs for development.

Core Features & Use Cases

  • Wireframe Creation: Generates low, mid, or high-fidelity wireframes based on project needs.
  • Interaction Flow Documentation: Maps out user journeys and screen transitions.
  • Developer Handoff: Prepares comprehensive assets and documentation for seamless implementation.
  • Use Case: A product team needs to visualize a new user onboarding process. This Skill can take research insights and generate interactive wireframes and flow diagrams, ensuring all stakeholders understand the intended user experience before development begins.

Quick Start

Use the ux-create-wireframe skill to design low-fidelity wireframes for the user dashboard screen.

Frequently Asked Questions about ux-create-wireframe

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

FAQPage Schema
How do I create wireframes from user research insights?▼

This skill designs wireframes by translating user research insights into visual designs, utilizing a structured methodology that includes scope definition, information architecture, component inventory, and flow mapping to produce actionable outputs.

Can I generate both low-fidelity and high-fidelity wireframes for UI design?▼

Yes, you can generate low, mid, and high-fidelity wireframes for UI design. The skill adjusts output fidelity based on your project needs, scaling from basic structural layouts to detailed visual designs.

What is the best way to document interaction flows and user journeys?▼

The best way to document interaction flows is by mapping out user journeys and screen transitions. This skill generates detailed flow diagrams and interactive prototypes to ensure stakeholders understand the intended user experience.

Do I need to manually prepare documentation for developer handoff?▼

No, you do not need to manually prepare documentation for developer handoff. This skill automatically prepares comprehensive assets and detailed documentation to ensure seamless implementation of your interaction flows.

Does this skill support mapping information architecture for a new onboarding process?▼

Yes, this skill supports mapping information architecture for a new onboarding process. It takes your research insights and generates interactive wireframes and flow diagrams to visualize the user journey before development begins.

Related Skills

Explore More Design & Creative Skills→
jlawsjlaws
2

cmd-research-research

Identify research context and detect project artifacts and statistical tools.

Community
Advanced
1479089714790897
7

kwp-design-design-handoff

Generate structured Markdown developer handoff documentation from design inputs.

Community
Intermediate
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate
PaulRBergPaulRBerg
82

ui-ux-design

Guide user experience design through research, journey maps, and interactive prototypes.

Community
Basic