skills.rest
liangmiQwQ
liangmiQwQCOMMUNITY
Explore all skills by this author →
Website𝕏@liangmiQwQGitHub

designing-ui

Consolidate UI design principles into a reusable Markdown blueprint.

Updated Apr 12, 2026
Search Tags:#typography#design#ui#consistency#color#design-system#iconography
One-click install
npx skills add https://github.com/liangmiQwQ/skills --skill designing-ui-liangmiqwq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designing-ui
Source: https://github.com/liangmiQwQ/skills/tree/main/my-skills/designing-ui
Command: npx skills add https://github.com/liangmiQwQ/skills --skill designing-ui-liangmiqwq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardizes UI design language across projects by codifying practical guidelines for icons, colors, typography, and layout.

Core Features & Use Cases

  • Icons Are the Text: Use icons boldly — they communicate button and UI purpose at a glance; in compact UIs, icons can replace text labels.
  • Stick to the Theme Color: Reuse the project’s theme color tokens and avoid introducing new colors unnecessarily.
  • Use Opacity Instead of Hardcoded Colors: Prefer opacity-based color expressions to maintain a coherent palette.
  • Flat UI with Borders Only: Favor borders and muted depth over shadows and gradients to keep UI clean.
  • Typography: Load the Right Font for the Context: Choose display fonts for hero sections and clean sans-serif for application UI.

Quick Start

Apply these design principles to a UI mockup to ensure consistent visuals.

Frequently Asked Questions about designing-ui

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

FAQPage Schema
How do I standardize UI design language across multiple product screens?▼

Standardizing UI design language involves codifying practical guidelines for icons, colors, typography, and layout into a single reusable blueprint to maintain visual consistency across all product screens.

What is the best way to maintain color consistency in a design system?▼

Maintain color consistency by strictly reusing the project's theme color tokens and using opacity-based color expressions, avoiding hardcoded colors and unnecessary new color introductions.

How do I use iconography to replace text labels in compact UI?▼

Use iconography boldly to communicate button and UI purpose at a glance; in compact UIs, icons can effectively replace text labels to save space while maintaining clarity.

Does flat UI design work better with borders or shadows for visual depth?▼

Flat UI design works better using borders and muted depth rather than shadows and gradients, keeping the interface clean while maintaining clear visual boundaries between elements.

How do I choose the right typography for different UI contexts?▼

Choose typography by loading display fonts for hero sections to create impact and clean sans-serif fonts for application UI to ensure readability and functional clarity.

When do I need a UI design blueprint for reviewing existing interfaces?▼

You need a UI design blueprint when reviewing existing interfaces to evaluate them against standardized principles for iconography, color tokens, typography, and flat layout styling.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
niiiusburoniiiusburo

extract

Extract reusable UI components and design tokens from a codebase.

Community
Advanced
efekrbasefekrbas
41

high-contrast

Design web and app interfaces with WCAG AAA contrast and strong visual boundaries.

Community
Intermediate
KentoShimizuKentoShimizu
7

visual-design

Create a reusable visual spec with color, typography, spacing, and grid rules.

Community
Intermediate