1. Emil Kowalski (@emilkowalski): AI for UI & Agent-Consumable Design Skills
Inside Emil Kowalski's AI for UI breakthrough: Why the next wave of design systems ships declarative skills for AI coding agents, and how spring physics defeat artificial CSS easing curves.
1. Emil Kowalski (@emilkowalski): AI for UI & Agent-Consumable Design Skills
"You can now also ask your agent to buy AI for UI for you. Once it's purchased, it installs the skills that come with the course and starts using them on your app right away. This way you get value instantly and can go through the lessons yourself later."
— Emil Kowalski, Design Engineer (Linear, ex-Vercel)
💡 The Core Thesis
As AI coding agents become ubiquitous in engineering workflows, the barrier to generating working UI has dropped to near zero. But the barrier to creating memorable, tactile, and mathematically precise interfaces has never been higher.
Emil Kowalski's core contribution to design engineering is bridging the gap between raw functional components and high-craft kinetic physics. His latest breakthrough, AI for UI, introduces 28 core skills packaged not just as human tutorials, but as declarative skill definitions that AI agents can consume and execute inside modern React codebases.
🛠️ Key Design Engineering Patterns
1. Spring Physics Over Duration Easing
Traditional CSS transitions using ease-in-out with hardcoded millisecond durations feel artificial because physical objects do not stop based on clock ticks; they settle based on mass, stiffness, and damping ratio:
$$\omega_d = \sqrt{\frac{k}{m} - \zeta^2}$$
// Declarative spring configuration for responsive tactile feedback
export const TACTILE_SPRINGS = {
// Snappy hover feedback for buttons and pills
snappy: {
stiffness: 400,
damping: 30,
mass: 0.8,
},
// Smooth sheet and modal dismiss gesture
sheet: {
stiffness: 300,
damping: 35,
mass: 1.2,
},
// Subtly elastic toggle switch
toggle: {
stiffness: 500,
damping: 25,
mass: 0.5,
},
};2. Layout Transitions & Shared Element Layouts
Instead of unmounting and remounting DOM elements abruptly, Emil advocates for continuous shared-element bounding box morphing:
- Use
layoutIdwith zero-layout-shift bounding rect projections. - Prevent content distortion by nesting inner content with
layout="position". - Never animate width/height directly; animate
transform: scale()with CSS transforms and counteract distortion with inverted child scales.
import { motion, AnimatePresence } from 'framer-motion';
import { useState } from 'react';
export function SegmentedControl({ tabs }: { tabs: string[] }) {
const [activeTab, setActiveTab] = useState(tabs[0]);
return (
<div className="relative flex rounded-xl bg-zinc-900 p-1 border border-zinc-800">
{tabs.map((tab) => {
const isActive = activeTab === tab;
return (
<button
key={tab}
onClick={() => setActiveTab(tab)}
className={`relative z-10 px-4 py-1.5 text-xs font-medium transition-colors ${
isActive ? 'text-white' : 'text-zinc-400 hover:text-zinc-200'
}`}
>
{isActive && (
<motion.div
layoutId="activeTabBadge"
className="absolute inset-0 z-[-1] rounded-lg bg-zinc-800 shadow-sm border border-zinc-700/50"
transition={{ type: 'spring', stiffness: 450, damping: 32 }}
/>
)}
{tab}
</button>
);
})}
</div>
);
}🧵 Ready-to-Post Tweet Thread
1/4 🎨 Why Emil Kowalski's (@emilkowalski) "AI for UI" represents the future of design engineering:
It's not just a course for humans. It ships with 28 declarative agent skills that your AI pair programmer can install and apply to your React repo instantly.
2/4 Stop using transition: all 0.3s ease-in-out.
Human perception craves kinetic momentum. Real-world objects have mass, stiffness, and damping. Use spring physics (stiffness: 400, damping: 30) to make every toggle, drawer, and tab feel alive.
3/4 The secret to distortion-free layout animations:
Never animate CSS width and height directly. Use GPU-composited transform scale and counteract aspect ratio warping with inverted child scale projections.
4/4 High-craft UI is the only moat left against generic AI web templates.
Follow @emilkowalski for masterclasses on micro-interactions, shaders, and UI polish.📌 How to Follow & Stay Current
- X Handle: @emilkowalski
- Key Themes: Framer Motion, Spring Physics, Design Engineering, Micro-interactions, AI for UI.
- Top Hashtags:
#DesignEngineering#UI#React
Discussion (0)
Continue Reading
More production-grade engineering deep dives and architectural guides
Biggest Hack in the World: Binance Suffers Unprecedented $6.3 Billion Multi-Chain Cyberattack
A comprehensive technical autopsy of the $6.3B Binance hot-wallet breach attributed to TraderTraitor (Lazarus Group). How automated sweeping, compromised DevOps credentials, and cross-chain execution sparked the largest heist in financial history.
Mobile Push at 100M Devices: Benchmarking FCM, APNs, and Custom WebSockets
At 100M devices, push fails in the tail, not the median. We break down real delivery-latency percentiles for APNs, FCM, and owned WebSockets, plus a reproducible cost model and the reliability patterns behind 99.99%.
Landing Page Experimentation at 50M Sessions: Client-Side A/B Testing vs. Edge Decisioning vs. Server-Side Flags — Flicker, INP, and Cost per Million Decisions Benchmarked
At 50 million monthly sessions, where your A/B test makes its decision stops being a tooling preference and becomes a Core Web Vitals and P&L decision. This is a head-to-head benchmark of client-side DOM mutation, edge middleware bucketing, and server-side feature flags — measured on CLS flicker, INP, and true cost per million decisions.