Inspire, motivate and open new doors with creativity close to cutting edge technology.
Inspire, motivate and open new doors with creativity close to cutting edge technology.
Share Dialog
Share Dialog
Subscribe to stellaachenbach
Subscribe to stellaachenbach
<100 subscribers
<100 subscribers
I vibe coded a website, it all started with the recent dog I adopted here in Lima, Neptuna. When I went through the adoption process with her, I got closer than I ever had to how animal rescue actually works in Peru. And what I found broke my heart a little.
Independent rescuers are doing extraordinary work with zero infrastructure. Posting to Instagram, TikTok, and Facebook, hoping the algorithm is kind that day. No centralized platform. No formal process to protect the animal or the person adopting. Just goodwill and social media, and fingers crossed.
I'm a designer and builder. With my accumulated knowledge about vibe coding, I had no excuse not to build something.
You might have heard the term before, but for those who have not, vibe coding means that artificial intelligence, specifically LLMs (large language models), is used to assist in writing code and programming software. Andrej Karpathy, a Slovakian-Canadian AI researcher, coined the term in 2025.
Vibe coding is often used on social media as a slightly dismissive term; the implication being that you're not really building, you're just prompting. I want to push back on that.
Vibe coding is a skill. It requires you to know exactly what you want, describe systems clearly, make quick decisions about architecture and trade-offs, and iterate without ego. For someone with a design and operations background (and an ADHD brain that moves faster than it types), it's genuinely the most powerful building tool I've ever had access to.
Many of my friends and colleagues have come to me to understand how vibe coding works after seeing creatorpricing.com and the other creator-focused web apps I built. I created adoptame.pe using Figma Make, but the tool only gives you an environment you will feel comfortable with. What you truly need, though, is a strategic building plan!
After reviewing my prompt history for adoptame.pe and my other projects, I noticed that they all follow a similar yet clear pattern. To be exact, five phases that repeat across almost any web app you'd want to build with the assistance of AI. I want more people to code helpful things, so here is the order of the five phases that led to adoptame.pe:
Phase 1 | The Vision Prompt
This is your most important prompt. Get it wrong, and you spend the next 40 prompts correcting the foundation. This is how it looked like for my animal adoption page:
"I want to build a professional community-led animal adoption platform preferably in Spanish because there is no such thing as official animal shelters. Ideally we allow social and email login so people can add animals plus their data for people to adopt them. The theme should be clean and easy to navigate. Work Sans or similar for typography."
Notice what's in there
The why: no official shelters
The who: community-led
The language: Spanish
The function: submit + browse animals
The feel: clean, easy
Essentially, it is a full-blown brief. If you also happen to have a brand kit, colors, or visual elements for this first prompt, attaching your result will be even more satisfying. Sometimes I will also add a question at the end of a prompt: "Let me know if you have more questions before we begin building the first draft." This will let the AI know it is ok to ask and refine a brief if it is not immediately clear from the information you submitted.
Phase 2 | Architecture Decisions
This one question saved me a high cost and complexity. The answer led me to an admin-curated model, no user accounts, no auth overhead, no database bloat from unused profiles. Rescuers submit animals via a form. I review and publish from an admin panel. Simple, scalable (for now), and free to run at current scale. This is what I asked:
"How much would it cost to deploy this and how can we keep it extremely lightweight especially if it starts scaling? Should people hand in data to us and I push them out without user profiles at all?"
For any platform you build, ask the cost and scalability questions early. Often, it will completely change your architecture and how the AI builds things.
Phase 3 | Data & Integrations
This is where you wire in the real world. For adoptame.pe this meant:
IPFS image storage via Pinata: decentralized, permanent, and free at a small scale
Resend for automated email notifications: new submission, adoption request, and contact form are all directly forwarded to my email inbox
Supabase as the backend database
Google Analytics (G-Tag) for traffic tracking
Netlify for deployment
The key prompt lesson here is to provide assets early on so things don't break later.
Phase 4 | Design Refinement
This phase is where most vibe coders spend the most time, and where having a design background genuinely helps. My prompts here got very specific:
"These buttons should be in our orange at 100% opacity. Upon hover, colors invert: text and icon become orange, outline set at 1px in orange."
"Left align all text elements in this section and the icons."
"Animals on the /animales page should always show up in randomized order with every new page load."
The recommendation here is to provide a single instruction and to be very precise about color values and behavior. Vague prompts like "make it look nicer" produce vague results. Specific prompts like "replace #EDE5DF with #FEF2ED across all card borders sitewide" get executed cleanly.
A note on color: I didn't arrive at adoptame.pe's warm orange brand identity from a brief. It emerged through the build. I started with teal, but it felt too cold. I asked the AI to provide me with all currently used color codes on my website, opened a Figma Design file, and iterated on the colors until they were more concise and better suited to the project. The advantage of vibe coding is that you can make these decisions at any time and revert to a previous version if you don't like the result.
Phase 5 | Legal & Launch
This is the part many people like to skip until it's too late. But for a complete website, it is necessary to give the legal and launch conditions thought as well. For adoptame.pe these consisted of:
A Terms of Use and Privacy Policy Page, customized for a non-profit platform collecting personal data in Peru
Minimal Cookie consent banner, which is GDPR-adjacent even though Peru's enforcement is lighter
SEO metadata, OG social crawler image via IPFS, and favicon
Google Search Console submission and G-Tag integration
Readme.txt file in English and Spanish, as well as the licensing file for MIT
The prompt that unlocked a lot of this was: "We're getting ready to publish. Is there anything we're missing?" Asking your AI tool to audit before launch catches things you didn't think to ask about.
Designers focus on the front end, but in the case of adoptame.pe, that wasn't enough. Since I am managing the platform for now, I also needed the backend to be comfortable and easy to use. Especially thinking about scaling and the future of the page, where someone else besides me may be responsible for approving submissions, responding to adopters, and forwarding applications to rescuers.
The element I am most proud of on adoptame.pe is the admin panel. It lets me:
Review and publish animal submissions as pending before they go live
Edit any published animal profile, including images, descriptions, and health status
Manage rescuer profiles independently, with the possibility to link each animal profile to their dedicated rescuer, with their social media and donation link
Track adoption requests with adopter data, including LinkedIn, social profiles, and Peruvian ID (DNI/CE) for verification
Mark animals as successfully adopted to track real impact
Flag animals as urgent for those who need a home immediately or face a serious risk
None of this required me to write backend code from scratch. It required me to know what I needed and describe it clearly. After the decision to keep costs low was made, this admin panel was the natural consequence.
There is no real rule in place for that. I believe whatever feels most intuitive to you should be the winner of this selection party. For me, the winner is clearly Figma Make, especially now that it lets me switch back and forth between Claude and Figma Make.
But I have tested others before, and they also did the job. Here is a short list of some tools you may want to check before finalizing a decision:
Framer - Closest to Figma Make as it also offers direct UI control
Claude Code (exclusively) - The model(s) I mainly use in Figma Make give a good first draft, but lack manual controls.
KIMI Code - I haven't tried the CLI version yet, but I did try the standard code experience. It comes with pretty templates to help you get started building websites.
Lovable - It was the first tool I tried and what got me into testing vibe coding.
Cursor - A tool I haven't tested yet, but I am genuinely curious about.
Replit - I haven't personally tested it.
Obviously, there are many more out there, and I am sure the list will grow in the next few months. I personally would choose the system that locks you in the least, gives you the most freedom, yet detailed control over your build.
I compiled all the prompts I used to build adoptame.pe into a structured template. It is organized by the five phases I strategically used to build the page. I generalized it into a template structure so you can apply it to your own projects. It's hosted via Fileverse here.
Btw., I built adoptame.pe under the MIT license, which means if you want to re-create the same idea for your community, you can fork it from GitHub, translate it, and deploy it. If you use vibe coding, it will probably not take longer than half a day to get this done by having your AI framework read the GitHub repository directly.
Spread the news about adoptame.pe! It doesn't matter if you speak Spanish or not, but someone you may indirectly know or follow on your social media, maybe does, and even lives in Peru! Here is a folder with some images you can use to spread the news.
Support Braelia, the first dog rescuer who trusted in my platform. She is kind and doing her utmost best!
Use my template (GitHub repository) and build something beautiful that makes the world better for all of us!
I vibe coded a website, it all started with the recent dog I adopted here in Lima, Neptuna. When I went through the adoption process with her, I got closer than I ever had to how animal rescue actually works in Peru. And what I found broke my heart a little.
Independent rescuers are doing extraordinary work with zero infrastructure. Posting to Instagram, TikTok, and Facebook, hoping the algorithm is kind that day. No centralized platform. No formal process to protect the animal or the person adopting. Just goodwill and social media, and fingers crossed.
I'm a designer and builder. With my accumulated knowledge about vibe coding, I had no excuse not to build something.
You might have heard the term before, but for those who have not, vibe coding means that artificial intelligence, specifically LLMs (large language models), is used to assist in writing code and programming software. Andrej Karpathy, a Slovakian-Canadian AI researcher, coined the term in 2025.
Vibe coding is often used on social media as a slightly dismissive term; the implication being that you're not really building, you're just prompting. I want to push back on that.
Vibe coding is a skill. It requires you to know exactly what you want, describe systems clearly, make quick decisions about architecture and trade-offs, and iterate without ego. For someone with a design and operations background (and an ADHD brain that moves faster than it types), it's genuinely the most powerful building tool I've ever had access to.
Many of my friends and colleagues have come to me to understand how vibe coding works after seeing creatorpricing.com and the other creator-focused web apps I built. I created adoptame.pe using Figma Make, but the tool only gives you an environment you will feel comfortable with. What you truly need, though, is a strategic building plan!
After reviewing my prompt history for adoptame.pe and my other projects, I noticed that they all follow a similar yet clear pattern. To be exact, five phases that repeat across almost any web app you'd want to build with the assistance of AI. I want more people to code helpful things, so here is the order of the five phases that led to adoptame.pe:
Phase 1 | The Vision Prompt
This is your most important prompt. Get it wrong, and you spend the next 40 prompts correcting the foundation. This is how it looked like for my animal adoption page:
"I want to build a professional community-led animal adoption platform preferably in Spanish because there is no such thing as official animal shelters. Ideally we allow social and email login so people can add animals plus their data for people to adopt them. The theme should be clean and easy to navigate. Work Sans or similar for typography."
Notice what's in there
The why: no official shelters
The who: community-led
The language: Spanish
The function: submit + browse animals
The feel: clean, easy
Essentially, it is a full-blown brief. If you also happen to have a brand kit, colors, or visual elements for this first prompt, attaching your result will be even more satisfying. Sometimes I will also add a question at the end of a prompt: "Let me know if you have more questions before we begin building the first draft." This will let the AI know it is ok to ask and refine a brief if it is not immediately clear from the information you submitted.
Phase 2 | Architecture Decisions
This one question saved me a high cost and complexity. The answer led me to an admin-curated model, no user accounts, no auth overhead, no database bloat from unused profiles. Rescuers submit animals via a form. I review and publish from an admin panel. Simple, scalable (for now), and free to run at current scale. This is what I asked:
"How much would it cost to deploy this and how can we keep it extremely lightweight especially if it starts scaling? Should people hand in data to us and I push them out without user profiles at all?"
For any platform you build, ask the cost and scalability questions early. Often, it will completely change your architecture and how the AI builds things.
Phase 3 | Data & Integrations
This is where you wire in the real world. For adoptame.pe this meant:
IPFS image storage via Pinata: decentralized, permanent, and free at a small scale
Resend for automated email notifications: new submission, adoption request, and contact form are all directly forwarded to my email inbox
Supabase as the backend database
Google Analytics (G-Tag) for traffic tracking
Netlify for deployment
The key prompt lesson here is to provide assets early on so things don't break later.
Phase 4 | Design Refinement
This phase is where most vibe coders spend the most time, and where having a design background genuinely helps. My prompts here got very specific:
"These buttons should be in our orange at 100% opacity. Upon hover, colors invert: text and icon become orange, outline set at 1px in orange."
"Left align all text elements in this section and the icons."
"Animals on the /animales page should always show up in randomized order with every new page load."
The recommendation here is to provide a single instruction and to be very precise about color values and behavior. Vague prompts like "make it look nicer" produce vague results. Specific prompts like "replace #EDE5DF with #FEF2ED across all card borders sitewide" get executed cleanly.
A note on color: I didn't arrive at adoptame.pe's warm orange brand identity from a brief. It emerged through the build. I started with teal, but it felt too cold. I asked the AI to provide me with all currently used color codes on my website, opened a Figma Design file, and iterated on the colors until they were more concise and better suited to the project. The advantage of vibe coding is that you can make these decisions at any time and revert to a previous version if you don't like the result.
Phase 5 | Legal & Launch
This is the part many people like to skip until it's too late. But for a complete website, it is necessary to give the legal and launch conditions thought as well. For adoptame.pe these consisted of:
A Terms of Use and Privacy Policy Page, customized for a non-profit platform collecting personal data in Peru
Minimal Cookie consent banner, which is GDPR-adjacent even though Peru's enforcement is lighter
SEO metadata, OG social crawler image via IPFS, and favicon
Google Search Console submission and G-Tag integration
Readme.txt file in English and Spanish, as well as the licensing file for MIT
The prompt that unlocked a lot of this was: "We're getting ready to publish. Is there anything we're missing?" Asking your AI tool to audit before launch catches things you didn't think to ask about.
Designers focus on the front end, but in the case of adoptame.pe, that wasn't enough. Since I am managing the platform for now, I also needed the backend to be comfortable and easy to use. Especially thinking about scaling and the future of the page, where someone else besides me may be responsible for approving submissions, responding to adopters, and forwarding applications to rescuers.
The element I am most proud of on adoptame.pe is the admin panel. It lets me:
Review and publish animal submissions as pending before they go live
Edit any published animal profile, including images, descriptions, and health status
Manage rescuer profiles independently, with the possibility to link each animal profile to their dedicated rescuer, with their social media and donation link
Track adoption requests with adopter data, including LinkedIn, social profiles, and Peruvian ID (DNI/CE) for verification
Mark animals as successfully adopted to track real impact
Flag animals as urgent for those who need a home immediately or face a serious risk
None of this required me to write backend code from scratch. It required me to know what I needed and describe it clearly. After the decision to keep costs low was made, this admin panel was the natural consequence.
There is no real rule in place for that. I believe whatever feels most intuitive to you should be the winner of this selection party. For me, the winner is clearly Figma Make, especially now that it lets me switch back and forth between Claude and Figma Make.
But I have tested others before, and they also did the job. Here is a short list of some tools you may want to check before finalizing a decision:
Framer - Closest to Figma Make as it also offers direct UI control
Claude Code (exclusively) - The model(s) I mainly use in Figma Make give a good first draft, but lack manual controls.
KIMI Code - I haven't tried the CLI version yet, but I did try the standard code experience. It comes with pretty templates to help you get started building websites.
Lovable - It was the first tool I tried and what got me into testing vibe coding.
Cursor - A tool I haven't tested yet, but I am genuinely curious about.
Replit - I haven't personally tested it.
Obviously, there are many more out there, and I am sure the list will grow in the next few months. I personally would choose the system that locks you in the least, gives you the most freedom, yet detailed control over your build.
I compiled all the prompts I used to build adoptame.pe into a structured template. It is organized by the five phases I strategically used to build the page. I generalized it into a template structure so you can apply it to your own projects. It's hosted via Fileverse here.
Btw., I built adoptame.pe under the MIT license, which means if you want to re-create the same idea for your community, you can fork it from GitHub, translate it, and deploy it. If you use vibe coding, it will probably not take longer than half a day to get this done by having your AI framework read the GitHub repository directly.
Spread the news about adoptame.pe! It doesn't matter if you speak Spanish or not, but someone you may indirectly know or follow on your social media, maybe does, and even lives in Peru! Here is a folder with some images you can use to spread the news.
Support Braelia, the first dog rescuer who trusted in my platform. She is kind and doing her utmost best!
Use my template (GitHub repository) and build something beautiful that makes the world better for all of us!
No activity yet