From code-abyss
Selects and implements UI design styles (Glassmorphism, Liquid Glass, Neubrutalism, Claymorphism) with tokens, components, dark mode, and a11y rules. Use when building frontend UI components or choosing a visual aesthetic.
How this skill is triggered — by the user, by Claude, or both
Slash command
/code-abyss:applying-ui-design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> 不同设计语言不可混搭。先选语言,再按 reference 落地组件。
不同设计语言不可混搭。先选语言,再按 reference 落地组件。
| 想要的感觉 | 选 | 加载 |
|---|---|---|
| 半透明、磨砂、轻盈、纵深感弱 | Glassmorphism | references/glassmorphism.md |
| Apple 风格、立体玻璃、环境光响应、弹簧动效 | Liquid Glass | references/liquid-glass.md |
| 粗框硬影、高饱和、纯平、反精致 | Neubrutalism | references/neubrutalism.md |
| 软糯黏土、大圆角、双内影、温暖 | Claymorphism | references/claymorphism.md |
每个 reference 自包含「核心要素 + CSS Tokens + 关键约束 + 组件 + 暗色模式 + 无障碍」全套。
无论选哪种风格,下列约束全部适用:
:focus-visible — 必须可见;轮廓与底色有足够反差。键盘可达性是底线。prefers-reduced-motion: reduce — 禁用弹簧、滑入、parallax 等装饰动画;保留功能性 transition。prefers-contrast: more — 减少透明、增强边界、平化阴影。--bg-surface),不要硬编码 #fff/#000 后再交换。tokens-<style>.css 到项目,按需扩展backdrop-filter 元素 ≤ 3(Glassmorphism / Liquid Glass 限制)@supports 或 @media (hover: none) 降级为纯色npx claudepluginhub telagod/code-abyss --plugin code-abyssProvides hand-built design language references (Swiss, editorial, neo-brutalism, etc.) with token systems and anti-slop rules. Use when building or restyling any frontend to produce distinctive, non-generic UI.
Generates distinctive, production-grade frontend code for web components, pages, and apps with bold, creative UX designs in styles like brutalist or retro-futuristic, avoiding generic AI aesthetics.
Generates distinctive production-grade frontend UIs for web components, pages, and apps with bold creative designs avoiding generic AI aesthetics.