🪄 Arno Vibe Coding BP for Developers 2025

September 10, 2025 (1d ago)

this document shall keep evolving and updating for the best practice of Vibe Coding !!!

Happy VibeCoding ~

VibeCoding is the best way to create MVP and do PMF in AI's app development era.

Principles

  • Think and act in a Systematic way, do good design in system architecture, software architecture, product architecture, etc.
  • Balance and understand the boundary of Human and AI, know which jobs and tasks are suitable for AI and which are better handled by humans. Understand the three patterns of AI x Human, they are Human First, AI Assist, AI First, Human Assist in Sync and AI First, Human Assist in Async.
  • Strategic prompting engineering is the basic skills to master, be a prompt master! prompt-guide, make sure you can craft clear, contextual and iterative prompts with AI. Context engineering play a vital role here, provide precise and accurate to reduce the illusion of AI. When provide context for ai, make sure the observability for AI is well concerned.
  • Divide and conquer, break down complex tasks into manageable tasks and instruct AI to do the job that is with less ambiguity. Human do high-level first design and AI do the low-level tasks. Make Atomic changes per task, and write key-tests for core features and tasks.
  • Small and simple is powerful -> less is more try to keep the complexity of your project in a AI can control way, use better modular and software engineering techniques to manage the complexity.
  • Iterate fast, fail fast find the way to success fast, it's all about Speed. Do VibeCoding often with best AI Models and tools and try Automate everything you can find with AI.
  • Make outcomes legible. Add explicit success criteria (first “Aha”) and wire metrics early (TTFR/TTFA), define and create your Aha moments ~

Project Context Engineering

Layered your context with files:

  • l0: general human-first design docs, usually focus on the blue-print of the product, architecture, marketing strategies, etc.
  • l1: semi-human design docs, focus on core-features, essential design details.
  • l2: ai-first design docs, focus on the details of the implementation, code-gen, demo, etc.

prefer markdown and mdx first, pure text pipe is a UNIX philosophy.

Files

  • [feature].lx.prd.md files for production feature specification
  • [tech].lx.tech.md files for production tech-stack specification
  • release.logs.md add release logs for iteration specific context

e.g. you can see the react.bp.md appendix for example.

Tools to co-work

  • General Chat with workspace: ChatGPT workspace (projects), Claude Project ...
  • Agentic powered IDE: VSCode x Augment, Cursor ...
  • Agentic Cli: Gemini Cli, Codex Cli, Claude Code ...
  • Agentic Background TaskRunner: Codex Remote, Cursor Background Tasks ...
  • MCP the leverages: more context and operations (actions) to external services and tools.

general ai-first tools compare and experience guide

Classic Scenarios

  • tab-engineer tab, tab, tab for code modifications
  • 0 -> 1 generation code generation, and project setups
    • choose boilerplate with AI context specifications first
    • use images to guide UI implementation
  • 1 -> 10 generation feature iterations
    • make all context ready to work
    • use images to guide UI implementation (image with instructions directly on those captures shall be ok)
  • code refactor feel the bad smell code and refactor them always
  • tests generation and coverage all for stable and reliable code
  • code review act like experts to review code and find bugs
  • commit msgs generation with comprehensive msg in commits
  • code qa ask questions and learn code-repos

Full-Stack Web

  • choose well-known tech stack for quick-start projects -> such as next.js
  • use devOPS platforms like Vercel for quick integrations and iterations

iOS / MacOS Dev

  • xcode + vscode + agentic tools together, vibe-coding in vscode and debug in xcode
  • use XCodeCloud for faster integrations and beta testings

Core SOP

0. Setup project's context engineering

  • write project's manifest first, tell AI the basic idea about this project, and how to obey the key rules of this project.
  • setup dir such as .context to store the context files for AI to understand and generate code.
  • carefully write the README.md for both human and AI friendly.

1. Design L0 Architecture

use DeepResearch first to understand what you are creating and design, about marketing, production, etc.

do deep-research first:

''' I want to find the BP for VibeCoding in Cursor or Github Copilot, what is the best practice for full-stack developer? for example, how to make full use of Cursor or Github Copilot to do the full-stack development? for example, how to write the BP guide for necessary prompt for Cursor or Github Copilot? for example, any BP for tech-stack or directory structure for or etc.? do the research and give me the best practice for full-stack developer. '''

co-work with AI in deep-thinking for the following documents are nice choices:

  • Product L0 Design document
  • Market L0 Design document
  • Tech L0 Design document, I used to write an article about the effective full-stack tech dev
    • tech architecture specifications
    • BP for tech frameworks / programming / software engineering

update these core files often when you iterate your products

2. Feature powered iterations, bugfix and refactoring

use AgenticTools with rich context specifications to do quickly development and iterations for features, bugfix, refactor, etc.

Generate L1 Design context documents about feature iterations, techs and related context via AI in brief and simple way, they can perform an all-in-one document structure for your project, better within a specific folder in root project like .context or in your AI tools' conventional rules / instructions folder.

write Release logs for key-features.

Tips x Techniques

  • commits often for controlling ai modifications in smaller chunks
  • template for prompt-engineering context files
  • use AI to generate l1 ~ l2 design docs
  • don't hesitate to use more @ symbol to add context for your ai prompts
  • technology adoption for good models to understand and abstract -> use next.js for example (the guide can be publicly exposed to gain insights and values) -> organize the repo in good shape
  • write prompt by markdown can use the tab and completion of code-gen and even make AI finish the related content writing, that's the best practice for writing prompt
  • choose the right models (LLM) to do the right things. e.g. for now Claude is good at handle 0 -> 1 crafting the whole project, but GPT5 in thinking mode is good for complex bugfix and multiple cross files analysis.
  • make AI manage your context docs, every-time they finish the 0->1 or 1->10 iteration tasks
  • co-work and combine with different tools of usage quota to operate different types of tasks to save money. e.g. use Augment for complex agentic task instead of simple QA.

Reference

React.bp.md

# React App Development Instructions
 
## Core Principles
 
- Design first, then implement
- Use appropriate state management (zustand recommended)
- Decompose UI into View, Business, and Basic components
- Enforce data immutability
- Maintain component orthogonality (separation of responsibilities)
- Use object-oriented paradigm with TypeScript for complex business logic
 
## Performance Optimization
 
- Prevent unnecessary re-renders:
 
  - Don't create component classes in render functions
  - Pass state to leaf nodes when possible
  - Pass children as props
  - Use React.memo to prevent downward updates
  - Use useMemo/useCallback for expensive operations
  - Use unique keys for lists
  - Use useMemo for Context values
  - Separate data and API methods in Context
  - Use multiple Context providers instead of one
  - Implement Context Selectors
 
- Decompose components to minimize render scope
- Implement appropriate caching strategies
- Use RenderHighlight in React DevTools to detect render issues
- Optimize package size with TreeShaking
 
## Stability Guidelines
 
- Use mature libraries with version locks
- Prevent circular dependencies in Hooks
- Implement XSS protection
- Add ErrorBoundary for error handling
 
## Maintainability Guidelines
 
- Unify code style with linters
- Standardize directory and project organization
- Apply design patterns and principles
- Strictly separate views and logic
- Limit file length to 500 lines maximum

trace

  • 2025-09-10 initial version marked

Arno Crafting Apps

ELABORATION STUDIO 🦄

Elaborate your ideas and solve your problems with AI in fully boosted context way ~