I recently did a close friend and brother a favour. He runs a fashion brand called FSKY Clothing, based in Accra, Ghana, and he needed his first proper website. I built it. It went live on Thursday April 9th and within days we were already seeing traffic move. That made me genuinely happy in a way that surprised me because this wasn’t just a side project. It was real. Someone’s business. And people were finding it.
Fskyonline.com homepage
Google analytics
Was the work difficult? Not really. I didn’t write a single line of code. The part that took the most time was the brainstorming — figuring out what the brand actually needed before touching any tools. Once that was clear, everything else followed quickly.
So today I want to walk you through the exact stack I used to plan, build and deploy that site. Because if you’ve been curious about vibe coding but haven’t found a workflow that actually holds together end to end, this might be the one.
What Even Is Vibe Coding?
The term was coined by AI researcher Andrej Karpathy. The idea is simple: instead of writing code yourself, you describe what you want in plain English and let an AI build it. You’re not a developer in the traditional sense. You’re more like a director. You have the vision, the AI has the technical hands.
FSKY Clothing became another project to give vibe coding another test along with automation. FSKY is a high fashion brand targeting a discerning 28 to 40 year old customer. It needed to feel like it belonged in the same conversation as Wales Bonner or Kenneth Ize. Quiet luxury, culturally rooted in West African identity, warm but precise. That’s not a vibe you can fake with a template. It required genuine planning and taste before a single tool was opened.
And that’s exactly where the stack starts.
Step 1: Claude AI for Brainstorming and Planning
Before I touched Claude Code or opened VS Code, I spent time in a Claude AI Project having a proper conversation about the brand. Not prompting. Conversing.
We talked through the aesthetic, the target customer, the colour palette, what pages the site needed, what the founder’s story was, how the photography should be used, and what third party tools would handle bookings and forms. By the end of that conversation I had a detailed, coherent brief. Not a list of instructions, but a genuine understanding of what the site needed to be.
That brief became the prompt I handed to Claude Code. And because the thinking had already been done, Claude Code didn’t have to guess. It had enough context to make good decisions.
This is the part most vibe coding tutorials skip. They jump straight to the build. But the brainstorming stage is where the quality of the final site is actually determined. Garbage in, garbage out, even with the best AI tools in the world.
Step 2: Claude Code for the Build
Claude Code in VS Code for Vibe coding
Claude Code is Anthropic’s agentic coding tool. It runs inside VS Code and it doesn’t just write code. It builds. It creates files, installs dependencies, runs commands, fixes its own errors, and iterates until the thing works.
For FSKY I gave it a single detailed prompt and watched it scaffold an entire Next.js project. It chose the right image components, set up Tailwind CSS with the brand palette, implemented Framer Motion for the hero animations, built an asymmetric editorial lookbook grid, and added touches I hadn’t asked for. A scrolling marquee text strip. A custom cursor. Scroll-triggered fade-ins. Good instincts.
The framework it reached for was Next.js with the App Router, deployed as fully static HTML. That means the site loads instantly from anywhere in the world, including on mobile networks in Ghana where a significant portion of the audience is.
Did it get everything right first time? No. There were things to correct and refine with follow-up prompts. But the core of the site was built in one session. That’s the honest answer.
Step 3: GitHub and Vercel for Deployment
Vercel Dashboard
Once the build was in good shape locally, I pushed it to GitHub and connected the repository to Vercel. From that point, every push to the main branch triggers an automatic redeploy. No FTP. No hosting dashboards. No configuration.
Vercel also handles the custom domain, SSL, and edge caching out of the box. fskyonline.com was live within minutes of the first push. This part of the stack is genuinely invisible once it’s set up, which is exactly what you want.
The Supporting Tools
A website is never just a website. There are always integrations. Here’s what completed the FSKY stack:
Supabase handles the database layer. For FSKY this powers the backend for request and enquiry features. A structured, scalable store for customer data that grows with the business.
n8n is the automation engine. When someone submits a request or books an appointment, n8n catches the data via webhook and routes it. It notifies Francis, logs it to a Google Sheet, and sends the customer a confirmation. It’s the connective tissue between all the other tools.
N8N
Tally handles forms. Clean, free, and it integrates with n8n natively. For a simple email subscribe form or a multi-field enquiry, Tally is fast to set up and doesn’t require any backend configuration.
Cal.com handles appointment bookings. Francis can set his availability, customers book a slot, and it goes straight into his calendar. The booking widget is embedded directly on the site’s Book page.
Cal Booking page
What I’d Tell Someone Starting Out
The stack is only as good as the thinking that goes into it. Claude Code is remarkably capable but it responds to clarity. A vague prompt produces a vague website. A considered brief, one that knows what it’s building, who it’s for, and what it should feel like, produces something you’re proud to put live.
Spend time in the brainstorming phase. Use Claude AI as a thinking partner, not just a tool. Ask it to push back on your ideas. Let the conversation run until the brief feels solid. Then hand it to Claude Code.
The other thing worth saying: don’t be afraid to use real third party tools for the things they’re good at. You don’t need to build a booking system from scratch. Cal.com already exists. You don’t need to build a form backend. Tally already exists. The skill is knowing which tools to reach for and how to connect them. That’s a skill that compounds fast.
FAQ
Do I need to know how to code to use this stack? No. I didn’t write a single line of code for the FSKY website. What you do need is the ability to think clearly about what you’re building and communicate it well. The AI handles the technical execution. You handle the direction.
Is vibe coding reliable enough for a real client project? In my experience, yes, with the right approach. The key is treating the AI as a collaborator that needs good input, not a magic button. Review what it builds, test it thoroughly, and use follow-up prompts to refine. The FSKY site went live on a real domain for a real business and it’s performing.
What does this stack cost to run? For a site at FSKY’s current scale, very close to zero. Next.js, GitHub, and Vercel’s free tier cover the hosting and deployment. Tally and Cal.com have generous free tiers. n8n can be self-hosted for free. Supabase has a free tier for small projects. The main costs come as the business scales and usage grows beyond free tier limits.
The Takeaway
FSKY Clothing is live at fskyonline.com. And the stack that built it is the same one I’ll be reaching for next time.
If this got you thinking about what you could build, I put together a free resource called The 12-Project Hit List. It’s a curated list of projects you can build using AI tools, designed for people who want to get hands-on without knowing how to code. Download it free on Gumroad and start moving.