Vibe Coding Starter Pack for Designers
Created a guided, project-based curriculum that takes designers from zero coding experience to shipping a deployed portfolio — using AI as their development partner.
- Client
- Personal Project
- Role
- Product Designer, Developer
- Years
- 2026
Challenge
Most designers, me included, now face the expectation of having to know how to translate their designs into real, interactible products. This means knowing how to code or how to work with platforms that can turn design into code. While these two disciplines seem to speak two different languages, AI — specifically vibe coding — can act as a bridge.
I put off working with AI-assisted coding programs like Claude and Kiro because "I need to study them first." I've never vibe coded before, after all. Where do I even have to start? Little did I know that I could work with my design "stock knowledge", and I just had to DO THE THING ALREADY. Simple: JUST DO IT.
Kidding. To ease my fellow designers into this whole table-flip, let's-just-do–the-thing kind of mindset, we need to take baby steps. Hence, I put together a "designer to vibe developer" starter pack.
Action
Key considerations that I made were:
- Progressive language development — The curriculum starts out in the usual designer language with occasional inserts of development terms that are commonly used. As the learners progress, more development terms are used to help get designers more comfortable with the language.
- 30-60 minute daily sessions — Sessions are short enough to be fit into a designer's workday without becoming overwhelming. These short sessions are also designed to encourage exploration rather than just cramming information into the learner's mind.
- Progressive complexity — Phase 1 is a simple interactive tool. Phase 2 adds responsive design, animations, and forms. Phase 3 ties everything together into a portfolio.
- AI as partner, not teacher — The curriculum doesn't explain JavaScript syntax. It teaches you how to describe what you want so the AI can build it. The learner is the movie director, and the AI is the actor following the script.
- Real deployment at every phase — Every project gets deployed to a live URL. The learner immediately sees their creation come to life instead of just keeping the code in the cave.
What Makes It Different
Traditional learn-to-code paths: "Here's what a function is. Here's what a variable is. Now build something."
This path: "Here's what you're building today. Describe it to the AI like you'd describe it to a developer. Review what comes back. Refine."
The goal isn’t to build a full system right off the bat — it’s to help designers get their ideas onto a digital paper and execute without thinking, “This has to look perfect.”
Results
- Complete 5-week curriculum from zero to deployed portfolio
- 4 phases, 35+ daily sessions, each self-contained
- No prior coding experience required (tested with actual designers)
- Open-source and freely available
