Why we love this skill
Esta función convierte el código en imágenes con resaltado de alta calidad, simula una interfaz de terminal y admite descargas en alta definición, lo que la convierte en una herramienta ideal para que los desarrolladores compartan fragmentos de código.
Instrucciones
Como desarrollador front-end sénior, debes convertir todos los fragmentos de código del contenido en imágenes resaltadas. ¡Es fundamental extraer todos los fragmentos de código! Ten en cuenta que el código encerrado entre comillas invertidas (``) de Markdown debe tratarse como un único fragmento. Presta especial atención al código JSX. Trata la sintaxis de JavaScript como si fuera JSX para el resaltado.
Combinación de colores: El gris oscuro se utiliza como color de fondo principal, y los bloques de código utilizan un fondo oscuro con resaltados de código de color (el cian y el verde brillante son los colores clave para enfatizar).
Diseño: Los bloques de código simulan la apariencia de una terminal/editor de código, pero se han eliminado los botones de la parte superior del editor, mostrando únicamente el código. Cada tarjeta tiene un margen superior e inferior de 15 píxeles y un margen izquierdo y derecho de 25 píxeles.
Implementación técnica: El diseño y el estilo se implementan mediante HTML5 y CSS (los bloques de código deben resaltarse en color); la función dom-to-image-more está integrada. La dirección del script dom-to-image-more es https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js, que permite la descarga de imágenes de una sola tarjeta (botón ubicado debajo de la tarjeta, las imágenes deben ser de alta resolución) y la descarga con un solo clic de todas las imágenes (después de hacer clic, espere 1 segundo antes de descargar las imágenes una por una). Evite agregar comillas invertidas innecesarias (`\`) al código, ya que esto puede causar errores.
Al implementar esto, tenga en cuenta lo siguiente: Mantenga la tarjeta de portada simple. No utilice pseudoelementos para los iconos; use SVG directamente. Las imágenes descargadas deben ser de alta resolución, con una escala de 2. Nombre las imágenes secuencialmente usando números.
description
Convierte todo el código del artículo en imágenes y descárgalas con un solo clic.
Related Skills
View all
Generación de indicaciones para la película del producto
Esta herramienta está diseñada para ayudar a los usuarios a crear anuncios de calidad cinematográfica para sus productos. Basándose en la información del producto que usted proporciona, genera de forma inteligente un conjunto completo de indicaciones cinematográficas de alta gama con IA, incluyendo indicaciones para imágenes de pósteres de storyboard e indicaciones para la generación de vídeo, lo que la hace ideal para profesionales del marketing de marca y creativos que desean conmover al público a través de la atmósfera y la emoción, en lugar de las especificaciones del producto. Mediante un análisis profundo de las características del producto y el tono de la marca, la herramienta determina la dirección del ritmo, el sistema visual (paleta de colores, personaje principal) y diseña una secuencia de 12 tomas con un arco emocional completo. Se basa en la filosofía de "baja densidad de información, alta densidad emocional", manteniendo el enfoque en la luz, la atmósfera y la textura, en lugar de la presentación directa del producto. Los usuarios simplemente proporcionan información básica como el tipo de producto y el nombre de la marca. La herramienta autocompleta o genera los eslóganes de marca que falten y selecciona los descriptores más adecuados de una amplia biblioteca de palabras clave para crear indicaciones que sean específicas y artísticamente atractivas. El resultado final incluye un análisis detallado del producto, junto con dos indicaciones independientes y listas para usar para herramientas de generación de imágenes y vídeos mediante IA, lo que facilita la producción de contenido de marca atractivo.
Estilista de color con IA Pro
Servicio de análisis de color de nivel profesional, comparado con estándares de 4000 RMB, incluye 14 módulos de análisis profesional (posicionamiento preciso del tipo de doce estaciones, análisis del tono de piel, soluciones de maquillaje, análisis del color y peinado del cabello, prueba del escote, análisis de accesorios, etc.), que finalmente generan un informe web interactivo de hermoso diseño con todos los colores visualizados, hasta tonos de marca específicos y listas de compras. 🎨 AI Color Stylist Pro - Servicio de análisis de color de nivel profesional ✨ ¡Comparable a un análisis profesional offline de 4000 RMB, ahora solo 99 créditos! 🎉 ¡Precio de lanzamiento por tiempo limitado! Niveles de precio: • Primeros 10 usuarios: 99 créditos ✨ (Precio actual) • 11-100 usuarios: 199 créditos • 101-200 usuarios: 299 créditos • 201 usuarios y más: 399 créditos ⏰ ¡El precio aumenta automáticamente con el número de usuarios, compre pronto y disfrute! ━━━━━━━━━━━━━━━━━━━━ 📊 14 Módulos Principales de Análisis Profesional ✅ Posicionamiento Preciso para las Doce Estaciones (Primavera Cálida/Primavera Brillante/Primavera Suave, Verano Ligero/Verano Frío/Verano Suave, Otoño Cálido/Otoño Suave/Finales de Otoño, Invierno Frío/Finales de Invierno/Invierno Brillante) ✅ Visualización Completa de la Carta de Colores (20-30 colores básicos, con tonos HEX) ✅ Esquemas de Color de Maquillaje (Base/Cejas/Sombra de Ojos/Colorete/Labial, tonos de marcas específicas) ✅ Sugerencias de Peinado y Color de Cabello (Color de Cabello + peinado + recomendaciones de flequillo) ✅ Esquemas de Combinación de Ropa (Fórmulas de Combinación de Colores, recomendaciones de Artículos, análisis de escotes) ✅ Análisis Detallado de Accesorios (Metálicos colores, piedras preciosas, pendientes, collares, bolsos, gafas) ✅ Lista de compras (marcas específicas + tonos + rango de precios) ✅ 3 ejemplos de atuendos completos ━━━━━━━━━━━━━━━━━━━━━ 🌟 Entregado en un informe web interactivo de hermoso diseño: • Visualización de todos los colores • Fondo degradado + diseño de tarjeta • Diseño responsivo, perfectamente adaptado para teléfonos móviles y ordenadores • Compartible, guardable e imprimible ━━━━━━━━━━━━━━━━━━━━ 👥 Público objetivo • Aquellos que desean mejorar su imagen personal • Aquellos que no están seguros de cómo elegir los colores de la ropa • Quienes buscan el maquillaje y el color de cabello más adecuados • Quienes se preparan para las compras de temporada y necesitan asesoramiento profesional • Quienes desean comprender su color de temporada ━━━━━━━━━━━━━━━━━━━━ 💡 Cómo usar 1. Sube una foto frontal tomada con luz natural (o una descripción de tu apariencia) 2. Responde algunas preguntas sencillas de opción múltiple 3. La IA realiza un análisis profesional en 14 módulos 4. Genera un informe de diagnóstico web con un diseño atractivo 5. Recibe una lista de compras completa y sugerencias de estilo ━━━━━━━━━━━━━━━━━━━━ 🎁 Oferta exclusiva para los primeros compradores Beneficios Los primeros 10 usuarios recibirán adicionalmente: • Una consulta de seguimiento gratuita • Guía exclusiva en PDF para la combinación de colores • Acceso prioritario a futuras actualizaciones ⏰ ¡Oferta por tiempo limitado, por orden de llegada!
Generador de letras de tiempo
Transforma una frase vernácula moderna en texto de carta con diferentes estilos de época (cartas de remesas de chinos en el extranjero/República de China/años 70/años 90/Milenio) y genera imágenes de papel de carta manuscrita con el estilo visual correspondiente.
Código para imagen
Why we love this skill
Esta función convierte el código en imágenes con resaltado de alta calidad, simula una interfaz de terminal y admite descargas en alta definición, lo que la convierte en una herramienta ideal para que los desarrolladores compartan fragmentos de código.
Instrucciones
Como desarrollador front-end sénior, debes convertir todos los fragmentos de código del contenido en imágenes resaltadas. ¡Es fundamental extraer todos los fragmentos de código! Ten en cuenta que el código encerrado entre comillas invertidas (``) de Markdown debe tratarse como un único fragmento. Presta especial atención al código JSX. Trata la sintaxis de JavaScript como si fuera JSX para el resaltado.
Combinación de colores: El gris oscuro se utiliza como color de fondo principal, y los bloques de código utilizan un fondo oscuro con resaltados de código de color (el cian y el verde brillante son los colores clave para enfatizar).
Diseño: Los bloques de código simulan la apariencia de una terminal/editor de código, pero se han eliminado los botones de la parte superior del editor, mostrando únicamente el código. Cada tarjeta tiene un margen superior e inferior de 15 píxeles y un margen izquierdo y derecho de 25 píxeles.
Implementación técnica: El diseño y el estilo se implementan mediante HTML5 y CSS (los bloques de código deben resaltarse en color); la función dom-to-image-more está integrada. La dirección del script dom-to-image-more es https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js, que permite la descarga de imágenes de una sola tarjeta (botón ubicado debajo de la tarjeta, las imágenes deben ser de alta resolución) y la descarga con un solo clic de todas las imágenes (después de hacer clic, espere 1 segundo antes de descargar las imágenes una por una). Evite agregar comillas invertidas innecesarias (`\`) al código, ya que esto puede causar errores.
Al implementar esto, tenga en cuenta lo siguiente: Mantenga la tarjeta de portada simple. No utilice pseudoelementos para los iconos; use SVG directamente. Las imágenes descargadas deben ser de alta resolución, con una escala de 2. Nombre las imágenes secuencialmente usando números.
description
Convierte todo el código del artículo en imágenes y descárgalas con un solo clic.
Related Skills
View allGeneración de indicaciones para la película del producto
Esta herramienta está diseñada para ayudar a los usuarios a crear anuncios de calidad cinematográfica para sus productos. Basándose en la información del producto que usted proporciona, genera de forma inteligente un conjunto completo de indicaciones cinematográficas de alta gama con IA, incluyendo indicaciones para imágenes de pósteres de storyboard e indicaciones para la generación de vídeo, lo que la hace ideal para profesionales del marketing de marca y creativos que desean conmover al público a través de la atmósfera y la emoción, en lugar de las especificaciones del producto. Mediante un análisis profundo de las características del producto y el tono de la marca, la herramienta determina la dirección del ritmo, el sistema visual (paleta de colores, personaje principal) y diseña una secuencia de 12 tomas con un arco emocional completo. Se basa en la filosofía de "baja densidad de información, alta densidad emocional", manteniendo el enfoque en la luz, la atmósfera y la textura, en lugar de la presentación directa del producto. Los usuarios simplemente proporcionan información básica como el tipo de producto y el nombre de la marca. La herramienta autocompleta o genera los eslóganes de marca que falten y selecciona los descriptores más adecuados de una amplia biblioteca de palabras clave para crear indicaciones que sean específicas y artísticamente atractivas. El resultado final incluye un análisis detallado del producto, junto con dos indicaciones independientes y listas para usar para herramientas de generación de imágenes y vídeos mediante IA, lo que facilita la producción de contenido de marca atractivo.
Estilista de color con IA Pro
Servicio de análisis de color de nivel profesional, comparado con estándares de 4000 RMB, incluye 14 módulos de análisis profesional (posicionamiento preciso del tipo de doce estaciones, análisis del tono de piel, soluciones de maquillaje, análisis del color y peinado del cabello, prueba del escote, análisis de accesorios, etc.), que finalmente generan un informe web interactivo de hermoso diseño con todos los colores visualizados, hasta tonos de marca específicos y listas de compras. 🎨 AI Color Stylist Pro - Servicio de análisis de color de nivel profesional ✨ ¡Comparable a un análisis profesional offline de 4000 RMB, ahora solo 99 créditos! 🎉 ¡Precio de lanzamiento por tiempo limitado! Niveles de precio: • Primeros 10 usuarios: 99 créditos ✨ (Precio actual) • 11-100 usuarios: 199 créditos • 101-200 usuarios: 299 créditos • 201 usuarios y más: 399 créditos ⏰ ¡El precio aumenta automáticamente con el número de usuarios, compre pronto y disfrute! ━━━━━━━━━━━━━━━━━━━━ 📊 14 Módulos Principales de Análisis Profesional ✅ Posicionamiento Preciso para las Doce Estaciones (Primavera Cálida/Primavera Brillante/Primavera Suave, Verano Ligero/Verano Frío/Verano Suave, Otoño Cálido/Otoño Suave/Finales de Otoño, Invierno Frío/Finales de Invierno/Invierno Brillante) ✅ Visualización Completa de la Carta de Colores (20-30 colores básicos, con tonos HEX) ✅ Esquemas de Color de Maquillaje (Base/Cejas/Sombra de Ojos/Colorete/Labial, tonos de marcas específicas) ✅ Sugerencias de Peinado y Color de Cabello (Color de Cabello + peinado + recomendaciones de flequillo) ✅ Esquemas de Combinación de Ropa (Fórmulas de Combinación de Colores, recomendaciones de Artículos, análisis de escotes) ✅ Análisis Detallado de Accesorios (Metálicos colores, piedras preciosas, pendientes, collares, bolsos, gafas) ✅ Lista de compras (marcas específicas + tonos + rango de precios) ✅ 3 ejemplos de atuendos completos ━━━━━━━━━━━━━━━━━━━━━ 🌟 Entregado en un informe web interactivo de hermoso diseño: • Visualización de todos los colores • Fondo degradado + diseño de tarjeta • Diseño responsivo, perfectamente adaptado para teléfonos móviles y ordenadores • Compartible, guardable e imprimible ━━━━━━━━━━━━━━━━━━━━ 👥 Público objetivo • Aquellos que desean mejorar su imagen personal • Aquellos que no están seguros de cómo elegir los colores de la ropa • Quienes buscan el maquillaje y el color de cabello más adecuados • Quienes se preparan para las compras de temporada y necesitan asesoramiento profesional • Quienes desean comprender su color de temporada ━━━━━━━━━━━━━━━━━━━━ 💡 Cómo usar 1. Sube una foto frontal tomada con luz natural (o una descripción de tu apariencia) 2. Responde algunas preguntas sencillas de opción múltiple 3. La IA realiza un análisis profesional en 14 módulos 4. Genera un informe de diagnóstico web con un diseño atractivo 5. Recibe una lista de compras completa y sugerencias de estilo ━━━━━━━━━━━━━━━━━━━━ 🎁 Oferta exclusiva para los primeros compradores Beneficios Los primeros 10 usuarios recibirán adicionalmente: • Una consulta de seguimiento gratuita • Guía exclusiva en PDF para la combinación de colores • Acceso prioritario a futuras actualizaciones ⏰ ¡Oferta por tiempo limitado, por orden de llegada!
Generador de letras de tiempo
Transforma una frase vernácula moderna en texto de carta con diferentes estilos de época (cartas de remesas de chinos en el extranjero/República de China/años 70/años 90/Milenio) y genera imágenes de papel de carta manuscrita con el estilo visual correspondiente.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
