Emil Kowalski's Design Engineering Philosophy: A Complete Guide to Building Polished Interfaces

Emil Kowalski's design engineering philosophy centers on cultivating trained visual taste, compounding invisible details, and applying a rigorous animation decision framework to create interfaces that feel intuitively right.

The emilkowalski/skills repository captures this philosophy in the emil-design-eng skill, treating exceptional UI not as innate talent but as a learnable discipline built on obsessive attention to micro-interactions. According to the source code in skills/emil-design-eng/SKILL.md, this approach provides concrete rules for easing, performance, and accessibility that separate good interfaces from great ones.

Core Tenets of the Philosophy

The philosophy rests on three foundational beliefs that guide every design decision.

Taste Is Trained, Not Innate

Good UI taste is not something you are born with; it is a learned instinct developed through studying great work and relentless practice. As documented in skills/emil-design-eng/SKILL.md, designers must question why certain interfaces feel right and actively train their visual intuition through continuous exposure to high-quality examples.

Unseen Details Compound

The tiny, often-unnoticed details—such as subtle easing curves and precise transform origins—accumulate to create an interface that feels correct without the user being able to name why. This principle of compounding invisible details appears throughout the skill documentation, emphasizing that polish emerges from micromanagement of transitions and timings.

Beauty Is Leverage

A well-designed UI with good defaults and smooth animations differentiates a product far more than raw functionality alone. According to the source, beauty serves as a competitive advantage, making the "Beauty is leverage" principle a strategic consideration rather than mere aesthetic preference.

The Animation Decision Framework

Before writing any animation code, the framework requires answering four critical questions to ensure every motion serves a purpose.

The Four Critical Questions

As implemented in skills/emil-design-eng/SKILL.md, developers must resolve:

1. Should it animate at all? Determine based on interaction frequency.
2. What is the purpose? Identify if it indicates state, provides feedback, or guides attention.
3. What easing should it use? Match easing to interaction type (enter/exit versus hover).
4. How fast should it be? Keep typical UI durations under 300ms to maintain responsiveness.

Frequency-Based Decision Matrix

The source provides a concrete table for deciding animation presence based on user interaction frequency:

| Frequency                                   | Decision                     |
|--------------------------------------------|------------------------------|
| 100+ times/day (keyboard shortcuts)        | No animation. Ever.          |
| Tens of times/day (hover, navigation)      | Reduce or remove animation   |
| Occasional (modals, drawers)               | Standard UI animation        |
| Rare/first-time (onboarding, celebration)  | Add delight                  |

This matrix ensures that frequently-triggered interactions remain snappy while rare events can carry more visual weight.

Technical Implementation Rules

The philosophy includes strict technical constraints to ensure animations enhance rather than degrade the user experience.

Never Use Ease-In for UI

The skills/emil-design-eng/SKILL.md file explicitly prohibits ease-in for UI animations because it feels sluggish at the moment users are watching. Instead, use ease-out or custom cubic-bezier curves to create responsive-feeling interactions.

Prefer CSS Transitions Over Keyframes

CSS transitions are interruptible and retargetable, making them superior for rapidly-triggered UI interactions compared to keyframe animations. This rule ensures that hover states and rapid clicks feel responsive rather than fighting against ongoing animation sequences.

Spring Animations for Natural Motion

For drag-based or decorative interactions, spring physics feel more alive and can be interrupted gracefully. The framework recommends using spring-based solutions (such as Framer Motion's useSpring) for interactions requiring natural, physical responsiveness.

Performance-First Constraints

Animate only transform and opacity properties to avoid layout thrashing. The philosophy mandates using hardware-accelerated CSS or the Web Animations API (WAAPI) instead of heavy JavaScript animation loops to maintain 60fps performance.

Accessibility Considerations

The framework requires respecting prefers-reduced-motion media queries. Essential visual cues like opacity and color changes should remain, but unnecessary motion must be removed to accommodate users with vestibular disorders.

Practical Code Examples

The following snippets demonstrate how to implement these principles in production code.

Custom Easing with CSS Variables

Define reusable easing curves to maintain consistency across your application:

/* Strong ease-out for UI interactions */
:root {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Example button */
.button {
  transition: transform 160ms var(--ease-out);
}
.button:active {
  transform: scale(0.97);
}

This approach implements the "never use ease-in" rule while creating a system-wide language for motion.

Spring Physics in React

For draggable or cursor-following elements, use spring physics instead of linear interpolation:

import { useSpring } from 'framer-motion';

function RotatingIcon({ mouseX }: { mouseX: number }) {
  const springRotation = useSpring(mouseX * 0.1, {
    stiffness: 100,
    damping: 10,
  });

  return <motion.div style={{ rotate: springRotation }} />;
}

This example from the skills/emil-design-eng/SKILL.md documentation shows how spring animations create natural, interruptible motion for interactive elements.

Modern Entry Animations with @starting-style

Use modern CSS to handle element entry states without JavaScript overhead:

.toast {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);

  @starting-style {
    opacity: 0;
    transform: translateY(100%);
  }
}

This technique leverages the @starting-style at-rule for clean, performant entry animations that respect the framework's emphasis on CSS-based solutions.

Related Skills and Resources

The emilkowalski/skills repository contains several complementary skills that extend this philosophy:

• skills/review-animations/SKILL.md – Audit templates for evaluating existing UI animations against these principles.
• skills/improve-animations/SKILL.md – Systematic approaches to refactoring animation codebases in large applications.
• skills/animation-vocabulary/SKILL.md – Standardized terminology for communicating design intent between engineers and designers.

Summary

Emil Kowalski's design engineering philosophy provides a systematic approach to building interfaces that feel inherently polished:

• Taste is trained through deliberate study and practice, not innate talent.
• Invisible details compound to create interfaces that feel right without users knowing why.
• Beauty functions as leverage to differentiate products in competitive markets.
• Animation requires justification through the four-question framework based on interaction frequency.
• Technical constraints (avoiding ease-in, preferring CSS transitions, animating only transform and opacity) ensure performance remains optimal.
• Accessibility is mandatory, requiring respect for prefers-reduced-motion settings.

Frequently Asked Questions

What makes Emil Kowalski's design engineering philosophy unique?

Unlike generic design guidelines, this philosophy treats UI polish as an engineering discipline with concrete, testable rules. The framework provides specific technical constraints—such as the prohibition against ease-in and the frequency-based animation matrix—that transform subjective "good design" into objective implementation criteria.

How can developers train their UI taste according to this philosophy?

According to skills/emil-design-eng/SKILL.md, developers should study high-quality interfaces, question why specific design choices feel correct, and practice relentlessly. Taste emerges from pattern recognition developed through continuous exposure to excellent work and iterative refinement of one's own implementations.

Why does the framework recommend against using ease-in for UI animations?

The skills/emil-design-eng/SKILL.md documentation explains that ease-in curves start slowly and accelerate, creating a perception of sluggishness during the critical moments when users are actively watching for feedback. ease-out curves, which start fast and decelerate, feel more responsive and immediate.

How does this philosophy handle accessibility concerns?

The framework mandates respecting prefers-reduced-motion by removing non-essential motion while preserving critical state indicators through opacity and color changes. This ensures interfaces remain usable for people with vestibular disorders without sacrificing functional clarity.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}