How to build (vibe code) (almost) anything

My recipe for creating any project/make any project get off the ground in 1 day to at most a week.

At MIT, there is this class called "How to make (almost) anything", this is my goal with this blogpost.

I am told that I may be the best vibe coder haha but I learn something new everyday. So far, in my humble opinion, Claude code is the best coding agent out there, I almost consider it a founding engineer. What is the point of telling things to an eng: the time that it takes me to explain my idea, i could just get it built with Claude. That said, there's a difference between creating a lil feature in an already mature code base, and creating something entirely from scratch.

In this holiday season, I am grateful to be spending time in multiple personal projects and multiple personal product bets, and it's all a 1 (wo)man show.

Here is how I figure out that I can (vibe-)code anything.

---

First of all, have 3 separate repos:

• a repo for the landing page
• the actual product:
  • a repo for the fe (frontend) of the webapp
  • a repo for the be (backend) of the webapp

Landing page

Step 0:

• buy a domain on godaddy

Step 1:

• use v0 to create an aesthetic landing page that converts.
• after prompting to beauty, then push this to github via vercel
• for animations and functionality, I suggest not using v0, if i want to add animations, claude code works best here - so i continue iterating from the terminal on that repo after i git pulled it

Step 2:

• get a supabase db (database) for email waiting list
• i know you could use netlify forms, but i do not think it's solid enough
• after all, we are manifesting thousands of folks to sign up - and netfly forms could only have a few hundred, so let's manifest thousands of folks and prepare for it with a proper supabase db :))))

Step 3:

• deploy the landing page on netlify
• ensure the dns are setup to redirect from your domain

Example:

• my most recent fun project has been dotproduct.one
• check it out! <3

Product/webapp:

Step 1:

• thinking.
• Do not code. You first need to think.
  • who is the persona?
  • who is the user? what is the UX?
• here, I do 2 docs:
  • 1 is the product 1-pager doc, it answers:
    • here you are wearing the pm hat
    • who is the persona? what is the problem?
    • who is the user? what is the UX?
    • what is the point of this product?
  • the other one is the eng design doc:
    • here you are wearing the eng systems design hat
    • what are the endpoints you need?
    • what db do you want to use?
    • how will you deploy the fe? how will you deploy the be?

Step 2 (for this, I use Claude code):

• now, use these 2 docs as a PDF as context for Claude Code
• from here you need to make sure that you have 2 repos
  • one for the fe
  • one for the be
• my suggestion is to start from the be:
  • what are the actions that you are trying to do?
  • what are your input payloads? what are your output payloads?
  • what endpoints should i have? how can i deploy this be? (i use railway a lot)
  • do i use agents in my product? how do these behave? what is their outcome and what should be their system prompt, user prompt and context? [the agent design is a whole other blogpost, see 'Agents: a cooking recipe' here, and that is even incomplete]
  • once this is done: test it
  • test your be works as supposed to
  • use python scripts or a jupter notebook to test that the actions are acting up as expected
  • also, make sure to check your db tables to make sure things are going to the right place

Step 3:

• use v0 to design your fe experience
• pay attention to ux, what are the flows, put yourself in the shoes of the user and from which page to which page you want to go to
• prototype till you are satisfied
• then same thing, push to github
• git clone github locally, and then iterate with claude code locally

Step 4 (Claude code, same):

• last and last thing: i bring be and fe together,
• deploy ur fe on vercel, and ur be on railway, or what you prefer
• bring fe and be together and test proper behaviour
• but honey, this is the last step, not the first one

---

Proof

Here is a project I recently completed within 5 hours (from idea, to fe to be) and got entirely deployed:

https://www.happy-grateful.com

It is possible, you can do it!

---

The paramount importance of design thinking

Growing up, I played the piano. I did it professionally, like my dream was to become Martha Argerich growing up and I used to practice 12+ hours a day (more here); this is to say that: it might be lame, but it taught me a lot about how to think properly.

When you play the piano, you need to practice 1 hand at a time. When you learn a new piece, especially complex ones (hello Bach and 5-voices fugues, hello well tempered klavier), even if 'you can', it is absolutely bad practice to read at first sight something with both hands. Complex pieces, you need to break them down in 2 separate hands. At times, you might need to break each voice separately per hand, and practice different parts of a piece per hand independently and then per hand group and put it together later. As a child, I could read anything at prima vista, but even if I could, it does not mean it is good practice or that it is the right way to long-term study a piece to bring to a concerto stage.

I think that superhuman coding agents (claude, replit, cursor, etc) are suddenly giving everyone the ability to 'read at first sight', a prima vista. And this creates a ton of technical debt. Even if it might feel boring to practice one hand at a time, or to design fe and be separately, you are literally saving yourself up time later and preventing many mistakes beforehand.

Let's not forget that fe engineering and be engineering are 2 entirely different job postings, and forcing your coding agent to do all at once is not even what they were designed to do. So taking 1 extra hour to prompt and design think things properly is already saving you months of onboarding 2 engs: when you think about it that way, 1 extra hour of design thinking is not that much, right?

Well darling and there you go: here is how I can vibe code anything.

Learning a ton everyday - please feel free to email me (vitoria@vitorialima.com) with questions or opinions!

Let's all build something beautiful