skills.rest
jtvaris
jtvarisCOMMUNITY
Explore all skills by this author →
GitHub

ux-spec

Generate UX_SPEC.md and DESIGN_SYSTEM.md from PRD and architecture docs.

Updated Mar 15, 2026
Search Tags:#documentation#ui-design#wireframes#design-system#ux-spec#prd-architecture
One-click install
npx skills add https://github.com/jtvaris/sunday-night-dynasty --skill ux-spec-jtvaris
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-spec
Source: https://github.com/jtvaris/sunday-night-dynasty/tree/main/.agents/skills/product-development/ux-spec
Command: npx skills add https://github.com/jtvaris/sunday-night-dynasty --skill ux-spec-jtvaris

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Transform product requirements and architecture into concrete UI/UX specifications, wireframes, and a design system to streamline design-to-development handoffs.

Core Features & Use Cases

  • From PRD & Architecture: automatically generate UX_SPEC.md and DESIGN_SYSTEM.md that reflect product goals and architectural constraints.
  • Wireframes & Design System: include wireframe guidance and a living design system documentation for developers.
  • Collaborative Output: delivers ready-for-handoff documents that align design and engineering teams.

Quick Start

Provide PRD and Architecture specs to generate UX_SPEC.md and DESIGN_SYSTEM.md.

Frequently Asked Questions about ux-spec

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

FAQPage Schema
How do I turn a PRD into actionable UI/UX specifications?▼

To turn a PRD into actionable UI/UX specifications, provide your product requirements and architecture docs to generate structured UX_SPEC.md and DESIGN_SYSTEM.md files. This translates high-level product goals into concrete design workflows.

Can I generate wireframes and a design system from architecture specs?▼

Yes, you can generate wireframes and a design system directly from architecture specs. The process transforms architectural constraints and product requirements into wireframe guidance and a living design system documentation for developers.

Does this approach support iOS and macOS app design workflows?▼

This approach specifically supports iOS and macOS app design workflows by applying PRD and architecture specs to produce tailored UI/UX specifications. It generates operational instructions loaded into context during activation.

What is the best way to streamline design-to-development handoffs?▼

The best way to streamline design-to-development handoffs is to generate ready-for-handoff documents like UX_SPEC.md and DESIGN_SYSTEM.md. This aligns design and engineering teams by reflecting product goals and architectural constraints.

Do I need architecture documentation to generate UX specs?▼

Yes, you need both PRD and architecture documentation to generate accurate UX specs. Providing these inputs ensures the resulting wireframes and design system properly reflect product goals and technical architectural constraints.

Related Skills

Explore More Design & Creative Skills→
Clos01Clos01
3

pm-spec

Create structured product requirement documents with goals, metrics, and delivery plans.

Community
Intermediate
mazicimertmazicimert

implementation-guide

Generate docs/IMPLEMENTATION_GUIDE.md from PRD, architecture, and UX spec files.

Community
Advanced
ky-zoky-zo

extract

Identify reusable UI patterns, components, and design tokens for consolidation.

Community
Advanced
mazicimertmazicimert

ux-spec

Generate UX_SPEC.md and DESIGN_SYSTEM.md from PRD.md and ARCHITECTURE.md.

Community
Advanced