mcpField
D
delight

delight

github.com/educlopez设计与 UI407564 次安装2 周前更新
代码仓库

关于 delight

delight 是 ui-craft 的界面润色子技能,供设计与开发工作使用。它按动效强度设置挑选文案、悬停、状态过渡或标志性细节,并直接修改代码。

主要功能

  1. 01通过具体文案增加趣味
  2. 02添加协调的悬停效果
  3. 03加入状态过渡与微动画
  4. 04按动效强度限制改动范围
  5. 05编辑代码并输出审查表

适用场景

  1. 01为界面确认提示补充具体信息
  2. 02为单个卡片设计悬停反馈
  3. 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 技能。

愉悦感来自具体,而非装饰。 目标是创造一两个让用户想截图的时刻——不要撒彩纸,不要弹跳,不要加表情符号。

候选方案,按安全性排序(从顶部开始):

  1. 文案的具体性 — 确认提示应说清楚具体内容(“已邀请 3 位成员——Alex、Sam、Jordan”,而不是“邀请已发送”)。空状态可以风趣,但不要尴尬(“这里还没有内容——添加你的第一个项目”优于“哎呀!这里好像空空如也 😅”)。
  2. 悬停编排 — 多属性悬停效果(变换 + 颜色 + 阴影)应在同一个共享时长和缓动曲线上同步变化。只用于一张卡片,不要用于每张卡片。
  3. 状态过渡 — 乐观 UI + 微小的成功微动画(绘制勾号描边、数字递增、更新后的行轻微缩放并平稳复位)。
  4. 一个标志性细节 — 与领域相关的自定义列表标记、单个区块中不对称的列偏移,或追踪真实内容的滚动进度(阅读进度、表单完成度)。

切勿添加:

  • 弹跳缓动(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