这是什么
把一套设计工程理念编码成规则:动画决策框架、弹性动效指南、组件原则、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.
它对设计意味着什么
- 高频操作干脆不加动画,命令面板始终即时响应。
- 入场从 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
-
克隆这个仓库。
git clone https://github.com/emilkowalski/skills -
把 Codex 指向这个 Skill 文件。
skills/emil-design-eng/SKILL.md -
然后描述你想要的界面,Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
让 Codex 审界面代码,它会给出「改前、改后、为什么」的表格。
-
做新动效时,它先答该不该动、为什么、用哪种缓动、多快。
-
它照清单检查,揪出 transition: all 和超过 300ms 的时长。
这里的每个插件都免费开源,并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗下一步
用 Open Design 做设计,省掉那些配置
你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。