skills.rest
asalhamed
asalhamedCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Translate UX research into UI specifications with design tokens and accessibility guidance.

Updated Apr 4, 2026
Search Tags:#accessibility#design-system#responsive-design#design-tokens#component-states#ui-spec
One-click install
npx skills add https://github.com/asalhamed/dev-agents --skill ui-designer-asalhamed
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/asalhamed/dev-agents/tree/main/ui-designer
Command: npx skills add https://github.com/asalhamed/dev-agents --skill ui-designer-asalhamed

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designers often deliver UX insights and patterns that are not immediately actionable for developers. This Skill translates UX research into concrete component specifications, design tokens, and interaction patterns that frontend teams can implement while preserving intent and accessibility.

Core Features & Use Cases

  • Component Hierarchy Definition: Specifies page/screen level structure, section groupings, component blocks, and atomic design tokens to clarify nesting.
  • State & Interaction Mapping: Documents Default, Hover, Focus, Active, Disabled, Loading, Empty, Error, and Success states for interactive elements.
  • Design Tokens Alignment: References semantic design tokens for color, typography, spacing, borders, and ensures consistent usage across components.
  • Responsive Patterns: Promotes mobile-first layouts with breakpoints and layout adjustments for tablet and desktop.
  • Accessibility Guidance: Defines keyboard focus indicators, ARIA labels, contrast requirements, and screen-reader friendly descriptions.

Quick Start

Create a complete UI spec from a UX brief including component hierarchy, states, tokens, and accessibility notes.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I translate UX research into actionable UI specifications for developers?▼

To translate UX research into actionable UI specifications, you input the UX brief and the system generates concrete component hierarchies, interaction state mappings, semantic design tokens, and responsive breakpoint layouts for frontend implementation.

What are design tokens and how are they documented in a UI spec?▼

Design tokens are semantic variables for color, typography, spacing, and borders. In a UI spec, they are documented by referencing these tokens across all components to ensure consistent visual alignment and maintainable design system usage.

How do I map component states like hover, focus, and disabled for a design system?▼

Mapping component states involves documenting Default, Hover, Focus, Active, Disabled, Loading, Empty, Error, and Success conditions for interactive elements. This ensures frontend teams implement complete interaction patterns and accessibility guidance.

Does this UI spec approach include responsive design patterns for mobile and desktop?▼

Yes, this UI spec approach includes responsive design patterns by promoting mobile-first layouts and defining specific layout adjustments and structural changes across tablet and desktop breakpoints for cross-device compatibility.

Can I use this to generate accessibility guidance for frontend implementation?▼

Yes, you can use this to generate accessibility guidance by defining keyboard focus indicators, ARIA labels, contrast requirements, and screen-reader friendly descriptions directly within the component specifications for compliant frontend implementation.

What is the best way to define component hierarchy and atomic design structure?▼

The best way to define component hierarchy is specifying page-level structure, section groupings, component blocks, and atomic design tokens. This clarifies nesting relationships and ensures accurate structural implementation across the design system.

Related Skills

Explore More Design & Creative Skills→
Tonybleything76Tonybleything76

ux-researcher-designer

Create data-driven user personas and journey maps from research findings.

Community
Advanced
abdusamaraieabdusamaraie

designer

Create UI design specifications with theme tokens and RTL requirements.

Community
Intermediate
virajpvirajp
1

design-system

Create and maintain product-wide UX and visual design system blueprints.

Community
Advanced
KhaledMKhaledKhaledMKhaled

recreate-screenshot

Recreate screenshot references into pixel-perfect UI implementations with exact colors and typography.

Community
Advanced