skills.rest
jftecnologia
jftecnologiaOFFICIAL
Explore all skills by this author →
GitHub

generate-ui-design

Generate UI/UX design specification documents from PRD requirements.

1|Updated Jan 7, 2026
Search Tags:#design system#component library#ux design#ui design#interaction design#page inventory
One-click install
npx skills add https://github.com/jftecnologia/laravel-base-template --skill generate-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-ui-design
Source: https://github.com/jftecnologia/laravel-base-template/tree/main/.claude/skills/generate-ui-design
Command: npx skills add https://github.com/jftecnologia/laravel-base-template --skill generate-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of comprehensive UI/UX design specifications, ensuring a consistent and well-documented visual identity and user experience for applications.

Core Features & Use Cases

  • Design System Generation: Creates detailed documentation for colors, typography, spacing, and components.
  • Page Inventory: Catalogs all application pages, their layouts, and authentication requirements.
  • Component Hierarchy: Defines reusable components and identifies new ones needed.
  • Interaction Patterns: Standardizes how users interact with 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 COMPONENTS.md files based on PRD requirements and existing code.

Quick Start

Use the generate-ui-design skill to create the design system documentation for the new user profile page.

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 a UI design system from PRD requirements?▼

This Skill generates a UI design system by analyzing PRD requirements and existing architecture to produce structured documentation defining colors, typography, spacing, and components in the `docs/design/` directory.

What is a page inventory and how does it catalog application screens?▼

A page inventory catalogs all application pages, detailing their specific layouts and authentication requirements. It is generated automatically to standardize screen structures and define user interaction flows within the design specification.

Can I create a component hierarchy and identify reusable components from existing architecture?▼

Yes, you can create a component hierarchy that defines reusable components and identifies new ones needed. The Skill evaluates existing architecture to structure component documentation for consistent application interfaces.

How do I document interaction patterns for forms and navigation?▼

Document interaction patterns for forms and navigation by generating standardized UX specification files. The Skill analyzes PRD requirements to standardize how users interact with forms, navigation, and feedback mechanisms.

When do I need to generate UI/UX design specification documents?▼

You need to generate UI/UX design specification documents when starting a new feature or defining an application's visual identity. This process fits between architecture definition and task breakdown to ensure a consistent user experience.

Does this UI design generation work with existing code and architecture?▼

Yes, this UI design generation works with existing code by analyzing current architecture alongside PRD requirements. It uses this context to create structured design documentation that fits seamlessly into your development pipeline.

Related Skills

Explore More Design & Creative Skills→
CoreStack-EnggCoreStack-Engg

techspec-generator

Generate a Technical Specification .docx from a PRD or Action Plan.

Official
Advanced
vathymutvathymut

implement

Convert high-level specifications and tickets into executable code.

Community
Advanced
juniorfontenelejuniorfontenele

generate-ui-design

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

Community
Advanced
ybbms777ybbms777
1

design-implementation-reviewer

Compare implemented HTML, CSS, and React interfaces against Figma design specifications.

Community
Intermediate