Learn to code by creating digital art with AI assistance. Vibe Coding Instructor bridges the gap between AI-generated code and genuine programming fluency through a structured, top-down learning approach.
Built for Meaningful Learning
AI has opened programming to people who might never have considered it accessible. But without understanding the code, learners hit walls they can't overcome. Vibe Coding Instructor guides you from using AI-generated code to confidently writing your own, following the proven Use-Modify-Create framework.
Perfect for:
- Novice programmers who want to move beyond simple vibe coding
- Students looking for a creative, engaging way to learn programming fundamentals
- Teachers seeking a modern approach to introductory programming instruction
- Anyone who wants to understand the code that AI generates for them
Guided Discovery Through Art
Create digital artworks using P5.js while gradually building programming skills. The app limits AI-generated code to match your current knowledge level, encouraging you to read, understand, and eventually write code yourself.
Structured Learning Path
- Start with simple drawing commands—shapes, colors, and basic positioning
- Progress at your own pace through increasingly sophisticated concepts
- Track your mastery of individual programming concepts
- Unlock new topics as you build foundational skills
LLM-Assisted Exploration
- Prompt your choice of Claude or ChatGPT model to generate code within your learning level
- Iterate on your creations through natural language
- Experiment by modifying the code yourself
- Build confidence through immediate visual feedback
From Copying to Creating
The app implements a careful balance: giving you enough capability to create satisfying artworks while preventing the overwhelm that complex systems often bring. As you notice patterns in the code and start making your own modifications, you're building the foundation for genuine programming fluency.
Clear Visual Progress
- Learning goals highlight as you use them in your code
- Mark concepts you've mastered to track your journey
- Choose your next topic based on what you've learned
- See your growth through the complexity of what you can create
Learning by Making
- Write JavaScript code that draws directly to a canvas
- Tinker with numbers, colors, and positions to see what changes
- Add your own code alongside AI-generated suggestions
- Build understanding through experimentation and discovery
Educational Philosophy
Vibe Coding Instructor embraces a top-down approach to learning programming. Rather than starting with simple concepts and building up to meaningful applications, learners begin by creating interesting things immediately—even if they don't understand all the details yet. This approach opens programming to more people and provides intrinsic motivation to dig deeper.
The Use-Modify-Create progression ensures that learners don't get stuck in a purely superficial relationship with code. By carefully scoping the complexity of AI-generated outputs and providing clear learning goals, the app creates a scaffold that supports both creative exploration and systematic skill development.
Get Started
Try the prototype now. You'll need an Anthropic or OpenAI API key to use the LLM features, but you can experiment with writing code by hand without one.
This is an early prototype. If you encounter bugs or have suggestions, please send me feedback—just email hello at thisdomain.
For Teachers
If you teach programming and you're interested in using Vibe Coding Instructor with your students, I'd love to hear from you. This tool is designed to work alongside teacher guidance and can be integrated into a project-based curriculum. Contact me to discuss possibilities.
Privacy
Vibe Coding Instructor runs entirely in your browser and does not collect or retain any personal information. Your API key is stored locally and never sent anywhere except to the model provider's API endpoints.