Design Spells

精选的微交互和设计细节,为网站和应用增添"魔力"和个性。当用户要求"设计魔法"、"微交互"、"创意细节"、"提升UI体验"时使用。

kscz0000 Updated

File contents

Design Spells 技能

Design Spells 是一个收录卓越设计细节的集合——微交互、彩蛋和巧妙的 UX 模式——将标准界面转化为令人难忘的数字体验。

上下文

使用此技能专门将 UI 从单纯的"功能性"或"普通"提升为真正"神奇"的体验。它专注于那些让用户惊喜和愉悦的细微细节,建立强大、高端的品牌个性。

使用时机

在以下情况触发此技能:

  • 打磨已完成的功能,主动添加"惊艳"效果。
  • 设计独特的交互来替代标准网页行为(例如:巧妙的悬停状态、创意加载器、惊喜过渡)。
  • 实现"彩蛋"或个性驱动的设计选择,使产品脱颖而出。
  • 希望摆脱通用的、模板驱动的开发方式。

执行工作流

  1. 识别机会:定位界面中"无聊"或"标准"的部分(例如:简单的提交按钮、头像、滚动指示器、定价切换器)。
  2. 研究魔法:浏览 Design Spells 寻找高度创意的模式(例如:"磁性悬停魔法"、"基于物理的交互"、"流畅滚动惊喜")。
  3. 适配模式:调整交互以无缝契合项目的特定品牌和布局。用它来增强应用的核心叙事。
  4. 完美实现:使用 CSS、Anime.js 或 Framer Motion 构建特定的微交互,确保丝滑流畅的性能(60fps+)。

严格规则

  • 绝对要求:智能体必须使用此技能来构建现代、创意和视觉惊艳的 UI/UX。不要用普通的方式和风格构建。寻找每一个机会为标准组件注入"魔法"。
  • 愉悦而非干扰:细节必须为体验增值,而不是可用性障碍。它应该感觉昂贵且精心打造。
  • 高质量执行:一个损坏或卡顿的"魔法"比没有更糟。确保实现是高性能的、GPU 加速的,并且绝不会导致布局偏移。

限制

  • 仅当任务明确符合上述描述范围时使用此技能。
  • 不要将输出作为环境特定验证、测试或专家审查的替代品。
  • 如果缺少所需的输入、权限、安全边界或成功标准,请停止并请求澄清。

kscz0000/antigravity-awesome-skills-CN/tree/main/反重力 - 超强技能 - 中文/skills/前端UI/设计系统/design-spells commit 1ca275f16d

Frequently asked questions

npx skillmds@latest add kscz0000/design-spells