What are vibe coding guides?

Vibe coding guides are step-by-step tutorials that show you how to use design templates with AI coding tools like Bolt, Lovable, Replit, Claude Code, and Cursor. Each guide walks through the process of pasting a template into your tool and building a complete website or app from it.

Which AI coding tools do these guides cover?

The guides cover Bolt, Claude Code, Replit, Lovable, and Cursor. Each tool has its own guides tailored to its specific workflow. All guides use BrowserMoon templates as the design starting point.

Do I need coding experience to follow these guides?

No. The guides are designed for builders of all experience levels. You describe what you want in plain language and paste a design template into the AI coding tool. The AI writes the code. The guides show you how to get the best results from this process.

Vibe Coding Guides for AI Coding Tools

Design a Website with Bolt Templates

Bolt projects from blank prompts all look the same. Paste a BrowserMoon template and the typography, colours, and layout are set before Bolt writes code.

BoltVibe coding5 min read

Use Moon Templates in Claude Code

Claude Code reads your codebase before writing code. A BrowserMoon template gives it a professional design to integrate into your existing project structure.

Claude CodeVibe coding5 min read

Design an App with Replit Templates

Replit builds full-stack apps but its default frontend looks like a prototype. A BrowserMoon template gives the agent a professional design to build around.

ReplitVibe coding5 min read

Customise Moon Templates for Your Project

Every BrowserMoon template is self-contained HTML and CSS. Changing colours, swapping copy, or converting to React takes minutes. Three levels of customisation.

CSSCustomisation6 min read

Use Moon Templates with ChatGPT Codex

ChatGPT Codex runs as a background agent with no live preview. A BrowserMoon template makes sure the first version looks professional.

ChatGPT CodexVibe coding5 min read

Design an App with Lovable Templates

Lovable builds React apps from plain language, but blank-prompt apps look the same. A BrowserMoon template gives it a professional design.

LovableVibe coding5 min read

Use Moon Templates in Cursor

Cursor reads your codebase before making edits. A BrowserMoon template works as a design reference Cursor integrates into what already exists.

CursorVibe coding5 min read

How to Use Grok Bot in 10 Steps

Grok Bot agents run on their own cloud computer. This guide covers all ten steps, from your first Bot to a crew that hands work between them.

Grok BotAI agentsAutomation12 min read

How to create a Grok Bot

A Grok Bot keeps its instructions between conversations. How to create one, write the description, save a skill, and add a routine.

Grok BotAI agents6 min read

Grok Bot routines: how to schedule an agent

A routine is a Grok Bot running without being asked. When to schedule one, how to scope it, and the four jobs worth running daily.

Grok BotAutomation5 min read

Write Better Grok Bot Instructions

Most Grok Bot instructions are a persona and a paragraph. The five things that actually change what an agent returns, with examples.

Grok BotAI agents7 min read

Grok Bot vs ChatGPT Work and Claude Cowork

Grok Bot, ChatGPT Work, Claude Cowork, Gemini Spark, and Manus compared. What each is built around and which work suits which.