How I Use Claude Code as a Non-Coder: 30+ Projects Across Content, Design and Code

A lot more than you’d think. I’m a marketer and editor who can’t code from scratch, but in 2026 I used Claude Code, Claude chat, Claude Skills and MCP to ship live web apps, an iOS app now in App Store review, a 3-agent content pipeline, seven custom Claude Skills and a full AEO content system for my publication, WhatTheWeb.

So here is the complete list, grouped by type: what I built, what broke, and the workflow that holds it together. Because I started as a complete beginner, I’ve kept every term in plain English and explained the jargon as it comes up.

Who is Vinita Mathreja?

I’m Vinita Mathreja, a crypto marketing specialist, Senior News Editor at RG Media and a freelance writer for CoinMarketCap. Alongside that, I run WhatTheWeb (whattheweb.co.in), a publication that makes AI make sense, and the crypto account @Alpha_chain_ on X.

I call myself a vibe coder, which simply means I build software by describing it in plain English. Although I can read code, I don’t write it from scratch, so Claude Code and Cursor are my only two coding tools. In short, everything below was built by describing what I wanted, pasting errors back, and iterating until it worked.

Which apps and sites have I shipped with Claude Code?

Six builds are already out in the world. Five of them run live on Vercel, while the sixth is an iOS app sitting in App Store review.

5 web apps I shipped with Claude Code

• Typo: a RAG-powered ad copy search engine. RAG simply means the app searches my own files first, then answers from them. For this one, I pulled the text out of my ad images in a free Kaggle notebook, turned that text into numbers with Google’s Gemini embeddings, and stored those numbers in Supabase pgvector. Because every tool had a free tier, my first real RAG pipeline cost nothing. Live at typo-nine-ruddy.vercel.app, and I broke the whole process down in my beginner’s guide to building a RAG pipeline.
• LUCKFLIX: a Netflix-style site. First I designed it in Figma Make, then I coded it fully in Claude Code. I built it as a birthday gift that plays a band’s YouTube videos. Live at luckflix-phi.vercel.app.
• Cheese Platter: Bollywood pickup lines. This one is pure fun, so it serves a pickup line plus a note on when to use it. Live at cheese-platter.vercel.app.
• Quote Randomizer. A small quote site with an animated background from React Bits. Live at website-randomizer-tool.vercel.app.
• acc-portfolio: my portfolio site. Built with Claude’s help, with the code on GitHub and the site on Vercel. Right now I’m wiring it to Sanity CMS so that I can publish articles without touching code.

1 iOS app built with Claude Code, now in App Store review

• snap-strip: an iOS photo-strip app. It runs on Capacitor plus Vite, which lets a web app work as a real iPhone app, and Firebase handles sign-in. Since I wanted to stay on Firebase’s free plan, it works guest-first: no login needed, and strips save straight to the device. It also has in-app account deletion and reporting, went through TestFlight, and has been in App Store review since October 2026.

What apps am I building with Claude Code right now?

Eight products are in active build, ranging from a fraud-proofing SaaS to a client’s e-commerce store.

Client products I am building in Claude Code

• POD (Proof of Drop): a geotagging SaaS for e-commerce fraud. Fake damage claims, “never received” refunds and parcel swaps mostly go unchecked. Therefore POD captures live, geotagged proof at every handoff. The iOS MVP runs on Capacitor plus Vite, while the business dashboard lives on the web, all from one Figma Make file and one codebase.
• Happy Go Lucky: a Gen Z gifting store for a client. It’s a responsive web app with a Jester brand archetype. Claude helped me rename it (it started as Mitvah), shape the brand story and tone, and then prototype the UI.

Writing and content tools built with Claude Code

• Second Brain: “ChatGPT for copywriting.” You type one keyword, and you get 20 to 30 related ideas across functional, emotional and identity angles. Besides the colourful Bento-grid design, it has onboarding that shows value before asking for a signup.
• Article Architect: a gamified AEO and SEO writing app. Essentially it’s my blog checklist turned into a 7-phase guided experience, from topic and intent through to tracking.
• Content Angle Generator: a freemium utility app. One keyword goes in, and five to seven angle cards come out. Meanwhile a 3-tier credits model covers both the API costs and the App Store cut.
• An open-source copywriting engine. Instead of writing ad copy for you, it critiques the copy you wrote, grounded in human-written examples. In other words, the writer goes first and AI only steps in when they’re stuck.

Developer tools I’m building in Claude Code

• MCP Console: a GUI for any MCP server. MCP is the standard that lets Claude plug into outside tools and live data. Because querying the CoinMarketCap MCP server in a terminal got tiring, I’m building a Next.js dashboard that turns MCP tools into cards and forms. It’s built in Claude Code and deployed on Vercel.
• Pookie: a mobile app on Firebase. Claude walked me through a Google OAuth Error 400 (we switched to native Google Sign-In), EAS Build issues, Firebase security rules and Google Play closed testing.

Can you vibe-code immersive 3D websites with AI?

Yes, and these are the builds I’m proudest of. Three.js and GSAP are the stack behind all three, while Claude Code and Cursor do the heavy lifting on code.

