惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

U
Unit 42
N
News and Events Feed by Topic
S
Schneier on Security
G
GRAHAM CLULEY
Scott Helme
Scott Helme
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
GbyAI
GbyAI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
C
CERT Recently Published Vulnerability Notes
T
The Exploit Database - CXSecurity.com
C
Cisco Blogs
T
The Blog of Author Tim Ferriss
Cisco Talos Blog
Cisco Talos Blog
P
Privacy & Cybersecurity Law Blog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
博客园 - 司徒正美
Blog — PlanetScale
Blog — PlanetScale
Project Zero
Project Zero
MyScale Blog
MyScale Blog
Recent Commits to openclaw:main
Recent Commits to openclaw:main
Apple Machine Learning Research
Apple Machine Learning Research
小众软件
小众软件
The Last Watchdog
The Last Watchdog
Vercel News
Vercel News
The Cloudflare Blog
C
Check Point Blog
Help Net Security
Help Net Security
Microsoft Security Blog
Microsoft Security Blog
AI
AI
Simon Willison's Weblog
Simon Willison's Weblog
云风的 BLOG
云风的 BLOG
M
MIT News - Artificial intelligence
Stack Overflow Blog
Stack Overflow Blog
腾讯CDC
NISL@THU
NISL@THU
S
Security @ Cisco Blogs
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
S
SegmentFault 最新的问题
MongoDB | Blog
MongoDB | Blog
C
CXSECURITY Database RSS Feed - CXSecurity.com
T
Threatpost
AWS News Blog
AWS News Blog
Cloudbric
Cloudbric
N
News and Events Feed by Topic
PCI Perspectives
PCI Perspectives
S
Securelist
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
V
Vulnerabilities – Threatpost
S
Secure Thoughts

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant Common SOC 2 Failures (Real World) Stop Vibe-Checking Your AI App: A Practical Guide to Evals How to Use SonarQube and SonarScanner Locally to Level Up Your Code Quality Your Next To-Do App Is Dead — I Replaced Mine with an OpenClaw AI Sign a Nostr event in 60 lines of Python using coincurve — no nostr-sdk, no nbxplorer, no rust toolchain ITGC Audit Explained Like You’re in Big 4 Patch Tuesday abril 2026: Microsoft parcha 163 vulnerabilidades y un zero-day en SharePoint Stop scraping everything: a better way to track competitor price changes Listing on MCPize + the Official MCP Registry while routing payments OUTSIDE the marketplace — how I kept 100% of my x402 revenue Building an AI-Powered Risk Intelligence System Using Serverless Architecture Why We Ripped Function Overloading Out of Our AI Toolchain Testing AI-Generated Code: How to Actually Know If It Works SaaS Churn Is Killing Your Business. Here Is What to Do About It (Without a Support Team) The Speed of AI Is No Longer Linear - And Self-Improving Models Are Why How to Implement RBAC for MCP Tools: A Practical Guide for Engineering Teams From Standard Quote to Persuasive Proposal: AI Automation for Arborists I built a CLI that scaffolds complete multi-tenant SaaS apps Axios CVE-2025–62718: The Silent SSRF Bug That Could Be Hiding in Your Node.js App Right Now The dashboard that ended our friendship Data Pipelines Explained Simply (and How to Build Them with Python) The Hidden Cost of AI Systems Nobody Talks About. undefined vs undeclared, and how typeof behaves Switching from file-based jobs to NATS/Kafka in Rust without changing code io_uring Adventures: Rust Servers That Love Syscalls Why Agentic AI is Killing the Traditional Database The POUR principles of web accessibility for developers and designers Quantum Neural Network 3D — A Deep Dive into Interactive WebGL Visualization How To Install Caveman In Codex On macOS And Windows Automation Pipeline Reliability: Why Your Workflow Breaks When Nobody Is Watching I Built an 'Open World' AI Coding Agent — It Works From ANY Folder From Freelancing to Product: A Tech Service Company's SaaS Transformation China's AI Giants: Adding Tencent Hunyuan & ByteDance Doubao to AI University (74 Providers) On the Vibe Coders and Their Lies clerk: Auto-Summarize Your Claude Code Sessions AI Weekly — 2026/04/10–04/17 | The Model Lockdown Is Here, but the Toolchain Is the Real Battleground AI 週報 — 2026/04/10–2026/04/17 模型封鎖潮來了,但工具鏈才是真戰場 Maybe this is how Open-Source apps are born... 🚀 Fine-Tune LLMs with LoRA and QLoRA: 2026 Guide tRPC v11 + Next.js App Router: End-to-End Type Safety Without the Boilerplate ShadCN UI in 2026: Why I Stopped Installing Component Libraries and Started Owning My Components SaaS Billing in React Server Components: Stripe + Supabase Without a Single `useEffect` Join our DEV Weekend Challenge — $1,000 in Prizes Across TEN winners! Submissions Due April 20 at 6:59 AM UTC. Implementing FSRS Spaced Repetition in Flutter + Supabase — Adding Memory Science to an AI Learning App "I Texted My Localhost From the Train — Claude Code Fixed the Bug Before I Got Home" I Built a Sales Prep AI and It Went Deeper Than Expected Design to Code #2: One JSON, Eleven Outputs Solving the 100M-Row Problem: A Summary Table Pattern for High-Volume Push Notification Logs Flutter Web With Wasm: What Actually Changes For Developers I Built 50 Royalty-Free Soundtracks for My Side Project in a Weekend Using AI Music Generation The Vibe Coding Security Checklist: 7 Things to Check Before You Ship Stop Letting Googlebot Guess Fix Your React App's SEO Right Desconstruindo o Streaming do LinkedIn: Como Criar um Engine de Extração de Vídeo de Alta Performance com HLS e FFmpeg (EDA Part-1) EDA (Exploratory Data Analysis) Explained With Real Life — Why Looking at Your Data Is the Most Important Step in Machine Learning Brand Relationship Management at Scale: Our 4-Touch Outreach System for 200+ Brands Why String.fromEnvironment() Might Return an Empty String in Dart JGuardrails 1.0.0 — Hardening Java LLM Apps Against Jailbreaks, Toxicity, and Prompt Injection Plan and Schedule a Full Week of Threads Content From One Claude Conversation Coding Cat Oran Ep3, Five Tables Changed Everything Updated: BFF Pattern I'm done watching freelancers get buried by 200 proposals. So I'm building the alternative. This is my first post BFS Algorithm in Java Step by Step Tutorial with Examples Tracking LLM Pricing Monthly: An Open Dataset for 22 AI Models How We Measure Content ROI on a Comparison Site: Revenue Attribution Without Perfect Data Introducing Nova AI Ops: The AI-Native Operating System for SRE Teams I built a free desktop video downloader for Windows — Grabbit How Talkie OCR Helps Vision-Impaired & Dyslexic Users Read the World Around Them VRCFaceTracking安装和iPhone面捕配置教程,有bug Even CrowdStrike Can't See Your Agents The Automation Gold Rush: What n8n Workflows and Claude Are Opening Up for Developers Right Now
Vibe Coding 101: Notes from a Developer Who Got Tired of Writing Code by Hand
Putu Adi · 2026-06-18 · via DEV Community

