Bytes

I recently rediscovered my childhood stamp collection and loved how these tiny pieces of art hold so much art and world history. I decided to digitize it and build a site to share it with others. It felt like the perfect opportunity to experiment with Claude Code and try a different workflow.

Things that stood out:

Spotting usability gaps: Issues I didn’t catch in Figma surfaced quickly once I was in the browser. For example, I realized on mobile I needed a different placement for a navigation element. This was discovered after experiencing the live design on my phone, not viewing in Figma.

Testing responsiveness and accessibility: There’s a difference between designing for breakpoints and actually resizing a window. Seeing real behavior helped me get very specific on how the design should adapt. Same with accessibility. Tabbing through and listening to a screen reader helped me better understand the structure of my design.

Seeing how things look in context: The hover state I designed for the gallery looked right in Figma, but when I saw it in the browser, it wasn’t what I wanted. Being able to iterate directly and find what translated best made a difference.

Find missing documentation: It’s difficult to think of all states or functionality for a component’s documentation. As I further tested my design in the browser, I was able to note areas that needed more behavior instructions. AI needs context, but so do our team members. If we can document well enough for AI to understand our wants, then that same documentation should work for communicating across functions.

This workflow still needs refining, but I can see the potential, both for individual designers and for teams. It seems designing closer to the medium you’re designing for has real value.