本期测试将emil-design-eng封装的UI规则交给Agent，实现不同任务中动画与交互细节的自动复用。默认版Codex已经具有完整交互，Skill审查后进一步补上了动画、键盘、浮层等细节。
让 Codex 做出一版像样的 UI 并不难，麻烦的是每次换一个新任务，很多设计要求又得重新写一遍。动画时长、按钮反馈、浮层展开、键盘交互，这些规则并不会因为页面换了就消失。
本期「Skill 安利实践」就测试一个具体问题：能不能把这套重复使用的 UI 规则交给 Skill，让 Agent 在不同任务中自动复用。
emil-design-eng 封装了一套设计工程规则
这次使用的是 Emil Kowalski 开源的 emil-design-eng。它主要覆盖动画，也包含一些通用交互规则。例如，按钮按下时缩放到 scale(0.97) 提供即时反馈；浮层进入时避免使用迟缓的 ease-in，优先采用 ease-out。
常规 UI 动画通常控制在 300ms 内，高频键盘操作则优先即时反馈。这些都是实际做 UI 时经常重复使用的规则。
安装后，emil-design-eng 位于当前项目的 .agents/skills/emil-design-eng/ 目录下。
图 1：emil-design-eng 项目级安装并成功识别。
Codex 默认版已经具有完整交互
我们先关闭其他 Skill，让 Codex 单独完成一个 AI Prompt Playground，作为后面的对照版本。第一轮不调用 emil-design-eng，只让 Codex 根据默认判断实现。
页面需要包含 Model Selector、Prompt 输入框、Generate、Output / JSON Tabs。所有功能只使用本地 Mock Data，不调用真实 API；页面必须可以实际交互。
图 2：00-default 完整页面。
Codex 默认版已经具有完整的双栏工作台，下拉菜单、模态框、通知、标签页、加载状态和主题切换都能正常使用，页面还加入了快捷键提示。
Skill 审查补上了交互细节
我们把 00-default 原样复制为 01-emil，再调用 emil-design-eng 做一次只读审查。这一轮主要观察 Skill 会建议调整哪些交互细节。
审查建议没有全部执行。比如 Skill 建议工具提示第一次悬停时加入延迟，连续查看相邻提示时则直接显示，但当前页面只有一个按钮，这条建议暂时没有应用价值。
图 3：应用 Skill 审查建议后的页面。
结论
Skill 的价值不在于替代设计系统，而在于把设计规范转化为可执行的规则，让 Agent 在不同任务中自动复用。对于需要保持一致交互体验的项目，这是一个值得探索的方向。
ID:435
