Loading video...

Video Failed to Load

Go Home

Crea vídeos con HTML, CSS y JS. ¿Cómo? Instalando una sola Agent Skill. Se llama HyperFrames, es de código abierto y funciona con cualquier IA. El resultado es tremendo. →

midudev's profile picture

Miguel Ángel Durán

330,085 subscribers

95,418 views • 2 days ago •via X (Twitter)

Science & TechnologyEducation
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

¡Más HTML y menos JavaScript! El lenguaje evoluciona. Abre y cierra modales sin escribir código JS. Se llama Invoker Commands y ya es compatible con todos los navegadores modernos:
0:12

¡Más HTML y menos JavaScript! El lenguaje evoluciona. Abre y cierra modales sin escribir código JS. Se llama Invoker Commands y ya es compatible con todos los navegadores modernos:

Miguel Ángel Durán

40,465 views • 6 months ago

anthropic acaba de cambiar cómo se diseña frontend con IA. se llama Frontend Design, es su skill oficial para Claude Code. y ya tiene 136.000 estrellas en GitHub. el problema que resuelve es simple: cada vez que le pedías a la IA una web, te salía lo mismo. inter como fuente. gradiente morado. layout genérico de startup. el "AI slop" de siempre. Frontend Design lo corta de raíz. obliga a Claude a comprometerse con una dirección estética antes de tocar una sola línea de código. y el resultado cambia completamente. puedes pedirle: → brutalista → editorial → retro-futurista → lujoso → maximalista y genera HTML, CSS, JS, React o Vue listos para producción. cómo instalarlo: 1. npx skills add --skill frontend-design 2. describe la web o componente que quieres. 3. elige el estilo. 4. Claude monta tipografía, color, motion y composición coherente. una sola instalación. disponible en todas tus sesiones. funciona en Claude Code, Cursor, Codex, Gemini CLI, OpenCode y 15+ harnesses. 100% open source. mantenida por Anthropic. 418.000 instalaciones en pocas semanas dicen más que cualquier review. repo 👇
0:10

anthropic acaba de cambiar cómo se diseña frontend con IA. se llama Frontend Design, es su skill oficial para Claude Code. y ya tiene 136.000 estrellas en GitHub. el problema que resuelve es simple: cada vez que le pedías a la IA una web, te salía lo mismo. inter como fuente. gradiente morado. layout genérico de startup. el "AI slop" de siempre. Frontend Design lo corta de raíz. obliga a Claude a comprometerse con una dirección estética antes de tocar una sola línea de código. y el resultado cambia completamente. puedes pedirle: → brutalista → editorial → retro-futurista → lujoso → maximalista y genera HTML, CSS, JS, React o Vue listos para producción. cómo instalarlo: 1. npx skills add --skill frontend-design 2. describe la web o componente que quieres. 3. elige el estilo. 4. Claude monta tipografía, color, motion y composición coherente. una sola instalación. disponible en todas tus sesiones. funciona en Claude Code, Cursor, Codex, Gemini CLI, OpenCode y 15+ harnesses. 100% open source. mantenida por Anthropic. 418.000 instalaciones en pocas semanas dicen más que cualquier review. repo 👇

zen.

248,051 views • 1 month ago

¡Espectacular! Dibujas una UI y genera el código HTML. Usa GPT-4 como motor y es de código abierto. →
0:13

¡Espectacular! Dibujas una UI y genera el código HTML. Usa GPT-4 como motor y es de código abierto. →

Miguel Ángel Durán

270,825 views • 2 years ago

Crea diseños en Flexbox o Grid con este recurso. Te da el HTML, CSS y código de Tailwind para copiar:
0:12

Crea diseños en Flexbox o Grid con este recurso. Te da el HTML, CSS y código de Tailwind para copiar:

Miguel Ángel Durán

29,077 views • 10 months ago

Microsot ha sacado algo muy interesante... ¡Autocompletado que funciona en todas las terminales! Se llama Inshellisense y es de código abierto:
0:10

Microsot ha sacado algo muy interesante... ¡Autocompletado que funciona en todas las terminales! Se llama Inshellisense y es de código abierto:

