Guía de Prompts JSON para Desarrollo Web con IA

📖 Introducción

¿Cansado de obtener código con Node.js, React o Bootstrap cuando tú trabajas con PHP vanilla? ¿O de recibir respuestas que no siguen las convenciones de tu proyecto?

La solución es crear un archivo JSON que describa completamente tu stack tecnológico, preferencias y reglas de desarrollo. Este archivo se convierte en el "contexto permanente" que incluyes en cada prompt.

¿Cómo funciona?

1. Creas un archivo mi-proyecto.json con tu configuración
2. En cada prompt a la IA, incluyes el contenido de ese archivo
3. La IA genera código que coincide exactamente con tus necesidades

🎯 Código Preciso

Sin frameworks no solicitados ni librerías inesperadas.

🔄 Consistencia

El mismo estilo y estructura en todo tu proyecto.

⚡ Eficiencia

Menos iteraciones, más código útil desde el primer intento.

❓ ¿Por qué usar JSON para Prompts?

El Problema

Cuando le pides código a una IA sin contexto, obtienes:

React cuando tú usas vanilla JS
Express cuando tú usas PHP
Tailwind cuando tú usas CSS puro
Mongoose cuando tú usas PDO

La Solución

En lugar de explicar en cada prompt qué tecnologías usas, crea un archivo JSON que:

Se Lee una vez

Lo incluyes al inicio de cada conversación
Define tu stack completo
Establece reglas de código

Es Estructurado

Fácil de mantener y actualizar
Sin ambigüedades
Legible por humanos y máquinas

💡 Consejo

Usa el mismo archivo JSON como referencia en todos tus proyectos. Copia, modifica y adapta según las necesidades de cada proyecto.

{ } Estructura del Archivo JSON

El archivo JSON para prompts tiene una estructura clara organizada en secciones:

estructura-general.json

{
    // Información del proyecto
    "proyecto": { ... },

    // Tecnologías obligatorias
    "tecnologias": { ... },

    // Tecnologías prohibidas
    "excluir": { ... },

    // Reglas de código
    "reglas": { ... },

    // Convenciones del proyecto
    "convenciones": { ... },

    // Estructura de archivos
    "estructura": { ... },

    // Base de datos
    "base_datos": { ... },

    // Seguridad
    "seguridad": { ... }
}

📋 Campos del Archivo JSON

proyecto

Campo	Tipo	Descripción
`nombre`	string	Nombre del proyecto
`descripcion`	string	Descripción breve del proyecto
`tipo`	string	web, api, cms, eccomerce

tecnologias

Campo	Tipo	Descripción
`frontend`	array	Tecnologías de frontend: HTML, CSS, JS
`backend`	array	Tecnologías de backend: PHP, Python, Node
`base_datos`	array	MySQL, PostgreSQL, SQLite
`version_php`	string	Versión de PHP: "8.2"
`orm`	string/null	Eloquent, Doctrine, null

excluir

Lista de tecnologías y frameworks que NO quieres en el código generado:

Campo	Tipo	Descripción
`frameworks`	array	React, Vue, Angular, Laravel, Express
`css`	array	Bootstrap, Tailwind, SASS
`libs`	array	jQuery, Lodash, Axios
`databases`	array	MongoDB, Redis, Firebase

reglas

Campo	Tipo	Descripción
`naming`	string	snake_case, camelCase, kebab-case
`indentacion`	string	"4 espacios", "2 espacios", "tabs"
`comentarios`	boolean	Si incluir comentarios en código
`tipado`	boolean	Si usar tipos estrictos en JS/PHP

💻 Ejemplos Prácticos

Ejemplo 1: Proyecto PHP Vanilla

proyecto-php-vanilla.json

{
    "proyecto": {
        "nombre": "Sistema de Gestión de Tareas",
        "descripcion": "Aplicación web para gestionar tareas con usuarios y categorías",
        "tipo": "web"
    },

    "tecnologias": {
        "frontend": ["HTML5", "CSS3", "JavaScript ES6"],
        "backend": ["PHP 8.2"],
        "base_datos": ["MySQL 8.0"],
        "orm": null,
        "servidor": "Apache"
    },

    "excluir": {
        "frameworks": [
            "Laravel", "Symfony", "CodeIgniter",
            "React", "Vue", "Angular"
        ],
        "css": ["Bootstrap", "Tailwind", "SASS", "Less"],
        "libs": ["jQuery", "Axios", "Lodash"],
        "runtime": ["Node.js", "Deno"]
    },

    "reglas": {
        "naming": "snake_case",
        "indentacion": "4 espacios",
        "comentarios": true,
        "tipado": true
    }
}

Ejemplo 2: API REST PHP + MySQL

api-rest-php.json

