#473 – Vibe Coding and Critical Thinking Skills

#473 — Vibe Coding and Critical Thinking Skills

AVID Open Access
12 min

Transcript

The following transcript was automatically generated from the podcast audio by generative artificial intelligence.  Because of the automated nature of the process, this transcript may include unintended transcription and mechanical errors.

Paul Beckermann 0:00 Welcome to Tech Talk for Teachers. I’m your host, Paul Beckermann.

Transition Music with Rena’s Children 0:05 Check it out. Check it out. Check it out. What’s in the toolkit? Check it out.

Paul Beckermann 0:16 The topic of today’s episode is vibe coding and critical thinking skills. I’ve been noticing a couple of trends in the literature I’ve been reading lately. One is the call for a renewed focus on helping students develop critical thinking skills. This is often referenced in conjunction with conversations about the impact that AI is having, or will have, on the labor market, as well as the acknowledgment that AI will likely change how many jobs look and feel in the future.

Those stories often predict a change in which specific skills may be needed to land those jobs. One cluster of skills that most people seem to agree will continue to be sought after are critical thinking skills. Critical thinking skills are key components of computational thinking, which is heavily used in coding and computer science. Computational thinking includes a subset of four key skills:

1. Decomposition, or the ability to break down a large, complex problem into smaller parts.
2. Pattern recognition, identifying patterns or similarities in that larger problem.
3. Abstraction, the ability to focus on essential components in a larger, more complicated whole—really, to zoom in.
4. Algorithmic thinking, the ability to develop step-by-step instructions.

When students learn this subset of skills, they’re establishing a really strong foundation that applies to many other problem-solving situations and, in turn, potential future careers. The second topic I’ve been hearing referenced a lot is something called “vibe coding”. Vibe coding is a new approach to software development that relies on AI large language models, or LLMs, to write the code based on natural language prompts.

In other words, vibe coding means that people who don’t know how to code are creating computer applications by simply describing what they want to build. Specifically, they input their descriptions into an AI chatbot and then let the chatbot write the code for them. Instead of focusing on writing long strings of code, vibe coders focus on clear descriptions of what they want and then follow up with prompts asking the chatbot to iterate the output until it meets their needs.

Both of these topics—the need for critical thinking skills and vibe coding—can work seamlessly together in our K-12 classrooms. When we merge these two trends into our lesson planning, we can help to prepare students for this rapidly changing, AI-supercharged world that they’ll be entering upon graduation. If you think about it, in order to vibe code, students will need to break down problems and design potential solutions to those problems. They’ll need to think algorithmically, step-by-step, in order to accurately describe the product they envision. They’ll also need to repeatedly assess, analyze, and iterate in order to get the best possible output.

These are really important, transferable skills for our students to develop. So, in today’s episode, I’d like to describe how this merger of vibe coding and critical thinking might look in your classroom.

Step One: Ideation. The first step doesn’t even require a computer. Rather, it involves planning and getting an 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. Or you could start with something more universal, like interactive flashcards 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, then they can 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 its parts and determine where they could benefit from the help of an app. One quick bonus tip: 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. Now that students know what they want, 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 it 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.

Let me use an example to illustrate what this might look like, and students can even outline it in the prompt box:

• 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: Prompt students by asking questions rather than giving them specific plot summaries. 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.

Again, this is one example, and you could use any other prompt structure that you like instead.

Step Three: Generating the first iteration. For this step, students will need an AI tool. While there are specialized tools created for the practice of vibe coding, I’m going to bypass the more complicated options and choose one that is free and likely accessible in most schools: Google AI Studio. Google AI Studio is powered by Google’s Gemini generative AI, and it 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. If students don’t have access to Gemini AI Studio, another great choice is the AI code generator that’s built into Canva, which is also available for free.

For this example, we’ll focus on AI Studio. Once students have access to AI Studio, they will take their finished prompt and enter that 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. That’s 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.

Step Four: Refine the app through iteration. This is a really key step in the process and 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 do?
• 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 chatbox. 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.

Paul Beckermann 7:58 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 his or her own details based on your questions”. Students will see the AI noting its own thinking. For example, in this case, 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.

Once again, students should 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 what’s under the hood. Also, in the bottom right corner, coding errors are flagged as part of their iteration. Students could be taught to copy an error message into the follow-up chatbot 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 and what did not? How might they improve the process 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 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, but rather assess the process. That’s where the true value lies.

To learn more about today’s topic and explore other free resources, visit avidopenaccess.org. Specifically, I encourage you to check out the article collection, “AI in the K-12 Classroom,” and, of course, be sure to join Rena Winston and me every Wednesday for our full-length podcast, Unpacking Education, where we are joined by exceptional guests and explore education topics that are important to you. Thanks for listening. Take care, and thanks for all you do. You make a difference.