Vibe Coding2025· 10 min read
Vibe Coded Apps — Ship Real Products with Claude
How to go from idea to deployed app using Claude Code. Real workflows, folder structures, deploy scripts, and lessons learned from building this very site.
"Vibe coding" sounds like a joke — just vibing with an AI until something works. But done right, it's a legitimate engineering approach: rapid iteration with Claude as your pair programmer, moving fast without sacrificing structure.
This site was built with Claude Code in a single session. Here's exactly how that workflow looks in practice.
The Vibe Coding Workflow
Start with intent, not code
Describe what you're building in plain English. "A personal blog for a DevOps engineer with dark AI theme, sections for blog posts, about, and books." Claude does the rest.
Set up your CLAUDE.md first
Before writing a line of code, create CLAUDE.md with your stack preferences, conventions, and constraints. This keeps Claude consistent across sessions.
Iterate in preview
Use Claude's preview capability to see changes live. Describe what you don't like. "Make the hero text bigger." "Remove the sidebar." "Change the accent to cyan." Fast feedback loop.
Review before deploying
Don't just accept everything Claude produces. Read the code. Understand what it did. Catch anything that doesn't fit before it goes live.
Deploy with a script
One command should take you from local to live. Set up rsync, GitHub Actions, or whatever fits your stack. Make deploying trivial so you do it often.
Recommended Folder Structure
your-project/
├── CLAUDE.md # Claude's context file
├── .claude/
│ ├── settings.json # MCP servers, permissions
│ └── launch.json # Preview server config
├── src/ # Source files / backup
├── dist/ # Built output (what deploys)
├── preview/ # Local preview files
├── deploy.sh # One-command deploy
└── pull.sh # Pull from server
What Claude is Great At
- Building full pages from a description in one shot
- Iterating on design based on natural language feedback
- Writing boilerplate — deploy scripts, config files, CI workflows
- Debugging its own output when you show it what went wrong
- Keeping a consistent design system across multiple files
Where to Stay Hands-On
- Content — Claude can draft, but you know your audience. Edit the voice.
- Security decisions — Never let Claude handle secrets, auth logic, or access controls without review
- Architecture — Claude optimizes locally. You need to think about the full system.
- Deployment — Always confirm what's being pushed before it goes live, especially with --delete flags
🎯 The real lesson: Vibe coding works best when you bring the judgment and Claude brings the execution speed. You're the architect. Claude is the fastest junior engineer you've ever worked with.
Vibe CodingClaude CodeDeploymentShip FastWorkflow
👨💻
Mayur Rele
Senior Director, IT & Information Security · Parachute Health
15+ years in DevOps, cloud, and cybersecurity. 700+ research citations. Scientist of the Year 2024.