You have a vision. A creative project that needs an online home. A modern space that feels soft and warm, but with a serious back-end ready for business. This is the essence of Vibe Coding, a process where your aesthetic and brand personality drive the technical decisions. It's a collaborative process with an AI like Gemini and Claude, transforming your vision into a real, functional application.
For a recent e-commerce project on Rails 8, an AI assistant took on the role of a senior developer. The entire process was managed by the Kilo Code VSCode extension. The extension's Orchestrator agent handled the workflow. It directed the Architect (powered by Gemini) for planning and the Code agent (powered by Claude Sonnet 4) for implementation. When needed, an Ask agent provided clarifications, whether from a inquiry for me or from the code. This project is a testament to how these tools can work together to build a complete application.
The goal was a crafts store for "Brooke & Maisy," selling handmade bracelets, bookmarks, and stickers. The vibe was ivory and pastel, with an emphasis on a personal touch. This article is a high-level look at the first two phases to give an idea of what was built.
The Kilo Code extension is free and open-source, but the underlying AI models are not. The extension tracks the cost of each request, providing transparency on your spending. For the logic and code detailed in this article, the total cost came to $6.98. This makes for an interesting thought experiment: What would the cost be if you hired a developer for the same work? I am a Rails developer myself, and I paid under ten dollars. While I did have to fix a few minor bugs, the agents did the bulk of the work.
Phase 1: The Blueprint
Any great house starts with a solid foundation. For this project, the foundation was a modern Ruby on Rails setup. I started with a custom template, as Rails doesn't include everything like Tailwind CSS or PostgreSQL out of the box. But once configured, the framework provides a powerful structure that gets you building fast. Rails is also well-documented and structured, making it a perfect choice for working with an AI.
The key tools in this phase were:
Tailwind CSS: For custom, aesthetic-first styling. We defined a custom color palette of pastels and ivory, matching the "Brooke & Maisy" brand right from the start.
Hotwire: This is Rails' answer to modern interactivity. It uses Turbo Frames to update parts of your page without a full reload, giving you a smooth, single-page application feel without the complexity of traditional JavaScript frameworks like React.
Stimulus: A modest JavaScript framework that lets you add interactive behavior to your HTML directly. You write small, targeted controllers that keep your code organized and easy to follow.
With the foundation set, the project moved on to authentication. Using the devise gem, we quickly added secure user login and sign-up. The user model was built with a role system (customer or admin), preparing the application for a future administrative dashboard. The next step was to make sure the app could handle files, like images of the crafts themselves. We configured the app to use Active Storage with AWS S3, a scalable and reliable cloud storage solution for images or videos.
Phase 2: Building the Structure
A store needs products, and a blog needs articles. This phase was all about translating the store's needs into a database structure. The Kilo Code AI worked step-by-step, generating a todo list for all the core parts of the business. It then implemented the code and updated the todo list. Here is an overview:
Products and Categories: A Product model housed the main items, linked to a Category model. This allows for organization and easy browsing. A ProductVariant model was also created to handle variations of an item, like a bracelet that comes in different sizes or colors.
Shopping Cart and Orders: The Cart and CartItem models handled the shopping experience, storing items before checkout. The Order and OrderItem models were designed for processing purchases. These models included logic for calculating totals, tracking status, and generating a unique order number for each transaction.
Content and Reviews: To support the blog, an Article model was created with fields for content, SEO metadata, and a foreign key to the User model as the author. A Review model was also added, allowing customers to rate products, which is great for community and social proof.
For the aspiring Rails developer, this phase highlights the power of the rails generate model command. It gives you a starting point for your database migrations and models, which you can then refine with associations, validations, and custom methods. The AI wrote all this business logic, from ensuring unique slugs for articles to checking if a review came from a verified purchaser. All these models are connected, creating a logical, organized system.
What's Next?
I will dive deeper into what was actually done, starting with Phase 1. I will run through the prompt I used, how it started, and the actions it took as well as some code snippets.
Find this same article on Substack where it shows up first.
Top comments (0)