Vibe Coding 101: A Practical Developer's Guide (2026)

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.


Table of Contents

  • What is Vibe Coding?
  • 1. Choose Your Editor / Environment
    • GUI Editors (IDE-based)
    • CLI Agents (Terminal-based)
  • 2. Pick the Right Model
    • Model Comparison
    • How to Choose Practically
  • 3. Give the AI "Knowledge" — Use a Skills Library
    • Skills Libraries I Use
    • How Skills Work
  • 4. Set Up Starter Documentation
    • CLAUDE.md vs GEMINI.md vs AGENTS.md — Which One?
    • Side-by-Side Comparison
    • Multi-Tool Strategy: One File for All
    • My Project Structure
    • What Goes Inside the Config File?
    • Scenario 1: Starting from Scratch
    • Scenario 2: Existing Codebase
  • My Daily Vibe Coding Workflow
  • Pre-flight Checklist
  • Closing Thoughts

What is Vibe Coding?

The 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.

What 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.

But 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.

This guide is about how to properly "brief" your AI before you start building together.


1. Choose Your Editor / Environment

First question: do you want a GUI editor or a CLI agent?

GUI Editors (IDE-based)

Best if you prefer visual feedback, editing directly in the editor, and strong codebase awareness.

Editor Character Best For
Cursor AI-native, built on VS Code. Best for single-session work and codebase context. Developers who want a fast, familiar AI copilot
Windsurf (now Devin Desktop) Agentic, proactive — the AI acts without being asked. Cascade agent for multi-file edits. Teams that want AI to take initiative
Antigravity Multi-agent: run up to 5 agents in parallel inside one editor. Early-adopter energy. Parallel task experiments, power users
VS Code + Copilot Familiar, massive ecosystem, but the AI feels "bolted on". Developers who don't want to switch editors

