product-designer

Codify a premium UI/UX system with tokens and audit patterns for design governance.

1|Updated Jan 18, 2026

Search Tags:#typography #design #ui #a11y #color #ux #premium

Ready to run

npx skills add https://github.com/fajjarnr/payu --skill product-designer-fajjarnr

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: product-designer
Source: https://github.com/fajjarnr/payu/tree/main/.agent/skills/product-designer
Command: npx skills add https://github.com/fajjarnr/payu --skill product-designer-fajjarnr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Premium UI/UX governance for digital products by reducing design debt and ensuring a consistent, high-quality visual language.

Core Features & Use Cases

Establishes a reusable design system and brand language (Emerald) across teams.
Guides hierarchy, whitespace, typography, color, motion, and accessibility for product interfaces.
Supports design reviews, PRDs, and living design documentation to accelerate product delivery.

Quick Start

Begin by outlining a premium Emerald design system for PayU products, specify typography scale, color tokens, spacing tokens, and accessibility considerations, then apply to a design review.

Frequently Asked Questions about product-designer

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

FAQPage Schema

How do I enforce consistent UI typography, color, and accessibility across product teams?▼

Enforce consistent UI typography, color, and accessibility by codifying a premium UI/UX system with reusable design tokens, hierarchy rules, and audit patterns. This governance framework ensures visual consistency across all product interfaces.

What is a reusable design system and how does it reduce design debt?▼

A reusable design system reduces design debt by establishing a shared brand language with defined spacing, color tokens, and typography scales. It provides living design documentation to align teams and accelerate high-quality product delivery.

How do I conduct a UI design review using a premium design system?▼

Conduct a UI design review by applying the premium Emerald design system to evaluate hierarchy, whitespace, motion, and accessibility. This process identifies inconsistencies and ensures interfaces meet established visual language standards.

Can I use this design system framework for PRDs and living design documentation?▼

Yes, you can use this design system framework for PRDs and living design documentation. It supports governance workflows by codifying UI/UX standards, ensuring product requirements align with the established premium visual language.

What's the best way to establish a premium UI/UX system for digital products?▼

The best way to establish a premium UI/UX system is to specify typography scales, color tokens, spacing tokens, and accessibility considerations. This codifies a consistent visual language and governance framework across teams.

Why does my product interface lack visual hierarchy and consistent spacing?▼

Your product interface lacks visual hierarchy and consistent spacing due to uncodified design standards. Applying a reusable design system with defined spacing tokens and hierarchy rules enforces a consistent, premium visual language.