ux-spec

Generate UI/UX specifications with wireframes and design systems from PRDs.

114|8|Updated Mar 4, 2025
One-click install
npx skills add https://github.com/gustavscirulis/snapgrid --skill ux-spec-gustavscirulis
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ux-spec
Source: https://github.com/gustavscirulis/snapgrid/tree/main/.claude/skills/skills/product/ux-spec
Command: npx skills add https://github.com/gustavscirulis/snapgrid --skill ux-spec-gustavscirulis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of detailed UI/UX specifications, including wireframes and design system guidelines, directly from product requirements and architecture documents.

Core Features & Use Cases

  • Generate UI/UX Specifications: Creates comprehensive UX_SPEC.md documents.
  • Create Design Systems: Generates DESIGN_SYSTEM.md for consistent app interfaces.
  • Use Case: When starting a new app feature, use this Skill to transform the Product Requirements Document (PRD) and architecture specifications into a complete design blueprint, ensuring all stakeholders have a clear understanding of the intended user interface and experience.

Quick Start

Use the ux-spec skill to generate a UX specification from the existing PRD and ARCHITECTURE.md files.

Frequently Asked Questions about ux-spec

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

FAQPage Schema
How do I generate UI/UX specifications from a Product Requirements Document?

To generate UI/UX specifications from a PRD, this Skill reads your product requirements and architecture documents to automatically produce comprehensive wireframes, screen layouts, and interaction patterns. It transforms textual requirements into a complete design blueprint.

Can I create a design system for iOS and macOS apps from existing architecture files?

Yes, you can create a design system for iOS and macOS apps from architecture files. This Skill processes your specifications to define component libraries, accessibility guidelines, dark mode rules, and responsive design patterns tailored for Apple platforms.

What is the best way to automate wireframing and information architecture design?

Automating wireframing and information architecture design is best handled by processing your PRD through this Skill. It converts product requirements into structured screen layouts, interaction patterns, and detailed UX specification documents without manual drafting.

Does this UI specification generator handle edge cases and dark mode requirements?

Yes, this UI specification generator handles edge cases and dark mode requirements. It explicitly defines dark mode rules, accessibility standards, and edge case handling within the generated design system documentation and UX specifications.

Do I need a PRD and architecture specifications to generate app design documentation?

Yes, you need a Product Requirements Document and architecture specifications to generate app design documentation. The Skill uses these input files to accurately derive design principles, component libraries, and information architecture for your application.

How does converting product requirements into UX specs improve the app design workflow?

Converting product requirements into UX specs improves the app design workflow by automating the creation of detailed blueprints. It ensures all stakeholders share a clear understanding of the intended interface, design system guidelines, and user experience directly from architecture documents.