🎨 前端设计美学秘典
☠️ 一键为 Claude Code / Codex CLI 注入邪修人格与 40+ 安全工程秘典 | npx code-abyss
Resources
9Install
npx skillscat add telagod/code-abyss/skills-domains-frontend-design Install via the SkillsCat registry.
SKILL.md
🎨 前端设计美学秘典
知识主题
| 主题 | 文档 | 涵盖 |
|---|---|---|
| UI美学 | ui-aesthetics.md | 色彩理论、排版系统、间距系统、视觉层次、设计令牌、暗色模式、阴影层级 |
| 组件模式 | component-patterns.md | 布局模板、响应式设计、交互模式、动画、表单设计、卡片组件、导航模式 |
| UX原则 | ux-principles.md | 可用性、无障碍、信息架构、用户流程、加载体验、反馈设计、移动端优先、性能感知 |
| 状态管理 | state-management.md | Redux、Zustand、Jotai、Recoil、Context API、性能优化 |
| 前端工程化 | engineering.md | 性能优化、Web Vitals、测试（Vitest/Playwright）、构建工具（Vite/Webpack） |
设计风格系统
| 风格 | 文档 | 涵盖 |
|---|---|---|
| Claymorphism | claymorphism/SKILL.md | 软陶风格、大圆角、双内阴影、偏移外阴影、暗色模式 |
| Glassmorphism | glassmorphism/SKILL.md | 毛玻璃风格、backdrop-filter、透明度、模糊层级 |
| Neubrutalism | neubrutalism/SKILL.md | 新粗野主义、粗边框、实色偏移阴影、高饱和色彩 |
| Liquid Glass | liquid-glass/SKILL.md | Apple 液态玻璃、半透明深度感知、弹簧动画、环境响应 |
使用场景
- 设计系统建立
- 组件库开发
- UI/UX审查
- 无障碍改进
- 响应式布局
- 交互动画设计
- 设计风格选型（Claymorphism / Glassmorphism / Neubrutalism / Liquid Glass）
Categories
Install
npx skillscat add telagod/code-abyss/skills-domains-frontend-design Install via the SkillsCat registry.