I decided to do something crazy—and I built this thing in 48 hours.
Hopefully, I pulled you in with that big number in the title—and it is real. Here are the numbers
But it isn’t magic. It’s just a really good research, design, and dev process. And I’m going to show you the whole thing from start to finish.
🛠️ Background: Building the Hard Way
I’ve built a few SaaS products (5 to be exact) the old-fashioned way—handcoded. Some were super successful and some were absolute flops. But either way, to design and dev properly, it took months. And as a non-coder, I could never do it without the help of engineers.
Thanks to AI and vibe-coding that has completely changed and it opened up my eyes to new ways I can solve old problems—and what I can actually build all by myself.
Step 1: Have A Compelling Problem
I've taught hundreds of students in my product design course, and so many of them were facing the same problem – They didn't know how to frame their experience and tell really compelling stories about their UX/UI skills. So, whether that was in their case studies or during interviews, a lot of them had been rejected or ghosted or just didn't even feel confident enough to apply. So, that was the problem I was trying to solve.
💡Takeaway: You need to have a compelling problem that a lot of folks you've actually talked to are experiencing.
Step 2: Gather The Data
For years, I worked with my students one-on-one in the course, helping them write better stories and case studies. Talking to recruiters and hiring managers, figuring out what worked for them. So, I had a lot of data to work with.
💡 Takeaway: You need data. The more qualitative and quantitative data you can gather and analyze, the better.
Step 3: Validating the Idea
I knew the problems and the players well, but my one-to-one was kind of capping out. I wanted to empower students to be able to do this themselves. So I decided to make an internal tool for this. I created this Notion self-assessment where my students could fill in their skill stories on their own, and it would help them come up with a personal value proposition that they could then use to get hired and to interview and they loved it!
💡 Takeway: You need to see people using some version of your solution so that you can see how they use it and if it's actually solving the problem in some way. Keep it simple and low-effort.
Step 4: Testing the Market
After tweaking and refining this with their feedback, I decided to release it to the public and I could not believe it, but it sold over 816 times, which generated around 10K in revenue. You can grab a copy of this if you want to check it out, too.
💡 Takeaway: You need to get people to open their wallets for the solution. If they aren't paying, then it's just a nice-to-have, and it's not a viable business.
The Realization
I love using this Notion template, but it’s always been a little manual and clunky and not everyone liked using Notion and I always dreamed of making it better, more platform agnostic and interactive. I just didn’t have the coding skills or time to build something.
I was over at the Replit offices at Andresearn Horowitz in San Fransico, I got to witness one of the coolest AI tools I’d ever seen - in essence, it's an entire AI engineering team at your fingertips 😳
This is when I saw my chance to turn this notion template into a real app.
And I decided to do just that...in 48hrs.
🗓️ Day 1: Research and Design
We've got 24 hours to start off. So, let's go!
Research
I created a custom workspace for Notion that helps me organize and analyze all of my data. I can add interview transcriptions and business models, I've got persona templates and user journey maps all in here. It's been perfected with my students over 6 years and is a favorite of UX/UI and Product Designers everywhere - you can grab your copy here!
With my Notion workspace all set, the first thing I'm going to do is have ChatGPT help me fill in these different sections. I need a research plan to kick this off. Again, I have a lot of data, so I'm going to be using most of that, but I'm going to have ChatGPT help me write the research plan.
I made a project in ChatGPT for the product so it already had all of the context of the things I'm asking it for.
Here is the research plan. I want it to be compatible with FigJam AI because that's what I'm going to be using to analyze and synthesize all this data.
Here is the problem statement:
"Creative professionals applying for jobs often struggle to articulate their relevant skills and accomplishments in a structured, compelling way. Skillshot helps them reverse-engineer, job descriptions to create impactful portfolio stories based on their experience."
Perfect.
Now, I want to understand how users are currently solving this problem so I can validate the usefulness of turning job descriptions into tailored stories. I want to identify common pain points and gather common language and patterns and keywords and things that are associated with this so we can create a very specific user experience flow.
So we've got our target audience, some research methods and it's now advising us to conduct user interviews, surveys, competitive analysis, usability testing later, and some of the key questions that we need to answer here. This is really helpful.
I also have a persona here in Notion based on the students and customers that have used the MVP.
Over in Figjam, I'm going to take the interviews I've collected with students and paste the transcripts right onto a sticky.
Then, I'm going to come down to this toolbar at the bottom and drag in a Jambot.
Jambot is the AI tool that lets me converse with these stickies. Right now, I want it to summarize this so I'm just going to connect this sticky to this summarize chatbot.
That was really fast. It's saying that this person:
📌 Used a Notion skills assessment to reflect on past projects and map out skills for a new role.
📌 They like the way it was structured. It helped them identify transferable skills. 📌 Confusing that it was isolated without guidance on how to connect the skills to the job description.
I can now continue asking these questions, I can go down a Rabbithole and it tells me:
📌 To effectively connect your skills to job descriptions, it can be helpful to break down the job requirements into specific skills. Then match these with your own skills and experiences by providing examples that demonstrate how you meet those requirements.
This is along the same lines of how I wanted to improve the user flow.
You can just keep having fun with this, keep analyzing this in different ways by dragging in another Jambot.
Now it's showing me what they liked, desired features, and recommendations. I can even take all of these individual items and I can put them into stickies and continue chatting with them. This is going to become the foundation for my features.
Feature Planning
Next, I want to create some user stories for the app so that I know what I need each feature to accomplish and each element and component on the screen. For that, I'm going to ask ChatGPT to give me the user stories for this app.
Based on the product requirements doc, it came up with a couple of Epics. So, the first Epic is the Job Description Capture. That's kind of the first big feature or flow that we need to work on. It says,
Epic 1: As a designer, I want to paste a job post link so that Skillshot can analyze its requirements. I want to cue up to five links so that I can compare skills. I want visual feedback letting me know that when a post is processed, it's, you know, complete or being analyzed or whatever it is. And I want to remove an unwanted link so that it doesn't affect my analysis.
Then we have Epic 2, which is the skills part, Epic 3, is the story creation and then Epic 4, which is progress and motivation.
There are these different flows and segments each with very different needs and we're just going to take it one at a time and get into Figma and start wireframing.
Visual Inspiration
One of the first places I'm going to go is over to my favorite resource called Mobbin. This let's me see design patterns from all of the world's best apps. I can see how others have approached similar UX problems and what UI patterns they've used. And I can search by UI element. I can search by entire flows. This is by far the place that I visit the most for getting inspiration and helping me come up with my first ideas and wireframes.
I'm going to search for 'skills' and look through some different learning apps and habit tracking apps. And this one has some interesting tags that I could probably pull from. I like that it allows me to copy this frame and drop it into Figma as well, so I can create a mood board.
Wireframes
To save time, I want to use an existing component library and also because I want something that's already been tested for accessibility and uses Tailwind.
I have just made a very simple component here using ShadCN. It's a card component following those user stories in that first Epic and I'm making sure to use good design patterns and practices, proper grouping and hierarchy. This is actually quite easy using the ShadCN component library that I've chosen (I also did a deep dive about ShadCN here), as it has typography set and spacing already set for me.
These elements are going to be placeholders, so we don't need to get too detailed on these screens. Mainly, what I'm thinking about is the user's mental model and how much of what's under the hood I need to show. Do they need to see everything? Are they a pro power user or is something really simple that leads them from step to step?
After testing this prototype with some users, I actually found that they get a little bit stuck here, trying to come up with a story because there is no format. There's no prompt or guidelines, so they tend to draw a blank and that's something that was happening in the Notion templates too, because it was just very open-ended. So I want some more fields here.
Now, I can continue to design all of the other screens, but I'm a little short on time. So, what I'd like to do is actually have AI help me out more. So, I want to jump right into Replit and see what it comes up with now that we have the gist of it and we have our main screen.
It's been a long day. I'm spent. I'm going to stop here for today and pick back up tomorrow and jump into the actual building.
🗓️ Day 2 - Building and Deploying
Importing Figma Designs into Replit
Here we are inside of Replit. This is the screen where you can use natural language to ask it to create an app. We are going to start with our Figma designs.
We’re going to click on import code or design and then select Figma design. You’re going to need to connect your Figma account. I'm going to do that and click 'Allow Access'. Great. We're connected. It was that fast.
Now all we need to do to convert our designs is paste the URL. We're going to select the frame we want to build and paste that frame in. I've got some of my screens here in Figma. Here is the general flow. I'm going to start with this one in the middle that has most of the components clearly shown. Then I'm going to come up here to share and copy the link to this frame and this frame only.
Now I'm back in Replit. I have my URL and I'm going to paste it here. I have this on private for now. I'm going to click import from Figma. It's getting those designs. It's now generating the code and handing off to the agent.
The agent is working on it. Now it is creating the full-stack application and all of the code scaffolding. It's installing dependencies. These are all of the files it’s created and it is explaining what it’s doing as it goes along.
Tweaking the Design with Replit Agent
Here we have it! A few things are not exactly like my design and we have a couple of options we can use to fix it. First, we can talk to Replit Agent and ask it how to help us fix this.
Agent tells us we can upload another file, such as attaching an image. We can also click on 'Select', which allows us to see this as a visual editor, like a no-code editor.
If I click on an element in this div, I can look at it and say there's padding here. I'll bump that up a bit, maybe to about 20 pixels, and then save changes. That looks great.
What I'm going to try to do now is say that I would like more space at the top and bottom. I'm going to upload a screenshot of that frame.
It says, I can see that you want more vertical spacing. I can see the cards need more padding at the top and bottom. Let me update things.
There we go. It's added more padding. That looks close enough. It's letting me know that I can roll back the changes if I don't like them. I can review the code changes that were made here.
One thing I noticed was that it was giving me a solid background that was white instead of my gradient. I asked it to go ahead and add that gradient in. I uploaded a picture of it to make sure it could see it, and it went ahead and did that for me.
Adding a Database
Let's continue building. The next thing is that I can add is a database. I need to do this because I want to be able to start building the real functionality of this app.
Now it's getting to work building our database. We can take a peek at this and see what it's creating.
It's creating the schema, setting up tables, and testing to make sure everything is working correctly.
This is crazy compared to the amount of manual work this would take to set all of this up. There we go. Our application is now ready with full database functionality while maintaining the same interface and user experience.
Writing a Product Requirements Document (PRD)
Now that some of the visual stuff is sorted out and we have the database set up, I need to focus on the user experience. For this, I'm going to have ChatGPT help me.
In ChatGPT, I have a project where I've been working on my research and planning. I'm going to ask it to write me a PRD for Replit so I can build this app with the functionality, user experience and database all connected.
The product requirements document is what I'm going to use to help guide our design and development decisions.
Now, I'm going to give this PRD to Replit by copying and pasting it into the Agent. It's going to start updating these cards, adding core functionality.
Six minutes later, Agent has built the complete skills analysis interface with the priority badges and the coverage tracking. It has the STAR format forms for comprehensive skill storytelling. It's added the navigation.
Building Skills Analysis Functionality
We have our job postings working. Now we're want to be able to click the buttin to analyze common skills.
It's added these two buttons here for story builder and skill analysis. This isn't exactly the user experience that I have in mind. It's not flowing to the next screen. We'll work on that design in a minute, but right now I just want to test the functionality of this to make sure it all works.
Let's try skills analysis and see what happens. It didn't show me any of the skills that were extracted from those job postings. And when I click this, it takes me back to this screen.
We're going to fix that. I'm also going to share with it the other screen that I designed in Figma so that it looks more cohesive. I'm letting it know that I was expecting to see this screen as it mentioned here in the skills analysis.
This is what vibe coding is. Doing one thing and fixing one problem at a time until you get it to match the exact vision you had in Figma. That's what I love about Replit. The way you can do it from any starting point, just like working with a developer or engineering team.
It says it has extracted the skills. Let's see what those skills are. There we have it. It's showing these skills. It says that for user experience design, this is a high priority skill because five out of four jobs have this.
That's strange, right? How can it be five out of four? We'll go with that for now.
Tweaking the User Experience with Replit Agent
I want to quickly clean this up. I want to remove these buttons and add a top-level navigation for our three main areas. I'm going to chat with Agent back and forth until we get this design nailed down.
We've got a pretty good app going. I need to walk through some of the user experience things and do some tweaking.
Let's start from the top. We've got our two jobs in. We're going to click analyze. This little snack message lets us know that it worked. It takes us to the skills page and it's showing us our high-priority jobs and we can add a story.
If I click Add a story here, it takes me to the story builder. That's not what I want. I'm going to say that after I click Add story, I want it to open the story form with the priority story tag pre-selected for that skill.
About a minute of work later, it seems to have worked through its issues. I'm going to click on this one. Now it works. It opens the form with that related skill tag selected.
That's exactly what we wanted. The rest of the skills are down here. We can keep adding to this. Perfect.
Building Progress Functionality
I'm on to the final Epic. I want to show that overall progress bar so we can do more things with it—maybe generate what I want to call a skills snapshot or a PDF users can download.
I'm going to ask it to add that. I have my design in Figma with a simple progress bar. It's going to show how many overall stories of high-priority skills you have, how many are left, and your overall percentage of completion.
I've exported that image, and I'm going to upload it here. Now it's got to do some math, because it needs to know what's the max amount of stories for this bar to be considered 100% complete. Then it has to track how many tags you have. It needs to know if you have the three recommended tags for Figma, for user experience, etc.
It's going to figure that out for us—all of the logic and the conditionals. I love it. Dropped it in there. It even changed it to a gradient.
It's exciting. It's not just a prototype. This is the real functional app. Now if we come over here, let's go ahead and add another prototyping skill. And just like that the progress bar increased. We've got more stories!
Final Screens
I want to update the screen so that when the progress bar is completely filled, it disappears and is replaced with a button that takes users to their skills snapshot screen. Back in Replit, I told it to do exactly that—show the button once the bar reaches 100%.
It worked beautifully. The final screen was generated to show a overview of your Job Readiness, Skill, Stories totals, Mastery and some Export and Share options
Adding PDF Functionality
I decided I wanted to add one more feature, which is the ability to Export your Skills Stories to a PDF. I've asked Replit to do this (not knowing if it was even possible) but in a matter of seconds it started adding a PDF library to handle this.
About a minute later, it's done! Now, when we click the button, we see a summary of all our stories. If we click download, it generates a PDF.
Deploying The App
Now for the final step: deployment—so you can actually use this app.
At the top of the Replit dashboard, there's a “ready to share with the world” button. I clicked deploy.
There are a few deployment options. We can publish a stable public version, and it recommends autoscale. There's a tutorial for more detail, but I’m going with the default recommendation.
It also suggests running a security scan, which I did.
It found one issue—a vulnerability in a JSON package. I clicked "fix with agent," and it resolved it immediately.
With that done, we’re ready to set up deployment. Replit shows the machine requirements, compute units, and expected billing. You know exactly what you’ll pay.
I kept the default settings and set the primary domain to skillshot app.
On the usage dashboard, I saw that the entire build process only cost me $16. That’s like hiring a full engineering team for the price of lunch!
We’re now live. The status says “deployed,” and the domain is active. I jumped into the browser—and there it was. The real, working product. You can fill everything out, save your stories, track your progress, and once everything’s added, you get your snapshot.
Conclusion
If there's one takeaway from this whole process, it's that the research and Figma design phase is the most important part. You can vibe code all day, but if you don’t have a clear vision of the user experience upfront, you’ll end up with a Frankenstein product and burn way more time and credits fixing things later.
The clearer your thinking is in those early stages, the smoother the build. And if you want to go deeper into that process with me, that’s exactly what we do in my course. We’ve been running it for six years, and our students are building incredible products—doing the research, the design, and the business strategy that makes them work.
Try the app out for yourself, leave a comment with your feedback, and if you want to see how I use Figma and AI to create amazing apps like this, read this story next