Miguel Ángel Durán

70,216 views • 1 year ago

Hoy hemos empezado a desarrollar la web de GTA VI con HTML, CSS y JavaScript, usando animaciones con GSAP. ¿Qué te parece? Código abierto:
0:14

Hoy hemos empezado a desarrollar la web de GTA VI con HTML, CSS y JavaScript, usando animaciones con GSAP. ¿Qué te parece? Código abierto:

Miguel Ángel Durán

25,783 views • 1 year ago

¡Esta EXTENSIÓN de CODE te ahorra muchas horas! Crea un servidor para previsualizar tu web: - Cambios en tiempo real de HTML, CSS y JS - Se abre un navegador en el mismo editor - Actualización de contenido sin guardar Se llama Live Preview y aquí tienes una demostración:
0:17

¡Esta EXTENSIÓN de CODE te ahorra muchas horas! Crea un servidor para previsualizar tu web: - Cambios en tiempo real de HTML, CSS y JS - Se abre un navegador en el mismo editor - Actualización de contenido sin guardar Se llama Live Preview y aquí tienes una demostración:

Miguel Ángel Durán

174,498 views • 2 years ago

¡Esta EXTENSIÓN de CODE te ahorra muchas horas! Crea un servidor para previsualizar tu web ✓ Cambios en tiempo real de HTML, CSS y JS ✓ Abre un navegador en el mismo editor ✓ Actualiza el contenido sin guardar Se llama Live Preview y aquí tienes una demo ↓
0:17

¡Esta EXTENSIÓN de CODE te ahorra muchas horas! Crea un servidor para previsualizar tu web ✓ Cambios en tiempo real de HTML, CSS y JS ✓ Abre un navegador en el mismo editor ✓ Actualiza el contenido sin guardar Se llama Live Preview y aquí tienes una demo ↓

Miguel Ángel Durán

56,392 views • 2 years ago

Alguien se pasó cuatro años desarrollando un entorno de escritorio completo usando tecnologías web. El resultado es espectacular y es de código abierto:
0:15

Alguien se pasó cuatro años desarrollando un entorno de escritorio completo usando tecnologías web. El resultado es espectacular y es de código abierto:

Miguel Ángel Durán

124,099 views • 1 month ago

Tremendo generador de botones con CSS. ¡Es interactivo y totalmente personalizable!
0:17

Tremendo generador de botones con CSS. ¡Es interactivo y totalmente personalizable!

Miguel Ángel Durán

97,479 views • 2 years ago

¿Pero qué brujería es esta? ¡Sólo con HTML y CSS! Cero líneas de JavaScript:
0:19

¿Pero qué brujería es esta? ¡Sólo con HTML y CSS! Cero líneas de JavaScript:

Miguel Ángel Durán

67,189 views • 1 year ago

BRUTAL ¡Web para borrar fondos de imágenes con IA! ✓ ¡Es gratis y privado! Se ejecuta en tu navegador ✓ Muy rápido al usar WebGPU y Transformers.js ✓ 100% de código abierto con licencia Apache Muy sorprendido con los resultados: →
0:14

BRUTAL ¡Web para borrar fondos de imágenes con IA! ✓ ¡Es gratis y privado! Se ejecuta en tu navegador ✓ Muy rápido al usar WebGPU y Transformers.js ✓ 100% de código abierto con licencia Apache Muy sorprendido con los resultados: →

Miguel Ángel Durán

52,790 views • 1 year ago

¡Qué maravilla de recurso para programadores! Colección de botones hermosos para tu Web o App. Con el HTML, JS y CSS listo para copiar: →
0:19

¡Qué maravilla de recurso para programadores! Colección de botones hermosos para tu Web o App. Con el HTML, JS y CSS listo para copiar: →

Miguel Ángel Durán

121,735 views • 2 years ago

¿Necesitas crear un dashboard? ¡Aquí lo tienes! ✓ Con Tailwind y totalmente personalizable ✓ 50 componentes preparados para usar ✓ Versiones en HTML, React y Vue.js ✓ Modo oscuro y responsive ¿Lo mejor? Es de código abierto:
0:13

