AI is impacting change throughout the education and employment landscapes. Part of that change is a renewed emphasis on helping students develop critical thinking skills.
AI has also prompted a new way to write code and develop apps: vibe coding. Vibe coding means creating computer applications by describing the output with natural language, rather than writing code. This approach makes app development accessible to those who don’t know how to write code. The coder describes the output, and the software builds the code.
Vibe coding has become a great way to introduce computer science skills to students while helping them develop critical thinking skills at the same time. In fact, computational thinking—a set of key computer science skills—involves a powerful subset of critical thinking skills:
- Decomposition: breaking down a large, complex problem into smaller parts
- Pattern Recognition: identifying patterns or similarities in a larger problem
- Abstraction: focusing on essential components in a larger, more complicated whole
- Algorithmic Thinking: developing step-by-step instructions
When students learn computational thinking, they’re establishing a really strong foundation that applies to many other problem-solving situations and, in turn, potential future careers.
Ideally, teachers look for ways to introduce vibe coding to their students as an avenue for helping them develop critical thinking skills while also exposing them to computer science.
A Six-Step Process
Detailed below is a six-step process example that can be used with students.
Step One: Ideate.
The first step doesn’t even require a computer. It involves planning and getting an initial idea. In this part of the process, students should be encouraged to brainstorm potential problems that can be solved with some sort of app. You might ask them to choose a problem that relates to your curriculum, like a science simulation or a story writing tutor. You could also start with something more universal, like interactive flash cards to help them study for a test, a way to prioritize to-do items, or a study game.
Once students identify a need or problem, they can then begin to imagine what the app might do to help them solve that problem or meet that need. This problem-solution thinking is a big part of critical thinking. They need to break down the bigger problem into parts and determine where they could benefit from the help of an app.
If you want students to also work on their collaboration skills, you can have them work through this process with a partner or a small team.
Step Two: Write a prompt.
Once students know what they want to achieve, they need to write an AI prompt that clearly describes the app that they want developed. In this step, they should use a good prompting structure. If they aren’t familiar with prompting strategies, it’s a great opportunity to teach this to them. It will be a life skill that they will undoubtedly use in the future.
One effective structure includes: Persona, Task, Output, Context and Constraints, and References. The following is an example of what this might look like. Students can draft their prompts in this outline format and paste the list into their chat bot:
- Persona: Act as a creative writing teacher.
- Task: Create an app to help your students develop engaging short story plots.
- Output: The final output should be an outline for a short story that follows the traditional story arc of exposition, inciting incident, rising action, climax, falling action, and resolution.
- Context and Constraints: Rather than giving students specific plot summaries, prompt them by asking questions. Provide multiple options for students to choose from based on those choices. Offer questions to prompt the next potential plot development idea. Continue until the story has been outlined.
- References: Students could upload details about a traditional story arc.
Step Three: Generate the first iteration.
For this step, students will need an AI tool. While there are specialized tools created for the practice of vibe coding, it’s helpful to begin by using options that are less complicated, free, and likely accessible in schools. An ideal choice is Google AI Studio.
Powered by Google’s Gemini generative AI, Google AI Studio features a familiar interface. It functions much like a typical chatbot would, and all of your prompt engineering strategies will work here. One unique aspect of Google AI Studio is that it features a “build” button on the right-hand side of the field where you enter your prompt. It’s perfect for vibe coding.
Students would take their finished prompt and enter it into the prompt field. They can attach the story arc details or other references, and then click the “build” button. This will prompt the AI to begin its work.
Students can watch the AI’s thinking process on the left portion of the screen. This is a great way to demystify what the AI is doing as it works. When it’s finished, a draft of the app will appear on the right side of the screen.
If students don’t have access to Google AI Studio, another potential option is Canva’s AI Code Generator, which is also available for free.
Step Four: Refine the app through iteration.
This is a really key step in the process and a place where students need to dig deep into their critical thinking toolkit. With their evaluation thinking caps firmly on their heads, they should test out the app and critically judge its effectiveness.
To scaffold this step, you could have the full class brainstorm the types of questions they should be asking throughout this process. They should be thinking critically about the best ways to evaluate their app. They might ask:
- Is the user interface intuitive?
- Did it do what I had hoped it would?
- Is the output usable?
- What didn’t work as intended?
- Did the app do too much of the thinking for me?
Based on the answers to these questions, the students would then iterate by typing follow-up suggestions and requests for changes into the chat box. In fact, the default placeholder language in Google’s AI Studio is: “Make changes, add new features, ask for anything.”
To maximize effectiveness, students should focus on one change per iteration.
As students enter their requests, they will see updates in the left-side panel as the AI summarizes what it’s doing. For instance, students might type in a request, such as, “Don’t allow users to simply choose an option and move on. Require them to add their own details based on your questions.”
Students will see the AI summarizing its own thinking. For example, when developing the writing assistant app, the AI reported that it was “refining design restrictions.” It followed with, “I’m currently focused on preventing students from skipping ahead in the plot architect by clicking options. My current approach involves populating input fields when an option is selected. This forces them to actively engage with the material.”
It follows that up with other details like implementing user input and developing user response mode. It can be really effective to have students read through these and reflect on the changes that are happening, asking things like, “Do I agree with the chatbot’s approach?” or “Would I suggest something different?”
When the chatbot is done with the process, it will generate a new version of the app.
Students should then repeat the process of assessing the output and requesting follow-up changes until they are satisfied with the results.
Students might even want to bring a friend from another group into the equation—someone who hasn’t seen the app yet—and have them test it out with a fresh perspective. Students can watch their friends interacting with the app and look for points of confusion or frustration. Based on this new insight, they can continue iterating and following up until they are completely satisfied with the results.
If you want to introduce students to the coding side of things—even just to expose them to the fact that the app only runs because of the coding underneath it—they can toggle from “Preview” to “Code View” and explore.
Also, in the bottom right corner, coding errors are flagged. As part of the iteration process, students can be taught to copy an error message into the chat box and ask the AI to repair the erroneous code. Even if they don’t understand the specifics of the code, it will introduce them to the process of debugging.
Step Five: Publish.
When they are completely satisfied with their product, students can publish and share their app. In the top-right corner of the screen, they will find a share icon. By clicking that, they can choose to publish the app and default to full-screen view when accessed. They can then copy the URL and share it with friends or the teacher.
Step Six: Reflect.
Reflection is a key part of the process. When the app has been finished and students have observed others’ reactions to it, they should step back and assess their work. What went well? What didn’t? How might they improve the process for next time? Ideally, this reflection should lead to setting new goals for subsequent problem-solving scenarios.
While the app they created can feel rewarding and exciting, the real value is the learning that is happening. By engaging in this design thinking process, students are working on developing key life skills, like expressing clear directions, testing their work, fixing mistakes, improving based on feedback, and explaining their choices. That’s real-world problem-solving.
In fact, you may decide that you’re not going to grade the final product at all and just assess the process instead, as that’s where the true value lies.
AVID Connections
This resource connects with the following components of the AVID College and Career Readiness Framework:
- Instruction
- Rigorous Academic Preparedness
- Opportunity Knowledge
- Student Agency
- Break Down Barriers
- Advocate for Students
Extend Your Learning
- Google AI Studio (Google)
- AI Code Generator (Canva)
- What Is Vibe Coding? (Google Cloud)
- Vibe Coding: The Future of AI-Powered Programming for K12 Students (FuturAI)