디자이너와 엔지니어들이 더 나은 사용자 인터페이스를 구축할 수 있도록 돕기 위해서입니다.

애니메이션이나 디자인 전반에 대해 올바른 선택을 했는지 아는 것은 어렵습니다. 이 기술들은 올바른 결정을 더 빠르게 내릴 수 있도록 돕는 것을 목표로 합니다.

이 평가들은 Vercel과 Linear 같은 회사에서 다년간 근무한 경험을 바탕으로 합니다.

여기 있는 모든 기술은 도메인 전문성의 부수적인 결과입니다. AI는 그런 전문성을 대체하지 않고, 얻을 수 있는 것을 증폭시켜 다른 사람들보다 훨씬 더 나아지게 만듭니다.

그러니 코딩, 설계, 혹은 다른 분야에서 전문성을 쌓으세요. 정말 소중합니다.

여기에서 제 기술을 최신 상태로 받아보실 수 있습니다:

뉴스레터 구독하기

설치

왜 그걸 쓰는 거야?

에이전트들은 취향이 좋지 않아요

에이전트들이 애니메이션에 맞는 재료를 선택하지 않는 경우를 여러 번 봤습니다. 엔터 애니메이션을 ease-out로 해야 할 때 ease-in로 이완 처리하는 경우가 있습니다(이유는 다음과 같습니다). 또는 UI에서 반투명 그림자 대신 단단한 테두리를 선택하는 경우도 있습니다.

이 모든 작은 요소들이 쌓여서 당신의 인터페이스를 훌륭하게 만들거나, 아니면 그냥… 별로 좋지 않게 만듭니다.

Skills For Designers and Engineers

For designers and engineers to help them build better user interfaces.

Knowing whether you made a right choice when it comes to animations, or design in general, is hard. These skills aim to help you get to those right decisions faster.

They are based on my years of experience working at companies like Vercel and Linear.

All the skills here are a side-effect of domain-expertise. AI doesn’t replace such expertise, it amplifies what you can get out of it and makes you way better relative to others.

So learn to code, design, or develop expertise in any other field. It’s extremely valuable.

You can stay up to date with my skills here:

Sign Up To The Newsletter

Install

npx skills@latest add emilkowalski/skills

Why use it?

Agents don’t have great taste

I have seen plenty of times that agents don’t pick the right ingredients for an animation. An ease-in easing for an enter animation when it’s supposed to be ease-out (here’s why). Or they choose a solid border instead of a semi-transparent shadow for your UIs.

All these small things compound and make your interface either amazing, or just… not that great.

As explained in Agents with Taste, these skills list all the little mistakes agents can potentially make and explain how to fix them.

This is your shortcut to great interfaces. A shortcut to stand out in a sea of slop.

Reference

• emil-design-eng — The main skill that consists of mostly animation, but also some design advice.
• animate — Builds an animation from scratch while choosing the correct curve, duration, properties, and so on.
• animate-expo — The same bar, for React Native and Expo: gestures, sheets, haptics, screen transitions, and keeping motion off the JS thread.
• review-animations — Review your animations in a strict way, based on my rules.
• improve-animations — Audit all the animations in your codebase and get prioritized, self-contained plans that any agent can execute.
• find-animation-opportunities — Search your UI for places that would genuinely benefit from motion, while also telling you what not to animate.