skills.rest
u1pns
u1pnsCOMMUNITY
Explore all skills by this author →
GitHub

product-designer

Translate product requirements into UX design specifications with component libraries.

8|2|Updated Jan 25, 2026
Search Tags:#design#ui#prototyping#wireframes#ux#design-system#visual-design
One-click install
npx skills add https://github.com/u1pns/skills-entrepeneur --skill product-designer-u1pns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: product-designer
Source: https://github.com/u1pns/skills-entrepeneur/tree/main/product-designer
Command: npx skills add https://github.com/u1pns/skills-entrepeneur --skill product-designer-u1pns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translates abstract PRD requirements into cohesive, accessible UI specifications and a bold, repeatable design system, accelerating frontend delivery.

Core Features & Use Cases

  • Design System Ownership: defines visual language, tokens, and components to ensure consistency across product surfaces.
  • UI Specification: produces detailed component-level specs, interaction notes, and accessibility considerations.
  • Visual Direction: commits to a bold aesthetic direction and translates it into concrete implementation guidance for designers and developers.

Quick Start

Provide a complete UX/UI design specification based on the given PRD and constraints.

Frequently Asked Questions about product-designer

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

FAQPage Schema
How do I translate abstract product requirements into concrete UX design specifications?▼

You translate abstract product requirements into concrete UX design specifications by processing PRD constraints to generate cohesive interaction notes, component-level specs, and accessibility considerations across web and mobile platforms.

What is the best way to generate a design system with visual tokens from a PRD?▼

Generating a design system from a PRD involves defining the visual language, establishing design tokens, and outlining a detailed component library to ensure consistency across all product surfaces.

Can I use this approach to create high-fidelity UI specs for both web and mobile platforms?▼

Yes, you can create high-fidelity UI specs for both web and mobile platforms by committing to a bold aesthetic direction and translating it into detailed implementation guidance for designers and developers.

How do I ensure accessibility considerations are included in my wireframing process?▼

Ensure accessibility considerations in wireframing by translating abstract product constraints into detailed UI specifications that explicitly document interaction notes and accessibility requirements alongside visual direction.

Does this UI specification method work without existing frontend dependencies?▼

Yes, this UI specification method works without existing frontend dependencies, using the provided product requirements to define the visual language and component library independently before development.

Why should I use a structured design system instead of ad-hoc visual design for new products?▼

Use a structured design system instead of ad-hoc visual design to accelerate frontend delivery, ensuring repeatable consistency across product surfaces through defined tokens and a detailed component library outline.

Related Skills

Explore More Design & Creative Skills→
sinositatosinositato

prd-discover

Gather problem, user, scope, and success criteria into a markdown context file.

Community
Intermediate
noin-ainoin-ai

design

Generate UI design specs with responsive and dark mode variants.

Official
Intermediate
rshankrasrshankras
603

ux-spec

Generate UI/UX specifications and design system documentation from product requirements and architecture documents.

Community
Advanced
alslimanyalslimany

interface-design

Apply interface design guidelines for consistent dashboards, admin panels, and data interfaces.

Community
Advanced