Senior Designer Turns UI Animation Experience into Skills: AI Coding Tools Can Now Have Taste

📖 Glossary

AI Box (also known as Agent Computer / Agent PC), is a dedicated local hardware device that runs AI Agents. Pre-installed with an AI agent management system, plug-and-play, running 24/7. Users can remotely command AI to work via Discord, Slack, Telegram, WhatsApp, and more.

Abstract: Emil Kowalski, design engineer at Linear, has open-sourced three Skills that encode years of UI animation expertise into rules AI coding agents can follow. Codex, Claude Code, and Cursor can now apply professional design judgment—choosing the right easing, the right scale, the right timing—instead of generating technically correct but aesthetically poor UI code. Products like Kaihe AIBOX with OpenClaw support the same Skill system, letting local AI agents acquire professional domain knowledge the same way.

AI coding tools are great at writing code, but the interfaces they produce often feel... off. Not buggy—just lacking "taste."

On July 2, Emil Kowalski, design engineer at Linear, open-sourced a set of Skills for design engineers on GitHub, packaging his UI animation expertise into AI-readable rule files. Once installed, Codex, Claude Code, and Cursor automatically follow these design principles when generating UI code.

This isn't a niche need. Skills are climbing the ranks on skills.sh's agent skill directory, with more developers giving their AI coding tools a "taste upgrade."

Who Is Emil Kowalski, and Why Does His Experience Matter?

Emil Kowalski is a well-known design engineer who has worked at Vercel and Linear. If you've used Vercel's website or Linear's product interface, those smooth, natural interaction animations are largely his work.

He wrote a blog post called "7 Practical Animation Tips" sharing practical UI animation principles:

Button press feedback: Add scale(0.97) to the :active state of buttons, making the interface feel like it's "responding" to user actions.

Don't animate from scale(0): Scaling from zero makes elements appear out of nowhere. Starting from 0.9+ is more natural—like a deflated balloon still has shape.

Choose the right easing: Use ease-out for enter animations, not ease-in. Ease-out starts fast then slows down, giving users a feeling of responsiveness. Same 300ms duration, but ease-in looks slower.

Don't delay subsequent tooltips: The first tooltip should have a delay to prevent accidental activation, but subsequent tooltips should appear immediately with no animation, making the experience feel faster.

These details seem small, but they compound into the difference between "polished" and "amateur." The problem? AI coding tools don't know these things.

How design engineer Skills work

Three Skills, Three Problems Solved

Emil published three Skills in his github.com/emilkowalski/skills repository, installable via npx skills@latest add emilkowalski/skills:

animation-vocabulary: Solves the "I can't describe the animation I want" problem. You describe "that bouncy feeling," and the Skill translates it into the exact animation term—scale-in, fade-out, slide-up—so AI understands what you actually want.

emil-design-eng: Encodes Emil's UI polish, component design, and animation principles from Vercel and Linear into AI-executable rules. Things like "use ease-out for enter animations," "scale 0.97 for button press," "don't start from scale(0)"—AI applies these automatically when generating code.

Third Skill: The repository contains three Skill directories. The README emphasizes that these Skills are "a side-effect of domain expertise"—AI doesn't replace expertise, it amplifies what you can get out of it.

Why AI Coding Tools Need "Taste Installed"

Emil wrote something blunt in his README: "Agents don't have great taste."

What does this look like in practice? He gave examples:

AI often uses ease-in when it should use ease-out for enter animations. It uses solid borders when semi-transparent shadows would be better. These aren't code errors—they're design judgment errors. Each one is small, but together they're why an interface "doesn't feel right."

This mirrors the problem with AI-generated text: grammatically correct but "soulless," because AI doesn't know what "good" means. UI animations are the same—AI can write animation properties, but doesn't know which parameter combinations feel "natural and smooth."

The essence of Skills is fixing exactly this: codifying "what counts as good" into a standard AI can follow. Not teaching AI to design, but giving it a senior designer's working manual.

How Skills give AI coding tools design judgment

The Skill Ecosystem Is Exploding

Emil's design Skills are just one example. On skills.sh, the agent skill directory, hundreds of Skills already cover frontend design, code review, video editing, SEO analysis, scientific research, and more.

Vercel officially published React best practices Skills. Anthropic released frontend design Skills. Microsoft published Azure cloud development Skills. Mattpocock released TDD and code architecture improvement Skills. All of these codify domain expert experience into AI-executable rules.

This aligns with the Skill system in products like Kaihe AIBOX. It comes pre-installed with OpenClaw agent management, supporting SKILL.md files to define skills. Once a local agent loads a Skill, it gains the corresponding domain knowledge and workflows. Install a code review Skill, and the agent reviews code following a professional engineer's checklist. Install an SEO analysis Skill, and the agent follows an SEO expert's methodology.

The difference is the runtime environment: Codex and Claude Code run in the cloud, requiring constant connectivity and API billing. Kaihe AIBOX runs locally—agent scheduling happens on-device, with cloud API calls only when large model inference is needed. For long-running tasks like design reviews or code walkthroughs, local deployment means you're not watching your token usage.

How Regular Developers Can Use This

If you're a designer: Emil's Skills can be installed directly into your AI coding tool, making it generate UI code that follows professional design principles. No more correcting "use ease-out here" or "start from 0.9" every time.

If you're a developer: Browse skills.sh or GitHub for Skills matching your tech stack. React, Vue, Azure, TDD—there are ready-made ones. You can also follow Emil's approach and write your own expertise into a SKILL.md.

If you want your AI assistant to have more professional capabilities: Whether it's design review, code walkthrough, or content moderation, the Skill system can handle it. An AI box like Kaihe AIBOX lets you direct AI through WeChat voice messages—install the right Skill, and your AI works to professional standards without even opening a computer.

Emil wrote something worth remembering on GitHub: "AI doesn't replace such expertise, it amplifies what you can get out of it. So learn to code, design, or develop expertise in any other field. It's extremely valuable."

Skills don't make AI smarter—they let AI use human intelligence.

Senior Designer Turns UI Animation Experience into Skills: AI Coding Tools Can Now Have Taste