I have been exploring the latest generation of Generative AI tools in all of my roles: in teaching, my own learning, and in my work.
One of the most recent additions has been vibecoding – a process of generating code with natural language prompts.
Below is a log of experiments incorporating vibecoding in my learning, teaching, and future-casting work.
I deliberately highlight my work with accessible, web-based tools such as v0 or Lovable. These focus primarily on how things look (the frontend), rather than how they work (the backend).
This is perfect, as my intention is to create throwaway prototypes (not necessarily final, workable tech) to illustrate my vision and help the process.
For broader context on how can Generative AI change work and what it means for lawyers, explore Vibeworking and taste in law.
Vibecoding academic research
In Measuring What Matters: A Quality Rubric for Legal Q&A, Margaret Hagan summarises the research on delivering good legal advice with GenAI. The article outlines several key requirements for both acting on and reviewing AI generated legal advice.
After I read the article, it got me thinking how this would look in practice. So I used vibecoding to generate a preview from my notes and rough sketches. This helped me get a better grasp of the theoretical principles and gave a very specific roadmap for what the experience could look like.
The result was this accordion format that focuses on immediate, actionable advice, but allows experts to dive deeper and verify the law behind it.
Vibecoding legal tech solutions with my students
In my class Modern Lawyers, my students create legal technology and legal design prototypes.
Vibecoding has proven invaluable throughout the entire semester. As I teach at a law school, only a very small number of my students have had some coding or design experience prior to taking my class – but they have many ideas to express.
In the example below, we ideated what email could look like if optimized for legal use cases. This was still fairly early in the semester, so the purpose of this activity was to build something small and gain some creative confidence. We started by drawing an outline of the app as per the students’ ideas on a whiteboard.
Then, I took a photo of it, uploaded it, and within a few rounds of prompting I created a clickable prototype that we can test, discuss and explore further.
These tools have been such a huge enabler that four out of five student teams opted to use these tools for their final projects. Which brings me to the final experiment set.
Generating prototypes of what we’d like tech to look like
My final selection of experiments centers around imagining the future. There is a discipline of design called speculative design, where you create prototypes to illustrate possible futures that you can then test or discuss.
This can take many forms: from ideating the future of legal education in a workshop, generating images to form a storyboard for a design of legal service, or using vibecoding to illustrate what our requirements for legal tech can look like.
Vibecoding is incredible when it comes to imagining possibilities.
Just imagine: you say “as a lawyer, I need…” and then turn to vibecoding to turn it into a clickable prototype to illustrate your vision.
For example, below is a quick prototype of what would it look like if I could quickly switch between personas when explaining a legal concept.
My approach to legal design vibecoding
- My favorite start is to use my own sketches and wireframes, as I usually ideate best with pen and paper. That way I can have the layout quickly set without needing to prompt every single bit of it.
- Pro tip: do not use dotted paper, the tools sometimes pick it up and incorporate it in the design.
- Especially when envisioning a user journey, I would include a story or walkthrough of the service.
- If I need to demonstrate anything, I never use any confidential or even real data. Instead, I generate examples using other LLM tools and use them.
- I also use other LLM tools to improve my prompting – I usually don’t do that right in the vibecoding tools, because I do not wish anything generated until my intent is clear (unless I am just in a wild exploratory mode).
- Iterate and play! It is fairly hard to one-shot something, so make sure to follow up and chase that vision if you do not get there in a single round.
- You can also get inspiration from the tools’ prompting guides (v0, Lovable).
On a side note, while it is easier to get to something clickable, visually, there is a certain aesthetic of the vibecoded projects. This is perhaps less varied in the first iterations than sketching and mockups. Visual design requires extra attention, otherwise everything looks kind of similar (which makes me honestly pretty excited).
Final Provisions
Vibecoding can feel huge – there is just the chat window waiting for you to scream into the void exactly what vision you want to bring into the world from an array of infinite possibilities.
But as with any new tool, approaching it with an open mind and a playful attitude, you can define for yourself where it will add value to you.
Have you tried vibecoding? Let me know your favorite experiment!
Baru
