VibeCoding System

Un marco de desarrollo impulsado por conversaciones para la creación rápida de MVP y POC.

Documentación

VibeCoding System 🚀

Marco de Desarrollo Impulsado por Conversación para Creación Rápida de MVP/POC

VibeCoding transforma el desarrollo de software tradicional en una experiencia de conversación natural guiada por IA. A través de conversaciones inteligentes con servicios MCP profesionales, crea rápidamente MVP y POC.

📚 Navegación Completa de Documentación

🎯 Guía de Configuración (leer en orden)

Guía Completa de Configuración de IDE - Documento principal de configuración, compatible con todos los hosts MCP
Instrucciones Específicas para Cursor MCP - Lectura obligatoria para usuarios de Cursor
Guía de Configuración de MCP - Configuración avanzada y solución de problemas
Guía de Implementación - Implementación en entornos de producción

🛠️ Referencia de Herramientas y Comandos

Manual de Referencia Completo de Herramientas - Descripción detallada de las 34+ herramientas
Diseño del Sistema de Comandos Simplificado - Rediseño de comandos impulsado por UX
Colección de Ejemplos de Configuración MCP - Ejemplos de configuración para varios escenarios

🏗️ Arquitectura y Avanzado

Explicación de la Estructura del Proyecto - Arquitectura del proyecto y organización de archivos
Documentación de Referencia de API - Documentación completa de API
Diseño de Arquitectura - Detalles de la arquitectura del sistema

🚀 Proceso de Inicialización Completo

📦 Paso 1: Instalación y Configuración del Sistema

# 1. 複製 VibeCoding 模板
git clone https://github.com/Zenobia000/vibeCoding-mcp.git
cd vibeCoding-template

# 2. 安裝依賴並建構系統
npm install && npm run build

# 3. 驗證系統狀態
npm run vibecoding status
# 預期輸出: ✅ All VibeCoding services are enabled

# 4. 測試提示系統
npm run test:prompts
# 預期輸出: 🎉 FULLY OPERATIONAL - All prompts are ready!

🏗️ Paso 2: Crea la Carpeta de tu Proyecto

🚀 Método 1: Creación de Proyecto Mejorada con un Solo Clic (Recomendado)

# 建立新專案目錄
mkdir my-awesome-project
cd my-awesome-project

# 🚀 一鍵創建 VibeCoding 增強專案結構 (含專業模板)
# 🌟 推薦使用 v3 版本 (完整整合 v1+v2 所有優勢)
node /path/to/your/vibeCoding-template/scripts/create-enhanced-project-v3.cjs

# 其他版本選擇：
# v2 版本 (架構優化，遵循 .vibecoding/prompts 指導原則)
node /path/to/your/vibeCoding-template/scripts/create-enhanced-project-v2.cjs

# v1 版本 (完整內容)
node /path/to/your/vibeCoding-template/scripts/create-enhanced-project.cjs

# 🎉 完成！自動創建了：
# ✅ 5個開發階段資料夾 + 完整子資料夾結構
# ✅ 基於 design_templates 的專業模板
# ✅ 開發指南、測試策略、部署指南
# ✅ 專案簡報、架構文檔、ADR 模板
# ✅ README.md 和 .gitignore 文件

📝 Método 2: Creación Manual de la Estructura Básica

# 建立新專案目錄 (在任何位置)
mkdir my-awesome-project
cd my-awesome-project

# 初始化專案結構 (可選，VibeCoding 會自動建立)
mkdir -p {src,tests,docs,config}

# 初始化 git (推薦)
git init
echo "node_modules/" > .gitignore
echo "dist/" >> .gitignore
echo ".env" >> .gitignore

# 建立基本 package.json (可選，VibeCoding 可協助生成)
npm init -y

⚙️ Paso 3: Configura el IDE y la Conexión MCP

Cursor IDE (Recomendado - No se requiere clave API)

Abre el archivo de configuración de Cursor IDE:

# Windows
code "$env:APPDATA\Cursor\User\settings.json"

# macOS  
code "~/Library/Application Support/Cursor/User/settings.json"

# Linux
code ~/.config/Cursor/User/settings.json

Agrega la configuración de VibeCoding MCP:

