如何教 AI 智能体构建精致的界面

如果你曾让 Cursor 或 Claude Code 构建下拉菜单或模态框，你可能已经注意到一个奇怪的现象。代码能运行，按钮能点击，但整体看起来有点粗糙。元素弹入时延迟夸张，卡片边框用的是实线深色线条，而对于一个简单的 Toast 通知，模型却引入了一个五年前的废弃包。

语言模型在编写组件逻辑方面还不错，但它们没有审美感。它们从训练数据中随机选择参数。结果就是千篇一律的界面噪音。

Emil Kowalski 此前曾在 Vercel 和 Linear 负责动画和界面设计，他整理了 emilkowalski/skills 仓库。这是一套现成的 AI 智能体指令，用于教神经网络构建更精致的布局。

为什么智能体需要设计规则

有没有注意到 AI 在错误的时间为窗口出现添加动画？一个常见错误是对进入屏幕的元素应用缓动函数 ease-in。实际上，进入的元素应该快速启动然后逐渐减速（ease-out），否则界面会显得迟钝。

布局细节也是如此。神经网络经常在需要半透明 box-shadow 的地方使用实线边框，或者重复造轮子而不是使用成熟的库。

小错误累积起来。结果就是看起来廉价的 UI。Emil 的技能集让神经网络在交付最终代码之前先检查基本的设计工程规则。

安装使用 CLI 工具 skills：

npx skills@latest add emilkowalski/skills

启动后，你的神经网络智能体可以访问关于动效、比例和前端工具选择的知识库。

里面是一套按任务分类的 Markdown 格式指令。

指令 review-animations 和 improve-animations 让智能体执行严格的代码审查。模型会查找缺失的缓动函数、过长的延迟和粗糙的变换。智能体不是随机修复，而是创建逐步优化计划然后自行执行。

规则 find-animation-opportunities 帮助找到确实需要动画的地方，并明确禁止在只会干扰用户的地方添加动效。

为了帮助神经网络准确理解你需要什么样的微交互，animation-vocabulary 非常有用。它包含用于描述动画的精确术语。

单独的 apple-design 文件包含从过去 WWDC 大会改编的 Apple 界面原则。它们有助于重现那种响应式 UI 的感觉。

如果你让模型构建自定义 Toast 或下拉菜单，它要么写一百行脆弱的代码，要么安装一个长期无人维护的包。规则 pick-ui-library 强制 AI 只使用产品团队真正依赖的成熟解决方案。

对于快速实验，有 prototype。这个技能可以一次生成同一 UI 元素的多个变体，并在顶部添加切换按钮以便实时比较。

如果你每天使用 Cursor、Claude Code、Windsurf 或类似的 CLI 智能体做前端工作，这个仓库将节省大量手动 CSS 修复的时间。你不再需要手动将 ease-in 改为 cubic-bezier 并向模型解释为什么实线边框在深色模式下看起来很糟糕。