skills.rest
aiyuekuang
aiyuekuangCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Create cohesive visual interfaces with color, typography, iconography, and layout.

14|4|Updated Jan 14, 2026
Search Tags:#typography#design#ui#visual-design#iconography#design-systems#color-theory
One-click install
npx skills add https://github.com/aiyuekuang/LLMProxy --skill ui-design-aiyuekuang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/aiyuekuang/LLMProxy/tree/main/.windsurf/skills/ui-design
Command: npx skills add https://github.com/aiyuekuang/LLMProxy --skill ui-design-aiyuekuang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured approach to creating visually consistent and accessible user interfaces across platforms by applying color theory, typography systems, iconography, and layout patterns to reduce design guesswork and maintain brand coherence.

Core Features & Use Cases

  • Color theory guidance and palette creation aligned with brand identity
  • Typography systems and visual hierarchy for readability
  • Iconography standards and reusable component patterns
  • Design system documentation, governance, and collaboration workflows
  • Accessibility considerations, including contrast and scalable components

Quick Start

Provide a starter UI design plan for a web dashboard including color palette, typography, and component layout.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I create a cohesive UI design system for web and mobile products?▼

To create a cohesive UI design system, you apply proven visual patterns for color theory, typography, and iconography to enforce accessibility and consistency across web and mobile screens. This approach reduces guesswork and maintains brand coherence.

What is the best way to ensure accessibility and contrast in visual design?▼

Ensuring accessibility in visual design requires applying scalable typography and accessible contrast ratios within your color systems. Using a structured design system approach enforces these standards across all reusable components and layouts.

How do I structure typography systems and visual hierarchy for readability?▼

Structuring typography systems involves applying proven visual hierarchy principles to ensure readability across interfaces. This includes defining scalable typography rules and reusable component patterns within your overall design system.

Can I use this to generate a starter UI design plan for a web dashboard?▼

Yes, you can generate a starter UI design plan for a web dashboard. This includes providing a structured color palette, defining typography systems, and outlining component layouts to establish visual consistency from the start.

Does this approach work for both color palette creation and iconography standards?▼

Yes, this approach works for both color palette creation and iconography standards. It aligns color theory guidance with your brand identity while establishing reusable component patterns and iconography standards for interface consistency.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
sotono-046sotono-046
1

design-principles

Define design direction, color, typography, and spacing tokens for dashboards.

Community
Basic
Code4neverCompanyCode4neverCompany

UX Designer Agent — Sally 🎨

Guide users through UX design specification creation from discovery to visual design.

Community
Advanced
bdbchbdbch
2

design-compliance

Audit web design compliance against contrast, spacing, typography, and hit target standards.

Community
Advanced