The best design workflow for vibe coders !!

@thisguyvibecodes

1.1K followers · usually 1.5K views a post

Views

5.4K

Likes

397

Comments

15

Shares

28

Selling · SaaS › Other SaaS

Reporiaseen in 2 videos →

Why it worked

The video provides a clear, step-by-step breakdown of a design workflow using popular tools, appealing to creators and developers interested in aesthetic app design. The 'vibe coder' framing and the focus on a nostalgic app create a relatable and aspirational narrative.

Summary

The creator outlines their design workflow for a nostalgic memory app called Reporia, using Pinterest for inspiration, Figma Weave for asset generation, and Mobbin for UI/UX research. They showcase how these tools help create an integrated aesthetic and functional app.

Structure

1Introduction to the app and workflow
2Tool 1: Pinterest for inspiration
3Tool 2: Figma Weave for asset generation
4Tool 3: Mobbin for UI/UX research
5Showcasing the app's onboarding and paywall
6Creator's introduction and call to follow

Product placement

Pinterest: Acts - used for curating content and nailing the look of an app. Removing it would change the inspiration gathering step. Mobbin: Acts - used for researching UI/UX flows and generating custom assets for an app. Removing it would change the asset generation and UI research steps. Figma Weave: Acts - used for asset generation, specifically image and video generation on an infinite canvas. Removing it would change the asset generation step. Reporia: Acts - the app being designed and developed. Removing it would change the entire video's subject.

Original caption

Designing an app as a vibe coder (devlog 12 ☁️☁️) #devlog #buildinpublic #claude #vibecoding

More from @thisguyvibecodes

Their other posts in the index, biggest breakout first.

Call to action

Start my free week

On-screen text

The best design workflow for vibe coders !! 1. Pinterest 2. Figma Weave 3. Mobbin Design workflow 1. ??? 2. ??? 3. ??? Creating aesthetic apps with taste and patience in 3 steps Tool #1 Pinterest the perfect tool for inspiration Tool #2 Figma Weave the perfect tool for asset generation Reporia Moodboard Figma Weave mood board Tool #3 Mobbin the perfect tool for researching UI/UX flows Mobbin MCP Mobbin MCP Mobbin MCP Onboarding 01 Onboarding 07 Free Trial Paywall Your first week is on us. The whole keepsake, open for seven days. Stickers, macros, AI chat, and film looks. Yearly save 29% Monthly Today. Unlock everything. Every feature opens up, from food macros to the AI that finds your memories. Day 5. A little nudge. We will remind you two days before your week is up. Day 7. Your trial ends. Billed $85 on July 4, unless you cancel first. Cancel anytime. 7 days free, then $85 a year. That is $7.08 a month. Start my free week No charge today. Cancel anytime in Settings. Terms Privacy Devlog DAY 12 Follow Along @thisguyvibecodes

Transcript

How do I design an app as a vibe coder? For the past week, I've been designing a nostalgic memory app called Reporia and I've refined my design workflow along the way. Here are all the tools that I used to create my nostalgic memory app. The first tool that I've been using is Pinterest. Pinterest is great for curating content and for nailing the look that you want. For Reporia specifically, I'm trying to create an artistic and a nostalgic feeling that's integrated throughout the whole app. And so I grabbed all the things that I thought would be helpful for my app and I moved on to the next step. The second tool that I've been using is Figma Weave. Figma Weave is an image and video gen that uses an infinite canvas. So I basically just imported all the things from Pinterest, put it into my Figma Weave mood board and I use those assets to generate custom assets for my app, Reporia. Lastly, I use Mobbin and its MCP to finish creating the rough draft of my app. Mobbin is a website that stores a bunch of popular UI flows from popular apps and websites, but they also have an MCP where you can tell your AI agent to go and fetch UI flows that you can use it for your app. I use this in Cloud code to go and fetch onboarding and other UI flows that I can use it for my app and finish the designs that you see here. My name is Branden and I'm documenting my life as a solo developer and sharing the advice that I'm learning along the way. So if you're interested, follow along.