skills.rest
fajjarnr
fajjarnrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/fajjarnr/payu --skill product-designer-fajjarnr
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
samcannassamcannas

normalize

Align UI components to design tokens for spacing, typography, and color.

Community
Advanced
dev-mirzabicerdev-mirzabicer

frontend-ui-ux

Translate design briefs into production-ready frontend UI components.

Community
Advanced
fm-dev-mxfm-dev-mx

frontend-design

Implement premium visual styles for digital invitations using defined aesthetic directions.

Community
Intermediate