{"slug": "vibe-coding-101-notes-from-a-developer-who-got-tired-of-writing-code-by-hand", "title": "Vibe Coding 101: Notes from a Developer Who Got Tired of Writing Code by Hand", "summary": "A developer's guide to 'vibe coding'—a methodology where developers describe intent rather than writing detailed specs—has been published, covering tooling, model selection, and context management. The guide evaluates GUI editors like Cursor, Windsurf (rebranded as Devin Desktop), and Antigravity, as well as CLI agents such as Claude Code, Gemini CLI, and OpenAI Codex CLI. It also provides a model comparison table with coding scores and pricing, recommending Claude Sonnet 4.6 as the best price-to-performance option for most projects.", "body_md": "My personal notes and a guide for anyone who wants to start vibe coding properly — not just typing prompts and hoping the AI figures it out.\n\nThe term *vibe coding* was coined by Andrej Karpathy in early 2025. The idea is simple: you describe your **intent** and the outcome you want — not a detailed technical spec — and the AI writes the code.\n\nWhat changed in 2026: this is no longer an experiment. Vibe coding has become a recognized development methodology, and the tooling is mature enough to use on real production projects.\n\nBut there's one thing that frustrates most beginners: **AI works from context**. Give it the wrong context and the output will miss — or worse, look correct but actually be wrong.\n\nThis guide is about how to properly \"brief\" your AI before you start building together.\n\nFirst question: do you want a **GUI editor** or a **CLI agent**?\n\nBest if you prefer visual feedback, editing directly in the editor, and strong codebase awareness.\n\n| Editor | Character | Best For |\n|---|---|---|\nCursor |\nAI-native, built on VS Code. Best for single-session work and codebase context. | Developers who want a fast, familiar AI copilot |\nWindsurf (now Devin Desktop)\n|\nAgentic, proactive — the AI acts without being asked. Cascade agent for multi-file edits. | Teams that want AI to take initiative |\nAntigravity |\nMulti-agent: run up to 5 agents in parallel inside one editor. Early-adopter energy. | Parallel task experiments, power users |\nVS Code + Copilot |\nFamiliar, massive ecosystem, but the AI feels \"bolted on\". | Developers who don't want to switch editors |\n\nNote (June 18, 2026):Windsurf officially rebranded toDevin Desktopunder Cognition on June 2, 2026. Cursor remains the most stable choice for teams; Antigravity is the most interesting for multi-agent workflows.\n\nBest if you prefer the terminal, want full control, or need tight git workflow integration.\n\n| Agent | Default Model | Character |\n|---|---|---|\nClaude Code |\nClaude Opus/Sonnet | Terminal-first, agentic, supports subagents. Bundled with Claude Pro ($17/mo). |\nGemini CLI |\nGemini 3.1 | Free to start, Google integration. Great if you're already in the Google ecosystem. |\nOpenAI Codex CLI |\nGPT-5.x | Latest from OpenAI, paired with the ChatGPT app. Windows desktop client available May 2026. |\n\nPersonal tip:If you use Claude Code, just run`claude`\n\nin your project root. The difference is immediately noticeable — the agent reads context from your entire codebase, not just the active file.\n\nAs of this writing (June 18, 2026), here's the most relevant model landscape for vibe coding:\n\n| Model | Coding Score (SWE-bench) | Price (per 1M tokens) | Best For |\n|---|---|---|---|\nClaude Opus 4.8 |\n88.6% Verified | $5 / $25 | Primary coding agent, long-running tasks, large codebases |\nClaude Sonnet 4.6 |\n~85% | $3 / $15 | Best daily driver. 98% of Opus quality at 60% less cost |\nGPT-5.4 |\n74.9% | $2.50 / $15 | All-rounder, largest ecosystem |\nGemini 3.1 Pro |\n63.8% | $2 / $12 | Long context (1M tokens), data-heavy apps |\nDeepSeek V4 |\nCompetitive | $0.14 / $0.28 | Budget option, self-hostable |\nClaude Haiku 4.5 |\n~70% | $1 / $5 | Quick edits, subagent tasks, high-volume work |\n\n```\nNew project, small-to-medium codebase?\n→ Claude Sonnet 4.6 (best price-to-performance sweet spot)\n\nLarge codebase, complex agentic tasks?\n→ Claude Opus 4.8\n\nAlready in the OpenAI ecosystem / using Cursor?\n→ GPT-5.4\n\nLots of data, very long context needed?\n→ Gemini 3.1 Pro\n\nTight budget, repetitive tasks?\n→ DeepSeek V4 or Haiku 4.5\n```\n\nPro tip:Don't default to the most powerful model for everything. Routing tasks to the right model tier can cut your AI bill by 2–5x without any quality loss. Quick edits and simple tasks? Haiku is more than enough.\n\nThis is the part most people skip.\n\nAI coding agents work entirely from context. Every session starts fresh — there's no memory from the previous one. A skills library is how you give the agent **reactivatable knowledge** whenever it needs it.\n\nThink of it this way: if the AI is a new developer joining your team, Skills are the onboarding docs they read before their first day.\n\n**1. Superpowers ( skills.sh/obra/superpowers)**\n\nThis one is a game-changer. Superpowers isn't just a collection of skills — it's a **software development methodology** that runs on top of your agent.\n\nThe workflow Superpowers enforces:\n\n```\nBrainstorm → Design → Plan → Implement (TDD) → Review → Merge\n```\n\nWhy does this matter? Without this structure, the AI will start writing code before you've even agreed on what you're building. Superpowers forces the agent to **ask first, code second**.\n\nInstall in Claude Code:\n\n```\n/plugin install superpowers@claude-plugins-official\n```\n\nKey features:\n\nRepo:\n\n[github.com/obra/superpowers]— 190K+ GitHub stars at time of writing.\n\n**2. Anthropic Official Skills ( skills.sh/anthropics/skills)**\n\nThe official Anthropic skill library for Claude Code. Includes:\n\n`frontend-design`\n\n— design system, tokens, typography`docx`\n\n, `pdf`\n\n, `pptx`\n\n— create and edit documents`file-reading`\n\n, `pdf-reading`\n\n— read various file formats**3. Figma / Design Skills**\n\nIf you work from Figma designs to code, these skills give Claude context about your design tokens, component names, and naming conventions from your Figma project.\n\nSkills are structured `.md`\n\nfiles containing explicit instructions. The agent reads them when needed and follows them as a process — not just a prompt, but an **activatable workflow**.\n\n```\nUser: \"Build a login feature\"\nAgent: [Reads brainstorming skill]\n       \"Before we start, I have a few things to clarify...\"\n       [Asks 3–4 context questions]\n       [Presents design options]\n       \"Please review this design before I begin implementation.\"\n```\n\nCompare that to without skills:\n\n```\nUser: \"Build a login feature\"\nAgent: [Immediately writes 300 lines of code]\n       → Auth stack turns out to be wrong, pattern doesn't match codebase\n       → 2 hours of revision wasted\n```\n\nBefore starting a vibe coding session, the single most impactful thing you can do is create **initial project documentation** the agent can read at the start of every session.\n\nEvery AI coding tool has its own \"magic file\" that's loaded automatically when a new agent session begins — this is how you provide context without re-typing it every time.\n\nThis is the most common question, especially if you use more than one tool.\n\nThe short answer:every tool has a different filename, but the purpose is identical — give the agent context before it starts working.\n\nCLAUDE.md |\nGEMINI.md |\nAGENTS.md |\n.cursorrules |\n|\n|---|---|---|---|---|\nRead by |\nClaude Code | Gemini CLI | Codex CLI, Cursor, Gemini CLI, Windsurf, Copilot, 60K+ tools | Cursor (legacy) |\nFile location |\nProject root or `.claude/`\n|\nProject root or `~/.gemini/`\n|\nProject root, subdirectories, `~/.codex/`\n|\nProject root |\nHierarchy |\nNested folder support | Reads up & down the folder tree | Walks from root to working dir | Single file |\nOpen standard? |\nAnthropic-only | Google-only | ✅ Yes — Linux Foundation (AAIF) | Cursor-only |\nClaude Code reads it? |\n✅ Native | ❌ No | Via symlink / `@AGENTS.md` import |\n❌ No |\nExclusive features |\nHooks, tool permissions, Skills integration | Plan Mode, Google Search grounding | AGENTS.override.md for local overrides | Glob-based rule scoping |\nBest for |\nTeams fully on Claude Code | Teams using Gemini CLI | Multi-tool / mixed teams | Solo Cursor users |\n\nIf you or your team uses more than one tool (e.g. Claude Code for heavy lifting, Gemini CLI for quick exploration), there are two popular approaches:\n\n**Option A: AGENTS.md as source of truth + symlinks**\n\nThe community's most recommended approach. Write one file, symlink the rest:\n\n```\n# In project root\ntouch AGENTS.md          # Write all context here\n\n# Create symlinks for other tools\nln -s AGENTS.md CLAUDE.md\nln -s AGENTS.md GEMINI.md\n```\n\nResult: update one file, all tools stay in sync. No drift between files.\n\nNote:Claude Code doesnotread`AGENTS.md`\n\nnatively. Use a symlink, or manually import it inside`CLAUDE.md`\n\nwith the`@AGENTS.md`\n\nsyntax.\n\n**Option B: AGENTS.md for universal rules + per-tool files for specific features**\n\n```\nproject/\n├── AGENTS.md          # Universal: tech stack, conventions, rules\n├── CLAUDE.md          # Claude-specific: hooks, tool permissions, skills\n└── GEMINI.md          # Gemini-specific: instructions to prevent scope expansion\n```\n\nThis works well when you need different instructions per tool — for instance, Gemini needs explicit instructions not to modify files outside the task's scope (a known Gemini behavior that differs from Claude).\n\n```\nproject/\n├── AGENTS.md                # Source of truth — read by all tools\n├── CLAUDE.md -> AGENTS.md   # Symlink to AGENTS.md\n├── GEMINI.md                # Gemini-specific tweaks (scope control)\n├── .claude/\n│   └── settings.json        # Claude Code config (permissions, model)\n├── .codex/\n│   └── config.toml          # Codex CLI config\n└── docs/\n    ├── architecture.md\n    ├── business-logic.md\n    └── tech-stack.md\n```\n\nThis template works for `AGENTS.md`\n\n, `CLAUDE.md`\n\n, or `GEMINI.md`\n\n— same structure, different filename.\n\nGolden rule:A good config file is50–200 lines. Beyond that, the model starts ignoring parts it deems irrelevant. Only write what the AI can't infer from the code itself.\n\nMinimal contents:\n\n```\n# Project: [Project Name]\n\n## Context\n[One paragraph: what this app does, who it's for, what problem it solves]\n\n## Tech Stack\n- Framework: Next.js 15 (App Router)\n- Database: PostgreSQL + Prisma\n- Auth: Clerk\n- Styling: Tailwind CSS v4\n\n## Folder Structure\n- Components: `/components`\n- Hooks: `/hooks`\n- API routes: `/app/api`\n- Types: `/types`\n\n## Coding Rules\n- Always use TypeScript strict mode\n- Never use `any` — use proper types\n- Naming: camelCase for functions, PascalCase for components\n\n## Critical Business Rules\n- [Business rules the AI must never violate]\n- [Example: prices are always in the smallest unit (cents), never decimals]\n\n## Do NOT Do\n- Don't change the database schema without discussing first\n- Don't install new libraries without confirmation\n- Don't modify files outside the scope of the requested task\n\n## Key Commands\n- Dev: `npm run dev`\n- Test: `npm run test`\n- Build: `npm run build`\n- Lint: `npm run lint`\n```\n\n**For Gemini CLI** — add this section to `GEMINI.md`\n\nto prevent scope expansion:\n\n```\n## Gemini-Specific Instructions\n- Do not modify files unrelated to the current task\n- Always confirm before creating new files outside the existing structure\n- If unsure about scope, ask — never assume\n```\n\nThis is the ideal situation. You can set everything up correctly from the beginning.\n\n**Steps:**\n\n```\n# In the terminal, with Claude Code running:\n\"I want to start a new project: [description].\nPlease help me create a comprehensive AGENTS.md\nand suggest an appropriate folder structure.\"\n```\n\nThe advantage of starting fresh: you **establish conventions from day one**. The AI will follow the patterns you set, rather than guessing from existing code.\n\nThis is more challenging. There are two things you need to understand before vibe coding in an existing codebase:\n\n**a. Understand the existing structure**\n\nBefore giving the AI access to the codebase, you need to be able to answer:\n\nQuick approach: ask Claude to **reverse-engineer the documentation** from the code.\n\n```\n\"Read through this entire codebase and create:\n1. An architecture summary in markdown\n2. A list of business rules you can infer from the code\n3. Potential gotchas I should know before making modifications\"\n```\n\n**b. Understand the business flows already running**\n\nThis is the most commonly skipped step. If you ask the AI to modify an existing feature without business context, the risk of breaking production is very high.\n\nBefore modifying anything, document:\n\n```\n# Business Flow: Checkout Process\n\n## Happy Path\n1. User adds item to cart\n2. User clicks checkout → validate stock (realtime from inventory service)\n3. Select payment → payment gateway\n4. Success → send confirmation email + update stock\n5. Webhook updates order status\n\n## Existing Edge Cases\n- Out of stock at step 3: rollback cart, notify user\n- Webhook timeout: retry 3x with exponential backoff\n- Duplicate order: idempotency key in payment service\n\n## DO NOT change without discussion:\n- Payment flow (compliance issue)\n- Stock calculation logic (finance depends on this)\n1. Open Claude Code at project root\n   ↓\n2. Agent reads AGENTS.md/CLAUDE.md automatically (context loaded)\n   ↓\n3. Describe intent: \"I want to add feature X for Y\"\n   ↓\n4. Superpowers activates → Brainstorming session\n   (Agent asks for clarification, proposes approach)\n   ↓\n5. Approve design → Agent creates implementation plan\n   ↓\n6. Execute: Agent creates worktree, writes failing tests first\n   ↓\n7. Implement → Review → Merge\n   ↓\n8. Commit with a descriptive message\n```\n\n`AGENTS.md`\n\n/ `CLAUDE.md`\n\n/ `GEMINI.md`\n\n) with tech stack + business rulesEffective vibe coding isn't about writing \"magic\" prompts. It's about **building a system** where the AI always has enough context to work correctly.\n\nSkills library = reactivatable knowledge.\n\nStarter docs = persistent memory.\n\nClear workflow = guardrails so the AI doesn't jump straight to implementation before the problem is understood.\n\nWith the right setup, one developer doing vibe coding can ship faster than a team of three using AI ad-hoc.\n\n*Written June 18, 2026. Model references will keep changing — check skills.sh for the latest skills and each model provider's official docs for current pricing.*", "url": "https://wpnews.pro/news/vibe-coding-101-notes-from-a-developer-who-got-tired-of-writing-code-by-hand", "canonical_source": "https://dev.to/disann/vibe-coding-101-catatan-seorang-developer-yang-capek-nulis-kode-manual-1e4l", "published_at": "2026-06-18 05:44:35+00:00", "updated_at": "2026-06-18 05:51:19.361567+00:00", "lang": "en", "topics": ["artificial-intelligence", "large-language-models", "developer-tools", "ai-tools", "ai-products"], "entities": ["Andrej Karpathy", "Cursor", "Windsurf", "Devin Desktop", "Antigravity", "Claude Code", "Gemini CLI", "OpenAI Codex CLI"], "alternates": {"html": "https://wpnews.pro/news/vibe-coding-101-notes-from-a-developer-who-got-tired-of-writing-code-by-hand", "markdown": "https://wpnews.pro/news/vibe-coding-101-notes-from-a-developer-who-got-tired-of-writing-code-by-hand.md", "text": "https://wpnews.pro/news/vibe-coding-101-notes-from-a-developer-who-got-tired-of-writing-code-by-hand.txt", "jsonld": "https://wpnews.pro/news/vibe-coding-101-notes-from-a-developer-who-got-tired-of-writing-code-by-hand.jsonld"}}