Notes

• What are we trying to achieve?

• What is the user experiencing or struggling with?

• What must the user understand first?

• What did you change, and why?

• Explain the trade-off

• Define the expected outcome

I learnt it the hard way: designing in Figma used to feel like the finish line now it feels more like the first pass

• The mockup looked fine. Production told a different story

• The CEO said the fans were running hot just from opening the site

• The site was too heavy to ship the way we had built it

• Figma does not show what the browser has to do to render a design

• We had been running a client-heavy setup: the whole app booting in the browser, content loading after JS, animations eating CPU on every visit

• So I dug deep with an agent, the whole thing, used Opus to help rebuild it properly, end to end. ~25M tokens later, it was not a small refactor

• Moving off a pure SPA and onto Next.js helped: server-rendered pages, faster first load, less work pushed onto the client every time someone lands

• I learnt small nuances about engineering architecture, not just the canvas:

  • How heavy is it?

  • How fast does something appear?

  • What is the machine doing in the background?

I wrote skills for the work I kept doing over and over. Add a component to the design system. Wire a home screen widget. Get Liquid Glass right on iOS. Each one is a checklist the agent follows.

Without skills, the agent guessed. Files landed in the wrong place. With skills, the first draft was closer to how I would have done it myself.

Skills turned my habits into something repeatable. Less explaining the same rules every session. More time on the actual design problem.