Websites are like living things. They start from a version, and they grow from there with every upgrade and new feature shipped. That is the same approach I use for everything I build, including this fashion website I made for a friend using Claude Code.
The first version of the F.SKY site was a promise. Clean, sharp, built in a weekend. It looked like a luxury brand, but it couldn’t sell you anything. You could fill out a form. You could browse photos. You couldn’t buy a shirt and check out.
That bothered me. Not because the first build was wrong. It was the right first step. But a fashion brand website that can’t let people shop is still just a portfolio. So we went back in.
This is the story of what we built in version two, a full shopping cart, a live product store, an AI-generated video hero, expanded n8n automation, and multi-currency support for customers in Ghana and across the diaspora. All of it built with Claude Code, the same way we built the first version.
The Hero Became Cinematic
The original homepage had a static image hero. Clean. Fine. Forgettable.
The new hero is a full-screen video that plays forward and reverses in a seamless loop. The technique is called ping-pong playback, and the effect is that the video never ends, it just breathes. As you scroll down the page, the video zooms in slowly. Text layers fade in and out in phases. The whole experience feels closer to flipping through a fashion editorial than visiting a website.
The video was generated using ElevenLabs. The parallax scroll effect and the three-phase animation, brand identity into zoom into call to action, was built with Framer Motion, pinned to a 300-viewport-height scroll container. I gave Claude Code the brief and it handled the implementation. The “SCROLL” indicator at the bottom now pulses with cascading chevron arrows that animate downward. A small detail, but one that makes the invitation to scroll feel intentional rather than static.
What I care about here is that none of this required writing a single animation property by hand. I described the behaviour, Claude Code wrote it, I tested it, we iterated. That is vibe coding working exactly as advertised.
The Store: 14 Products, One Source of Truth
The biggest change is the store itself.
F.SKY now has 14 products across four categories: Jackets, Shirts, Senators and Sets, and Shorts and Vests. Every product has its own page with a photo gallery, a size guide drawer, and an add-to-cart button. Sizes are selectable. The gallery supports a fullscreen lightbox with keyboard navigation.
The architecture decision I am most pleased with is this: the entire product catalogue lives in a single TypeScript configuration file. One source of truth for every product name, price, image, size, and stock status. Add a new product to that file and the product pages, the store grid, and the featured collection on the homepage all update automatically on the next deploy. No CMS. No database query for the catalogue. Just a config file and a build step.
Sales are handled the same way. Add an originalPrice field to any product entry and the strikethrough price, the discount badge, and the sale state propagate everywhere on the site without touching anything else.
Product pages are statically generated at build time using Next.js App Router. Every product page loads instantly from Vercel’s edge network. No server wait. No spinners. The kind of load time that matters when a significant portion of your audience is on mobile in Ghana.
The Shopping Cart
The original site had a form on each product page. One item at a time. Fill in your details again every time.
That is gone.
Customers now browse the full store, select sizes, and add multiple items to a persistent cart. The cart slides in as a panel from the right edge of the screen whenever an item is added. It shows everything in the bag with a running subtotal. It persists across page refreshes using localStorage, so if you close the tab and come back, your cart is still waiting for you.
When you are ready to check out, one page. All your items, your contact details once, one submission. The entire order goes through as a single payload.
The cart icon in the navigation shows a live item count with a badge. One of those small UI details that shifts how a site feels. Not a portfolio. A store.
Multi-Currency for a Global Audience
F.SKY ships to Ghana and to the diaspora, UK, US, Europe. The currency selector in the navigation lets customers switch between GHS, USD, GBP, and EUR. Every price on the site updates instantly on selection.
This is display-level conversion for now. The actual transaction still goes through WhatsApp confirmation. But the experience is localized in the way that matters: a customer in London sees pounds, a customer in Accra sees cedis, and the numbers make sense to them before they ever send a message.
Three n8n Workflows Now Running in Production
When I published the first post about this site, we had one automation workflow. We now have three, all running on my self-hosted n8n instance at n8n.augustwheel.com.
The first, fsky-order, handles every cart submission. When a customer places an order, n8n sends a WhatsApp notification to Francis with the full order, every item, size, price, customer name, contact number, and shipping country. At the same time, it sends a confirmation email to the customer, a copy to the business email, and logs the order to a Google Sheet. The workflow loops through each item in the cart when building the WhatsApp message, because customers can now have multiple pieces in one order.
The second, fsky-request, handles bespoke orders from the Request page. When someone submits a custom piece, n8n sends Francis a formatted WhatsApp message and sends the customer a confirmation email acknowledging the 24-hour response window.
The third, fsky-subscribe, captures email signups from the homepage and logs them for the newsletter list.
All three webhooks are called from Next.js API routes that act as a secure proxy. The n8n webhook URLs are never exposed in the browser. That matters.
What Is Coming Next
The infrastructure for a serious fashion e-commerce brand is now in place. The next chapter is payments: Paystack for Ghana to handle Mobile Money and local cards, and Stripe for international customers. After that, a proper database to replace the Google Sheet as the order record.
And after that, something I am genuinely looking forward to building: a Claude-powered style assistant embedded on the site. You describe an occasion or an aesthetic, it recommends pieces from the F.SKY catalogue. That is where this gets interesting.
The whole site is built and iterated with AI. Claude Code handles the development. n8n handles the automation. Higgsfield generated the hero video. The brand, the photography, the products, the creative direction: that is all Francis and the F.SKY team.
That split between human creative vision and AI execution is what makes this kind of project work. The tools do not replace the taste. They just remove the friction between the idea and the thing that ships.
You can see the site live at fskyonline.com.
If you want to follow how I build things like this, including the automation workflows and the Claude Code sessions behind them, the best place to start is my newsletter at newsletter.augustwheel.com.
FAQ
Can you build a real e-commerce store with AI tools in 2026? Yes, and the F.SKY Clothing site is a working example. The full product store, shopping cart, multi-currency pricing, and three n8n automation workflows were all built using Claude Code without writing code manually. The result is a live, functional store handling real orders.
What is the best AI tool for building a website with no coding experience? Claude Code is the tool I use for most builds. It does not just generate code snippets, it builds entire projects, installs dependencies, fixes its own errors, and iterates based on your feedback. Pair it with Vercel for deployment and you have a complete stack that requires no traditional development background.
How do you connect a fashion website to WhatsApp and Google Sheets automatically? This is where n8n comes in. When a customer places an order or submits a bespoke request, an n8n workflow fires immediately, sending a formatted WhatsApp message to the business owner, a confirmation email to the customer, and logging the order to a Google Sheet. The webhook is called through a Next.js API route so the automation URL stays private.
Leave a Reply