{
  "mcpServers": {
    "vibecoding-context-manager": {
      "command": "node",
      "args": ["/path/to/your/vibeCoding-template/dist/vibe-services/context-manager/index.js"],
      "description": "VibeCoding 上下文管理服務"
    }
  },
  "vibecoding.enabled": true,
  "vibecoding.defaultProvider": "cursor"
}

Importante: Reemplaza /path/to/your/vibeCoding-template/ con tu ruta real

Claude Desktop

{
  "mcpServers": {
    "vibecoding-context-manager": {
      "command": "node", 
      "args": ["/path/to/your/vibeCoding-template/dist/vibe-services/context-manager/index.js"],
      "env": {
        "ANTHROPIC_API_KEY": "你的_ANTHROPIC_金鑰"
      }
    }
  }
}

Otros IDEs

📖 Guía de Configuración Completa: Guía Completa de Configuración de IDE - Compatible con VSCode, WebStorm, etc.

📖 Instrucciones Detalladas: Guía Específica para Cursor MCP

🎯 Paso 4: Comienza tu Primer Proyecto VibeCoding

# 在你的專案資料夾中，使用 Cursor 或 Claude Desktop
# 輸入以下指令開始：

# 🆕 簡潔指令 (推薦)
@vibe start "我的專案名稱"

# 📝 完整指令 (向後相容)
@vibecoding-context-manager start-clarification

✅ Paso 5: Verifica que la Configuración fue Exitosa

Prueba los siguientes comandos en tu IDE:

# 測試基本連接
@vibe start "測試專案"

# 如果看到類似以下回應，表示設定成功：
# 🚀 項目澄清已啟動
# 項目ID: proj_xxxxx
# 問題: 請描述這個專案的主要目標和預期解決的問題？

🌟 Características Principales

⚡ Sistema de Comandos Revolucionario

🆕 Comandos Simplificados: @vibe start "專案名" - Reduce el tiempo de escritura en un promedio del 77%
🔄 Compatibilidad hacia atrás: Los comandos completos aún se pueden usar
🧠 Conversación Inteligente: Proceso de desarrollo impulsado por lenguaje natural

🤖 6 Servicios MCP Profesionales

Servicio	Función	Comando Simplificado
📋 Context Manager	Aclaración de proyectos y gestión de contexto	`@vibe start`, `@vibe prd`
⚡ Code Generator	Generación de código impulsada por IA	`@vibe code`, `@vibe api`
📦 Dependency Tracker	Análisis inteligente de dependencias	`@vibe deps`, `@vibe scan`
🧪 Test Validator	Generación automatizada de pruebas	`@vibe test`, `@vibe cover`
📚 Doc Generator	Creación inteligente de documentación	`@vibe doc`, `@vibe readme`
🚀 Deployment Manager	Automatización de CI/CD e infraestructura	`@vibe deploy`, `@vibe monitor`

💡 Ventajas Técnicas

Compatibilidad con múltiples proveedores de IA: OpenAI, Anthropic, Gemini, modelos locales
Flujo de trabajo consciente de la fase: Guía de IA dinámica que se adapta a la fase de desarrollo
Sistema de plantillas: Biblioteca de plantillas enriquecida mejorada con IA
Configuración en caliente: Cambia de proveedor en tiempo de ejecución sin reiniciar

🎮 Flujo de Trabajo de Desarrollo Completo

🏗️ Comienza en la Carpeta de tu Proyecto

# 進入你的專案目錄
cd my-awesome-project

# 開啟 Cursor IDE 或其他已配置的 MCP Host
code .  # 或 cursor .

📋 Fase 1: Aclaración del Proyecto y Recopilación de Requisitos

# 🎯 1. 開始新專案澄清
@vibe start "任務管理系統"
# 系統提供 7 個結構化問題收集需求

# 🗨️ 2. 逐一回答澄清問題
@vibe ask "主要解決團隊協作和任務追蹤問題"
# 系統會引導你完成所有 7 個澄清問題

# 📋 3. 生成產品需求文檔 (PRD)
@vibe prd
# 自動創建全面的產品需求文檔並保存到專案中

🏗️ Fase 2: Diseño y Arquitectura

# 📐 4. 生成實施計劃
@vibe plan
# 基於 PRD 生成詳細的技術實施計劃

