AI prompts for animated websites

A nice selection of components with copy and paste prompts for agents

Examples of email copy from large companies

Lots of buttons with interaction variances (all CSS)

A curated collection of A/B test results from best-in-class apps

A great collection of app flows and screens

A collection of nice sites with nice animations

An endless collection of delightful details from best-in-class apps

Lots of examples of nice UIs

A beautiful article, really.

A reminder of the constant challenge of collecting good data through error checking, but not limiting actual inputs (what are good bounds?)

Security design vs. aesthetics — designing UI that separates trusted address bars from untrusted content

When loading, if you use a custom loading indicator, users think that app is slow — if you show a standard spinner, they blame their phone

Progressive scroll tricks with CSS

What UI density means and how to design for it

A study says a 7-point scale strikes a balance between offering nuance and avoiding overwhelm as most people can intuitively distinguish between 7 levels of agreement or satisfaction without overthinking

A list of good Google Font pairings

Pass feedback directly back to your agent via your browser

A beautiful colour palette creation tool

Some beautiful visualisation tools

3D visualiser

Simple design tools

Describe a thing and get the actual name

Create interactive terminal interfaces with TypeScript

Create really nice visuals quickly (no code export)

Create stunning gradients and export to image or code

A good place to quickly create maps

Hex code guessing game

Mockup devices quickly and easily in a free interactive tool

Useful for the new standard, but no documentation on the actual calculation method…

Especially useful for finding the closest accessible colour to the one you have

Simulate colour schemes instantly

Font pairing made simple

Create colour palettes quickly, and find colours that match others

Create palettes and test accessibility for Fluent UI

Create nice trees

A lovely way to animate number transitions

Try the new text-to-speech model in the OpenAI API

An easy way to make embeddable forms

A great tool to easily generate grid and flex layouts

Quickly remove empty lines from text (very useful when pasting into a document with line spacing)

View loads (basically all!) resolutions and DPIs of phones, tablets and more!

My list of free apps for the Mac

A list of useful tools

View the DOM in 3D!

A letter spacing game

The text produced by this is not read out by screen readers

Work out layout grids quickly and easily

Create nice gradients

Create shades from a base colour quickly

Browse colour palettes

Schedule UX research much easier by letting someone see your available slots

Used to work out the EQ settings for your device

The text produced by this is not read out by screen readers

Allows you to just add .iso files to an external disk and then boot from them! No formatting!

Orbs to use in Ai UIs

Components for Ai UIs

Components for Ai UIs

Ready to use UI transitions

An open source library of tasteful html-in-canvas & WebGL components

A curated library of premium micro-interactions and transition components.

A library of interface animations built on spring physics

CSS text effects

Dithered charts that are cheap for CPUs/GPUs

Interaction sounds for UIs!

Nice components, with customisation, and copy/paste prompts for agents

A really nice collection of little experiments in code

Display properties of every iOS/iPadOS/watchOS device ever

Free CSS elements

Free open source loaders

A good curated selection of free fonts (some not available on Google Fonts)

Avatar generation

Figma resources

See the full guide by opening this item

cd ~/Library/Fonts/

git clone <https://github.com/google/fonts.git> google-fonts

cd ~/Library/Fonts/google-fonts

git pull

A collection of lovely animations

A set of free NN/g resources to help provide a starting point for your practice

I use these for showing interactions in wireframes

Free icons from Google with the ability to adjust weight and style

Free icons for personal or commercial use

Font repository served by personality

Examples of bento grids

Royalty free ai stock

Free icons from the makers of Tailwind

Open source, customisable icons

Lots of SVGs

Lots of macOS app icons as svgs

Free illustrations of people

A good collection of Tailwind UI components

A set of beautifully-designed, open source, accessible components

Open source component library

Benchmark to work out usefulness of different Ai models

Very close to Apple’s ‘hello’ font

A good font for use when legibility is key

My favourite font…

Vercel’s font

Also a Google Font!

Roboto, but flex, so you can keep the spacing but with different weights!

BPM and key finding for AutoMix