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 idea to live product: 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.

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

Line Draw
Bouncy
Rotation
Stagger

SVG Animator

Interactive SVG animation playground with Motion: make your icons bouncy

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

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

Icon Canvas

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

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 budget-tight organisations

depth-1
depth-2
depth-3

Shadow Explorer

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