Craft: A Collection of Design Engineering Concepts

LinkGustavo FiorResource

Craft by Gustavo Fior is a curated reference collection of concise essays and practical tips covering design engineering. Topics span typography, colour, layout, motion, sound, and data visualisation.

Key points

  1. Focus on craft and detail: Covers specific techniques including nested border radii, optical alignment, tabular figures, and OKLCH colours.
  2. Motion and interaction principles: Highlights interruptibility, tactile button-press feedback, and restraint with hover states during frequent interactions.
  3. CLI integration: Guides can be integrated into workflows via the command 'npx skills add gustavo-fior/craft'.
  4. Open source: Maintained in a public GitHub repository open for community contributions.

Why it matters

Many web applications function well but lack polish in their user experience. Craft distils unwritten rules of design engineering into actionable, bite-sized heuristics.

Analysis

The resource connects frontend engineering with interface design. Rather than prescribing heavy design frameworks, Gustavo Fior focuses on micro-details that determine perceived product quality—such as matching nested radii to padding or defaulting to ease-out transitions for user-triggered events.

Mentioned links

Found in

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

Related entries

Similar in content, found by the AI search.

  • X post:Adham Dannaway

    Craft: Curated Design Engineering Concepts by Gustavo Fior

    Adham Dannaway highlights Gustavo Fior's project »Craft«, an online collection of brief essays explaining essential design engineering principles, spanning typography, layout math, motion, sound, and colour handling.

    568bookmarks14.3kviews

    Web development· Resource

  • Link:Jakub Krehel

    Make Interfaces Feel Better: Design Engineering Principles for Polished UIs

    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.

    Web development· Resource

  • X post:Noah

    Curated Resource List for Design Engineers

    Noah (@noahelhadedy) shared a curated list of five websites and learning resources tailored for design engineers, focusing on interface craft, animation, and micro-interactions.

    4.1kbookmarks115.9kviews

    Web development· Resource

  • Link:designeng.tools

    DesignEng: Curated Tools and Resources for Design Engineering

    DesignEng aggregates over 240 curated resources, component libraries, color utilities, and UI references for design engineers. The directory highlights modern frontend stacks and components tailored for AI coding workflows.

    AI & LLMs· 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

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.