Vibe Coding
Work
Vibe Coding redefines how we turn ideas into reality by letting creative design vision lead the way while AI handles the technical friction. This approach doesn't just speed up execution; it’s the ultimate methodology for agile prototyping and building solid MVPs in record time. It’s about iterating at the speed of thought, ensuring the soul of the design remains intact from the first sketch to the final deployment.
Projects on this Page:
Project Story: Lune Travel
Lune Travel is the result of exploring Vibe Coding, an approach where the designer's creative vision takes the lead while AI handles the technical friction. The goal was to build a solid MVP that didn't just look good, but felt fluid to the user.
Rather than traditional coding, the process was a constant conversation to give shape to an idea. Throughout development, the focus remained on iterating on the fly; there were interface details and specific behaviors that required several rounds of polishing to ensure an impeccable user experience across all screens. It was an exercise in artistic and technical direction, where the priority was maintaining the original design's "vibe" while solving functional challenges in real-time. This methodology has proven to be an excellent practice for establishing a solid foundation when starting new projects, allowing a transition from an abstract concept to a real prototype in record time.
Gemini
The strategic co-pilot. It helped me polish UX details, solve technical queries in real-time, and ensured the project’s narrative remained cohesive.
Windsurf
The next-generation editor. This was the stage where the magic happened, seamlessly integrating AI workflows directly into the code files.
Claude
My lead architect. Its logical reasoning was key to structuring the React components and handling the complex search logic.
GitHub
The bridge. Used for version control to ensure every commit was a steady step toward the finish line.
Figma Make
I used it to generate the visual structure and initial assets, allowing me to move from a blank canvas to a solid design in minutes.
Vercel
The red carpet. The definitive tool for deploying the project to the cloud and making it accessible to the world with a single click.
Use this window to interact with the prototype page (Scroll)
Keep scrolling here to explore more projects
Direct Link:
Gemini
Figma Make
GitHub
Claude
Windsurf
Vercel
Lessons Learned
The main lesson was the power of agility. Vibe Coding demonstrates that the barrier between idea and execution has become almost invisible. I learned that real value today lies in the ability to iterate quickly, pivot when facing errors, and always keep the product vision as the North Star, letting AI tools amplify technical capacity.
Amity Pay: Designing at the Speed of Thought
Amity Pay was born from observing those subtle details that make an app feel "right." My goal was to go beyond static prototypes: I wanted to create something you could actually touch and navigate, something that felt natural to use with one hand.
To achieve this, I started by analyzing current financial platforms and applied my experience to test a different workflow called Vibe Coding. I used natural language to guide AI in building the interface, which allowed me to focus entirely on the experience: polishing every interaction, adjusting hierarchies to make the important things stand out, and ensuring everything responds fluidly to touch. My biggest takeaway was confirming that my core value is knowing which decisions to make so a product is both functional and aesthetic.
Gemini
My strategic partner for brainstorming ideas and organizing the app's logic and user flows.
Windsurf
The space where I handled the precision work: correcting spacing, refining visual details, and ensuring seamless navigation.
Claude
The tool that translated my design vision into functional components, allowing me to iterate visually almost instantly.
GitHub / Vercel
The platforms I used to publish the app and test it directly on my phone as a real product.
Lovable
The platform where I built the initial structure of the prototype to move from idea to something tangible in record time.
Give it a try !
Direct Link:
Gemini
Claude
Claude
PRD and System Blueprint (Scroll to see the document)
Windsurf
Lessons Learned
This process made it clear that design today is all about intent. Technology executes, but the designer's eye is what decides what actually works. At the end of the day, if a design doesn't feel good when you touch it, it's not good design.
Project Story: From Concept to Bit
Instead of following the traditional "design-wait-program" path, we applied an AI-driven Agile workflow (Vibe Coding). We focused this process on transforming a functional prototype into a Minimum Viable Product (MVP) right from the early stages. It all started with Claude, where we generated a System Blueprint that defined the logic and structure of the chatbot before touching a single line of code.
With that foundation, we used Lovable to make the immediate jump from idea to an operable product. As the MVP required deeper customization, we moved the code to Windsurf and Cursor, choosing the tool based on the complexity of the adjustment. This method allowed us to discover and solve usability issues in minutes—something that is normally only detected after weeks of development. The result is not just a static image; it is a living asset that engineers can use as a direct foundation for production.
Gemini (Guide)
The strategic consultant who coordinated the workflow, resolved technical blockers, and connected all the tools.
Lovable
The launchpad that allowed us to generate the first functional and visual version of the MVP at ultra-fast speeds.
Claude
The conceptual engine where we created the System Blueprint (the logic and business rules of the chatbot).
Windsurf & Cursor
AI-powered code editors where we refined the MVP, alternating between them depending on the development needs.
Figma Make
The space where we formalized the master design and final components based on what we validated through the code.
GitHub & Vercel
The technical backup and deployment. GitHub for version control and Vercel to publish the project to a live URL for real-world testing.
Click to interact with the prototype ChatBot
Direct Link:
Claude
System Blueprint (Scroll to see the document)
Cursor
Vercel
Figma Make
Lovable
Github
Lessons Learned
Logic before Design:
The blueprint in Claude was our compass; if the structure is solid, building the MVP becomes much more fluid.
Immediate Real-World Validation:
Thanks to Vercel, the MVP stopped being a "hypothesis" and became something tangible that could be tested in a browser from day one.
Tool Agility:
We didn't tie ourselves to a single software; we learned to pivot between Lovable, Windsurf, or Cursor depending on the challenge at hand.
A Real Bridge to Engineering:
We delivered a functional repository, eliminating assumptions and streamlining the final work for the development team.
Project Story: Nodo Dashboard
Nodo was born from the need to visualize productivity not merely as a task list, but as a biological state. It is a Neural Hub designed to calibrate focus, monitor cognitive load, and sync active connections in real-time, allowing users to manage their energy levels and "Daily Flow" with surgical precision.
The development of this prototype did not follow a linear workflow; it was an exercise in Vibe Coding. The cornerstone was the definition of a robust Design Language System in Claude, where we encoded a visual identity prioritizing mental clarity and minimal cognitive load. Reaching the final result was a labor of exhaustive refinement: we meticulously iterated on responsiveness and information architecture to ensure the system felt fluid and natural. Every micro-interaction and spacing adjustment was defended until we achieved an interface that not only functions but breathes with the user.
Gemini
Functioned as the UX consultant and visual strategist, resolving adaptability conflicts and polishing the project's technical narrative.
Windsurf
The next-generation code editor that enabled Vibe Coding, facilitating real-time manipulation of the DOM and styles through AI assistance.
Claude
Acted as the lead architect for both code and the design system, establishing a logical and scalable foundation for the entire application.
GitHub & Vercel
Used as the deployment and version control pillar, ensuring code integrity and continuous delivery (CI/CD) so every adjustment was instantly live.
Lovable
Served as the rapid prototyping environment where initial visual iterations and the feasibility of the starting concept were validated.
Interact with the following components:
“Quick Actions,” “Light/Dark Mode,”“Start Flow,” “Configuration,” etc.
Direct Link:
Claude
Design Language System (Scroll to see the document)
Claude
Claude
Windsurf
GitHub
Lessons Learned
The success of Vibe Coding lies in a deep human-AI synchrony, treating AI as a senior partner capable of interpreting abstract design intentions rather than just executing technical commands. This project reinforced that the gap between a prototype and a premium product lives in "invisible" details—such as removing unnecessary animation bounces, perfecting shadow rendering to prevent clipping, and knowing exactly when to simplify the interface to preserve the product’s essence across any screen. Ultimately, conscious design is about prioritizing clarity and fluidity over complexity, ensuring the technology remains a silent enabler of human performance.
Yuna Landing Page &
The Vibe Coding Journey
Yuna was born not just as a Bio-Tech platform, but as a bold experiment in Vibe Coding. Instead of getting lost in the weeds of syntax, I focused on "maintaining the vibe"—a clean, human-centric, yet deeply technological aesthetic.
The process was a constant conversation. We made adjustments on the fly: deciding the Hero CTA needed more gravity, forcing the desktop menu to hold its ground on smaller screens, or ensuring the "Gold" accent felt alive rather than static. It was like sculpting an idea in real-time, where the tools understood my visual intent and I acted as the curator, refining every detail until everything just "clicked." The result is a high-fidelity functional prototype that feels organic and premium, developed at a speed that used to be unthinkable.
Gemini
My creative and strategic collaborator. It helped define the narrative, resolve design roadblocks, and optimize prompts so the other tools understood exactly what "vibe" I was chasing.
Windsurf
The intelligent IDE where I performed "precision surgery" adjusting breakpoints, fixing CSS overflows, and polishing final interactions.
Claude
The "architect" behind the logic and React component refinement, ensuring the underlying code was as solid and elegant as the UI.
GitHub & Vercel
The technical backup and deployment. GitHub for version control and Vercel to publish the project to a live URL for real-world testing.
Lovable
My primary canvas. This is where the interface first came to life, allowing me to prototype complex visual components using natural language.
Use this window to interact with the prototype page (Scroll)
Keep scrolling here to explore more
Direct Link:
Gemini
Lovable
Claude
Windsurf
Lessons Learned
-
Vision is the New Code:
Knowing what you want to achieve and how to communicate that vision is now more critical than knowing where the semicolon goes.
-
Infinite Iteration:
Vibe Coding allows you to fail fast and cheap. If an effect doesn't feel right, you change it in seconds, not hours.
-
Human Curation:
AI does the heavy lifting, but the human "eye" is what gives the project its soul, ensuring the user experience remains coherent, intentional, and exciting.