Note (June 18, 2026): Windsurf officially rebranded to Devin Desktop under Cognition on June 2, 2026. Cursor remains the most stable choice for teams; Antigravity is the most interesting for multi-agent workflows.

CLI Agents (Terminal-based)

Best if you prefer the terminal, want full control, or need tight git workflow integration.

Agent Default Model Character
Claude Code Claude Opus/Sonnet Terminal-first, agentic, supports subagents. Bundled with Claude Pro ($17/mo).
Gemini CLI Gemini 3.1 Free to start, Google integration. Great if you're already in the Google ecosystem.
OpenAI Codex CLI GPT-5.x Latest from OpenAI, paired with the ChatGPT app. Windows desktop client available May 2026.

Personal tip: If you use Claude Code, just run claude in your project root. The difference is immediately noticeable — the agent reads context from your entire codebase, not just the active file.


2. Pick the Right Model

As of this writing (June 18, 2026), here's the most relevant model landscape for vibe coding:

Model Comparison

Model Coding Score (SWE-bench) Price (per 1M tokens) Best For
Claude Opus 4.8 88.6% Verified $5 / $25 Primary coding agent, long-running tasks, large codebases
Claude Sonnet 4.6 ~85% $3 / $15 Best daily driver. 98% of Opus quality at 60% less cost
GPT-5.4 74.9% $2.50 / $15 All-rounder, largest ecosystem
Gemini 3.1 Pro 63.8% $2 / $12 Long context (1M tokens), data-heavy apps
DeepSeek V4 Competitive $0.14 / $0.28 Budget option, self-hostable
Claude Haiku 4.5 ~70% $1 / $5 Quick edits, subagent tasks, high-volume work

How to Choose Practically

New project, small-to-medium codebase?
→ Claude Sonnet 4.6 (best price-to-performance sweet spot)

Large codebase, complex agentic tasks?
→ Claude Opus 4.8

Already in the OpenAI ecosystem / using Cursor?
→ GPT-5.4

Lots of data, very long context needed?
→ Gemini 3.1 Pro

Tight budget, repetitive tasks?
→ DeepSeek V4 or Haiku 4.5

Pro 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.


3. Give the AI "Knowledge" — Use a Skills Library

This is the part most people skip.

AI 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.

Think 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.

Skills Libraries I Use

1. Superpowers (skills.sh/obra/superpowers)

This 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.

The workflow Superpowers enforces:

Brainstorm → Design → Plan → Implement (TDD) → Review → Merge

Why 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.

Install in Claude Code:

/plugin install superpowers@claude-plugins-official

Key features:

  • Hard gate before coding: The agent won't write a single line until you've approved the design
  • TDD enforcement: Always write a failing test first, then implement
  • Subagent-driven: Dispatches parallel subagents for execution with a two-stage review
  • Git worktree workflow: Every task runs on its own branch — no clobbering each other

Repo: github.com/obra/superpowers — 190K+ GitHub stars at time of writing.

2. Anthropic Official Skills (skills.sh/anthropics/skills)

The official Anthropic skill library for Claude Code. Includes:

  • frontend-design — design system, tokens, typography
  • docx, pdf, pptx — create and edit documents
  • file-reading, pdf-reading — read various file formats

