Pixels and Process #2 - Geeking over the good stuff (with a cup of coffee đ”)
Sharp reads, shiny tools, quick tactics, and a wildcard curated for designers who love systems, speed, and small sparks of inspiration.
Things I found useful or just plain cool this week. Grab a coffeeđ” and letâs geek over some good stuff.
đ§ Sharp reads/Deep dives
Thinking in systems and designing with AI
This week, two pieces made me pause and rethink how much the design process has shifted and made me reflect on my own workflow at work.
Prompt to Code: Why I Stopped Prototyping in Figma and What This Means for Product Designers by Elie Thomas Majorel
Itâs a clear, real-world walkthrough of how Elie moved from prototypes in Figma to building AI-generated apps using Claude/ChatGPT to write structured specs and Lovable to generate the actual frontend. He talks about shipping actual features, with engineers forking his AI-generated code and pushing it to production in days.
My playbook for vibe coding (Dive Club) - Michael Riddering
Riddâs flow is a little different but aligned. He treats GPT like his CTO and Cursor like his dev. He starts by dumping full project context into GPT, then asks it to question him. Once GPT understands the problem, it breaks the project into phases and generates prompts â Cursor implements them â GPT reviews the output â the loop continues.
My own process is somewhere in between all of this.
Also, the truth is my prototypes (I prefer v0) are not perfect. Several forks and iterations later some parts of it remain broken. And honestly, they require polish. My idea is to almost get there as fast as possible, so I could speed up turn around time.
Reading Elieâs article has me thinking about my prompts especially how I could frame specs.
Watching Ridd made me realize the value of staying in the loop, and having ChatGPT actually ask questions and close gaps, so the output is a lot better. Not just writing prompts once and moving on.
Why You Should Read/Watch
Whether or not your organisation is shipping AI-generated code doesnât matter.
For me, its about the workflow shift around the entire design process. AI augmented design is definitely fast and efficient.
đ Shiny tools
Kigen - Create Design System Variables and Styles Fast
This one's from Vijay Verma, and itâs a handy little tool if youâre working on design systems inside Figma.
What it does is simple, but extremely useful.
Lets you generate your full token setup: color, typography, numbers.
Comes with pre-built colour palettes.
Supports semantic/alias tokens.
Exports your tokens cleanly as CSS or JSON.
Kigen is for when you want to move fast, stay inside Figma, and get your variables created from scratch. You can tweak things later, but the jumpstart is solid.
âĄQuick tactics/Workflow hacks
Rename Layers!
All of us encounter unnamed frames in our Figma files (we are guilty of doing this at some point in our design life!). When inspecting, youâre left clicking, expanding, scrolling and just hoping you land on the right thing.
This annoying problem has a surprisingly easy fix, thanks to Figmaâs AI feature called âRename layersâ. Your layers auto-populate with names with one click!
đČ Wildcard
Behind The Scenes Of Notion's INSANE Design (w. Notion Team)
This video is such a good reminder of why certain products just feel good. You can feel the obsession. Every little interaction, every decision, itâs all considered.
What I loved:
How much they reveal about the product thinking behind Notion Mail.
How much care goes into making things feel invisible and intuitive.
Interaction Design at a micro level.
In the end, the video wins for me because of one thing - a genuine passion for craft and detail.
đArchives
If you're new here or missed a few of my âdesign dropsâ, you could dig into the archives.
Or start here if you want to đ