skills.rest
Exia-thd
Exia-thdCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Generate WCAG AA-compliant wireframes, design tokens, and component inventories for digital products.

Updated Apr 10, 2026
Search Tags:#typography#design#ui#color#wireframes#ux#design-system
One-click install
npx skills add https://github.com/Exia-thd/Digital-Nervous --skill ui-designer-exia-thd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/Exia-thd/Digital-Nervous/tree/main/skills/ui-designer
Command: npx skills add https://github.com/Exia-thd/Digital-Nervous --skill ui-designer-exia-thd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The UI Designer skill eliminates the manual, time‑consuming process of creating complete design specifications, wireframes, and design tokens, ensuring consistency and accessibility for developers.

Core Features & Use Cases

  • Design Reasoning Engine: Analyzes product type, selects color palettes, styles, typography, and validates against UX guidelines.
  • Design Database Access: Leverages extensive CSV databases for colors, styles, typography, and creative patterns.
  • Output Artifacts: Generates design briefs, wireframes, design tokens, component inventories, interaction patterns, and handoff notes ready for frontend engineers.
  • Use Case Example: Turning a SaaS dashboard briefing into a full design system with accessible color palettes and component specs.

Quick Start

Generate a complete design system for a new e‑commerce platform targeting young adults using the UI Designer skill.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I generate production-grade UI wireframes and design tokens for a SaaS dashboard?▼

To generate UI wireframes and design tokens for a SaaS dashboard, use a design reasoning engine that analyzes product types and outputs component inventories, interaction patterns, and handoff notes. It validates typography and color palettes against UX guidelines.

What is the best way to create an accessible design system without writing code?▼

Creating an accessible design system without code involves leveraging built-in databases for color palettes, typography pairings, and wireframes. This approach generates WCAG AA-compliant design artifacts, ensuring accessibility standards are met without manual development.

Can I use this approach to design interaction specifications for e-commerce sites?▼

Yes, you can design interaction specifications for e-commerce sites by applying a design reasoning engine to generate comprehensive UI/UX wireframes and design briefs. It analyzes the e-commerce context to output tailored component inventories and interaction patterns.

Does this method provide WCAG AA-compliant color palettes and typography pairings?▼

Yes, this method provides WCAG AA-compliant color palettes and typography pairings by utilizing extensive CSV design databases. It validates selected styles and colors against established UX guidelines to ensure production-grade accessibility.

What outputs are included in a complete UI/UX design specification for frontend engineers?▼

A complete UI/UX design specification includes design briefs, wireframes, design tokens, component inventories, interaction patterns, and handoff notes. These artifacts are generated ready for frontend engineers to implement directly.

When do I need a design database to build digital product wireframes?▼

You need a design database to build digital product wireframes when you require consistent, validated design elements like color palettes and typography pairings. It eliminates the manual process of creating complete design specifications from scratch.

Related Skills

Explore More Design & Creative Skills→
bipinksbipinks
3

wireframing-prototyping

Generate ASCII wireframes, information architecture diagrams, and Mermaid user-flow diagrams from design briefs.

Community
Intermediate
buiphucminhtambuiphucminhtam
47

ui-designer

Translate BRD inputs into design briefs, tokens, and wireframes for frontend teams.

Community
Advanced
ouakarouakar

ui-designer

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

Community
Advanced
CODE-SAURABHCODE-SAURABH
2

theme-factory

Apply cohesive visual themes with color tokens and WCAG AA contrast validation.

Community
Advanced