• Open Doors
  • Posts
  • How to Start Vibe Coding as a Designer 🧑‍💻

How to Start Vibe Coding as a Designer 🧑‍💻

A hands-on look at how designers are using AI-powered tools to build and ship ideas—without needing to code

Together with

IntoUX

Hey and welcome back to another week! 👋

A little service note: I’m moving house the next two weeks! While that’s super exciting, that also means that my newsletter will have to run mostly on autopilot. I will send out issues both of these weeks as usual except for them not containing a portfolio review.

In this issue:

  • Why It’s Time to Explore Vibe Coding: Get ahead of most designers and start leveraging cutting-edge tooling.

  • You Don’t Have To Do It Alone: With IntoUX you are taking on the job hunt with the community.

  • Miggy’s Portfolio: One of the best executed portfolios I’ve seen in a while

🤝 TODAY’S PARTNER

Land your dream job by uncovering what makes you stand out.

😩 Job hunting sucks!
Especially when the rejections pile up, and AI makes you question if your skills even matter anymore.

🫂 But you’re not the only one feeling this way.
🤗 IntoUX.design is a small, friendly community of expat designers who are figuring it out together. Join workshops, work on fun projects, and help each other stay motivated while looking for a dream job.

🎯 Uncover what makes you stand out in the crowded market.
You’ll build an insight by chatting, comparing, and reflecting with others who are on the same ride. That confidence sneaks up on you -> until suddenly, you’re crushing interviews without overthinking.

Rebuild your confidence💪, get better at your design skill , and feel a little less alone in the process.💛 
Join the community now with the limited time 33% off offer.

Use the coupon at the checkout: 33OFF

How to Start Vibe Coding as a Designer 🧑‍💻 

A few weeks ago, I joined a weekend competition run by Lovable and built something I’m still proud of: a curated movie and TV collection for designers and creatives (see it live here). I didn’t win anything—but I shipped it in one weekend, and people liked it. The LinkedIn post I shared about the project even got some buzz. You can check the post out here.

I built this in roughly six hours on a weekend without writing a single line of code myself

Thing is, this wasn’t my first time. I’ve been exploring vibe coding long before it even had a name — building tools, plugins, and side projects using AI-assisted coding workflows. And now, it’s starting to show up at work, too. We’ve started adopting tools like Lovable on the job, and I’m already comfortable with them. Designers using tools like this to get to prototypes faster — or even ship real, usable code — isn’t hypothetical anymore. It’s happening. And if you get familiar with these tools now, you’ll be ready when your work starts shifting this way too.

If you’re still feeling a little lost about what vibe coding actually means, don’t worry — we’re going to break it down.

So, What Is Vibe Coding?

At its core, vibe coding is AI-assisted coding via prompts. You describe what you want to build, and the AI writes the code for you—or gets you 90% of the way there.

This used to be reserved for developers. Now? Designers are doing it too. And many of the tools are built specifically with us in mind.

There are three categories of tools you’ll come across:

  • Beginner-friendly builders like Lovable and Bolt let you build entire sites or apps with just prompts—and optionally some design references. These are great starting points for non-coders.

  • Dev-first tools like Cursor and Windsurf integrate AI into coding environments. They’re powerful—but better suited for those with at least some dev knowledge.

In Lovable you start out with a prompt—nothing more needed

Right now, most vibe coding happens on the web. You can technically vibe code a mobile app, but it’s a lot more fiddly and usually not worth the effort unless you’re already technical. So you might want to stick to web apps unless you already bring some technical knowledge or aren’t afraid of diving in head-first.

Why It Matters for Designers—Especially Juniors

For the first time, designers can build things that used to require a developer. This opens up a huge range of opportunities:

  • Build and launch your own portfolio site that you can host for free and without any tools attached.

  • Create functional prototypes that go way beyond Figma.

  • Test product ideas and build small tools or MVPs.

  • Launch your own micro-business or experiment with side projects.

And yes—people are using vibe coding to build real businesses. Designers are shipping functional MVPs, launching paywalled tools, and building in public.

This matters for juniors because it's a huge edge. While most job posts still don’t require these skills, some already do—and more are coming. In this previous article, we already talked about how hiring managers are starting to expect designers to integrate AI into their workflows.

You don’t have to become a coder. But if you can prototype something real and speak the language of building, you’ll instantly stand out—especially as a junior.

How to Get Started (Without Freaking Out)