# 🏛️ 5. 設計系統架構
@vibe arch "微服務架構，使用 Node.js + Express + MongoDB"
# 生成架構圖和技術選型說明

💻 Fase 3: Implementación del Desarrollo

# 🚀 6. 開始代碼開發
@vibe code "用戶認證系統，包含註冊、登入、JWT 驗證"
@vibe api "任務 CRUD 接口，支援建立、讀取、更新、刪除"

# 🔄 7. 代碼審查與重構
@vibe review "[剛生成的代碼]"
@vibe refactor "提升性能和可讀性"

🧪 Fase 4: Pruebas y Validación

# 🧪 8. 生成測試代碼
@vibe test
@vibe mock "[API 代碼]"

# 📊 9. 檢查測試覆蓋率
@vibe cover
# 驗證代碼品質和測試覆蓋率

🚀 Fase 5: Implementación y Monitoreo

# 📚 10. 生成文檔
@vibe doc
@vibe readme

# 🚀 11. 部署應用
@vibe deploy
# 自動設定 CI/CD 流程並部署到雲端平台

🎯 Modo de Prototipado Rápido (MVP en 30 minutos)

# 一鍵式快速開發流程
@vibe start "快速原型"        # 2 分鐘澄清
@vibe prd                     # 1 分鐘生成 PRD  
@vibe code "核心功能"         # 10 分鐘開發
@vibe test                    # 5 分鐘測試
@vibe deploy                  # 12 分鐘部署
# 🎉 30 分鐘完成 MVP！

🏗️ Arquitectura del Sistema

Arquitectura de Servicios Principales

VibeCoding MCP Server
├── 📋 Context Manager       → 持久化對話與專案狀態
├── ⚡ Code Generator       → AI 驅動的代碼生成  
├── 📦 Dependency Tracker  → 智能依賴管理
├── 🧪 Test Validator      → 自動化測試與品質分析
├── 📚 Doc Generator       → 智能文檔創建
└── 🚀 Deployment Manager → CI/CD 與基礎設施自動化

Sistema de Prompts de IA

Ubicado en .vibecoding/prompts/, proporciona guía inteligente:

Prompts principales (3): Identidad del sistema, estilo de conversación, reglas de colaboración
Prompts de servicios (6): Prompts profesionales para cada servicio MCP
Prompts de flujo de trabajo (5): Guía de desarrollo específica por fase
Carga dinámica: Se adapta a la fase actual del proyecto y al contexto

Fases de Desarrollo

0_discovery/     → 需求收集和澄清
1_design/        → 架構和 API 設計
2_implementation/→ 源代碼和測試
3_validation/    → 測試報告和品質指標
4_deployment/    → 部署配置
knowledge-base/  → 模式、解決方案和回顧

🔧 Referencia de API

API Principal de Context Manager

// 開始專案澄清
start-clarification(projectName: string, initialDescription?: string)

// 提供澄清回答
provide-clarification(questionIndex: number, answer: string)

// 生成 PRD
generate-prd()

// 生成實施計劃
generate-impl-plan()

APIs de Otros Servicios

Code Generator: generate-code, code-review, refactor-code
Dependency Tracker: analyze-dependencies, security-scan, update-dependencies
Test Validator: run-tests, validate-coverage, performance-test
Doc Generator: generate-docs, create-api-docs, generate-changelog
Deployment Manager: deploy-service, setup-monitoring, rollback-deployment

📖 Documentación Completa de API: Manual de Referencia de Herramientas

⚙️ Configuración y Personalización

Requisitos del Sistema

Node.js: >= 18.0.0
npm: >= 8.0.0
Sistema operativo: Windows 10/11, macOS, Linux
Memoria: >= 4GB de RAM

Configuración del Proveedor de IA

# 環境變數設定
OPENAI_API_KEY=your_openai_key
ANTHROPIC_API_KEY=your_anthropic_key
GEMINI_API_KEY=your_gemini_key

Configuración Avanzada

Configuración multi-entorno: Separación de entornos de desarrollo, pruebas y producción
Configuración de colaboración en equipo: Configuración compartida y mejores prácticas
Implementación a nivel empresarial: Consideraciones de seguridad y escalabilidad

📖 Guía de Configuración Completa: Guía de Configuración de MCP

🔍 Solución de Problemas

Soluciones Rápidas para Problemas Comunes

