ui-designer

Define UI design systems and UX specifications bridging BRD and frontend implementation.

Updated Mar 25, 2026
One-click install
npx skills add https://github.com/ouakar/ubinarys-dental --skill ui-designer-ouakar
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/ouakar/ubinarys-dental/tree/main/skills/forgewright/skills/ui-designer
Command: npx skills add https://github.com/ouakar/ubinarys-dental --skill ui-designer-ouakar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designs UI/UX systems and generates actionable handoff artifacts to bridge BRD and frontend implementation.

Core Features & Use Cases

  • Provides design briefs, design reasoning outputs, and design tokens (colors, typography, spacing) to guide frontend engineers.
  • Produces style guides, component inventories, interaction patterns, and accessibility guidelines for consistent cross-platform UI.
  • Supports SaaS dashboards, marketing sites, and mobile apps with ready-to-implement design specifications.

Quick Start

Provide a complete design system brief for a SaaS admin dashboard, including tokens and accessibility guidelines.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I create a comprehensive UI design system for a SaaS dashboard?

To create a UI design system for a SaaS dashboard, define design tokens, typography, color palettes, spacing rules, and component inventories. This process bridges business requirements and frontend implementation by generating actionable handoff artifacts and interaction patterns.

What is included in frontend handoff documentation for UX specifications?

Frontend handoff documentation for UX specifications includes design tokens, style guides, component inventories, and interaction patterns. These artifacts ensure consistent cross-platform UI implementation by providing engineers with precise accessibility guidelines and visual parameters.

Can I generate design tokens and accessibility guidelines for mobile experiences?

Yes, you can generate design tokens and accessibility guidelines specifically for mobile experiences. The system outputs comprehensive design specifications, including color and spacing tokens, ensuring mobile apps meet accessibility standards and maintain visual consistency.

How do I bridge business requirements and frontend implementation for marketing sites?

Bridge business requirements and frontend implementation for marketing sites by translating design briefs into structured UX specifications. This yields ready-to-implement style guides, wireframes, and design tokens that guide frontend engineers through accurate visual execution.

What is the best way to document interaction patterns and component inventories?

The best way to document interaction patterns and component inventories is to compile them into a unified style guide. This approach provides clear design reasoning and accessibility guidelines, ensuring consistent UI behavior across SaaS dashboards and marketing sites.