skills.rest
mkatogui
mkatoguiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-spec-prd

Plan UI specs with product type, palette, components, and anti-patterns aligned to UDS.

3|Updated Mar 11, 2026
Search Tags:#planning#anti-patterns#prd#design-system#palette#ui-spec
One-click install
npx skills add https://github.com/mkatogui/universal-design-system --skill ui-spec-prd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-spec-prd
Source: https://github.com/mkatogui/universal-design-system/tree/main/plugins/universal-design-system/skills/ui-spec-prd
Command: npx skills add https://github.com/mkatogui/universal-design-system --skill ui-spec-prd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Plan UI specs and PRDs before building to ensure design consistency across products and teams.

Core Features & Use Cases

  • Generate concise UI specs aligned with the Universal Design System, including product type, sector, recommended palette, key components, and anti-patterns.
  • Optionally persist a MASTER.md design system and page files for future builds to ensure consistency.
  • Reference UDS data sources and patterns to ground decisions.

Quick Start

Generate a concise UI spec for a SaaS dashboard and persist MASTER.md for future builds.

Frequently Asked Questions about ui-spec-prd

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

FAQPage Schema
What is a UI spec and how does it align with a design system?▼

A UI spec for product design defines the product type, sector, recommended color palette, key components, and anti-patterns. It ensures visual and functional consistency across teams by aligning decisions with the Universal Design System.

What should a product requirements document include for consistent UI design?▼

A product requirements document for consistent UI design should include the product type, sector, recommended palette, key components, and anti-patterns. Referencing Universal Design System patterns grounds these decisions for visual consistency.

How do I generate UI specs for different scenarios like landing pages or SaaS apps?▼

You generate UI specs for scenarios like landing pages or SaaS apps by applying the specific use case to outline required components and palettes. The output is a concise spec grounded in Universal Design System data sources for consistency.

What are UI anti-patterns and why include them in a design spec?▼

UI anti-patterns are design choices that negatively impact user experience, and including them in a design spec prevents inconsistent or problematic implementations. Outlining them ensures the product aligns with Universal Design System standards.

Related Skills

Explore More Design & Creative Skills→
hfadhlullahhfadhlullah

PRD Generator

Generate Product Requirements Documents through an interview process.

Community
Advanced
huangjienhuangjien

ui-ux-pro-max

Generate UI/UX design systems from domain-specific search results and reasoning.

Community
Intermediate
elsolalelsolal
1

minimalist-ui

Define editorial UI design protocols with typography, color, and component specs.

Community
Advanced
propane-aipropane-ai
4

data-analytics-for-design

Analyze funnels, cohorts, and feature adoption metrics for design decisions.

Official
Intermediate