Vibe-Coding Guide
Ship to production in minutes, not days. Here's how to vibe-code your way through Shipmas.
What is Vibe-Coding?
Vibe-coding is about entering a flow state where you describe what you want to build, and AI helps you bring it to life. Combined with Cloudflare's instant deployments and Claude Code's understanding of your codebase, you can ship production-ready products in hours instead of weeks.
This guide will show you the exact workflow we use to ship Shipmas projects quickly.
The Shipmas Stack
Claude Code
AI coding assistant that understands your project
Cloudflare
Edge hosting with instant global deployment
Wrangler
CLI for deploying in seconds
Why this stack? Zero cold starts, global edge network, generous free tier, and Claude Code can manage it all from your terminal. Deploy changes in under 30 seconds.
Getting Started
Install Claude Code
Get Claude Code running on your machine:
npm install -g @anthropic-ai/claude-codeInstall Wrangler
Cloudflare's CLI for deployment:
npm install -g wrangler
wrangler loginStart a Project
Create your project with your favorite framework. We love Astro:
npm create astro@latest my-shipmas-project
cd my-shipmas-project
npx astro add cloudflareThe Vibe-Coding Workflow
Step 1: Describe Your Vision
Open Claude Code in your project directory and describe what you want to build:
$ claude
You: I want to build a landing page for a habit tracking app.
It should have a hero section with a catchy headline, a features
grid showing the top 3 benefits, and a sign-up form that
collects email addresses. Use a clean, modern design with
a purple color scheme.
Step 2: Let Claude Build
Claude Code will create files, write code, and set up your project. Watch it work and provide feedback:
Claude: I'll create this landing page for you. Let me:
1. Create the main page component
2. Add Tailwind styling with your purple theme
3. Set up the email form with an API endpoint
[Claude creates files and writes code...]
You: Make the hero section taller and add a gradient background
Step 3: Test Locally
Preview your work with Wrangler's local development server:
npm run dev
# or for Cloudflare Workers
wrangler devStep 4: Ship It!
Deploy to production with a single command:
# For Cloudflare Pages (static sites, Astro, Next.js)
npm run build && npx wrangler pages deploy dist
# For Cloudflare Workers
wrangler deployYour site is now live on a .pages.dev or .workers.dev domain, globally distributed!
Pro Tips for Speed
Use Templates
Start with Cloudflare's templates for common patterns. Tell Claude "use a similar structure to..."
Iterate Quickly
Don't aim for perfect. Ship v1, get feedback, iterate. You can deploy updates in 30 seconds.
Use KV for Data
Cloudflare KV is perfect for storing user data, form submissions, and simple databases.
Be Specific with Claude
The more context you give, the better the output. Share your vision, constraints, and preferences.
Commit Often
Let Claude handle git commits. Say "commit this with a good message" after each feature.
Custom Domains
Add a custom domain in Cloudflare dashboard. Makes your project feel real and ships faster.
Cloudflare Services Cheat Sheet
| Service | Use Case | Free Tier |
|---|---|---|
| Pages | Static sites, Astro, React, Next.js | Unlimited sites |
| Workers | APIs, serverless functions, edge logic | 100k req/day |
| KV | Key-value storage, sessions, config | 1GB storage |
| D1 | SQLite database at the edge | 5GB storage |
| R2 | Object storage (like S3) | 10GB storage |
| Queues | Background jobs, message queues | 1M messages |
Example: Ship a Link Shortener in 10 Minutes
Here's a real example of vibe-coding a complete project:
You: Create a link shortener using Cloudflare Workers and KV.
It should have a simple UI for creating short links, and redirect
when someone visits the short URL. Include basic analytics
(click count).
Claude will create:
- A Worker that handles URL creation and redirects
- KV namespace for storing links and click counts
- Simple HTML/CSS for the creation UI
- wrangler.toml configuration
wrangler deploy
# Your link shortener is now live at your-project.workers.dev! Useful Claude Code Phrases
"Deploy this to Cloudflare Pages"
Claude will build and deploy your project
"Add a KV namespace called USERS and wire it up"
Claude will update wrangler.toml and create the binding
"Create an API endpoint at /api/submit that saves form data to KV"
Claude will create the function and handle data storage
"Commit everything with a good message and deploy"
Claude will git commit and run the deploy command
"Make this look more professional with better styling"
Claude will enhance the UI/UX
Ready to Ship?
You now have everything you need to vibe-code your way through Shipmas. Start building, and remember: done is better than perfect!