¿Necesitas crear un dashboard? ¡Aquí lo tienes! ✓ Con Tailwind y totalmente personalizable ✓ 50 componentes preparados para usar ✓ Versiones en HTML, React y Vue.js ✓ Modo oscuro y responsive ¿Lo mejor? Es de código abierto:

Miguel Ángel Durán

74,069 views • 7 months ago

Github acaba de ☠️ al vibe coding Acaba de publicar spec-kit y en pocos días tiene 95k estrellas y 8.3k forks Esto no es un proyecto cualquiera. Es GitHub diciéndote cómo se programa con IA de verdad. El problema con los agentes de IA no es el modelo Es que le mandas una idea en texto y él interpreta lo que quiere Spec-kit resuelve eso con 6 comandos que convierten tu idea en una especificación estructurada antes de escribir una sola línea de código ✅ /speckit.constitution → las reglas del proyecto: calidad, testing, arquitectura ✅ /speckit.specify → describes QUÉ construir, no el stack ✅ /speckit.clarify → el agente pregunta lo que no entiende antes de empezar ✅ /speckit.plan → ahora sí eliges la tecnología ✅ /speckit.tasks → lista de tareas ordenada por dependencias ✅ /speckit.implement → el agente construye El entregable ya no es código generado a lo loco Es una especificación viva que tu IA lee, valida y ejecuta paso a paso Funciona con Claude Code, Cursor, Copilot, Codex, Gemini CLI y más de 25 agentes La diferencia real es esta Antes: "hazme una app de tareas" y rezas para que el agente no se pierda a mitad Ahora: especificación primero, código después El agente sabe exactamente qué construir, en qué orden y por qué 95k estrellas. 8.3k forks. Publicado por el propio GitHub. Licencia MIT. el repo aquí ⬇️
0:14

Github acaba de ☠️ al vibe coding Acaba de publicar spec-kit y en pocos días tiene 95k estrellas y 8.3k forks Esto no es un proyecto cualquiera. Es GitHub diciéndote cómo se programa con IA de verdad. El problema con los agentes de IA no es el modelo Es que le mandas una idea en texto y él interpreta lo que quiere Spec-kit resuelve eso con 6 comandos que convierten tu idea en una especificación estructurada antes de escribir una sola línea de código ✅ /speckit.constitution → las reglas del proyecto: calidad, testing, arquitectura ✅ /speckit.specify → describes QUÉ construir, no el stack ✅ /speckit.clarify → el agente pregunta lo que no entiende antes de empezar ✅ /speckit.plan → ahora sí eliges la tecnología ✅ /speckit.tasks → lista de tareas ordenada por dependencias ✅ /speckit.implement → el agente construye El entregable ya no es código generado a lo loco Es una especificación viva que tu IA lee, valida y ejecuta paso a paso Funciona con Claude Code, Cursor, Copilot, Codex, Gemini CLI y más de 25 agentes La diferencia real es esta Antes: "hazme una app de tareas" y rezas para que el agente no se pierda a mitad Ahora: especificación primero, código después El agente sabe exactamente qué construir, en qué orden y por qué 95k estrellas. 8.3k forks. Publicado por el propio GitHub. Licencia MIT. el repo aquí ⬇️

arc.

116,233 views • 16 days ago

Github acaba de ☠️ al vibe coding Acaba de publicar spec-kit y en pocos días tiene 95k estrellas y 8.3k forks Esto no es un proyecto cualquiera. Es GitHub diciéndote cómo se programa con IA de verdad. El problema con los agentes de IA no es el modelo Es que le mandas una idea en texto y él interpreta lo que quiere Spec-kit resuelve eso con 6 comandos que convierten tu idea en una especificación estructurada antes de escribir una sola línea de código ✅ /speckit.constitution → las reglas del proyecto: calidad, testing, arquitectura ✅ /speckit.specify → describes QUÉ construir, no el stack ✅ /speckit.clarify → el agente pregunta lo que no entiende antes de empezar ✅ /speckit.plan → ahora sí eliges la tecnología ✅ /speckit.tasks → lista de tareas ordenada por dependencias ✅ /speckit.implement → el agente construye El entregable ya no es código generado a lo loco Es una especificación viva que tu IA lee, valida y ejecuta paso a paso Funciona con Claude Code, Cursor, Copilot, Codex, Gemini CLI y más de 25 agentes La diferencia real es esta Antes: "hazme una app de tareas" y rezas para que el agente no se pierda a mitad Ahora: especificación primero, código después El agente sabe exactamente qué construir, en qué orden y por qué 95k estrellas. 8.3k forks. Publicado por el propio GitHub. Licencia MIT. el repo aquí ⬇️
0:14

