¿Qué hace esta skill?

Esta skill de Claude AI transforma tus briefs en experiencias web visualmente impactantes y plenamente funcionales. Genera un único archivo HTML autocontenido con CSS y JavaScript embebido, garantizando un carácter artesanal, accesibilidad WCAG AA y compatibilidad multiplataforma sin depender de frameworks externos.

Landing Pages de Producto
Lanza páginas de captación con precargas animadas, efectos parallax y formularios validados en un solo archivo.
Dashboards Interactivos
Crea paneles de control con lógica de negocio completa y visualización de datos usando vanilla JS y CSS nativo.
Juegos y Cuestionarios
Desarrolla experiencias interactivas y microjuegos embebidos sin necesidad de librerías externas pesadas.
SPAs Autocontenidas
Construye aplicaciones de una sola página con navegación fluida y arquitectura modular dentro de un único HTML.

Ejemplos de uso

🚀 Landing de Café
Necesito una landing page para una marca de café de especialidad. Paleta terracota y crema. Precarga animada, formulario de suscripción con validación y sección de productos con hover effects. Todo en un solo HTML.
📊 Dashboard Financiero
Crea un dashboard interactivo para visualizar gastos mensuales con gráficos simples en CSS, tarjetas de resumen y navegación por pestañas. Debe ser accesible y estar en un único archivo HTML.
🎮 Cuestionario de Personalidad
Diseña un cuestionario interactivo de 5 preguntas con transiciones suaves entre pantallas, cálculo de resultados en JS y un diseño visual moderno y artesanal en un solo HTML.
📱 Portafolio SPA
Genera una Single Page Application para un portafolio de diseño. Incluye menú de navegación SPA, secciones de proyectos con modales y un sistema de diseño minimalista desde cero en un único HTML.

Características

Único Archivo HTML Autocontenido Todo el CSS y JavaScript se empaquetan en un solo archivo, facilitando el despliegue y la portabilidad.
Carácter Artesanal El diseño se pule para no aparentar ser generado por IA, asegurando coherencia, unicidad y microinteracciones.
Accesibilidad WCAG AA Incluye etiquetas ARIA, navegación por teclado y contraste adecuado para cumplir con los estándares de accesibilidad.
Cero Dependencias Externas Prefiere vanilla JS y CSS nativo, usando CDNs solo cuando es estrictamente necesario para mantener el rendimiento.
Sistema de Diseño desde Cero Si no hay identidad visual definida, la skill genera tipografía, paleta y componentes base coherentes automáticamente.

Preguntas frecuentes

No. La skill prioriza vanilla JS y CSS nativo, empaquetando todo en un único archivo HTML autocontenido. Solo usa CDNs si es estrictamente necesario.
Sí, la skill asegura el cumplimiento de WCAG nivel AA como mínimo, incluyendo etiquetas ARIA, navegación por teclado y contraste adecuado.
La skill generará un sistema de diseño completo desde cero, incluyendo tipografía, paleta de colores, espaciado y componentes base, marcándolo como propuesta.
No. Una de las restricciones clave es pulir los detalles visuales y microinteracciones para que el diseño tenga un carácter artesanal, único y coherente.
Webs de Alto Impacto en un Solo Archivo

¿Prefieres escuchar el contenido? Genera la narración de audio con un clic.