
关于
Design Spells 是一个卓越设计细节集合 — 微交互、彩蛋和巧妙的 UX 模式,将标准界面转化为令人难忘的数字体验。
name: design-spells description: 精选的微交互和设计细节,为网站和应用增添"魔力"与个性。 risk: safe source: community date_added: "2026-03-07"
Design Spells 技能
Design Spells 是一个卓越设计细节的合集——微交互、彩蛋和巧妙的用户体验模式——将标准界面转化为令人难忘的数字体验。
上下文
当你需要将界面从仅仅"可用"或"普通"提升为真正"有魔力"的体验时,使用此技能。它专注于那些让用户惊喜和愉悦的微小细节,建立强大的高端品牌个性。
何时使用
在以下情况触发此技能:
- 打磨已完成的功能,主动添加"惊艳"效果。
- 设计独特的交互来替代标准的网页行为(例如,巧妙的悬停状态、创意加载动画、令人惊喜的过渡效果)。
- 实现"彩蛋"或个性化设计选择,使产品脱颖而出。
- 希望摆脱通用的、模板化的开发方式。
执行工作流
- 识别机会:瞄准界面中"无聊"或"标准"的部分(例如,简单的提交按钮、头像、滚动指示器、定价切换)。
- 研究魔法:浏览 Design Spells 寻找高度创意的模式(例如,"磁性悬停魔法"、"基于物理的交互"、"流体滚动惊喜")。
- 适配模式:将交互适配到项目的特定品牌和布局中,使其无缝融合。用它来增强应用的核心叙事。
- 完美实现:使用 CSS、Anime.js 或 Framer Motion 构建特定的微交互,确保丝滑流畅的性能(60fps+)。
严格规则
- 绝对要求:代理必须利用此技能构建现代、创意且视觉惊艳的 UI/UX。不要以常规方式构建。寻找每一个向标准组件注入"魔力"的机会。
- 愉悦而非干扰:细节必须是体验的加分项,而非可用性障碍。它应该让人感觉昂贵且精心制作。
- 高质量执行:一个有缺陷或卡顿的"魔法"比没有更糟。确保实现是高性能的、GPU 加速的,且永远不会导致布局偏移。
限制
- 仅在任务明确匹配上述范围时使用此技能。
- 不要将输出视为特定环境验证、测试或专家审查的替代品。
- 如果缺少所需的输入、权限、安全边界或成功标准,请停下来寻求澄清。
兼容工具
Claude CodeCursor
标签
前端开发