Issue #757: Interface cheat sheet
The making of Cursor's icons, Designing the first five minutes, The case for spec-driven design, Keeping type consistent in changing conditions, and more.
Highlights of the week
- Ship faster with Granola - Granola is an AI notepad that captures every meeting and turns them into PRDs, tickets, and decisions. No bot, no busywork. - Granola promoted
- Interface cheat sheet - It’s based on the /better collection of skills and it's a mix of best practices and some of my personal preferences. - Jakub Krehel
- The making of Cursor's icons - The work took about a year and covers 600+ icons in two sizes and two styles, every single exploration and every final icon variant drawn by hand. - Marek Minor
Read all week, picked once. The best design links — every Tuesday.
Product design, UX/UI and PM
- Designing the first five minutes - Users don't form first impressions based on output quality alone. Their experience begins from the moment they open the agent, and it's important that we treat early interactions with just as much care as what comes after. - Pooja Dhaka, Garima Sikdar
- The case for spec-driven design - Design does not get back in by producing more. The work that moves a product forward is judgement applied to accumulated knowledge: which problem is worth solving, what users have already told us, what was tried before and why it fell short. - Tuomas Härkönen
- Keeping type consistent in changing conditions - Grade first appeared to make type look as intended with low-quality printing methods or on different paper types. - Elliot Jay Stocks
Design engineering
- Why I built a semantic-HTML first library - The bad decision was 'just style a div and call it a button'; the overcorrection was 'abstract so hard that we've rebuilt the button from scratch, in userland, forever.' - Karl Koch
- Spec-driven UI component development - Specs serve as a hub for expressions across all the surfaces – Figma, prototypes, code libraries, docs – each a source of intent and a surface on which to render intent. - Nathan Curtis
Artificial intelligence
- Claude Code 101, for designers - Agents, tokens, context windows, MCP: the words fly around every AI conversation at work, and they make the whole subject feel more technical than it is. - Yaron Schoen
- State of AI in design systems - A study of the current state of the art in how design systems implement and distribute agentic tooling for DS contribution and consumption. - Kaelig Deloumeau-Prigent
Tools and resources
- Beautiful UI: Crafted primitives for AI-native interfaces - A small library of extremely crafted, copy-paste components for chat agents, thinking states, human-in-the-loop approvals, and everything agents need to talk to humans beautifully. - Turbo
- Morphicons: Morph any SVG icon into any other - Animate Lucide, Tabler, Heroicons or any stroke icon set. Optimal rotation solved in closed form, spring physics, zero dependencies. - Guillermo Lopez Gomez
- Liquid Gooey: Liquid effects for React UI - Morph merges, reshapes and dissolves touching pieces; Move trails a moving element as liquid rubber. - Jakub Antalik
Last but not least
- A forgotten quality - I thought AI was about bringing engineering and design closer together, but in the end it was a QA holding the keys to a self-improving tool. - Raúl Álvarez