3. Figma / Design Skills

If 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.

How Skills Work

Skills are structured .md files containing explicit instructions. The agent reads them when needed and follows them as a process — not just a prompt, but an activatable workflow.

User: "Build a login feature"
Agent: [Reads brainstorming skill]
       "Before we start, I have a few things to clarify..."
       [Asks 3–4 context questions]
       [Presents design options]
       "Please review this design before I begin implementation."

Compare that to without skills:

User: "Build a login feature"
Agent: [Immediately writes 300 lines of code]
       → Auth stack turns out to be wrong, pattern doesn't match codebase
       → 2 hours of revision wasted


4. Set Up Starter Documentation

Before 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.

Every 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.


CLAUDE.md vs GEMINI.md vs AGENTS.md — Which One?

This is the most common question, especially if you use more than one tool.

The short answer: every tool has a different filename, but the purpose is identical — give the agent context before it starts working.

Side-by-Side Comparison

CLAUDE.md GEMINI.md AGENTS.md .cursorrules
Read by Claude Code Gemini CLI Codex CLI, Cursor, Gemini CLI, Windsurf, Copilot, 60K+ tools Cursor (legacy)
File location Project root or .claude/ Project root or ~/.gemini/ Project root, subdirectories, ~/.codex/ Project root
Hierarchy Nested folder support Reads up & down the folder tree Walks from root to working dir Single file
Open standard? Anthropic-only Google-only ✅ Yes — Linux Foundation (AAIF) Cursor-only
Claude Code reads it? ✅ Native ❌ No Via symlink / @AGENTS.md import ❌ No
Exclusive features Hooks, tool permissions, Skills integration Plan Mode, Google Search grounding AGENTS.override.md for local overrides Glob-based rule scoping
Best for Teams fully on Claude Code Teams using Gemini CLI Multi-tool / mixed teams Solo Cursor users

Multi-Tool Strategy: One File for All

If 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:

Option A: AGENTS.md as source of truth + symlinks

The community's most recommended approach. Write one file, symlink the rest:

# In project root
touch AGENTS.md          # Write all context here

# Create symlinks for other tools
ln -s AGENTS.md CLAUDE.md
ln -s AGENTS.md GEMINI.md

Result: update one file, all tools stay in sync. No drift between files.

Note: Claude Code does not read AGENTS.md natively. Use a symlink, or manually import it inside CLAUDE.md with the @AGENTS.md syntax.

Option B: AGENTS.md for universal rules + per-tool files for specific features

project/
├── AGENTS.md          # Universal: tech stack, conventions, rules
├── CLAUDE.md          # Claude-specific: hooks, tool permissions, skills
└── GEMINI.md          # Gemini-specific: instructions to prevent scope expansion

This 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).


My Project Structure

project/
├── AGENTS.md                # Source of truth — read by all tools
├── CLAUDE.md -> AGENTS.md   # Symlink to AGENTS.md
├── GEMINI.md                # Gemini-specific tweaks (scope control)
├── .claude/
│   └── settings.json        # Claude Code config (permissions, model)
├── .codex/
│   └── config.toml          # Codex CLI config
└── docs/
    ├── architecture.md
    ├── business-logic.md
    └── tech-stack.md


What Goes Inside the Config File?

This template works for AGENTS.md, CLAUDE.md, or GEMINI.md — same structure, different filename.

Golden rule: A good config file is 50–200 lines. Beyond that, the model starts ignoring parts it deems irrelevant. Only write what the AI can't infer from the code itself.

Minimal contents:

# Project: [Project Name]

