Agent Skills
› NeverSight/learn-skills.dev
› ui-design-styles
ui-design-styles
GitHub提供现代UI设计风格的综合指导，涵盖Soft UI、暗色模式、扁平化、新拟态、毛玻璃及极光渐变。用于应用特定风格、创建原型、提升可访问性或实现具体视觉效果的技术落地。
Trigger Scenarios
用户要求将特定UI风格应用于项目
需要创建现代且美观的UI原型
希望在遵循设计趋势的同时提高可访问性
需要了解磨砂玻璃或柔和阴影等具体UI效果的技术实现
Install
npx skills add NeverSight/learn-skills.dev --skill ui-design-styles -g -y
SKILL.md
Frontmatter
{
"name": "ui-design-styles",
"description": "Comprehensive guidance for applying modern UI design styles, including Soft UI, Dark Mode, Flat Design, Neumorphism, Glassmorphism, and Aurora UI Gradients. Use when a user asks to: (1) Apply a specific UI style to a project, (2) Create a modern, visually appealing UI prototype, (3) Improve accessibility while following design trends, or (4) Understand the technical implementation of specific UI effects like frosted glass or soft shadows."
}
UI Design Styles
This skill provides specialized knowledge and workflows for implementing the most popular modern UI design styles. It focuses on achieving a professional, polished look while maintaining high standards for accessibility and legibility.
Core UI Styles
Select the style that best fits the project's goals:
- Soft UI / Modern Design: Best for friendly, inviting B2C interfaces. Uses subtle gradients and lifelike shadows. See soft_ui.md.
- Dark Mode: Essential for modern apps. Focuses on hierarchy through lighting and OLED-friendly black levels. See dark_mode.md.
- Flat Design: Focuses on minimalism, high-contrast typography, and clarity. Great for e-commerce and luxury brands. See flat_design.md.
- Neumorphism: A stylized "extruded plastic" look. Best used sparingly for specific container elements. See neumorphism.md.
- Glassmorphism: A frosted glass effect using background blur and transparency. Adds depth and a premium feel. See glassmorphism.md.
- Aurora UI Gradients: Organic, blurry, northern-lights-style backgrounds. Excellent for ornamentation and pairing with Glassmorphism. See aurora_ui.md.
General Design Principles
Regardless of the chosen style, always apply these fundamental practices:
- Accessibility First: Design styles should never impair the user's ability to navigate or read essential content. If a style (like Glassmorphism) causes legibility issues, it must be refined or limited to non-essential elements.
- Hierarchy through Depth: Use the "top-down lighting" model. Elements closer to the user should be lighter and/or have more prominent shadows/transparency.
- Color Harmony: Avoid pure black/white when possible. Tint grays and backgrounds with a hint of the primary brand color to create a more cohesive and professional feel.
- Consistent Roundness: Choose a corner radius (e.g., 8px, 16px) and apply it consistently across all components to maintain visual unity.
References
Version History
- e0220ca Current 2026-07-05 22:14
