No lessons to complete. No progress tracking. Just real UI patterns, demos, and techniques you can explore at your own pace.

Being able to reproduce an interface isn’t the goal.
Understanding how and why it works is.

From inspiration to implementation

Each entry starts with a real interface, pattern, or idea.

From there, the work is broken down into:

• What actually matters
• What doesn’t
• Where constraints come from
• How structure, behaviour, and motion shape the result

Some entries focus on foundations like animation, interaction, or how to break down problems. Others go deep into applied “Studio” explorations. Real problems, prototype dives, trade-offs, and production considerations.

This isn’t a fixed course or a one-off release. It’s a living body of work that grows as patterns, demos, and ideas are added over time.

Building judgement, not just outcomes

Getting something working is only the start. Knowing why it works and what it’s doing to the experience is where craft begins.

The work leans on the strengths of the web platform.

Using HTML and CSS fully, introducing JavaScript when it adds real value, and reaching for libraries only when they genuinely help you go further.

Tools change. APIs evolve. Strong fundamentals and clear thinking compound and become an unfair advantage over time.

Practices you’ll make your own

A set of practical habits supports the work:

• Setting up for fast, flexible prototyping
• Leveraging tools with intent, from DevTools to AI-assisted workflows
• Collecting and organising inspiration
• Exploring ideas without over-engineering
• Moving from experiments to production-ready UI

Every example includes source code you can inspect, experiment with, and build on. You’ll leave with a way of thinking you can apply to problems you haven’t seen before.

If you want to become the reference

If you’ve ever looked at a design and thought: “How would I actually build that?”, this is for you.

This isn’t about memorising steps or copying patterns. It’s about building the confidence to approach unfamiliar interfaces without waiting for a tutorial.

Over time, you stop searching for the answer.

You start shaping it.

You become the reference. You become the documentation.

Hey – I’m Jhey Tompkins 🤙

I’m a design engineer who’s spent years building, breaking down, and rebuilding interfaces, and sharing that work publicly.

I’m currently a Staff Design Engineer at Shopify. Previously, I worked in Developer Relations at Google on the Chrome CSS and UI team, and as a Design Engineer at Vercel. I’ve built for teams including Nike, Uber, Nearform, and Monzo, and have spoken at conferences around the world about building user interfaces for the web.

This playbook exists because people kept asking how the work is done.

It’s my way of sharing how I think about UI work, from first principles to finished interfaces, so you can apply the same approach in your own projects.

This is the craft.