## Context
[One paragraph: what this app does, who it's for, what problem it solves]

## Tech Stack
- Framework: Next.js 15 (App Router)
- Database: PostgreSQL + Prisma
- Auth: Clerk
- Styling: Tailwind CSS v4

## Folder Structure
- Components: `/components`
- Hooks: `/hooks`
- API routes: `/app/api`
- Types: `/types`

## Coding Rules
- Always use TypeScript strict mode
- Never use `any` — use proper types
- Naming: camelCase for functions, PascalCase for components

## Critical Business Rules
- [Business rules the AI must never violate]
- [Example: prices are always in the smallest unit (cents), never decimals]

## Do NOT Do
- Don't change the database schema without discussing first
- Don't install new libraries without confirmation
- Don't modify files outside the scope of the requested task

## Key Commands
- Dev: `npm run dev`
- Test: `npm run test`
- Build: `npm run build`
- Lint: `npm run lint`

For Gemini CLI — add this section to GEMINI.md to prevent scope expansion:

## Gemini-Specific Instructions
- Do not modify files unrelated to the current task
- Always confirm before creating new files outside the existing structure
- If unsure about scope, ask — never assume


Scenario 1: Starting from Scratch ✨

This is the ideal situation. You can set everything up correctly from the beginning.

Steps:

  1. Generate initial config file — ask Claude to help create one based on your project brief
  2. Install Superpowers before writing the first line of code
  3. Define your folder structure so the AI knows where things belong
  4. Run a brainstorming session with the agent before starting any feature
# In the terminal, with Claude Code running:
"I want to start a new project: [description].
Please help me create a comprehensive AGENTS.md
and suggest an appropriate folder structure."

The advantage of starting fresh: you establish conventions from day one. The AI will follow the patterns you set, rather than guessing from existing code.

Scenario 2: Existing Codebase 🏗️

This is more challenging. There are two things you need to understand before vibe coding in an existing codebase:

a. Understand the existing structure

Before giving the AI access to the codebase, you need to be able to answer:

  • What is the main folder structure and why is it organized that way?
  • How does a request flow from entry to response?
  • What libraries/patterns are already in use and can't be changed?
  • Which parts are "fragile" and need extra care?

Quick approach: ask Claude to reverse-engineer the documentation from the code.

"Read through this entire codebase and create:
1. An architecture summary in markdown
2. A list of business rules you can infer from the code
3. Potential gotchas I should know before making modifications"

b. Understand the business flows already running

This 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.

Before modifying anything, document:

  • The main flow that's already working (happy path)
  • Edge cases already handled
  • Inter-feature dependencies
# Business Flow: Checkout Process

## Happy Path
1. User adds item to cart
2. User clicks checkout → validate stock (realtime from inventory service)
3. Select payment → payment gateway
4. Success → send confirmation email + update stock
5. Webhook updates order status

## Existing Edge Cases
- Out of stock at step 3: rollback cart, notify user
- Webhook timeout: retry 3x with exponential backoff
- Duplicate order: idempotency key in payment service

## DO NOT change without discussion:
- Payment flow (compliance issue)
- Stock calculation logic (finance depends on this)


My Daily Vibe Coding Workflow

1. Open Claude Code at project root
   ↓
2. Agent reads AGENTS.md/CLAUDE.md automatically (context loaded)
   ↓
3. Describe intent: "I want to add feature X for Y"
   ↓
4. Superpowers activates → Brainstorming session
   (Agent asks for clarification, proposes approach)
   ↓
5. Approve design → Agent creates implementation plan
   ↓
6. Execute: Agent creates worktree, writes failing tests first
   ↓
7. Implement → Review → Merge
   ↓
8. Commit with a descriptive message


Pre-flight Checklist

  • [ ] Config file exists (AGENTS.md / CLAUDE.md / GEMINI.md) with tech stack + business rules
  • [ ] If using multiple tools: symlinks are in place, no files have drifted
  • [ ] Superpowers is installed on the agent
  • [ ] You can explain the main business flow to the AI (not just "build feature X")
  • [ ] There's a clear definition of done for the task at hand
  • [ ] For existing projects: basic architecture documentation exists

Closing Thoughts

Effective vibe coding isn't about writing "magic" prompts. It's about building a system where the AI always has enough context to work correctly.

Skills library = reactivatable knowledge.
Starter docs = persistent memory.
Clear workflow = guardrails so the AI doesn't jump straight to implementation before the problem is understood.

With the right setup, one developer doing vibe coding can ship faster than a team of three using AI ad-hoc.


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.