Andrew Flett
GitHubLinkedInBluesky
Andrew Flett

Hi, I'm Andrew Flett, Product Designer and Engineer.

I've spent 25 years at the intersection of design and engineering, taking things from rough ideas to live products: open-source tools that ended up needing maintaining, design systems that had to work as much for the people using them as the products they fed into, and digital services for the NHS, the European Commission, Microsoft, ITV, and TED Global.

In practice, that's meant directing product strategy, designing the product, and writing the code, sometimes in the same week. Less a deliberate career plan, more a restless curiosity about how all the pieces connect.

Work with me

Currently taking on short to medium term design and engineering projects. I'm comfortable working out what to build and shipping it, or helping you grow and polish something already in motion.

On the side I'm building Surface and maintaining Cascade while exploring what it means to design in an AI-world.

Get in touch

Some bits and pieces

Colour Tokens

Not just palettes: a tool to build flexible and robust semantic colour systems

A multi-framework CLI design tool with both AI and deterministic edit modes

Surface

A multi-framework CLI design tool with both AI and deterministic edit modes

Icon Canvas

A browser-based SVG icon editor for creating and refining simple icons

Cascade: An icon library for CSS properties

Cascade

Cascade: An icon library for CSS properties

Terminal
$claude
Screenshot the messenger
isolate conversation thread
trim to 3 messages
replace names → dummy data
save docs/messenger.png
Updated MESSENGER.mdx

Capturing Compositions

Capturing live UI compositions with Claude Code

Line Draw
Bouncy
Rotation
Stagger

SVG Animator

Interactive SVG animation playground with Motion: make your icons bouncy

Terminal
$npx @designtools/shadows
detect tailwind v4
scan 6 custom shadows, 10 framework defaults
editor running at http://localhost:4410
Open browser to start editing shadows

Shadow Editor

Edit global shadows visually and write changes straight back to your code

skill.md
---
name: create-design-system
description: When asked to create design system
---
Create a robust design system with semantic tokens
## Colour Tokens
- `primary`, `secondary`...

Semantic Design Systems

A Claude Code skill for scaffolding design systems with semantic tokens

dialog.html
<button commandfor="my-dialog" command="show-modal">
Open Dialog
</button>
<dialog id="my-dialog">
<p>Opened without Javascript!</p>
</dialog>

Primitive Primitives

More primitive primitives: exploring what vanilla HTML and CSS can do in 2026

Lanco desktop interface

AI for Good

What AI-assisted development looks like for tight-budget organisations

depth-1
depth-2
depth-3

Shadow Explorer

A tool to design elevation scales and crispy layered box-shadows

16:9
1:1

Image Tool

Crop, scale, fit and export screenshots – built just to avoid opening Figma