skills.rest
zhu637882-stack
zhu637882-stackCOMMUNITY
Explore all skills by this author →
GitHub

glassmorphism-ui

Define glassmorphism design tokens and components for finance mobile apps.

1|Updated Apr 6, 2026
Search Tags:#glassmorphism#ui-design#design-system#mobile-app#glass-card#blur#financial-ui
One-click install
npx skills add https://github.com/zhu637882-stack/jiaoyi --skill glassmorphism-ui-zhu637882-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: glassmorphism-ui
Source: https://github.com/zhu637882-stack/jiaoyi/tree/main/qoder-config-backup/skills/glassmorphism-ui
Command: npx skills add https://github.com/zhu637882-stack/jiaoyi --skill glassmorphism-ui-zhu637882-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve? 毛玻璃浅色主题 UI design system for international finance mobile apps provides consistent visuals, reduces design drift, and accelerates product development.

## Core Features & Use Cases

  • Color system, typography, spacing tokens, and semantic UI components aligned with Revolut/Wise style.
  • Glass UI components: glass-card, glass-panel, glass-navbar, glass-tabbar for dashboards, lists, and forms in finance apps.
  • Use cases include asset overview dashboards, transaction feeds, and investment product cards.

### Quick Start Apply the glassmorphism UI system to your mobile finance app by adopting the tokens, components, and layouts described here.

Frequently Asked Questions about glassmorphism-ui

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

FAQPage Schema
How do I create a glassmorphism UI design system for a finance mobile app?▼

To create a glassmorphism UI design system for a finance mobile app, apply predefined color systems, typography scales, and spacing tokens alongside semantic UI components like glass-cards and glass-navbars for consistent dashboards and forms.

What components are needed for a glass card interface in financial mobile apps?▼

A glass card interface for financial mobile apps requires glass-card, glass-panel, glass-navbar, and glass-tabbar components, which are applied to asset overview dashboards, transaction feeds, and investment product cards.

Can I use this glassmorphism design system for both iOS and Android finance apps?▼

Yes, this glassmorphism design system applies to both iOS and Android finance apps, providing a cohesive light theme UI with defined design tokens and component patterns that teams implement in CSS or TypeScript.

How do I implement design tokens for a glass UI in CSS or TypeScript?▼

You implement design tokens for a glass UI in CSS or TypeScript by adopting the defined color system, typography scales, and spacing rules from the design system, ensuring visual consistency and reducing design drift across your finance app.

Does this glassmorphism UI system include accessibility considerations for finance dashboards?▼

Yes, the glassmorphism UI system includes accessibility considerations for finance dashboards, ensuring that the blurred glass components, light theme colors, and typography scales remain usable and readable for all users.

What is the best way to style a Revolut or Wise style mobile banking interface?▼

The best way to style a Revolut or Wise style mobile banking interface is to apply a cohesive glassmorphism UI design system, utilizing semantic UI components, light theme color tokens, and specific layout patterns for financial dashboards and lists.

Related Skills

Explore More Design & Creative Skills→
nickstradnickstrad

tailwind-design-system

Build scalable design systems with Tailwind CSS and design tokens.

Community
Intermediate
telagodtelagod
238

liquid-glass

Standardize translucent UI visuals with reusable liquid glass design tokens and patterns.

Community
Intermediate
noobmastercnnoobmastercn

apple-hig-designer

Design iOS and macOS interfaces with Apple HIG tokens and patterns.

Community
Advanced
baasith6baasith6

using-ui-stack

Enforce design system rules for UI component generation.

Community
Intermediate