Generador de Imágenes Satori

Marca: Antes de empezar, personaliza el skill con tu marca.

1. Sube tu logo a assets/logo.png.
2. Sube tu foto de perfil a assets/autor.jpg.
3. Abre scripts/generate.js y edita el objeto COLORS con tus colores de marca (especialmente accent).

Inicio Rápido

cd "global_skills/1.3.2-generador-imagenes-satori/scripts"
node generate.js

Ubicación de Salida

Los carruseles se guardan en:

• ../output/{nombre-carpeta}/

Reglas de Flujo de Trabajo

[!IMPORTANT] Después de generar un carrusel, SIEMPRE crea un artefacto walkthrough mostrando todas las slides en una vista previa de carrusel:

````carousel
![Slide 1](path/to/slide-01.png)
<!-- slide -->
![Slide 2](path/to/slide-02.png)

Parte 1: Referencia Satori

CSS Soportado

NO Soportado

[!CAUTION]

• z-index (usa orden del DOM)
• calc()
• Fuentes WOFF2 (usa TTF/OTF/WOFF)
• Transformaciones 3D
• Símbolos Unicode (▸, →, etc.) — las fuentes no los incluyen

Iconos SVG (¡Usa esto!)

// Icono de flecha
function ArrowRightIcon({ size = 24, color = '#DBFF00' }) {
    return {
        type: 'svg',
        props: {
            width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
            children: [
                { type: 'path', props: { d: 'M5 12h14M12 5l7 7-7 7', stroke: color, strokeWidth: 2.5, strokeLinecap: 'round' } },
            ],
        },
    };
}

// Viñeta Chevron
function ChevronRightIcon({ size = 20, color = '#DBFF00' }) {
    return {
        type: 'svg',
        props: {
            width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
            children: [
                { type: 'path', props: { d: 'M9 18l6-6-6-6', stroke: color, strokeWidth: 3, strokeLinecap: 'round' } },
            ],
        },
    };
}

[!TIP] Encuentra paths SVG en Lucide Icons o Heroicons

Carga de Fuentes

const fontData = await fetch('https://fonts.gstatic.com/s/inter/...woff').arrayBuffer();
const fonts = [{ name: 'Inter', data: fontData, weight: 400, style: 'normal' }];

Incrustación de Imágenes (base64)

const buffer = readFileSync('image.png');
const src = `data:image/png;base64,${buffer.toString('base64')}`;

[!WARNING] ¡Siempre detecta el formato de imagen por magic bytes, no por extensión! Los archivos pueden tener extensiones incorrectas. Usa firmas:

• PNG: 89504e47
• JPEG: ffd8ff
• GIF: 47494638

Sintaxis sin JSX

const element = {
    type: 'div',
    props: {
        style: { display: 'flex', background: '#0a0a0a', color: '#fff' },
        children: 'Hola Mundo',
    },
};
await satori(element, { width: 1080, height: 1080, fonts });

Parte 2: Plantillas de Carrusel LinkedIn

Reglas de Diseño Críticas

MagazineCover (Por defecto para portadas)

MagazineCover({ 
    title: '...', 
    subtitle: '...', 
    tags: ['Tag 1']  // Tags lima opcionales
})

Características: Imagen de fondo full-bleed, capa de gradiente, footer de autor.

CoverSlide (Solo texto simple)

CoverSlide({ title: '...', subtitle: '...' })

TextSlide

TextSlide({ title: 'Problema', text: '...' })

BulletSlide

BulletSlide({ title: 'Puntos Clave', bullets: ['...', '...'] })

CTASlide

CTASlide({ title: '...', cta: 'Click Aquí', link: 'tu-sitio.com' })

Parte 3: Plantillas Genéricas

SimpleCard

SimpleCard({ title: '...', description: '...' })

Quote

Quote({ text: '...', author: '...' })

Stats

Stats({ number: '100x', label: 'Más Rápido' })

Tamaños de Salida

Activos

• assets/logo.png — Tu Logo (Reemplaza este archivo)
• assets/autor.jpg — Tu Foto (Reemplaza este archivo)

Créditos

🚀 Compilado y Traducido por 100x — Agentes de IA para empresas que quieren crecer 100x.

📚 Más skills y tutoriales en github.com/agentes100x/agentes-100x

💼 ¿Quieres que implementemos agentes en tu empresa? Contáctanos