Emil Kowalski turned design taste into executable rules for AI agents—animation scales from 0.95 not 0, easing follows flowcharts, UI stays under 300ms—packaged as Claude Code skill files via `npx skills add emilkowalski/skill`.
Deep dive
- AI coding agents excel at engineering but struggle with visual polish: animation timing, easing, typography, and overall "feel" of interfaces
- Solution: encode design taste into skill files with explicit rules agents can follow, rather than letting them guess at aesthetic decisions
- Core insight: good design decisions are usually explainable logic, not subjective magic, so they can be documented and transferred
- Animation from scale(0.95) feels natural because it resembles real objects (like deflated balloons) that never fully disappear, while scale(0) feels like appearing from nowhere
- Easing decision flowchart: viewport entry/exit uses ease-out, on-screen movement uses ease-in-out, hover uses ease, constant motion uses linear
- Duration guidelines: micro-interactions 100-150ms, standard UI 150-250ms, modals 200-300ms; keep UI under 300ms total, larger elements slower, exits 20% faster
- Typography rules: 65ch line length max, tabular-nums for aligned columns, … character not ..., loose uppercase letter-spacing, fallback fonts matching primary metrics
- Practical tips: scale(0.97) on button :active for responsiveness, will-change: transform fixes jitter, animate children not parents to avoid flicker, transform-origin determines scale anchor point
- Treats agents like junior designers by providing reasoning and rules rather than just preferences or examples
- Emil Kowalski released his skill via
npx skills add emilkowalski/skillcovering animation, component design, and principles from projects like Sonner toast library - Shows before/after example using Claude Code to improve dialog animation by applying documented rules from skill file
- Technique applies beyond animation to any design domain where taste can be articulated: layout, color theory, iconography, component patterns
- Points toward future where design knowledge transfers to AI through structured documentation rather than iterative trial and error
Decoder
- Skill files: Instruction documents for AI coding assistants like Claude Code that define rules, patterns, and decision logic the AI should follow, allowing developers to encode design expertise into reusable knowledge that agents can apply
Original article
AI coding agents are highly effective for engineering tasks but still struggle with visual details like animation, motion, typography, and overall “feel.” One approach to improving results is creating structured “skill files” that encode design taste and rules — such as preferred easing curves, animation durations, scaling behavior, typography guidelines, or layout principles — so agents can follow consistent design logic instead of guessing. The idea is that strong visual decisions are usually explainable rather than purely subjective, and by clearly documenting the reasoning behind those decisions, developers can transfer their design knowledge and aesthetic standards into AI-assisted workflows to produce far more polished interfaces.
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi