Hi, I'm Andrew Flett, Product Designer and Engineer.
I've spent 25 years at the intersection of design and engineering, taking things from concept to launch. Open-source tools that found a life of their own. Design systems with the politics of adoption baked in from day one. Digital services for the NHS, the European Commission, Microsoft, ITV, and TED Global.
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.
Currently building Surface an open-source visual editor for production code, and Cascade an icon library for CSS properties.
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
A browser-based SVG icon editor for creating and refining simple icons
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 live UI compositions with Claude Code
Line Draw
Bouncy
Rotation
Stagger
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
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`...
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>
More primitive primitives: exploring what vanilla HTML and CSS can do in 2026
What AI-assisted development looks like for tight-budget organisations
A tool to design elevation scales and crispy layered box-shadows
Crop, scale, fit and export screenshots – built just to avoid opening Figma
