Make Interfaces Feel Better: Design Engineering Principles for Polished UIs

LinkJakub KrehelResource

Jakub Krehel shares 'make-interfaces-feel-better', a design engineering skill and guideline package for building and reviewing UI details. It covers rules across typography, surfaces, animations, icons, and performance, alongside a structured review methodology.

Key points

  1. Concentric border radius: Outer radius must equal inner radius plus padding to avoid visually jarring nested corners.
  2. Disciplined animations: Prefer interruptible CSS transitions, avoid transition: all, and suppress initial mount animations using initial={false}.
  3. Typography and layout stability: Use text-wrap: balance on headings, text-wrap: pretty for body text, and tabular-nums on changing numbers to avoid layout shifts.
  4. Optical alignment and icons: Adjust alignment optically rather than purely geometrically, match icon stroke to adjacent text weight, and manage states using currentColor on a single SVG asset.
  5. Review process: Inspect motion at 10% speed in the browser's Animations panel and report findings by severity, location, before/after code, and violated principles.

Why it matters

User experience is defined by compounding visual details. Providing explicit values and mathematical relationships removes guesswork for frontend developers and makes UI polish reproducible in existing styling systems like Tailwind or standard CSS.

Analysis

The resource stands out by providing actionable parameters rather than generic UX advice, such as specifying scale(0.96) for press feedback, distinct blur and scale ranges for icon transitions, and clear hit-area minimums. Designed as a callable skill, it provides a structured rubric suitable for both manual design engineering audits and automated code reviews.

Mentioned links

Found in

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Link:Jakub Krehel

    Better UI: Ruleset for Interface Polish and Visual Refinements

    Jakub Krehel's 'better-ui' skill offers specific rules for polishing user interfaces. The guide emphasizes exact animation values, spacing calculations, and optical alignments over geometric defaults.

    Web development· Resource

  • Link:Emil Kowalski

    Emil Kowalski's Design Engineering Philosophy

    Emil Kowalski outlines his design engineering philosophy for UI polish, component craft, and interface animations. The guide highlights trained taste, compounding micro-details, and clear rules for animation frequency, custom easings, and component states.

    Web development· Resource

  • Repository:jakubkrehel/skills

    jakubkrehel/skills: Agent Skills for UI and Design Engineering

    jakubkrehel/skills is a curated collection of agent skills designed to equip AI assistants such as Claude Code with best practices for interface design, typography, accessibility, and UI engineering.

    5.8kstarsMarkdown

    AI & LLMs· Tool

  • X post:Kiyotaka

    Top 5 UI Skills for Design Engineers Using AI Agents

    Kiyotaka (@SubhanHQ) highlights five curated skill rulebooks designed to enhance how AI coding agents handle UI craft, animation, accessibility, and visual polish.

    986bookmarks39.5kviews

    AI & LLMs· Resource

  • Link:Jakub Krehel

    Skills: Agent-Based UI and UX Optimisation Toolkit

    Jakub Krehel introduces a collection of agent skills designed to help developers refine user interfaces across typography, OKLCH colours, accessibility, layout, and UX writing.

    AI & LLMs· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.