How to Teach AI Agents to Build Polished Interfaces

If you've asked Cursor or Claude Code to build a dropdown menu or modal, you've probably noticed something strange. The code works, the button clicks, but everything looks a bit clunky. Elements pop in with an absurd delay, card borders are drawn with solid dark lines, and for a simple toast notification, the model pulls in an abandoned package from five years ago.

Language models are decent at writing component logic, but they have no aesthetic sense. They pick whatever parameters come first from their training data. The result is generic interface noise.

Emil Kowalski, who previously led animations and interfaces at Vercel and Linear, assembled the emilkowalski/skills repository. It's a set of ready-made instructions for AI agents that teach neural networks to build more polished layouts.

Why agents need design rules

Ever noticed AI animating window appearances at the wrong times? A common mistake is applying the easing function ease-in for elements entering the screen. In reality, incoming elements should start fast and slow down at the end (ease-out), otherwise the interface feels sluggish.

The same goes for layout details. Neural networks often use a solid border where a semi-transparent box-shadow is needed, or reinvent solutions instead of using proven libraries.

Small mistakes add up. The result is a UI that looks cheap. Emil's skill set makes the neural network check basic design engineering rules before handing you the finished code.

How to install the instructions

Installation uses the CLI utility skills:

npx skills@latest add emilkowalski/skills

After launching, your neural network agent gains access to a knowledge base about motion, proportions, and frontend tool selection.

What's inside the repository

Inside is a set of Markdown-formatted instructions broken down by task.

Verifying and improving motion

Instructions review-animations and improve-animations make the agent perform a strict code audit. The model looks for missed easing functions, overly long delays, and sloppy transforms. Instead of random fixes, the agent creates a step-by-step optimization plan that it then executes itself.

Rule find-animation-opportunities helps find places where animation is actually necessary and explicitly forbids adding motion where it would only get in the user's way.

Apple dictionary and guidelines

To help the neural network understand exactly what kind of micro-interaction you need, animation-vocabulary comes in handy. It contains precise terms for describing animations.

A separate file apple-design contains web-adapted Apple interface principles from past WWDC conferences. They help recreate that responsive UI feel.

Library selection and prototyping

If you ask a model to build a custom toast or dropdown, it either writes a hundred lines of fragile code or installs a long-unsupported package. Rule pick-ui-library forces the AI to use only proven solutions that product teams actually rely on.

For quick experiments, there's prototype. This skill generates several variants of the same UI element at once and adds a toggle on top so you can compare them live.

Who this is for

If you use Cursor, Claude Code, Windsurf, or similar CLI agents for frontend work daily, this repository will save a ton of time on manual CSS fixes. You'll no longer have to manually change ease-in to cubic-bezier and explain to the model why a solid border looks bad on dark mode.