• Adverie: a metaverse for marketers. The name blends “advert” and “reverie.” You enter an elevator, press a floor, and the doors open with a ding onto a gallery of great copywriting and imagery, where each piece is framed museum-style with a tablet placard. So far, the lobby and the first gallery are built and rendering.
• Ferrari World Yas Island WebGL concept. A scroll-driven camera glides along a curved track toward a sunset exterior, with a shader-gradient sky dome and low-poly scenery. I built it with Three.js and GSAP ScrollTrigger, then split it cleanly into scene, objects, animations and scroll files.
• AirAsia “metaverse” concept. Destinations appear through an aircraft window, starting with Singapore. In addition, there’s an apron of parked planes where hovering reveals the IATA code and flight details.

My 9-step order for every 3D build

For every 3D build I follow the same order: Vite setup, a thin entry file, scene basics, objects and lighting, the GSAP layer, ScrollTrigger, resize handling, asset loading, and finally performance polish. Above all, fast load time is non-negotiable.

How do I use Claude for AI agents, automation and MCP?

Agents and automations are where Claude and Claude Code save me the most hours, including on paid client work.

Agents and automations

• A 3-agent CrewAI content pipeline. Inside Google Colab, a Trend Scout running on Serper web search hands off to a Creative Strategist, and then to a Content Creator and SEO Optimizer. Since the brand config swaps per client, one pipeline serves many, while a Content Engine Console manages briefs and archives posts.
• A paid AI agent workflow for a D2C fitness brand. It combines n8n, the WhatsApp Business API and an LLM, delivered as freelance client work.
• An n8n trend-to-Reddit research workflow. First it pulls Google Trends, then it finds the Reddit threads around each trend, and finally it surfaces original insights as content angles for Alphachain Crypto. I wrote up a simpler version of this in my guide to getting top crypto Reddit posts on Telegram with n8n.
• Bouncy: an offline voice assistant. Think of a Siri-like desktop assistant that speaks in my own cloned voice, yet runs locally on Ollama with free tools only.
• Crypto dashboards. Specifically, a winners-and-losers tracker and an RSI dashboard.

MCP connections

• CoinMarketCap and CoinGecko MCP servers, so that Claude can pull live market data while I write. If MCP is new to you, then the official Model Context Protocol docs are the clearest starting point.
• My Obsidian vault connected to Claude Desktop through the Local REST API MCP plugin, which later became my first RAG experiment.

7 custom Claude Skills I built and packaged

A Skill is simply a folder of instructions that Claude follows for one repeat job. Because of that, each one below turns an afternoon of work into a single request.

• blog-banner-designer: 60+ named style recipes, plus a Playwright rendering pipeline.
• smart-reframe: video reframing with face tracking, so clips fit any aspect ratio.
• cursor-reframe: similarly, it turns screen recordings vertical by tracking the cursor.
• humanizer: strips AI-writing patterns out of drafts before I publish.
• reel-scripter: scripts short-form video from a hook I give it.
• character-sheet-designer: builds character sheets for mascots.
• blog-scraper: finally, it pulls posts from the Binance, KuCoin, CoinMarketCap and CoinGecko blogs.

How do I use Claude for content, SEO and AEO?

My biggest content milestone so far: the CoinMarketCap blog articles I’ve written since April 2026 have ranked on multiple AI platforms. Claude is part of how I research, structure and optimise every one of them.

Client and freelance writing

• CoinMarketCap freelance articles. These are deep dives on CMC’s developer stack (the keyless API, API keys, MCP and the x402 pay-per-request protocol, plus the Skills Marketplace), advanced analytics for traders, meme launchpads, prediction markets, Solana RWA tokenisation and stablecoin seasonality. Alongside those, I worked on a Reddit marketing strategy for CMC.
• Miniso India spec ads. Static post concepts in a witty, meme-aware voice, framed as a smart treat rather than “cheap,” and grounded in real products.
• A copywriting and market-research playbook. It covers audience psychology, competitor research and pricing-tier tone, and it explains when provocation builds loyalty instead of backfiring.

WhatTheWeb’s own SEO and AEO system

• A full SEO and AEO foundation. That means a site-wide SEO strategy, an llms.txt file for AI crawlers, Terms and Conditions, and a cookie consent setup.
• Four AEO pillar series, 89 topics mapped. Vibe Coding (18), AI Software Development (20), Generative AI (29) and Vibe Coding Tools (22), where each pillar gets a phased publishing roadmap.
• A 6-module vibe coding course series. It runs from PRDs and UI/UX through databases, RAG and system design, and then into client work, with every module built around Claude Code.
• An AI token-cost optimisation guide. Built on EEAT principles and my Modern SEO Cluster framework (SEO + AEO + GEO + AIO + SXO), with featured-snippet blocks and an FAQ. For the writing side of this, see AEO content writing: 11 rules to sound human.

Published articles and brand campaigns

• Published GEO and AEO articles on AI video prompting, tokenised stocks, Flash USDT scams and CI/CD, plus a Bitcoin topic cluster and a Layer 2 content strategy.
• The Alphachain Crypto AEO playbook. Four pillars and a 4-week calendar of four posts a week, where every title is phrased as a question. Afterwards, each post is repurposed as an X thread for @Alpha_chain_.
• A daily LinkedIn build-in-public system, with Claude acting as my head of content.

