SkillsAdd

modelscope.cn

ui-design-styles

Comprehensive guidance for applying modern UI design styles, including Soft UI, Dark Mode, Flat Design, Neumorphism, Glassmorphism, and Aurora UI Gradients.

Installation

$ npx skills add https://modelscope.cn
View on skills.sh ↗ Website ↗

Summary

  • 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.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from modelscope.cn · top by installs.

npx skills add https://modelscope.cn
skill-creator 2K frontend-design 1.9K pptx-generator 1.3K minimax-docx 1.2K find-skills 1.1K minimax-xlsx 1.2K minimax-pdf 1.2K docx 942 self-improvement 932 pdf 914

Browse all from modelscope.cn

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,966 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

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 [softui.md](references/softui.md).
  • Dark Mode: Essential for modern apps. Focuses on hierarchy through lighting and OLED-friendly black levels. See [darkmode.md](references/darkmode.md).
  • Flat Design: Focuses on minimalism, high-contrast typography, and clarity. Great for e-commerce and luxury brands. See [flatdesign.md](references/flatdesign.md).
  • Neumorphism: A stylized "extruded plastic" look. Best used sparingly for specific container elements. See [neumorphism.md](references/neumorphism.md).
  • Glassmorphism: A frosted glass effect using background blur and transparency. Adds depth and a premium feel. See [glassmorphism.md](references/glassmorphism.md).
  • Aurora UI Gradients: Organic, blurry, northern-lights-style backgrounds. Excellent for ornamentation and pairing with Glassmorphism. See [auroraui.md](references/auroraui.md).

General Design Principles

Regardless of the chosen style, always apply these fundamental practices:

  1. 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.
  2. Hierarchy through Depth: Use the "top-down lighting" model. Elements closer to the user should be lighter and/or have more prominent shadows/transparency.
  3. 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.
  4. Consistent Roundness: Choose a corner radius (e.g., 8px, 16px) and apply it consistently across all components to maintain visual unity.

References

  • [Soft UI Guidelines](references/soft_ui.md)
  • [Dark Mode Standards](references/dark_mode.md)
  • [Flat Design Principles](references/flat_design.md)
  • [Neumorphism Patterns](references/neumorphism.md)
  • [Glassmorphism Techniques](references/glassmorphism.md)
  • [Aurora UI Backgrounds](references/aurora_ui.md)