# Telagod Code Abyss Frontend Design > --- - Skill: `tomevault-io/telagod-code-abyss-frontend-design` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/telagod-code-abyss-frontend-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/telagod-code-abyss-frontend-design/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/telagod-code-abyss-frontend-design --- --- name: frontend-design description: 前端设计美学秘典。UI美学、组件模式、UX原则。当魔尊需要前端设计、UI/UX指导、组件设计时使用。 license: MIT user-invocable: true disable-model-invocation: false --- # 🎨 前端设计美学秘典 ## 知识主题 | 主题 | 文档 | 涵盖 | |------|------|------| | UI美学 | [ui-aesthetics.md](ui-aesthetics.md) | 色彩理论、排版系统、间距系统、视觉层次、设计令牌、暗色模式、阴影层级 | | 组件模式 | [component-patterns.md](component-patterns.md) | 布局模板、响应式设计、交互模式、动画、表单设计、卡片组件、导航模式 | | UX原则 | [ux-principles.md](ux-principles.md) | 可用性、无障碍、信息架构、用户流程、加载体验、反馈设计、移动端优先、性能感知 | | 状态管理 | [state-management.md](state-management.md) | Redux、Zustand、Jotai、Recoil、Context API、性能优化 | | 前端工程化 | [engineering.md](engineering.md) | 性能优化、Web Vitals、测试（Vitest/Playwright）、构建工具（Vite/Webpack） | ## 设计风格系统 | 风格 | 文档 | 涵盖 | |------|------|------| | Claymorphism | [claymorphism/SKILL.md](claymorphism/SKILL.md) | 软陶风格、大圆角、双内阴影、偏移外阴影、暗色模式 | | Glassmorphism | [glassmorphism/SKILL.md](glassmorphism/SKILL.md) | 毛玻璃风格、backdrop-filter、透明度、模糊层级 | | Neubrutalism | [neubrutalism/SKILL.md](neubrutalism/SKILL.md) | 新粗野主义、粗边框、实色偏移阴影、高饱和色彩 | | Liquid Glass | [liquid-glass/SKILL.md](liquid-glass/SKILL.md) | Apple 液态玻璃、半透明深度感知、弹簧动画、环境响应 | ## 使用场景 - 设计系统建立 - 组件库开发 - UI/UX审查 - 无障碍改进 - 响应式布局 - 交互动画设计 - 设计风格选型（Claymorphism / Glassmorphism / Neubrutalism / Liquid Glass） --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/telagod) — claim your Tome and manage your conversions.