Github acaba de ☠️ al vibe coding Acaba de publicar spec-kit y en pocos días tiene 95k estrellas y 8.3k forks Esto no es un proyecto cualquiera. Es GitHub diciéndote cómo se programa con IA de verdad. El problema con los agentes de IA no es el modelo Es que le mandas una idea en texto y él interpreta lo que quiere Spec-kit resuelve eso con 6 comandos que convierten tu idea en una especificación estructurada antes de escribir una sola línea de código ✅ /speckit.constitution → las reglas del proyecto: calidad, testing, arquitectura ✅ /speckit.specify → describes QUÉ construir, no el stack ✅ /speckit.clarify → el agente pregunta lo que no entiende antes de empezar ✅ /speckit.plan → ahora sí eliges la tecnología ✅ /speckit.tasks → lista de tareas ordenada por dependencias ✅ /speckit.implement → el agente construye El entregable ya no es código generado a lo loco Es una especificación viva que tu IA lee, valida y ejecuta paso a paso Funciona con Claude Code, Cursor, Copilot, Codex, Gemini CLI y más de 25 agentes La diferencia real es esta Antes: "hazme una app de tareas" y rezas para que el agente no se pierda a mitad Ahora: especificación primero, código después El agente sabe exactamente qué construir, en qué orden y por qué 95k estrellas. 8.3k forks. Publicado por el propio GitHub. Licencia MIT. el repo aquí ⬇️

arc.

255,818 views • 1 month ago

¡Página que te explica cualquier código paso a paso! Con una guía visual de la ejecución. Funciona con Python, JavaScript, C, C++ y Java →
0:13

¡Página que te explica cualquier código paso a paso! Con una guía visual de la ejecución. Funciona con Python, JavaScript, C, C++ y Java →

Miguel Ángel Durán

115,440 views • 1 year ago

¡Estoy alucinando con este proyectazo! Alternativa a Notion de código abierto y gratuita ✓ Disponible para Windows, Linux y macOS ✓ Desarrollada con Rust y Flutter ✓ Con Inteligencia Artificial local Se llama AppFlowy y pinta así ↓
0:15

¡Estoy alucinando con este proyectazo! Alternativa a Notion de código abierto y gratuita ✓ Disponible para Windows, Linux y macOS ✓ Desarrollada con Rust y Flutter ✓ Con Inteligencia Artificial local Se llama AppFlowy y pinta así ↓

Miguel Ángel Durán

95,850 views • 2 years ago

Impresiones ya en frio de #NintendoSwitch2 tras pasar 4 horas con ella - Donkey Kong Bananza es increíble. Todos deben probarlo. - Cyberpunk 2077 en portátil es una hazaña. Tremendo cómo se ve (y se mueve). - La consola es rocosa y de tacto premium. - El mando Pro. EL MANDO.
0:14

Impresiones ya en frio de #NintendoSwitch2 tras pasar 4 horas con ella - Donkey Kong Bananza es increíble. Todos deben probarlo. - Cyberpunk 2077 en portátil es una hazaña. Tremendo cómo se ve (y se mueve). - La consola es rocosa y de tacto premium. - El mando Pro. EL MANDO.

Alejandro Castillo

77,206 views • 1 year ago

¡Esta biblioteca de React es preciosa! Muestra notificaciones en tu aplicación fácil y rápido Personalizable y funciona con 3 líneas de código: →
0:12

¡Esta biblioteca de React es preciosa! Muestra notificaciones en tu aplicación fácil y rápido Personalizable y funciona con 3 líneas de código: →

Miguel Ángel Durán

28,830 views • 1 year ago