🪄 Arno Vibe Coding BP for Developers 2026

February 26, 2026 (1d ago)

this document shall keep evolving and updating for the best practice for AI / Agentic / Vibe Coding !!!

Happy Hacking with AI ~

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 ~

let's take Cursor and Claude Code co-work together for spec-driven development as an illustration.

Setup your tools

Claude Code

  • init CLAUDE.md file to setup your agentic system prompt and context, you can use /init command to do this.
  • use /plugins, /mcp and /skills to add your favorited plugins, and your own skills and rules.
  • use /model to switch models for proper tasks.

Cursor

  • setup your models in Cursor, from tier 1 to tier 3 models of different strengths and capabilities.
  • add plugins for third-party services: Vercel, Slack, Github, Prisma ... (bundle the Skills, Rules, MCPs, Hooks combination for specific tasks and operations)
  • enable Browser Automation for Cursor to do the web browsing and data scraping tasks, debug and trace the operations with Logs.

for Cursor, CLAUDE.md is compatible, just use it as your global rules and instructions.

Project Context Engineering

L0 Design Docs

Layered your context with files:

l0: general human-first design docs, usually focus on the blue-print of the product, architecture, strategies, etc.

e.g. project.md, product.md, tech.md, release.md ... e.e. or you can briefly use project.md to rule them all.

you can instruct AI to generate this file with the following content:

# AGENT.md
 
[desc about this file]
 
## Product
 
[general description about the product]
 
[optional][specific SOP guide for this repository if you use spec-driven development]
 
## Core Philosophy
 
[core philosophy for the product]
 
e.g.
 
* Design first, then implement
* Simplicity is beauty
* Concise and clear code is good
* Keep it simple and stupid
* Data driven UI
* Explicit is better than implicit
* Do not do quickly patch, find root-cause and fix it
* ...
 
## CodeRepo
 
### Commands
 
[commands for the code repository]
 
### Tech Stack
 
[tech stack for the code repository]
 
### Project Structure
 
[project structure for the code repository]
 
* current repo
* cross-project repo (if in one workspace)
 
## Tech Best Practices
 
[tech bp for the code repository]
 
* general software engineering bp, for OO, FP, etc.
* programming language or specific tech bp, framework bp, etc.
* security and privacy bp, etc.
* ...
 
[add optional reference for bp of tool, framework, platform,etc.]
 
* read `electron.bp.md` if you are writing code using `Electron` framework.
* read `react.bp.md` if you are writing code using `React` framework.
* read `next.js.bp.md` if you are writing code using `Next.js` 
* ...
 
## KeyRules and Principles
 
[rules for the code repository]

L1 Design Docs

l1: semi-human design docs, focus on core-features, core-modules, essential design details.

e.g. create Skill for complex business workflow or SOPs extraction and organization.

Business workflow → SOP extraction  → Specs docs → Skills enhancement → Code generation → Knowledge accumulation
   ↑                                                                ↑
   └──────────────────── Continuous Improvement ←────────────────────────────┘

You can optionally use OpenSpecs or SpecKit or similar tool to help organize specs in project context.

you can see the Spec-Kit + Spec-Driven Design (SDD) — Simple BP Guide for more details.

L2 Design Docs

l2: ai-first design docs, focus on the details of the implementation, code-gen, demo, production specs, etc.

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

always instruct AI to write clean and simple specs, avoid redundant and unnecessary details.

Deep into real-world scenarios

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 with plugins and rules.
  • use Prisma for database and its plugin cooperation with AI.

iOS / MacOS Dev

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

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 / Business 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.

Other Tips x Techniques

  • commits often for controlling ai modifications in smaller chunks
  • let AI first approach to write the specs in clean and simple way, avoid redundant and unnecessary details.
  • use AI to generate l1 ~ l2 design docs, human to craft l0 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 Cursor / Claude Code for complex agentic task instead of simple QA.
  • vibe-coding sometimes go astray, let's fallback to original coding experience with AI guide in more detailed operations way.
  • more logs for debugging and tracing the AI's operations (instruct for AI to write logs)

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
  • 2026-02-04 add new fresh docs and BP from recently learnt and used in practice
  • (26-02-26) add spec-driven BP and co-work with Cursor and Cla

Arno Crafting Apps

ELABORATION STUDIO 🦄

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