Welcome
🎨 Vibe Coding Starter Pack for Designers
Section titled “🎨 Vibe Coding Starter Pack for Designers”Go from “I don’t code” to “I just shipped my portfolio” — in about 5 weeks.
This is a guided, project-based path for designers who want to build real things with the help of AI. No computer science degree required. No boring tutorials. Just you, your design instincts, and an AI coding partner.
What You’ll Build
Section titled “What You’ll Build”| Phase | Project | Duration | What You’ll Have |
|---|---|---|---|
| 0 | Orientation | ~30 min | Your tools set up, your first AI interaction done |
| 1 | Color Palette Generator | ~1 week | A working design tool you built yourself |
| 2 | Landing Page | ~2 weeks | A polished marketing page for your tool |
| 3 | Design Portfolio | ~2 weeks | A portfolio showcasing your projects |
By the end, you’ll have a deployed portfolio with real projects in it — not tutorial clones.
How This Works
Section titled “How This Works”Each phase is broken into daily sessions (about 30–60 minutes each). You’ll describe what you want to build in plain language, and your AI coding partner will help you make it real.
The daily sessions are meant to be flexible. “Day 1” doesn’t have to be Monday. Go at your own pace — most people finish each phase in roughly the suggested timeframe.
What is Vibe Coding?
Section titled “What is Vibe Coding?”Vibe coding is a way of building software by describing what you want in natural language and letting AI generate the code for you. You focus on the what and the why — the AI handles the how.
Think of it like creative direction. You’re the designer giving direction; the AI is the developer executing it. You review the output, give feedback, and refine until it matches your vision.
Your core loop:
- Describe what you want (in plain language)
- Review what the AI gives you
- Refine by giving more specific feedback
- Repeat until it looks and works the way you want
Who This Is For
Section titled “Who This Is For”- Designers who’ve been curious about coding but felt intimidated
- UX/UI designers who want to prototype beyond Figma
- Creative professionals who want to ship side projects
- Anyone who thinks in visuals and wants to build for the web
What You’ll Need
Section titled “What You’ll Need”- A computer (Mac, Windows, or Linux all work)
- An internet connection
- About 30–60 minutes per session
- Zero coding experience (seriously)
A Note on Tone
Section titled “A Note on Tone”This guide starts in language you already know — design language. As you progress, we’ll gradually introduce more technical vocabulary. By Phase 3, you’ll be comfortable with terms that would’ve felt alien in Week 1.
If you ever feel lost, that’s normal. It means you’re learning something new, not that you’re bad at this.
Ready?
Section titled “Ready?”Head to Day 0 — Setup & First AI Interaction in the sidebar to get started. Let’s go. 🚀
Created by Ginny Mones & Kiro. Licensed under CC BY-NC 4.0.