Repositorio con código en https://github.com/AlfonsoOrozcoAguilarnoNDA/vibeCodingHeatmapWordpress/tree/main
Volvemos a las pruebas semanales de estress contra los diferentes LLM. En este caso se trata de crear un heatmap o mapa de calor que muestre la frecuencia de mensajes posts en un wordpres.
Este es un reto interesante, porque veremos si considera o no los posts a futuro.
Por cierto, disculpas por no mucho movimiento esta semana pero estuve preparando un documento legal con un software vibecoding y fueron mas de 300 hojas, así que espero que enter hoy y mañana regresemos al ritmo normal de mensajes.
INICIA PROMPT
Actúa como un desarrollador experto en PHP y WordPress. Tu tarea es escribir un script único siguiendo estas especificaciones técnicas estrictas:
1. Arquitectura y Estilo:
-
Lenguaje: PHP 8.x en estilo procedural (evitar clases o estructuras complejas).
-
Framework CSS: Bootstrap 4.6.2 (vía jsDelivr).
-
Iconos: FontAwesome 5.15.4 (vía jsDelivr).
-
Integración: El script debe ejecutarse dentro del entorno de WordPress (usando la conexión
$wpdbglobal), pero debe ser un archivo.phpindependiente que se pueda colocar en la raíz o en una carpeta del tema.
2. Requisitos de la Interfaz (UI):
-
Header Fijo: Debe mostrar el nombre del modelo de IA que generó el código (usa un marcador de posición como
[INSERTAR MODELO AQUÍ]) y el nombre del dominio actual de forma dinámica. -
Footer Fijo: Debe mostrar la versión de PHP activa en el servidor. Si te es posible detcta versión de WordPress.
-
Cuerpo: Una tarjeta (card) central que contenga un Mapa de Calor (Heatmap) al estilo de las contribuciones de GitHub.
3. Lógica del Mapa de Calor:
-
Debe mostrar los últimos 12 meses.
-
Debe contabilizar únicamente Posts publicados (excluir páginas y otros post types).
-
La intensidad del color debe variar según la cantidad de posts publicados por día.
-
Debe ser visible para cualquier visitante (sin requerir permisos de administrador).
4. Entrega:
-
Proporciona el código en un solo bloque.
-
Asegúrate de que los CDN de JS y CSS estén correctamente implementados en el
<head>y antes del cierre del</body>.
FIN PROMPT
Resultados:
- Ganador Empate Claude, es la imagen del repositorio 9.0
- Ganador Empate Deepseek. EXCELENTE. 9.0
- Qwen Segundo lugar 8.5 Muy limpio pero no dice cuantos son en la barra. Se puede adaptar y es libre.
- Gemini Tercer lugar 8.4 Limpio pero confiuso, sin embargo ser►1a el que usara si no usara a Claude
- Kimi: 8.0 Excelente pero no se siente smooth. Se siente raro al usarlo.
- Grok: 7.0 Falla en diseño, minimalista, es al momento su peior resultado.
- Copilot 0 – No funciona
Comentarios :
- Gemini : 174 Limpio pero confuso
- Claude : 588 lineas Lo que yo necesitaba y no sabia que necesitaba. Se ve grande pero entrerga algo excelente, empate con claude pero menos lineas.
- Deepseek se identifica a si mismo como claude sonnet, excelente
- Copilot: 136 No se ve, no funciona.
- Kimi 620 Excelente pero no se siente … smooth. Se destaca que pimero posuo que todo inclusive cero se viera y le dije que regenerara.
- grok: 320 falla en diseño. Minimalista pero la barra de cabecera no es fija.
- qwen:248 muy limpio pero npo sdice cuantos son el la barra, lo cual no estaria mal. pero es codigo libre y decente
La sorpresa de hoy es qie Deepseek se identifique como Sonnet. EN este caso me decepcionón Grok y la sopresa en calidad fue copilot limitado, vs claude y deepseek en empate. La version claude es ocura, la version de deepseek es colores claros, pero mnucho menos líneas.
En un caso real probablemente usaría la version de lacude o la de Gemini, aunque es posible que usara deepseek.
enlaces:
- https://vibecodingmexico.com/heatmapclaude.php
- https://vibecodingmexico.com/heatmapdeepseek.php
- https://vibecodingmexico.com/heatmapgemini.php
Si cambias la palabras ahi estan los otros para visualizar.
Repositorio con código en https://github.com/AlfonsoOrozcoAguilarnoNDA/vibeCodingHeatmapWordpress/tree/main
