关于 delight
delight 是 ui-craft 的界面润色子技能,供设计与开发工作使用。它按动效强度设置挑选文案、悬停、状态过渡或标志性细节,并直接修改代码。
主要功能
- 01通过具体文案增加趣味
- 02添加协调的悬停效果
- 03加入状态过渡与微动画
- 04按动效强度限制改动范围
- 05编辑代码并输出审查表
适用场景
- 01为界面确认提示补充具体信息
- 02为单个卡片设计悬停反馈
- 03为更新后的状态加入轻微动画
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ educlopez/ ui-craft --skill delight安装后在 Claude Code 中输入/delight确认已加载。
详细介绍
背景: 此子技能是更广泛的 ui-craft 技能中的一个视角。如果也安装了 ui-craft 技能,请先阅读其 SKILL.md,了解发现 + 反模式 + 工艺测试,然后再应用以下特定视角。
为 $ARGUMENTS 中的 UI 增添愉悦感。加载 ui-craft 技能。
愉悦感来自具体,而非装饰。 目标是创造一两个让用户想截图的时刻——不要撒彩纸,不要弹跳,不要加表情符号。
候选方案,按安全性排序(从顶部开始):
- 文案的具体性 — 确认提示应说清楚具体内容(“已邀请 3 位成员——Alex、Sam、Jordan”,而不是“邀请已发送”)。空状态可以风趣,但不要尴尬(“这里还没有内容——添加你的第一个项目”优于“哎呀!这里好像空空如也 😅”)。
- 悬停编排 — 多属性悬停效果(变换 + 颜色 + 阴影)应在同一个共享时长和缓动曲线上同步变化。只用于一张卡片,不要用于每张卡片。
- 状态过渡 — 乐观 UI + 微小的成功微动画(绘制勾号描边、数字递增、更新后的行轻微缩放并平稳复位)。
- 一个标志性细节 — 与领域相关的自定义列表标记、单个区块中不对称的列偏移,或追踪真实内容的滚动进度(阅读进度、表单完成度)。
切勿添加:
- 弹跳缓动(
cubic-bezier(0.68, -0.55, 0.27, 1.55))——这在反模式中已被标记。 - 为日常操作添加彩纸效果(保存文件、更新字段)。
- 疯狂使用表情符号,或使用全大写的“🎉 SUCCESS!”。
- 为无需等待的元素添加闲置浮动、弹跳或闪烁效果。
旋钮门控(MOTION_INTENSITY):
≤ 3→ 仅通过文案增添愉悦感。不添加动画效果。仅使用候选方案 1。4-7→ 文案 + 悬停 + 状态过渡(候选方案 1-3)。8+→ 使用全部四项,包括标志性细节。
需阅读的参考资料:references/motion.md(决策阶梯 + 交互规则)、references/copy.md(微文案语气)、../examples/animation-storyboard.md(涉及多阶段动画时)。
输出:直接编辑代码。打印评审格式表格。说明你选择不添加的每个候选方案及其原因。
下一步: /finalize——愉悦效果是最后一个增量修改步骤;发布前请先通过门控(第 3 阶)。
评论
支持 Markdown