Vibecoding by Design

Looking for Magic

Walking the designer path comes (in its broadest sense) with never being able to answer the question: “Am I a tech person or an art person?”. The real magic of this field is that it brings both worlds together. And it is a huge part of why I am doing what I’m doing today.

In this article I want to share how this magic took place once again when I embarked on my first web portfolio project, the one you’re browsing right now, while experimenting with AI and vibecoding.

AI Tools and a Lucky Vibecoding Workshop

The start of the summer is always a time of turmoil in a university, and in the PoliMi design campus in Bovisa everyone was running around tired but wired to finish up the projects on which so many hours had been spent. On the other hand it is also peak portfolio season, and this year of course most of my friends and colleagues were experimenting with the latest AI tools such as Framer, Lovable, Base44 and so on. Those who know me can attest that I do not use AI lightly and I keep an analytical, or even critical (as in critical thinking), stance towards it; and of course this also means engaging with it and staying curious. As I once more approached the daunting task of redesigning my portfolio all over again, I knew that this year it was time for a website, thus in conversation with my colleagues I browsed and experimented with the different AI website builders and tools. They left me feeling quite overwhelmed and unsatisfied.

Luck has it that right then a series of events led me to attend a workshop on AI for Social Innovation led by Paul Hekkert and Derek Lomas that changed my perspective on how to tackle this challenge.

Derek introduced us to vibecoding via Claude Code used on the terminal by very much “throwing us in the water”. He shared (and applied) a very playful approach to AI rather than technical. Just try, mess around, have fun and be prepared to be in awe. A comment on this approach:

isn’t this the secret of being digital native? While our parents were cautiously looking at instruction manuals we were already messing with the television settings, without worrying that we could break it or cause irreparable damage.

I’ll admit at first I was uncomfortable given the current sociopolitical climate because I felt it wasn’t the most responsible and ethical approach to AI, especially when Derek typed on my terminal:

— dangerously-skip-permissions

😬😬😬

But as both the experience and his explanations sank in, I started seeing the value of this approach. I strongly believe that technology should never be treated as a magical blackbox but rather as a physical artifact that we do have agency and control over, that we learn how to shape, that we can break and then fix again. I dream of a future where we all are tinkerers and makers, especially when it comes to AI adoption. And maybe a playful attitude can make approaching this technology less daunting for many people who otherwise wouldn’t have the mean to access it through a “technical” understanding. Or even better can be the doorway to then build this understanding along the way.

The Unreachable World of Developers

Personally I have always been interested in the world of computer science, but never quite deep dived in it. I took some basic html and C++ classes in high-school, then experimented very little with Arduino, when I was studying physics I started using the terminal and some Phyton in the lab class, later on I enrolled to a Linux class I never actually attended, then I followed all starry eyed and full of good intentions the summer’s cyberdecks trends… Long story short, it’s not an inaccessible world, but one that at this time in my life I don’t really have reasons and resources to actually land on.

After this workshop I was still unsatisfied with AI web builders (I’m sure they are great tools, but personally they don’t really “vibe” with me) but I was more confident in using AI in a more “techy” fashion. So I had an idea, or rather a wish. I wanted to try and build my website from scratch, having absolutely no idea how to.

So basically I asked Claude something like: ok teach me how to make a website absolutely from scratch, how and with which tool and trace me a path that is going to help me learn new skills and knowledge along the way.

Thus I started “designing the code” of my website.

I will now try and describe the process as best as I can for anyone who might want to try and do the same, but a word of warning: this is a highly experimental approach, you will not know what you are doing most of the time, to see the final results you have to stick with uncertainty for a little bit.

The Process of Designing the Code - My Take on Vibecoding

First of all, the backbone of my project rests on Astro: a web framework that combines all sorts of different languages and libraries all at once in a very convenient and intuitive structure. Instead of creating my project and code from nothing, I browsed the open-source templates library available directly on Astro’s website. (Side note: the open-source movement is amazing and really makes experimenting with tech accessible.) I chose a template (Self Esteem by Miro Durana) and copied the project locally on my laptop, then I downloaded Visual Studio Code and started exploring the folders, the website structure and the code. Some patterns are immediately clear, you can tell right away for instance what is a title, an image, a paragraph etc… All together was at first a little overwhelming but then the magic happened when I learned how to run the website locally.

And just like that I can see my website in real time as I make the changes to the code on Visual Studio. Now I start playing: changing things, messing around, familiarizing myself with the structure of the pages, the components etc… Without reading a manual first but simply trying and looking at what changes.

How does vibecoding enters the pictures? Well messing around with an open source template is a good start and you can find amazing resources online, but as a designer what I really wish for is to find the same freedom that I can have on Figma, Illustrator or, even better, on a white piece of paper. So I go to Claude and describe what I would like to add or change (you can try also directly with a screen design or a sketch), it spits out a few lines of code and I just copy and paste it and try it out directly locally. I mess with it until it’s the way I want it, I ask Claude again for clarification or changes if necessary.

This is the key for me; I can have full creative freedom and control while exploring and learning. I can always adjust the level of diy that I want: sometimes I ask for full detailed explanations, but other times I just want it done, most of the time it is something in the middle. And I am having a lot of fun in the process.

The next step in putting a live, viable, website out there is to create a Github account, connect it to your terminal, and then learn about git. Afterwards you link your new git project to Vercel and voila, the portfolio is online. Last detail: connecting to Cloudflare to use my personal domain instead of Vercel’s preset.

Notes

To be noted: AI is not simplifying the overall task or making it faster at all. I’m sure I’ve taken longer than I would have using WordPress, but I am extending my reach to activities that otherwise I would not have been able to access at all. A few months ago I attended a talk by Roberto Verganti on how AI will change the future of Creative Work and it really struck me his idea that AI will open up many fields and activities to people that before were not included in them at all. He made a parallelism with what happened with electronic music: many producers today don’t know how to play any instruments and still they are making music and bringing innovation to the field. While I was working on this project I had a glimpse of that vision. It is true that I could have learned how to code at any point now or in the future, but would I have actually done it? Or would I have continued to miss out gravitating outside of this world? This being said I am of course still an outsider. I don’t claim any solid knowledge on software development and I’m sure my website has large room for improvement (hopefully nothing disastrous). But still, now I am at least peeping above the hedge. And, potentially, I’m a little closer to understanding some of it.

A few more notes for anyone who might want to try themselves.

To keep the workflow consistent, faster and organized, with better responses from Claude I created a dedicated project folder where I updated some key instructions and references.

The Developers Tools (f12) are great to test different designs directly on the local website without making any permanent changes to the actual saved code files, you can view and modify the html code. It is also useful to explore other reference website, analyze the structure and the code to take inspiration.

And that is the process of how mariazerbola.com has taken shape.

Exchanges!

This has been an incredibly fun project that I hope to keep working on and improving as my career and my life evolve. As I said, I am sure that I have made plenty of mistakes along the way, and I am very conscious of the limit of AI: it is just a tool that we can either learn to use to truly expand our opportunities, or that can grow in us the illusion unlimited productivity.

If anyone who is reading actually knows how to develop websites and wants to give me some feedback, that would be greatly appreciated. You can check out the repo on Github. Likewise if you want to try and do something similar feel free to make a copy of my project on Github and start from there, also reach out to ask or discuss anything at all!

Thank you if you’ve made it this far, this article is AI-free original content handwritten by yours truly.