skills.rest
efekrbas
efekrbasCOMMUNITY
Explore all skills by this author →
Website𝕏@efekrbsGitHub

product-design

Generate product design guidance for UX, design systems, and accessibility.

41|5|Updated Sep 30, 2025
Search Tags:#typography#accessibility#figma#design systems#product design#ux#motion
One-click install
npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill product-design-efekrbas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: product-design
Source: https://github.com/efekrbas/discord-hypesquad-manager/tree/main/.agents/skills/product-design
Command: npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill product-design-efekrbas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps product teams turn rough ideas into polished, consistent interfaces by guiding visual language, UX flows, and accessibility decisions.

Core Features & Use Cases

  • Design systems: Define tokens, components, spacing, typography, color, and motion.
  • UX review: Critique flows, onboarding, empty states, feedback, and error handling.
  • Use case: If a signup screen feels confusing, this Skill can suggest a clearer hierarchy, stronger CTA placement, and accessible interaction states.

Quick Start

Use this skill to review my current product UI and propose a cleaner, more accessible design system with improved flows.

Frequently Asked Questions about product-design

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

FAQPage Schema
How do I create a design system with accessible typography and spacing in Figma?▼

A UX review assesses onboarding flows, empty states, feedback, and error handling to propose clearer hierarchy and stronger CTA placement. Applying cognitive design principles ensures structured recommendations that improve overall flow consistency and user comprehension.

Can I get interface critique and motion decisions for onboarding flows?▼

Accessible interaction states require WCAG compliance, cognitive design principles, and structured recommendations for design tokens. Evaluating interface critiques ensures that typography, motion, and spacing maintain cross-screen consistency for production-ready design system conventions.

What is the best way to structure prototype handoff for design systems?▼

To define design tokens, map typography, spacing, color, and motion into structured variables that ensure cross-screen consistency. These tokens form the foundation of a production-ready design system aligned with WCAG accessibility and cognitive design principles.

How do I fix confusing UI hierarchy and weak CTA placement in a signup screen?▼

To fix confusing UI hierarchy, apply cognitive design principles to suggest stronger CTA placement and clearer visual structure. A UX review provides structured recommendations to improve onboarding flows, feedback, and accessible interaction states.

Related Skills

Explore More Design & Creative Skills→
Mysense775Mysense775

ui-ux-pro-max

Generate design systems and React components from natural language descriptions.

Community
Advanced
muzhicaomingwangmuzhicaomingwang
3

ui

Translate UX concepts into wireframe-level UI specifications with design tokens and accessibility checklists.

Community
Intermediate
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
GeargrindadminGeargrindadmin

eval-ui-ux

Evaluate UI/UX for design system adherence, visual consistency, and accessibility.

Community
Advanced