{
    "proyecto": {
        "nombre": "API REST de Usuarios",
        "descripcion": "API RESTful para gestión de usuarios con autenticación JWT",
        "tipo": "api"
    },

    "tecnologias": {
        "backend": ["PHP 8.2"],
        "base_datos": ["MySQL 8.0"],
        "auth": "JWT",
        "headers": "Content-Type: application/json"
    },

    "excluir": {
        "frameworks": ["Laravel", "Slim", "Express"],
        "librerias_auth": ["Passport", "Sanctum"],
        "orm": ["Eloquent", "Doctrine"]
    },

    "reglas": {
        "rest": {
            "metodos": "GET, POST, PUT, DELETE",
            "codigos": "200, 201, 400, 401, 403, 404, 500",
            "formato_respuesta": "{ success: bool, data: any, message: string }"
        },
        "seguridad_obligatoria": [
            "Prepared statements",
            "Validación de inputs",
            "Sanitización de outputs"
        ]
    },

    "estructura": {
        "carpetas": ["controllers/", "models/", "config/"],
        "archivo_config": "config/database.php"
    }
}

Ejemplo 3: E-commerce PHP + MySQL

ecommerce-php.json

{
    "proyecto": {
        "nombre": "Tienda Online",
        "descripcion": "E-commerce con carrito, pagos y panel de administración",
        "tipo": "ecommerce"
    },

    "tecnologias": {
        "frontend": ["HTML5", "CSS3", "JavaScript ES6"],
        "backend": ["PHP 8.2"],
        "base_datos": ["MySQL 8.0"],
        "pagos": ["Stripe", "PayPal"],
        "imagenes": "local"
    },

    "excluir": {
        "frameworks": [
            "WooCommerce", "PrestaShop",
            "React", "Vue"
        ],
        "css": ["Bootstrap", "Tailwind"],
        "template_engine": ["Twig", "Blade", "Smarty"]
    },

    "reglas": {
        "naming": "snake_case",
        "estructura_mvc": true,
        "carpeta_views": "views/",
        "sesiones": "PHP native sessions"
    },

    "modulos": [
        "catalogo_productos",
        "carrito_compras",
        "proceso_pago",
        "cuenta_usuario",
        "panel_admin",
        "historial_pedidos"
    ],

    "seguridad": {
        "passwords": "bcrypt",
        "csrf": true,
        "xss_protection": true,
        "sql_injection": "prepared_statements"
    }
}

📝 Plantillas Reutilizables

Template Base para PHP Vanilla

template-php-vanilla.json

{
    "proyecto": {
        "nombre": "[NOMBRE_DEL_PROYECTO]",
        "descripcion": "[DESCRIPCION_BREVE]",
        "tipo": "[web|api|cms|ecommerce]"
    },

    "tecnologias": {
        "frontend": ["HTML5", "CSS3", "JavaScript ES6"],
        "backend": ["PHP 8.x"],
        "base_datos": ["MySQL"],
        "orm": null
    },

    "excluir": {
        "frameworks": [
            "Laravel", "Symfony", "CodeIgniter",
            "React", "Vue", "Angular",
            "Next.js", "Nuxt", "Express"
        ],
        "css": [
            "Bootstrap", "Tailwind", "SASS",
            "Less", "Foundation"
        ],
        "libs": [
            "jQuery", "Axios", "Fetch",
            "Lodash", "Moment.js"
        ],
        "runtime": [
            "Node.js", "Deno", "Bun"
        ]
    },

    "reglas": {
        "naming": "snake_case",
        "indentacion": "4 espacios",
        "comentarios": true,
        "tipado": true,
        "php_tags": "",
        "pdo_queries": true
    },

    "convenciones": {
        "carpetas": {
            "public": "archivos_accesibles",
            "includes": "codigo_no_accesible",
            "assets": "css/js/images"
        },
        "archivos": {
            "config": "config/database.php",
            "funciones": "includes/functions.php",
            "header": "includes/header.php",
            "footer": "includes/footer.php"
        }
    },

    "seguridad": {
        "passwords": "password_hash() con PASSWORD_DEFAULT",
        "sql": "Prepared statements obligatorios",
        "xss": "htmlspecialchars() en outputs",
        "csrf": true
    }
}

Prompt Para Usar el JSON

como-usar.txt

// Copia y pega esto al inicio de cada prompt:

=== CONFIGURACIÓN DEL PROYECTO ===
// Incluye aquí el contenido de tu archivo JSON

=== SOLICITUD ===
[Describe aquí lo que necesitas]

=== REGLAS ===
- Usa SOLO las tecnologías especificadas en tecnologias
- NO uses ninguna tecnología de la lista excluir
- Sigue las convenciones de naming y estructura
- Incluye comentarios en español
- Verifica seguridad: prepared statements, sanitización

Ejemplo de Prompt Completo

prompt-ejemplo.txt

