UI Design System Selector
Choose and implement a modern UI design style with tokens, components, and accessibility guidelines.
Installation
- Make sure Claude is on your device and in your terminal.
Skills load from
~/.claude/skills/when Claude Code starts up — so you need it on your machine first. If you don't have it yet, install it once with the command below, then runclaudein any terminal to verify.One-time setupnpm i -g @anthropic-ai/claude-codeAlready have it? Skip ahead.
- Paste into Claude Code or into your terminal.
This copies the whole skill folder into
~/.claude/skills/applying-ui-design-system-telagod/— the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.Faster alternative (instruction-only skills)
Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates — they won't be downloaded and the skill will fail when it tries to load them.
Quick install (SKILL.md only)Sign up to copy - Restart Claude Code.
Quit and reopen Claude Code (or any other agent that loads from
~/.claude/skills/). New skills are picked up on startup. - Just ask Claude.
Skills auto-activate when your request matches the skill's description — no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the “What this skill does” section above.
Prefer to read the source first? Open on GitHub.
When Claude uses it
Frontend UI design system selector and implementation guide covering Glassmorphism, Liquid Glass (Apple-style), Neubrutalism, and Claymorphism. Use when building UI components, choosing a visual aesthetic, implementing design tokens, or auditing accessibility/contrast on themed surfaces. Provides per-style tokens, component patterns, dark mode, and a11y constraints.
What this skill does
设计语言选型
不同设计语言不可混搭。先选语言,再按 reference 落地组件。
风格决策
| 想要的感觉 | 选 | 加载 |
|---|---|---|
| 半透明、磨砂、轻盈、纵深感弱 | Glassmorphism | references/glassmorphism.md |
| Apple 风格、立体玻璃、环境光响应、弹簧动效 | Liquid Glass | references/liquid-glass.md |
| 粗框硬影、高饱和、纯平、反精致 | Neubrutalism | references/neubrutalism.md |
| 软糯黏土、大圆角、双内影、温暖 | Claymorphism | references/claymorphism.md |
每个 reference 自包含「核心要素 + CSS Tokens + 关键约束 + 组件 + 暗色模式 + 无障碍」全套。
共享铁律(跨风格)
无论选哪种风格,下列约束全部适用:
- 对比度 — 主文字 ≥ 4.5:1,大字体(≥18pt 常规 / ≥14pt 粗体)≥ 3:1。逐底色验证,不靠白底脑补。
:focus-visible— 必须可见;轮廓与底色有足够反差。键盘可达性是底线。prefers-reduced-motion: reduce— 禁用弹簧、滑入、parallax 等装饰动画;保留功能性 transition。prefers-contrast: more— 减少透明、增强边界、平化阴影。- 暗色模式 — 用语义 token 切换(如
--bg-surface),不要硬编码#fff/#000后再交换。
落地流程
- 选风格 — 一个项目通常一种主风格;可有第二风格作辅助层(如主体 Liquid Glass + 强调按钮 Neubrutalism)
- 导入 tokens — 复制对应
tokens-<style>.css到项目,按需扩展 - 按 reference 抄组件 — Card / Button / Modal / Nav 速查已就位
- 验证对比度 + 焦点 + 减弱动效 — 跑 a11y 自检
- 暗色模式映射 — 每个 token 都要有暗色对应
何时不要本 skill
- 仅需 vanilla CSS / Tailwind 默认组件 → 不需要设计系统选型
- 已有完整 design system(如 Material、Ant Design)→ 沿用,不重新选风格
- 后端工作 / 数据可视化主导 → 走 designing-architectures
性能基线
- 同屏
backdrop-filter元素 ≤ 3(Glassmorphism / Liquid Glass 限制) - 滚动容器内避免 blur(触发逐帧重绘)
- 阴影层叠 ≤ 3 层(Claymorphism 多内影时尤其注意)
- 低端设备:用
@supports或@media (hover: none)降级为纯色
Related skills
Senior Frontend Engineer
alirezarezvani
Build and optimize React and Next.js applications with performance analysis and accessibility.
UI Design Guidelines Reviewer
vercel-labs
Review UI code for compliance with web interface best practices and accessibility standards.
WCAG Accessibility Audit
alirezarezvani
Scan code for accessibility violations and generate WCAG 2.2 compliance reports.
Accessibility Compliance
jamditis
Audit and build accessible web interfaces meeting WCAG standards for news and academic sites.