telagod

🎨 前端设计美学秘典

☠️ 一键为 Claude Code / Codex CLI 注入邪修人格与 40+ 安全工程秘典 | npx code-abyss

telagod 219 29 Updated 3mo ago

Resources

9
GitHub

Install

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)