My rule is simple: I draft some pieces myself, let Claude generate others for speed, and then humanise everything. After that, every blog post becomes an X thread, a LinkedIn post at a different angle, and a Reel built from the strongest hook.

How do I use Claude for design, branding and characters?

Claude is my brand strategist and art director’s assistant. Above all, it is how my apps avoid the generic AI look long before Claude Code builds them.

Brand systems

• The WhatTheWeb brand book. Core idea “Make AI make sense,” Signal Red #D40016, Bricolage Grotesque ExtraBold headlines with DM Mono for utility text, plus a social slogan bank and a 40-hook Reels library.
• A blog banner system that never repeats. Type-led banners, image-led banners and an isometric editorial “RB” style, all locked to brand colours and produced through my banner skill and Canva.
• Brand identity for Happy Go Lucky. Name, Jester archetype, brand story, tone (relatable and funny, never sarcastic) and launch packaging on a tight budget.

Characters and mascots

• Quibs, a Pixar-style ferret. A full character design bible for an original sidekick, because I eventually want to build monetisable character IP.
• Pookie the mascot. A sassy coral, amber and charcoal character sheet, together with an SVG illustration.

Design systems, microcopy and video

• App design systems. Adverie’s onyx, emerald and brass with neon pops; Article Architect’s glassmorphism with a teal accent; and Second Brain’s “doodle come to life” Bento grid. For the tools behind this look, see design tools that will make your apps look anti-AI-slop.
• A microcopy voice bank. Witty release notes that translate fixes into benefits, plus 404, 500 and no-internet screens that make people smile and give them one clear button.
• New video formats. A “build with AI” YouTube channel and a puppet co-host concept for WhatTheWeb. In fact, my sign-off “keep building” came out of an unscripted riff about Adverie.

What’s my Claude Code workflow, and where does AI struggle?

Every project runs the same loop, and it rarely changes.

My 6-step Claude Code loop

1. First, plan the build with Claude in chat.
2. Next, design the screens in Figma Make.
3. Then build it in Claude Code, keeping the official docs open.
4. Test on a real device, because the browser hides too much.
5. Paste every error back until it’s fixed.
6. Only then ship, and only after a security checklist.

The error loop between steps four and five is where most of the time goes. Unfortunately, it’s also the step most vibe coding tutorials skip.

5 rules that make my Claude Code workflow hold

1. Design before code. Screens go into Figma Make first, so that Claude Code builds toward something concrete.
2. Paste a strict content rule into every prompt. Otherwise the agent invents filler text and fake labels.
3. Validate on free tiers, pay later. Nothing gets a paid API until it proves it can do the job.
4. Value before signup. People should try the core feature before they hit any login wall.
5. Fast load time is a requirement, never a nice-to-have.

6 places Claude Code didn’t save me (and what I did)

1. Invented placeholder content. The coding agent filled gaps with made-up text, so I wrote the strict content rule.
2. Off-brief design output. Figma Make generated short stories instead of ad copy for Second Brain, although tighter prompts fixed it.
3. Auth errors. Google OAuth threw Error 400 on Pookie, and switching to native Google Sign-In finally cleared it.
4. Database choices. I moved snap-strip from Supabase to Firebase and still question the call, because AI can’t make that decision for you.
5. Crashes after release. One of my apps crashed on Android, and reading logs without drowning in them is still hard.
6. Local-only builds can’t be shared. Therefore I moved Typo’s embeddings from local Ollama to Gemini’s free API, so that testers could actually use it.

FAQ

Can you build real apps with Claude Code if you can’t code?

Yes. Although I can’t code from scratch, I’ve shipped five live sites and an iOS app that’s now in App Store review. What you really need is the ability to read code, describe what you want precisely, and then paste errors back until they’re fixed.

Do you need to spend money to build with AI?

Not at the start. For example, my RAG app Typo ran on Kaggle’s free GPUs, Gemini’s free embeddings tier and Supabase’s free pgvector. Meanwhile my voice assistant runs on Ollama locally, and snap-strip stays on Firebase’s free plan. So I only pay once a project proves it can earn.

Claude Code or Cursor: which should you use?

Honestly, I use both. Claude Code handles full builds like LUCKFLIX and MCP Console, whereas Cursor is where I built my Three.js scenes. Pick one first, learn its loop, and then add the other when a project needs it.

What are Claude Skills, and why build your own?

A Skill is a packaged set of instructions Claude follows for a specific job. Because mine cover repeat work like blog banners, video reframing and humanising drafts, they turn hours of clicking into one-line requests.

What’s the hardest part of vibe coding?

Production, not prototyping. Choosing a database, reading crash logs, OAuth errors and App Store review are where AI-built apps break. As a result, I now hand Claude Code a security checklist before calling anything production-ready.

How do you stop AI from inventing placeholder content?

I paste a strict content rule at the top of every coding prompt: use only the content I provide, never invent text or labels, and instead mark anything missing as a to-do.