Applying Ui Design System

This is a frontend design system selector that gives you four distinct UI aesthetics with complete implementation guides: Glassmorphism (frosted, translucent), Liquid Glass (Apple-style with environmental lighting), Neubrutalism (thick borders, flat shadows, high saturation), and Claymorphism (soft clay with rounded corners). Each style includes CSS tokens, component patterns, dark mode mappings, and accessibility constraints. The guide enforces contrast ratios across all styles, includes focus-visible states, and respects reduced motion preferences. It's built for when you're starting a new project and need to pick a cohesive visual language rather than mixing aesthetics randomly. The Chinese headers in the source are a quirk, but the technical content is solid and the performance warnings about backdrop-filter limits are worth heeding.

GitHub stars: 224
last updated: Jun 10, 2026

View on GitHub

Install

$ npx -y skills add telagod/code-abyss --skill applying-ui-design-system --agent claude-code

Installs into .claude/skills of the current project.

Files

设计语言选型

判断先于执行：决定「是否做 / 选什么 / 如何取舍」（栈、方案、架构、权衡）前，先读领域判断内核 skills/_kernel/frontend/SKILL.md——它管 judgment，本秘典管 execution；冲突时以内核判断为准。

不同设计语言不可混搭。先选语言，再按 reference 落地组件。

风格决策

想要的感觉	选	加载
半透明、磨砂、轻盈、纵深感弱	Glassmorphism	references/glassmorphism.md
Apple 风格、立体玻璃、环境光响应、弹簧动效	Liquid Glass	references/liquid-glass.md
粗框硬影、高饱和、纯平、反精致	Neubrutalism	references/neubrutalism.md
软糯黏土、大圆角、双内影、温暖	Claymorphism	references/claymorphism.md