If you’re excited but overwhelmed, you’re not alone. Here’s how to get into vibe coding—without getting scared off.

1. Pick a small project

Start simple. A landing page. Your portfolio. A web-based prototype of a fictional case study. You don’t need to start with an app that does everything. Keep the scope small and the goal clear.

2. Choose your tool

Here’s a quick guide:

  • Lovable – easiest to start with, prompt-based, can use image references, great for designers (you can also get double credits if you sign up through my link here)

  • Bolt – similar to Lovable, solid for visual site building

  • V0 – good for building and remixing interface components

  • Cursor – best for devs, AI-native coding editor

  • Windsurf – similar to Cursor, helps devs code faster

Try more than one. They’re often interchangeable. Don’t get locked into one platform. Most allow you to export code and switch if needed.

3. Make a plan with AI

Before you build, ask ChatGPT or Claude to help you plan the project. You can:

  • Break your idea down into steps

  • Get sample prompts for each part

  • Brainstorm features and structure

A plan for a part of a bigger project I’m working on broken down by ChatGPT so it’s approachable and much less overwhelming

This gives you clarity and makes prompting less intimidating. This is especially helpful if you really consider yourself to be non-technical and have never been involved in building an app before because you can learn a lot about how this type of work is structured which in return will be beneficial in any of your future roles as a designer.

4. Prompt in small chunks

Don’t dump everything into one prompt. Start with a single feature or screen. Iterate. That’s how you learn. It also saves you credits (if your tool uses them).

Break things down into features and iterations where possible.

5. Be visual and specific

If you want a certain look or feel, describe it—and show it. Lovable handles visual references especially well. Paste a screenshot or link a layout that inspires you. The closer your prompt is to your vision, the better the result. You can also use existing code components (e.g. from 21st.dev) by just copy-pasting the code from there and AI will take care of the rest.

How Juniors Can Use This to Stand Out

If you’re a junior designer, here’s how to apply vibe coding in ways that actually help your portfolio and applications.

Bring a case study to life

Take a fictional case study and rebuild it as a working prototype. This works best for web-based projects. If it’s a mobile app, consider reframing it as a mobile web app to make it work.

Build a personal project

Have an idea? Make a tool, website, or mini app for fun. Add it as a side project in your portfolio. It doesn’t have to be huge—just show initiative and creativity.

Show you're learning

Even small experiments count. Document what you’ve built. Mention what tools you’re using. You don’t have to master everything—just show that you’re learning and exploring.

TL;DR

  • I recently built a movie/TV collection site in a weekend using vibe coding (see it here)

  • Vibe coding = building with AI (no code required)

  • Tools like Lovable, Bolt, and V0 make this accessible for designers

  • Start small, prompt in steps, and give visual references

  • Use this to elevate case studies, build prototypes, and stand out

  • Hiring managers are already starting to expect AI literacy (more on that here)

Pro tip: If you’re using or want to try Lovable, this link gets you some free credits.

Vibe coding is a mindset shift. It’s about getting from idea to artifact—fast. And if you start now, you’ll be way ahead of the curve.

Let me know what you build.

🗞️ STAY ON TOP OF AI NEWS

Learn AI in 5 minutes a day

What’s the secret to staying ahead of the curve in the world of AI? Information. Luckily, you can join 1,000,000+ early adopters reading The Rundown AI — the free newsletter that makes you smarter on AI with just a 5-minute read per day.

👀 Portfolio Showcase

A beautifully crafted portfolio that sets a high bar for early-career designers

Miggy Fajardo’s portfolio is one of the most well-crafted and visually refined examples we’ve seen from a designer at this stage of their career.

Based in Phoenix, Arizona, Miggy brings a unique blend of design sensibility, storytelling precision, and visual clarity to everything he touches — whether it’s Dropbox-level production work or experimental tools for navigating orbital mechanics. That combination makes this a standout portfolio in every sense.

Let’s take a closer look at what Miggy’s doing especially well — and two small refinements that could take an already excellent portfolio even further.

That’s it for this week—thanks so much for the support! ♥️

If you’d like to support my efforts on Open Doors further you can buy me a coffee. If you ever got any value from my emails consider it so I can keep this newsletter free and available to everyone out there.

Do you want your own portfolio reviewed in-depth with a 30-minute advice-packed video review? Or do you require mentoring to figure out a proper strategy for your job search?

I got you!

Keep kicking doors open and see you next week!
- Florian