=== CONFIGURACIÓN DEL PROYECTO ===
// proyecto.json
{
    "tecnologias": {
        "frontend": ["HTML5", "CSS3", "JavaScript ES6"],
        "backend": ["PHP 8.2"],
        "base_datos": ["MySQL"]
    },
    "excluir": {
        "frameworks": ["React", "Vue", "Laravel"],
        "css": ["Bootstrap", "Tailwind"],
        "libs": ["jQuery"]
    },
    "reglas": {
        "naming": "snake_case",
        "pdo": true
    }
}

=== SOLICITUD ===
Crea un formulario de registro de usuarios con los siguientes campos:
- Nombre completo
- Email (único en la base de datos)
- Contraseña (mínimo 8 caracteres)
- Confirmar contraseña

El formulario debe:
- Validar todos los campos en JavaScript antes de enviar
- Enviar datos por AJAX a register.php
- Mostrar errores específicos bajo cada campo
- Hashear la contraseña con password_hash()
- Insertar en la tabla "usuarios"
- Devolver JSON con success/error

=== REGLAS ===
- SOLO PHP vanilla, SIN frameworks
- SOLO CSS vanilla, SIN Bootstrap ni Tailwind
- Usa fetch() para AJAX, NO uses jQuery ni Axios
- Prepared statements OBLIGATORIOS para SQL
- Código en español con comentarios
- Estructura: formulario.php + register.php + js/registro.js

💡 Tips y Mejores Prácticas

Organización de Archivos JSON

Estructura recomendada:

estructura-carpetas.txt
mi-proyecto/
├── prompts/
│   ├── config-base.json      // Tu configuración base
│   ├── api-config.json       // Para prompts de API
│   ├── frontend-config.json  // Para prompts de UI
│   └── db-config.json       // Para scripts de BD
└── .gitignore               // Ignorar en git si tiene secrets

Mantén tu JSON Actualizado

Actualiza las versiones de PHP/MySQL cuando las cambies
Añade nuevas reglas cuando detectes patrones de error
Documenta las convenciones específicas del proyecto
Incluye ejemplos de naming si usas convenciones especiales

Campos Avanzados

Para APIs

Formato de respuestas
Códigos HTTP permitidos
Versionado (v1, v2)
Rate limiting

Para Frontend

Breakpoints responsivos
Paleta de colores
Fuentes permitidas
Iconos a usar

Errores Comunes a Evitar

❌ No hacer:

Olvidar actualizar el JSON al cambiar de proyecto
Ser demasiado vago en las exclusiones
No especificar la versión de PHP
Olvidar mencionar que no quieres ORMs

✅ Hacer:

Ser específico en cada tecnología excluida
Incluir ejemplos de código que sigues
Mencionar patrones de diseño usados (MVC, ADR)
Especificar si usas prepared statements o no

JSON Completo de Referencia

referencia-completa.json

{
    "proyecto": {
        "nombre": "",
        "descripcion": "",
        "tipo": "web",
        "url_produccion": ""
    },

    "tecnologias": {
        "frontend": ["HTML5", "CSS3", "JavaScript ES6"],
        "backend": ["PHP"],
        "version_php": "8.x",
        "base_datos": ["MySQL"],
        "version_db": "8.x",
        "servidor": "Apache"
    },

    "excluir": {
        "frameworks_frontend": [],
        "frameworks_backend": [],
        "css_frameworks": [],
        "js_librerias": [],
        "databases": [],
        "runtimes": []
    },

    "reglas": {
        "naming_convention": "snake_case",
        "indentacion": "4 espacios",
        "comentarios": true,
        "idioma_comentarios": "español",
        "php_tags": "",
        "line_ending": "LF"
    },

    "estructura": {
        "patron": "mvc|simple|modular",
        "carpetas": {
            "public": ".",
            "includes": "includes",
            "controllers": "controllers",
            "models": "models",
            "views": "views",
            "assets": "assets"
        }
    },

    "base_datos": {
        "motor": "InnoDB",
        "charset": "utf8mb4",
        "collation": "utf8mb4_unicode_ci",
        "prepared_statements": true,
        "tabla_prefix": ""
    },

    "seguridad": {
        "password_hash": "bcrypt",
        "sql_injection": "prepared_statements",
        "xss": "htmlspecialchars",
        "csrf": true,
        "https_only": true
    },

    "estilos": {
        "metodologia": "BEM|none",
        "variables_css": true,
        "breakpoints": {
            "mobile": "576px",
            "tablet": "768px",
            "desktop": "992px",
            "large": "1200px"
        }
    }
}

🎯 Resumen

1. Crea tu JSON

Define tu stack tecnológico, exclusiones y reglas en un archivo JSON estructurado.

2. Copia en cada prompt

Incluye el JSON al inicio de cada conversación con la IA.

3. Obtén código preciso

Recibe código que coincide exactamente con tu entorno de desarrollo.

Beneficios Inmediatos

• Menos iteraciones para obtener código útil
• Sin frameworks no solicitados
• Código consistente con tu proyecto
• Menos tiempo depurando código generado