skills.rest
lucabattistini
lucabattistiniCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-structure

Design information hierarchy, layout logic, and interaction patterns for user interfaces.

Updated Feb 28, 2026
Search Tags:#layout#navigation#user flows#wireframing#ui design#information architecture
One-click install
npx skills add https://github.com/lucabattistini/concinnitas --skill design-structure
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-structure
Source: https://github.com/lucabattistini/concinnitas/tree/main/skills/design-structure
Command: npx skills add https://github.com/lucabattistini/concinnitas --skill design-structure

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps define the fundamental structure, hierarchy, and navigation of a user interface, ensuring logical flow and usability before visual design begins.

Core Features & Use Cases

  • View Identification: Maps user flows to distinct interface views or screens.
  • Information Hierarchy: Ranks content importance within each view.
  • Navigation Design: Determines how users move between different parts of the interface.
  • Use Case: After mapping user journeys for a new e-commerce checkout process, this Skill helps organize the steps into logical views (e.g., Shipping, Payment, Review) and defines how users navigate between them.

Quick Start

Run /design:structure to begin defining the information hierarchy and layout logic for your current design track.

Frequently Asked Questions about design-structure

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

FAQPage Schema
How do I define information hierarchy and navigation for a user interface?▼

Information hierarchy is defined by ranking content importance within each view, while navigation design determines how users move between distinct interface screens mapped from user flows.

When do I need to design UI structure before starting visual design?▼

UI structure design is needed before visual design to establish logical flow, information hierarchy, and interaction patterns, ensuring usability and structural integrity against user flows.

What's the best way to map user flows to distinct interface views?▼

Mapping user flows to interface views involves identifying distinct screens within the user journey, organizing steps logically, and validating structural integrity against accessibility principles.

How do I generate wireframes for my UI layout logic?▼

You can generate optional grayscale wireframes for UI layout logic by defining structural specifications that integrate with Paper.design, visualizing the information hierarchy before visual design.

Can I use this approach to organize an e-commerce checkout process into logical views?▼

Yes, you can organize an e-commerce checkout process into logical views like Shipping, Payment, and Review by mapping user journeys and defining navigation between each step.

Does the structural validation check against accessibility principles?▼

Yes, structural validation checks the layout logic and interaction patterns against accessibility principles to ensure the information hierarchy and navigation meet usability standards.

Related Skills

Explore More Design & Creative Skills→
udecodeudecode
240

spec-flow-analyzer

Analyze specifications to map user flows, edge cases, and missing requirements.

Official
Advanced
jeffwweeejeffwweee

ui-designer

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

Community
Intermediate
sinositatosinositato

prd-ui-prototype

Generate interactive HTML/CSS/JS UI prototypes from PRD documents.

Community
Advanced
MileniumTickMileniumTick

site-architecture

Plan website information architecture with page hierarchy, navigation flows, and URL patterns.

Community
Advanced