skills.rest
ynitto
ynittoCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Generate UI/UX design guidance for web and mobile apps.

1|Updated Feb 14, 2026
Search Tags:#typography#design#ui#accessibility#ux#design-system
One-click install
npx skills add https://github.com/ynitto/sandbox --skill ui-designer-ynitto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/ynitto/sandbox/tree/main/.github/skills/ui-designer
Command: npx skills add https://github.com/ynitto/sandbox --skill ui-designer-ynitto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Web apps and mobile UIs often suffer from inconsistent layouts, scattered guidelines, and fragmented design know-how. ui-designer consolidates screen structure, layout patterns, components, typography, color systems, and accessibility rules into a single, searchable design-intelligence resource.

Core Features & Use Cases

  • Comprehensive design database: 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, 25 chart types, across 9 tech stacks.
  • End-to-end guidance for screen structure, layout patterns, component conventions, accessibility, and responsive behavior to accelerate UI prototyping.
  • Use cases include dashboards, landing pages, product interfaces, and mobile experiences with consistent branding and usability.

Quick Start

Request a UI/UX design for a dashboard, and the system will generate a complete design system outline.

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 consistent UI design system for web and mobile apps?▼

Create a consistent UI design system by consolidating screen structures, layout patterns, component conventions, typography, and color palettes into a searchable resource, ensuring consistent branding and usability across web and mobile apps.

What UX guidelines should I follow to improve dashboard accessibility and responsive layouts?▼

Follow comprehensive UX guidelines that enforce accessibility rules, responsive behavior, and component conventions across multiple tech stacks to ensure usable and accessible dashboard interfaces.

Can I audit existing interfaces and improve user flows across different tech stacks?▼

Yes, you can audit existing interfaces and improve user flows across different tech stacks by evaluating current screen structures against standardized layout patterns and accessibility rules to identify inconsistencies and guide improvements.

Does this UI design guidance cover color palettes and font pairings for product interfaces?▼

Yes, this UI design guidance covers color palettes and font pairings for product interfaces by providing a comprehensive database of 97 color palettes and 57 font pairings to maintain visual consistency.

What is the best way to generate a complete design system outline for a new screen?▼

The best way to generate a complete design system outline for a new screen is to request UI/UX guidance, which outputs end-to-end recommendations for structure, components, and accessibility based on your specific stack.

How do I standardize chart types and data visualization in a dashboard UI?▼

Standardize chart types and data visualization in a dashboard UI by referencing a consolidated design database that includes 25 chart types and component guidelines to ensure consistent visual reporting.

Related Skills

Explore More Design & Creative Skills→
infinith4infinith4
1

ui-spec

Generate UI screen specifications in Markdown from design goals and component requirements.

Community
Advanced
OpenLaborOpenLabor
4

UI Design

Create accessible web and mobile interfaces with design system guidelines.

Official
Intermediate
IcekoleIcekole

ui-ux-pro-max

Generate design systems and UI component guidelines for web and mobile applications.

Community
Advanced
DiologIRDiologIR

design-md-from-screenshots

Extract design systems from screenshots into a comprehensive DESIGN.md file.

Official
Advanced