Exercise: Prototyping with Agent Mode

As we’re approaching the end of the course, we’re going to think about how generative AI will influence complex workflows. This is an opportunity to prototype a complicated project for the web: think about what would be useful, and iterate through the process.

Iterating Your Design

For this exercise, iteration is key. Try breaking up your project into small, concrete prompts, and use Visual Studio Code’s Agent Mode for each step. Run the live preview as you go - this is a good way to check and see if anything has been broken as you iterate, and you can use the “discard” option to quickly remove edits that didn’t fit your goals.

As you build in agent mode, or “vibe code” as the tech industry has currently labeled it, consider:

• Identify and clarify the project. How would you have approached this project before the workshop, and how has your workflow changed? What aspects of the project have a critical dependence on human expertise, and what pieces might benefit from using an iterative process using generative AI?
• Look for resources to supplement procedural elements. If your project involves web development, software applications, hardware interfaces, or other technology, think about how you would approach those aspects. Try to identify specific tools or languages that are relevant, and ask for specific implementations to test the capacity of the model to handle your goals.
• Modify and add your own elements. Think about where agent mode can help you more rapidly identify areas to add your content, concepts, and design, and where it gets in the way of realizing your goals.

Use a dedicated GitHub repository for each project - remember to take advantage of version control to save working versions of your code before trying dramatic changes. One advantage of this way of working is the speed with which an idea can be prototyped and discarded, so don’t be afraid to start over if something is becoming frustrating.