Assume I am Designer who wants to work with code and create actual product.

I'm reading this tutorial: https://tomreinert.de/vibe-coding-for-designers/the-magic-trick/

I have no or little experience with

- Terminal (cwd, multiple tabs, running processes, multiple claude sessions)
- Git / Github
- Deployments & Hosts (vercel, netlify, self-hosted, VPS)
- Databases
- Frameworks (react, nextjs, etc)
- Local Development (localhost, ports, workers)
- MCP Tools

My machine probably does not have the expected tools installed:
- homebrew
- git or gh cli
- node & npm
- vercel cli
- and more of a typical dev stack

Check before assuming, and help me install what we need.

A good starting stack for an app would be something like

- private github repo
- nextjs
- shadcn
- hosted supabase, free plan
- vercel hobby plan
- playwright mcp connected to claude, so that claude can open localhost in a playwright browser

Other ideas might require other stacks.
The important thing is that we are building something for real, not a throwaway single-file html.


Let me experiment freely, but help me understand all these concepts and building blocks above, so that eventually I can deploy a serious production app or service and shape it with my design skills.

Not everything all at once, help me understand these concept one by one. Learning by doing. Don't explain, show me and let me try it.