---

name: design-spells description: 精选的微交互和设计细节，为网站和应用增添"魔力"与个性。 risk: safe source: community date_added: "2026-03-07"

Design Spells 技能

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

上下文

当你需要将界面从仅仅"可用"或"普通"提升为真正"有魔力"的体验时，使用此技能。它专注于那些让用户惊喜和愉悦的微小细节，建立强大的高端品牌个性。

何时使用

在以下情况触发此技能：

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

执行工作流

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

严格规则

• 绝对要求：代理必须利用此技能构建现代、创意且视觉惊艳的 UI/UX。不要以常规方式构建。寻找每一个向标准组件注入"魔力"的机会。
• 愉悦而非干扰：细节必须是体验的加分项，而非可用性障碍。它应该让人感觉昂贵且精心制作。
• 高质量执行：一个有缺陷或卡顿的"魔法"比没有更糟。确保实现是高性能的、GPU 加速的，且永远不会导致布局偏移。

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为特定环境验证、测试或专家审查的替代品。
• 如果缺少所需的输入、权限、安全边界或成功标准，请停下来寻求澄清。