Vibecoded App with Claude Code

Matthew Diakonov··2 min read

Vibecoded App with Claude Code

Vibecoding sounds informal but the practice is surprisingly disciplined when done right. The key is CLAUDE.md - a file that gives Claude Code your project's architecture rules, conventions, and constraints before it writes a single line of code.

What CLAUDE.md Does

CLAUDE.md sits at the root of your project and tells Claude Code:

  • Architecture patterns - "we use server components by default, client components only when interactivity is needed"
  • Naming conventions - "files use kebab-case, components use PascalCase"
  • Forbidden patterns - "never use any-type, never import from internal modules directly"
  • Project structure - which directories hold what, where new files should go
  • Dependencies - which libraries are approved, which are banned

Without CLAUDE.md, Claude Code generates code that works but does not fit your project. With it, the generated code looks like a human who knows the codebase wrote it.

The Vibecoding Workflow

  1. Write a clear CLAUDE.md with your architecture decisions
  2. Describe what you want in natural language - the "vibe"
  3. Claude Code generates code that follows your rules
  4. Review the output for correctness and coherence
  5. Iterate by refining the vibe, not the code

The skill is not in writing code. It is in articulating architecture rules clearly enough that the AI can follow them, and in describing features precisely enough that the output matches your intent.

Why Architecture Rules Matter More Than Ever

Without AI, bad architecture decisions slow you down. With AI, bad architecture decisions get amplified - the AI generates more code faster, all following the wrong patterns. Getting CLAUDE.md right is the highest-leverage activity in a vibecoding workflow.

The teams that vibecode successfully are the ones with strong opinions about how their code should be structured. The ones that struggle are the ones with no architectural vision who expect the AI to provide one.

Fazm is an open source macOS AI agent. Open source on GitHub.

More on This Topic

Related Posts