AI编程能力出众，UI设计却糟糕透顶？这招让它学会你的审美
Claude Code 在编程方面已相当出色。
但你是否有这种体会：让它处理业务逻辑、执行脚本、构建架构，都能胜任。可一旦涉及制作动画、设计界面、优化细节——产出的效果总是不尽人意？
问题出在哪？
不在于功能实现，而在于"质感"。
动画显得生硬、交互响应缓慢、版面布局总觉得别扭却难以言明……这些并非程序错误，而是AI缺乏"设计审美"。
今日读到一篇文章，介绍了一种我所见过最巧妙的解决方案：将你的审美标准传授给它，而非任由其自行揣测。
作者是 emilkowal.ski[1]，一位从事设计工程（Design Engineering）的专业人士。
他的见解十分精准：
工程师的能力从未像如今这般被AI大幅增强。然而在处理视觉类任务时，AI根本不理解何为"优秀"。
他的方法很简单：将你掌握的知识转化为规则，输入给AI。
具体而言，他为界面的各个维度都建立了"技能文件"（Skill File），其中明确记录：
随后将这些文件提供给AI Agent。它依据规则执行，生成的效果便融入了他的审美风格。
这是令我印象最为深刻的一点。
他指出：几乎所有关于"审美"的决策，其背后都存在逻辑依据。
例如动画的缓动曲线（easing），许多人认为需要凭感觉把握。但他提供了一张决策图表，逻辑极为清晰：
动画曲线决策流程图：
将这张图提供给AI Agent，它便无需盲目猜测——只需遵循你的规则选择即可得到正确结果。
他归纳了制作动画时的常见问题及解决方案，每一条都源自实践经验：
按钮反应迟钝？ → 在 :active 状态添加 transform: scale(0.97)
元素出现过于突兀？ → 初始状态采用 scale(0.95) 而非 scale(0)——0如同凭空显现，0.95则像气球泄气，效果更自然
动画出现抖动？ → 添加 will-change: transform
悬停时产生闪烁？ → 对子元素而非父元素设置动画
Popover 缩放起始点不正确？ → 将 transform-origin 设为触发位置
小按钮点击范围过小？ → 设置最小点击区域为 44px（使用伪元素实现）
不仅是曲线，动画时长也有相应规则：
规则如下：
他还把排版规则一并纳入了技能文件：
65个字符是正文宽度的舒适上限——切勿占满整屏宽度，否则阅读时眼睛易疲劳。
数字列应采用 tabular-nums——如此一来价格、数字能够对齐，阅读起来更清爽。
省略号应使用 … 而非 ...——前者会随容器自适应截断，后者则固定于第三个点处截断。
大写标签需放宽字间距——字间距过密的大写字母会显得拥挤不堪。
链接应使用下划线，非链接内容则通过字重或颜色区分——如此下划线便始终代表"可点击"，避免用户误操作。
第一步：复盘你做过的设计决策，自问"为何如此处理"
此步骤至关重要。许多时候你觉得"这样美观"，却道不出缘由——强迫自己阐述清楚，规则便应运而生。
第二步：将规则整理成结构化文档
格式无关紧要，可采用 Markdown、表格或代码注释。核心在于将条件（Scenario）与方案（Solution）明确对应。
第三步：将文档提供给你的Coding Agent
以 Claude Code 为例，将你的技能文件作为上下文传递，它便会遵循你的规则进行操作。
作者本人在 Claude Code 中测试了一个对话框动画优化——Agent 为其生成了一份详尽的问题清单与改进前后对比表，全程无需他逐步指导。
该方法背后的洞见才是核心所在：
你的经验、审美、设计判断——这些要素实际上都可以被结构化。
你之所以胜过AI，并非因你拥有某种神秘的"直觉"，而是因为你见识过足够多的糟糕案例，懂得优秀之作为何优秀。
将这些"为什么"阐述清晰，你便拥有了可传承的知识资产。
你能打包的审美标准越丰富，从AI处获得的助力就越强大。
该文章在 HN 上获得了极高评分，表明这并非作者个人的困扰——而是所有使用 AI Coding Agent 开发产品者共同面临的难题。
多数人都在吐槽 AI 设计的 UI 丑陋、动画僵硬。
然而这些人未曾悟透一点：AI产出的成果，取决于你赋予它的规则。
你提供的规则含糊不清，产出便模糊不清；你给出的规则精准明确，结果便带有你的审美印记。
这并非AI的缺陷，而是你的问题——更准确地说，是你尚未将自己的审美标准清晰表达的问题。
阅毕此文，你是否曾为自己常用的 AI Agent 撰写过"审美指南"？
欢迎在评论区交流，你是如何应对这一挑战的？
若觉有用，请点击"在看"，这类让AI真正发挥效用的方法，下期将继续分享
[1] emilkowal.ski: https://emilkowal.ski/ui/agents-with-taste