skills.rest
juniorfontenele
juniorfonteneleCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

generate-ui-design

Generate UI/UX design specification documents with design system and page inventory.

Updated Feb 11, 2026
Search Tags:#design system#component library#ux design#ui design#interaction design#page inventory
One-click install
npx skills add https://github.com/juniorfontenele/ai-guidelines --skill generate-ui-design-juniorfontenele
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-ui-design
Source: https://github.com/juniorfontenele/ai-guidelines/tree/main/.agents/skills/generate-ui-design
Command: npx skills add https://github.com/juniorfontenele/ai-guidelines --skill generate-ui-design-juniorfontenele

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of comprehensive UI/UX design specification documents, ensuring a consistent and well-defined visual identity and user experience for your application.

Core Features & Use Cases

  • Design System Definition: Generates detailed specifications for colors, typography, spacing, and components.
  • Page Inventory: Catalogs all application pages, their routes, layouts, and authentication requirements.
  • Component Hierarchy: Outlines existing and new UI components, promoting reusability.
  • Interaction Patterns: Defines standard user interaction flows for forms, navigation, feedback, and more.
  • Use Case: When starting a new feature, use this Skill to generate the DESIGN_SYSTEM.md, PAGE_INVENTORY.md, and INTERACTIONS.md files, providing a clear blueprint for the frontend development team.

Quick Start

Generate the UI design specification documents for the application.

Frequently Asked Questions about generate-ui-design

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

FAQPage Schema
How do I generate UI/UX design specifications for a new application feature?▼

UI/UX design specifications are comprehensive documents defining your application's visual identity and user experience, including design systems, page inventories, component hierarchies, and interaction patterns to ensure frontend consistency.

What is included in a page inventory for application development?▼

A page inventory catalogs all application pages, detailing their specific routes, layout structures, and authentication requirements to provide a clear structural blueprint for the frontend development team.

How do I define a design system for my application?▼

You define a design system by generating specification documents that detail your application's color palettes, typography rules, spacing guidelines, and reusable UI components to maintain a consistent visual identity.

Can this tool generate interaction patterns for forms and navigation?▼

Yes, the tool generates interaction patterns that define standard user interaction flows for forms, navigation, user feedback, and other core application behaviors to standardize the user experience.

When do I need to generate a component hierarchy for my UI design?▼

You need a component hierarchy when starting a new feature to outline existing and new UI components, promoting reusability and providing a structured blueprint fitting between architecture definition and task breakdown.

Related Skills

Explore More Design & Creative Skills→
devalexanderdazadevalexanderdaza

bmad-create-ux-design

Generates a comprehensive UX design specification through a structured 14-step collaborative workflow.

Community
Advanced
jasonkneenjasonkneen
734

task-breakdown

Break down complex designs into epics, tasks, and dependencies.

Community
Intermediate
jftecnologiajftecnologia

generate-ui-design

Generate UI/UX design specification documents from PRD requirements.

Official
Advanced
terzigoluterzigolu
37

figma-generate-design

Translate code-based UI layouts into Figma screens using design-system tokens.

Community
Intermediate