This is exactly what I’ve been looking for! As a product designer with little knowledge on coding, this breakdown makes the process seem less daunting and vibe coding more reliable!
"Collapsing the artificial boundary between design and development" - this is the shift.
I'm watching non-technical people ship production apps now. Not prototypes. Actual deployed products handling real users. The traditional "learn to code" path is becoming optional for a lot of use cases.
That design-to-dev handoff you mentioned used to be where intent gets lost. Designer wants subtle interaction, dev implements the literal spec, result feels off. Now the designer can iterate until it feels right.
Still think there's value in understanding constraints though. You don't need to write the code, but knowing what's expensive vs cheap computationally helps you design better solutions.
Have you seen designers hit walls where technical knowledge became blocking? Curious where the limits are.
"The problem wasn't capability. It was the translation layer" — this is exactly the framing I keep coming back to. The handoff isn't broken because designers can't spec well enough. It's broken because translation between environments always loses signal. Removing the layer entirely is the actual fix.
Nice guide Tommaso :) For other first time builders. Perhaps considering adding note for people to back-up there computers, and protect themselves before they start using dangerously-skip-permission.
I've started using claude in a Virtual machine when I run it fully autonomous.
I loved finding out that a tool has already been written for something i have to struggle-juggle in my head. I did almost the same steps. Started as an engineer, jumped to "webmaster" doing everything, then switched to design and now trying to refresh everything without loosing my mind with all the available stacks and frameworks.
I love that GSD does everything that I tried to do with ChatGPT / Deepseek with markdown files and some basic structures. I had a lot of time saved doing todos.md or hits.md to keep track of the features wanted vs featured to be implemented.
And it is a real pain in the arse having to clean the token slop that starts when the AI engine starts to hallucinate or break stuff that was already made and working just fine.
I'm sure I'll follow this thing now because it looks like a time saver and my TDAH will be so happy to finally let go all that worrying about AI forgetting stuff that I cannot forget in my mind!
One quick thing though, it seems that in the first part of the Portfolio Breakdown, the STEP 7 got shifted up between STEP 3 and 4, and then there's some overlapping in the final part of STEP 3 through 4, that you might want to fix. It looks a bit weird and I lost my focus for a bit and surely someone else's can break too.
Many many thanks for sharing all this knowledge. I'm truly happy to see there's light at the end of the mind-controlling tunnel that can be achieved with Claude Code + GSD
I think this is important to mention that this GSD is a way to emulate activity of entire agency, for a smaller task this would be an extravagant way to burn a ton of tokens and time for a task Claude would have otherwise one-shoted.
Excellent analysis! I totally get the 'webmaster' nostalgia. It’s funny how 'knowing' code feels like a latent superpower. For designers, does Claude really help with architectual choices, not just the syntax? So insightful.
To be very honest, Claude does an excellent job with Architectural choices. Especially if you use it in combination with tools such as GSD or Autocoder and "abuse" the plan and research phase
Tommaso, have you also tried the Superpowers skill? Comparable or better to GSD?
These are the two best planning structures available with Claude right now as far as I can tell, and given you're excellent breakdown of GSD, I'd really like your take on Superpowers, and which you think is better (or appropriate for special tasks) over the other.
Hi! Both do context engineering, both use subagents, both produce specs before code, both emphasize atomic commits. The surface overlap is real. The divergence is in what they optimize for. GSD optimizes for decision quality at phase boundaries. Superpowers optimizes for code correctness at task boundaries. That's the whole thing, really. GSD asks "are we building the right thing?" repeatedly through /gsd-discuss-phase, then /gsd-plan-phase, then /gsd-verify-work. It's a design critique disguised as a CLI. You stay in the loop because decisions compound.
Superpowers asks "is this code actually correct?" relentlessly through enforced TDD, git worktrees for isolation, and a two-stage review (spec compliance first, then code quality). It's a staff engineer disguised as a plugin. You walk away because the discipline compounds.
My take, specifically for designers: Default to GSD. Reach for Superpowers when the thing you're building genuinely needs engineering rigor it can't fake.
There's also a practical thing: GSD's --quick mode is built for the designer workflow where you want to ship a small change without running the whole phase machine. Superpowers doesn't really have that, its skills will still try to impose their shape on small tasks, which can feel like using a forklift to move a mug. What I did is trying both on the same small project to feel the difference
The translation problem bit hit close to home. Same trajectory here; full-stack early career, moved into leadership, then Claude Code pulled me back into shipping things directly.
One thing worth looking into if you are running --dangerously-skip-permissions is hooks. I put together a guide on it (https://reading.sh/claude-code-hooks-a-bookmarkable-guide-to-git-automation-11b4516adc5d) after Claude tried to force-push to main during a longer session. Exit code 2 blocks the tool call entirely, so you get the flow of skip-permissions without the risk of Claude nuking your git history.
Curious whether you have had any close calls with destructive commands. That Figma MCP pipeline sounds like the kind of project where one bad commit could cause real headaches.
This is exactly what I’ve been looking for! As a product designer with little knowledge on coding, this breakdown makes the process seem less daunting and vibe coding more reliable!
Enjoy the process! It will unlock super powers!
"Collapsing the artificial boundary between design and development" - this is the shift.
I'm watching non-technical people ship production apps now. Not prototypes. Actual deployed products handling real users. The traditional "learn to code" path is becoming optional for a lot of use cases.
That design-to-dev handoff you mentioned used to be where intent gets lost. Designer wants subtle interaction, dev implements the literal spec, result feels off. Now the designer can iterate until it feels right.
Still think there's value in understanding constraints though. You don't need to write the code, but knowing what's expensive vs cheap computationally helps you design better solutions.
Have you seen designers hit walls where technical knowledge became blocking? Curious where the limits are.
This was a very usefull learning. I'm gonna try re-designing my portfolio with the first tutorial to try it
Can’t wait to see the result! Thank you!
Thank you for taking time to outline this all!
🫡
"The problem wasn't capability. It was the translation layer" — this is exactly the framing I keep coming back to. The handoff isn't broken because designers can't spec well enough. It's broken because translation between environments always loses signal. Removing the layer entirely is the actual fix.
Nice guide Tommaso :) For other first time builders. Perhaps considering adding note for people to back-up there computers, and protect themselves before they start using dangerously-skip-permission.
I've started using claude in a Virtual machine when I run it fully autonomous.
Claude can delete your computer.
explained this more here
https://dominiksnotebook.substack.com/p/if-youre-a-beginner-with-claude-code
Oh yes. Good catch, I took that for granted but it’s a vital thing to do!
I loved finding out that a tool has already been written for something i have to struggle-juggle in my head. I did almost the same steps. Started as an engineer, jumped to "webmaster" doing everything, then switched to design and now trying to refresh everything without loosing my mind with all the available stacks and frameworks.
I love that GSD does everything that I tried to do with ChatGPT / Deepseek with markdown files and some basic structures. I had a lot of time saved doing todos.md or hits.md to keep track of the features wanted vs featured to be implemented.
And it is a real pain in the arse having to clean the token slop that starts when the AI engine starts to hallucinate or break stuff that was already made and working just fine.
I'm sure I'll follow this thing now because it looks like a time saver and my TDAH will be so happy to finally let go all that worrying about AI forgetting stuff that I cannot forget in my mind!
One quick thing though, it seems that in the first part of the Portfolio Breakdown, the STEP 7 got shifted up between STEP 3 and 4, and then there's some overlapping in the final part of STEP 3 through 4, that you might want to fix. It looks a bit weird and I lost my focus for a bit and surely someone else's can break too.
Many many thanks for sharing all this knowledge. I'm truly happy to see there's light at the end of the mind-controlling tunnel that can be achieved with Claude Code + GSD
Greets from Chile :)
Grazie Tommaso, proverò GSD!
Amazing post! Exactly what I was looking for - from Figma to Production with full control. You just made my day!
Glad I helped! Careful it’s really addictive!
Thanks for sharing, very useful content for designers. Keep the inspiration coming!
I think this is important to mention that this GSD is a way to emulate activity of entire agency, for a smaller task this would be an extravagant way to burn a ton of tokens and time for a task Claude would have otherwise one-shoted.
oh yeah absolutely right, it’s waaaay to overkill for small tasks!
Excellent analysis! I totally get the 'webmaster' nostalgia. It’s funny how 'knowing' code feels like a latent superpower. For designers, does Claude really help with architectual choices, not just the syntax? So insightful.
To be very honest, Claude does an excellent job with Architectural choices. Especially if you use it in combination with tools such as GSD or Autocoder and "abuse" the plan and research phase
Tommaso, have you also tried the Superpowers skill? Comparable or better to GSD?
These are the two best planning structures available with Claude right now as far as I can tell, and given you're excellent breakdown of GSD, I'd really like your take on Superpowers, and which you think is better (or appropriate for special tasks) over the other.
Hi! Both do context engineering, both use subagents, both produce specs before code, both emphasize atomic commits. The surface overlap is real. The divergence is in what they optimize for. GSD optimizes for decision quality at phase boundaries. Superpowers optimizes for code correctness at task boundaries. That's the whole thing, really. GSD asks "are we building the right thing?" repeatedly through /gsd-discuss-phase, then /gsd-plan-phase, then /gsd-verify-work. It's a design critique disguised as a CLI. You stay in the loop because decisions compound.
Superpowers asks "is this code actually correct?" relentlessly through enforced TDD, git worktrees for isolation, and a two-stage review (spec compliance first, then code quality). It's a staff engineer disguised as a plugin. You walk away because the discipline compounds.
My take, specifically for designers: Default to GSD. Reach for Superpowers when the thing you're building genuinely needs engineering rigor it can't fake.
There's also a practical thing: GSD's --quick mode is built for the designer workflow where you want to ship a small change without running the whole phase machine. Superpowers doesn't really have that, its skills will still try to impose their shape on small tasks, which can feel like using a forklift to move a mug. What I did is trying both on the same small project to feel the difference
Appreciate the response and your time. Grazie mille
The translation problem bit hit close to home. Same trajectory here; full-stack early career, moved into leadership, then Claude Code pulled me back into shipping things directly.
One thing worth looking into if you are running --dangerously-skip-permissions is hooks. I put together a guide on it (https://reading.sh/claude-code-hooks-a-bookmarkable-guide-to-git-automation-11b4516adc5d) after Claude tried to force-push to main during a longer session. Exit code 2 blocks the tool call entirely, so you get the flow of skip-permissions without the risk of Claude nuking your git history.
Curious whether you have had any close calls with destructive commands. That Figma MCP pipeline sounds like the kind of project where one bad commit could cause real headaches.
Cool. If you want to have a more visual way to use Claude Code you should try https://quack.build
This is a phenomenal resource! Thank you for taking the time to put this together and for sharing your insights. Much appreciated! 🙏🏼♥️🪩