前端与 UI

emil-design-eng

Emil Kowalski 关于动画时长、缓动和组件打磨的一套规则。

这是什么

把一套设计工程理念编码成规则:动画决策框架、弹性动效指南、组件原则、clip-path 技法、手势处理、性能规则和一份评审清单。

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
来自上游 SKILL.md

它对设计意味着什么

  • 高频操作干脆不加动画,命令面板始终即时响应。
  • 入场从 scale(0.95) 起,绝不从 scale(0) 冒出来,元素不会凭空出现。
  • 弹出层从触发点而不是自身中心放大,保住空间关联。

包含哪些内容

  • The animation decision framework
  • Spring animations
  • Component building principles
  • clip-path for animation
  • Performance rules
  • Review checklist

如何安装

emil-design-eng

  1. 克隆这个仓库。

    git clone https://github.com/emilkowalski/skills
  2. 把 Codex 指向这个 Skill 文件。

    skills/emil-design-eng/SKILL.md
  3. 然后描述你想要的界面,Codex 会照着这个 Skill 来做。

如何配合 Codex 使用

  1. 让 Codex 审界面代码,它会给出「改前、改后、为什么」的表格。

  2. 做新动效时,它先答该不该动、为什么、用哪种缓动、多快。

  3. 它照清单检查,揪出 transition: all 和超过 300ms 的时长。

这里的每个插件都免费开源,并附上真实的上游源地址。

在 codex-design 清单上了解更多 ↗

下一步

用 Open Design 做设计,省掉那些配置

你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。