File contents name: frontend-design
description: 前端设计美学秘典。UI美学、组件模式、UX原则。当魔尊需要前端设计、UI/UX指导、组件设计时使用。
license: MIT
user-invocable: true
disable-model-invocation: false
🎨 前端设计美学秘典
知识主题
主题
文档
涵盖
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）
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1 --- 2 name: telagod-code-abyss-frontend-design 3 description: --- 4 --- 5 --- 6 name: frontend-design 7 description: 前端设计美学秘典。UI美学、组件模式、UX原则。当魔尊需要前端设计、UI/UX指导、组件设计时使用。 8 license: MIT 9 user-invocable: true 10 disable-model-invocation: false 11 --- 12 13 # 🎨 前端设计美学秘典 14 15 ## 知识主题 16 17 | 主题 | 文档 | 涵盖 | 18 |------|------|------| 19 | UI美学 | [ui-aesthetics.md](ui-aesthetics.md) | 色彩理论、排版系统、间距系统、视觉层次、设计令牌、暗色模式、阴影层级 | 20 | 组件模式 | [component-patterns.md](component-patterns.md) | 布局模板、响应式设计、交互模式、动画、表单设计、卡片组件、导航模式 | 21 | UX原则 | [ux-principles.md](ux-principles.md) | 可用性、无障碍、信息架构、用户流程、加载体验、反馈设计、移动端优先、性能感知 | 22 | 状态管理 | [state-management.md](state-management.md) | Redux、Zustand、Jotai、Recoil、Context API、性能优化 | 23 | 前端工程化 | [engineering.md](engineering.md) | 性能优化、Web Vitals、测试（Vitest/Playwright）、构建工具（Vite/Webpack） | 24 25 ## 设计风格系统 26 27 | 风格 | 文档 | 涵盖 | 28 |------|------|------| 29 | Claymorphism | [claymorphism/SKILL.md](claymorphism/SKILL.md) | 软陶风格、大圆角、双内阴影、偏移外阴影、暗色模式 | 30 | Glassmorphism | [glassmorphism/SKILL.md](glassmorphism/SKILL.md) | 毛玻璃风格、backdrop-filter、透明度、模糊层级 | 31 | Neubrutalism | [neubrutalism/SKILL.md](neubrutalism/SKILL.md) | 新粗野主义、粗边框、实色偏移阴影、高饱和色彩 | 32 | Liquid Glass | [liquid-glass/SKILL.md](liquid-glass/SKILL.md) | Apple 液态玻璃、半透明深度感知、弹簧动画、环境响应 | 33 34 ## 使用场景 35 36 - 设计系统建立 37 - 组件库开发 38 - UI/UX审查 39 - 无障碍改进 40 - 响应式布局 41 - 交互动画设计 42 - 设计风格选型（Claymorphism / Glassmorphism / Neubrutalism / Liquid Glass） 43 44 --- 45 > Converted and distributed by [TomeVault](https://tomevault.io/claim/telagod) — claim your Tome and manage your conversions. 46 <!-- tomevault:4.0:skill_md:2026-04-11 -->
commit 5d9b98fca8
Frequently asked questions How do I install the Telagod Code Abyss Frontend Design skill? Run npx skillmds@latest add tomevault-io/telagod-code-abyss-frontend-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Telagod Code Abyss Frontend Design skill do? --- It is listed under Web & Frontend on SkillMD.
Is Telagod Code Abyss Frontend Design safe to use? This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Telagod Code Abyss Frontend Design? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Telagod Code Abyss Frontend Design free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Telagod Code Abyss Frontend Design? tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io