Hey there! This is a 🔒 subscriber-only edition of AI First Designer (by ADPList) 🔒, to help designers transition into successful AI-First builders. Members get access to proven strategies, frameworks, and playbooks.
For more: Unlock your career as an AI-First Designer | Get free 1:1 mentorship | Claim 1 month free Perplexity Pro + Comet Browser
Friends,
Today, I’m excited to introduce a unique edition of AI First Designer: a special guest post by Stu Green—designer, entrepreneur, and SaaS founder who brings the energy and wisdom of a true creator at the intersection of design and technology.
Stu has spent months experimenting with Vibe Coding—the art of the rapid prototyping using AI-powered tools. In this subscriber-only piece, he’ll walk you through why designers hold a new kind of power in today’s AI-driven era, and how you can leverage your creative instincts to build products that go beyond bland, engineering-driven outputs.
You’ll get:
A crash course in “Vibe Coding” and why emotion is your edge over machines
Step-by-step guidance on merging design thinking with AI to ship functional, beautiful products fast
Real prompts, practical workflow, and “Vibe Hacks” for rapid iteration and prototyping
Inspiration—and tactical advice—from someone who’s built a $20K/month SaaS business while staying rooted in great design
Whether you’re new to AI tools or looking to level up your product-building game, Stu gives you an inside look at how to translate “designer vibes” into living, breathing applications. Get ready to reimagine your process—and discover how creativity, intuition, and logic are converging in this new wave.
You can follow Stu Green on X.
How to vibe code as a designer? Read on 👇
I believe that we, designers, have an edge when it comes to AI-driven product building. You may not believe it, but you are special!
Why? Because right now, everyone who has access to the Internet is out there building the apps they’ve always dreamed of making, for free. And they are all using the same AI tools.
Guess where those AI tools got their learning data from? You!
What sets us apart is that the first part of our process involves emotion, and that is what makes us different from machines. Emotion is the foundation for any design or UX project. Every part of the UI, the interactions, the color palette, they all come from an emotion, and they invoke emotions. These emotions create empathy, which ultimately leads to sales. That is why you get hired.
Vibe Coding (or Vibe Designing as I like to call it), is this new hybrid skill that merges your design intuition with AI’s execution speed. In this article I want to give you a crash course into how to use AI to become an expert Vibe Coder that has an edge above everyone else.
So where will tonight take you? (read on and I’ll explain…)
Please note: this article was completely written by hand, by a human! Typos and bad grammer are left in!
The Traditional Approach to Vibe Coding
Most AI-generated products will fall short because they start from engineering lead requirements, not from feel. Designers work differently from engineers, we start from emotion, from the experience we want the user to have.
A simple engineering-lead prompt will look something like this:
Build an event booking platform called “EventsVibe”.
It must have the following features:
- User authentication (login/signup)
- Event listing page with search and filter functionality
- Individual event detail pages
- Shopping cart for ticket purchases
- Checkout flow with payment integration
- Admin dashboard for event management
- Database schema for users, events, tickets, and orders
- RESTful API endpoints
- Responsive design using Bootstrap
- Form validation on all inputs
Technical requirements:
- React frontend
- Node.js/Express backend
- PostgreSQL database
- Stripe for payments
- JWT authenticationIf you want you could ask the LLM to build you a Product Requirements Document (PRD) based on that initial prompt, that would look something like this:
This will give the LLM explicit instruction on how to build your application. If you have the time, you could go through the PRD line by line and check it’s inline with what you want, or you could just “vibe it”.
Most product builders will create a task list for you automatically, so you can see the progress the agent makes as it vibes your app.
Once you approve the plan, the LLM will start building out your application based on what it knows; what it has learnt. The LLM will spit out something that is functional, but will be beige, bland and will rarely feel good. This is where designers come in and bring their edge.
As I mentioned before, your job is to inject the human element into a product build process, regardless of whether you are using AI or not. So what exactly does that look like with regards to Vibe Coding?
The Designer’s Approach to Vibe Coding
Let me ask you a question. How do designers typically approach any project they are presented with?
They get a brief (the vibe), then they get inspiration and begin to flow with mood boards, sketches, pinning ideas and getting a ‘feel’ for the project. After that they will begin low fidelity mockups, and eventually high fidelity mockups in Figma before presenting to a client. That’s how I work anyway, or used to.
With Vibe Coding, you can bring that approach in the same way, but bringing your unique angle. You can just extend the traditional approach with this approach and take your aesthetic, UX and emotional instincts and feed them directly into the LLM to bring life.
Now open a tool like Lovable, Replit or just go straight to the LLM (e.g. using Cursor, or Claude.ai), and we will get Vibe Designing.
Your prompt would look more like this, taking the engineering prompt we created earlier, but adding more color:
Create an event booking platform that feels premium and confident, not
transactional.
We want User Experience to be at the forefront, where every interaction feels
well thought out, and provides the user with what they need in as few clicks
as possible.
VISUAL DIRECTION:
Reference: Airbnb’s clarity + Stripe’s restraint + Linear’s precision
High-quality photography, generous whitespace, deliberate interactions.
Inspiration links:
https://dribbble.com/shots/25551949-Real-Estate-Web-Design
https://dribbble.com/shots/25585528-Event-Booking-App
https://dribbble.com/shots/25840939-Live-Entertainment-Website
COLOR PALETTE:
Dark navy (#0F172A) primary
Purple (#A855F7) for actions and accents
Neutral grays for hierarchy
High contrast, easy to scan
TYPOGRAPHY:
Clean sans-serif, well-spaced
Headlines are large and confident
Body text prioritizes readability over density
PAGES:
