让 Codex 做出一版像样的 UI 并不难，麻烦的是每次换一个新任务，很多设计要求又得重新写一遍。

emil-design-eng 封装了一套设计工程规则

npx skills add https://github.com/emilkowalski/skills --skill "emil-design-eng"

Codex 默认版已经具备完整交互

请在当前项目的 00-default 目录中，创建一个可以直接在本地运行的 AI Prompt Playground 单页前端。

页面需要包含 Model Selector、Prompt 输入框、Generate、Output / JSON Tabs、Copy、Tooltip、Toast、Settings Modal、Loading，以及 Light / Dark Mode。

所有功能只使用本地 Mock Data，不调用真实 API；页面必须可以实际交互。根据你自己的默认设计判断完成 UI 和交互，不调用任何第三方自定义 Skill，也不参考额外设计规范。

Skill 审查补上了交互细节

基于刚才的 emil-design-eng Review，请进入第一轮优化。

本轮只修改 01-emil，不得修改 00-default。

只处理 5 项：明确 Transition 属性与 Easing、统一 Press Feedback、改善 Settings Modal 退场、改善 Empty → Loading → Result 状态切换，以及让 Output / JSON Tabs 对鼠标和键盘采用不同的动画策略。

不新增产品功能，不重新设计页面，也不要为了执行 Skill 而增加当前页面并不存在的使用场景。

第一轮优化集中在动效时序

人工测试发现了状态回归

.result-area > [hidden] {
  display: none;
}

Skill 从零生成了另一套界面

这套 Skill 省下了重复解释规则的成本

附录： emilkowalski/skills 里还有哪些 Skill？

• animate：从零设计一段动画，帮助选择合适的缓动曲线、时长和动画属性。
• review-animations：按照 Emil 的动效规则审查已有动画实现。
• improve-animations：扫描代码中的动画问题，并整理成可执行的优化方案。
• find-animation-opportunities：寻找真正值得加入动效的位置，同时指出哪些地方不应该加动画。
• animation-vocabulary：补充动画相关术语，方便更准确地告诉 Agent 想要什么效果。
• apple-design：将 Apple 在 WWDC 中介绍的界面设计与流畅动效原则整理成适用于 Web 的规则。
• pick-ui-library：根据任务选择合适的 UI 库，减少 Agent 自己重复造组件。
• prototype：针对一个 UI 需求生成多个不同方案，并通过切换器快速比较。
• ask-sonner：围绕 Emil 的 Toast 库 Sonner，提供安装、样式、使用方案和常见问题处理。