❌ Problemas Relacionados con la Inicialización

# Q1: VibeCoding 系統初始化失敗
npm cache clean --force && npm install && npm run build

# Q2: npm run vibecoding status 指令無法執行
# 確保在 vibeCoding-template 目錄中執行
cd /path/to/your/vibeCoding-template
npm run vibecoding status

# Q3: MCP 服務無法啟動  
npm run build && npm run test:prompts

# Q4: 找不到 dist/ 目錄
# 重新建構系統
npm run build
ls -la dist/vibe-services/  # 確認服務檔案存在

❌ Problemas Relacionados con la Configuración del Proyecto

# Q5: 在專案資料夾中無法使用 @vibe 指令
# 確保 IDE 已正確配置 MCP 設定，並重啟 IDE

# Q6: 路徑配置問題 - 找不到 VibeCoding 服務
# 使用絕對路徑，確認 dist/ 目錄存在
# Windows 範例: "C:\\Users\\YourName\\vibeCoding-template\\dist\\vibe-services\\context-manager\\index.js"
# macOS/Linux 範例: "/Users/YourName/vibeCoding-template/dist/vibe-services/context-manager/index.js"

# Q7: 專案資料夾結構問題
# VibeCoding 會自動創建需要的資料夾，但你也可以手動建立：
mkdir -p {0_discovery,1_design,2_implementation,3_validation,4_deployment}

❌ Problemas Relacionados con la Configuración del IDE

# Q8: Cursor IDE 無法識別 @vibe 指令
# 1. 檢查 settings.json 格式是否正確 (不能有註解)
# 2. 重啟 Cursor IDE
# 3. 確認 mcpServers 配置正確

# Q9: Claude Desktop 連接失敗
# 1. 檢查 claude_desktop_config.json 格式
# 2. 確認 API 金鑰設定正確
# 3. 重啟 Claude Desktop

# Q10: 權限問題 (Windows)
# 以管理員身分執行 PowerShell，設定執行政策：
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Obtener Ayuda

📖 Solución de Problemas Completa: Guía de Configuración de IDE
💬 Soporte de la Comunidad: GitHub Issues
🐛 Reporte de Errores: GitHub Issues

🤝 Contribuciones

¡Damos la bienvenida a las contribuciones! Consulta la Guía de Contribuciones para obtener más detalles.

📝 Licencia

Este proyecto está bajo la Licencia MIT - consulta el archivo LICENSE para más detalles.

✅ Lista de Verificación de Configuración Completa

Antes de comenzar a usar VibeCoding, confirma los siguientes elementos:

🔧 Verificación de Configuración del Sistema

Node.js >= 18.0.0 (node --version)
VibeCoding descargado y compilado (npm run build exitoso)
Estado del sistema normal (npm run vibecoding status muestra ✅)
Sistema de prompts funcionando (npm run test:prompts muestra 🎉)

📁 Verificación de Configuración del Proyecto

Carpeta del proyecto creada (mkdir my-project && cd my-project)
Inicialización de Git (configuración de git init y .gitignore)
IDE abrió el proyecto (code . o cursor .)

⚙️ Verificación de Configuración del IDE

Archivo de configuración MCP modificado (settings.json o claude_desktop_config.json)
Ruta de VibeCoding correcta (usar ruta absoluta)
IDE reiniciado (la configuración solo se aplica después de reiniciar)
Comando de prueba exitoso (@vibe start "測試" responde)

🎯 Listo para Comenzar el Desarrollo

Elegir el modo de desarrollo:
- 📋 Flujo completo: Comenzar con la aclaración de requisitos (@vibe start "專案名")
- ⚡ Prototipo rápido: Modo MVP en 30 minutos
- 💻 Desarrollo directo: Omitir la aclaración y generar código directamente

🚀 ¡Ahora disfruta de la experiencia de desarrollo conversacional impulsada por IA!

📚 Ruta de Aprendizaje Recomendada

Principiante: Guía Completa de Configuración de IDE → Completa un proyecto simple
Intermedio: Manual de Referencia Completo de Herramientas → Explora todas las funciones
Experto: Documento de Diseño de Arquitectura → Personalización y extensión

💡 Consejo: ¿Tienes problemas? Consulta la 🔍 Solución de Problemas anterior o consulta GitHub Issues