# Design Spells

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

- Skill: `kscz0000/design-spells` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/design-spells`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/design-spells/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/design-spells

---


# Design Spells 技能

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

## 上下文

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

## 使用时机

在以下情况触发此技能：

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

## 执行工作流

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

## 严格规则

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

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