Generador de Escenarios de Producto · v2 / v3

Dado un «título», genera una imagen de escenario de 1760×1120. El estilo ya está definido, no rediseñes, solo elige la maquetación + rellena el contenido.

Dos enfoques, elige primero:

	v2 · Tarjetas	v3 · Gráfico
Elemento principal	Nodos rectangulares redondeados + etiquetas cortas	Iconos grandes / Nodos circulares / Dispositivos gráficos
Área de contenido	Tarjeta de contenido blanca completa	Ninguna, los gráficos flotan directamente sobre el panel azul claro
Cantidad de texto	5–7 lugares con 2–4 caracteres	3–4 lugares con 2–3 caracteres
Adecuado para	Necesidad de explicar 5–6 conceptos uno al lado del otro	Pocos puntos, que el gráfico hable por sí mismo
Plantilla	`template-b/c-*`	`template-d/e-*`

Por defecto usar v3 — estas imágenes a menudo se reducen a 240px de ancho al final; los gráficos resisten mejor la reducción que el texto. Solo cuando la información es "5 puntos paralelos, cada uno necesita ser leído", se vuelve a v2.

¿Por qué usar renderizado HTML/CSS en lugar de IA generativa? Este tipo de imagen tiene texto preciso y trazos de 1px. Los modelos de difusión desenfocan el texto y deforman los trazos, y el mismo prompt da resultados diferentes cada vez. Renderizado HTML → captura de pantalla: el texto siempre está nítido, se puede modificar en cualquier momento, se puede procesar por lotes y es reproducible.

¿Por qué la estructura debe ser simple? Estas imágenes a menudo se ven en un tamaño final de 240px de ancho (tarjeta web), no 1760. Con una reducción de 1/7, "seis nodos + minigráficos + barras finas" se convierten en ruido gris. El indicador clave de v2 es: reducido a 240 px, el título y la idea general de cada etiqueta aún deben ser legibles.

Regla de escala (recuerda esta tabla primero)

Ancho de visualización	Reducción	Tamaño real de texto de 48px	Conclusión
1760 (PPT pantalla completa)	1:1	48px	Grande pero aceptable
480 (Imagen grande en web)	1/3.7	13px	Cómodo
240 (Tarjeta web)	1/7.3	6.6px	Tamaño de verificación de diseño
190 (Miniatura de lista)	1/9.3	5.2px	Ya al límite

Por lo tanto: No debe aparecer ningún texto menor de 40px, ningún elemento menor de 300px de ancho puede soportar detalles.

Reglas de hierro (si se viola alguna, no se verá correcto)

Lienzo 1760×1120 (11:7), fondo blanco puro, sin degradados, sin viñetas, sin bordes.
Las coordenadas de carcasa + panel son fijas y no deben modificarse, esta es la única fuente de "profundidad". La tarjeta de contenido blanca de la tercera capa solo pertenece a v2; v3 no la coloca, los gráficos caen directamente sobre el panel.
Toda la imagen tiene solo 1 mosaico de icono con degradado, de 170–200 px de lado, es el elemento visual principal.
El número total de elementos en el área de contenido ≤ 7 (las líneas de conexión y los mangos no cuentan). Más de 7, se convertirán en ruido al reducir.
Texto: Título 76px, etiquetas 48–50px, insignia 44px. No existe texto de 20px.
Tono bloqueado en 200°–250°. El único color cálido #F58A8A solo se puede usar para "alerta".
Sin personas, sin perspectiva, sin 3D, sin fotos, sin fondos ambientales. Todos los rectángulos estrictamente alineados con los ejes.
Solo se genera un tamaño de 1760×1120, no exportar imágenes derivadas reducidas como 660×420.
Todo el texto debe ser texto real (HTML), no imágenes o trazados.
Cada línea de conexión debe comenzar y terminar en el borde de un elemento o en otra línea. Antes de entregar, la verificación de conexiones de render.py debe pasar (código de salida 0).

Geometría fija (copiar, no modificar)

Capa	Elemento	left	top	w	h	r
L0	Lienzo	0	0	1760	1120	–
L1	Carcasa (tarjeta blanca)	110	66	1520	968	62
L2	Panel (azul claro)	140	96	1460	908	50
L3	Contenido (tarjeta blanca)	180	240	1310	644	40
L4	Insignia (flotante)	1312	según necesidad	320	128	32
–	Título	190	132	–	–	76px / 600

Límites derivados (para alinear contenido):

Borde derecho del panel 1600, borde inferior 1004; borde derecho de la tarjeta de contenido 1490, borde inferior 884.
El espacio desde el borde inferior de la tarjeta de contenido hasta el borde inferior del panel es de 120px de banda azul (1004 − 884).
Borde derecho de la insignia 1632, sobrepasando el panel en 32px — esto es "romper el marco", no lo devuelvas a la tarjeta.
Ancho utilizable del área de contenido = 180→1490, menos 60 de padding a cada lado = 1190, los elementos deben colocarse entre 240–1430.
La insignia ocupa el espacio después de 1312, el borde derecho de los elementos de contenido no debe exceder 1230, de lo contrario serán cubiertos.

Degradado del panel (debe terminar en #F5FAFF, no más claro):

background:linear-gradient(180deg,#E4F1FF 0%,#E9F4FF 34%,#F2F9FF 74%,#F5FAFF 100%);

Límites de tamaño de elementos (v2)

Elemento	Tamaño	Descripción
Mosaico degradado	170–200 de lado	Ocupa 10–11% de ancho, el bloque de color más grande de la imagen
Barra de capa ancha	910×152	Una capa completa, colocar "icono + nombre de capa"
Nodo regular	330×132	Tres en una fila, espaciado 35
Tarjeta pequeña de salida	360×120	Tres en una fila, espaciado 40
Insignia	320×128	Icono 46 + texto 44px
Icono	50–54	`stroke-width 2.2`, demasiado fino se pierde al reducir
Línea de conexión	4px	`dasharray 12 10`, flecha con triángulo isósceles
Mango de selección	20×20	`border 3px`, centro alineado con la esquina del nodo

Flujo de trabajo

Paso 1 · Título largo → Título corto + Insignia

Tomar el nombre de la función, reducirlo a 4–6 caracteres chinos: «Visualización de documentos técnicos y bases de conocimiento…» → «Generación de imágenes para documentos».
Texto de la insignia 4 caracteres (320px solo caben 4 caracteres de 44px), debe ser "prometedor": «Insertar con un clic», «Solo modificar este bloque», «Diseño sin cambios», «Modificable localmente».
El texto de ejemplo debe ser una frase real, no escribas «Texto de ejemplo».

Paso 2 · Seleccionar maquetación

Característica del título	Maquetación	Plantilla
Un núcleo → múltiples salidas, radiación de capacidad, un centro y N escenarios	D Rama central (v3)	`assets/template-d-orbit.html`
A→B→C tres pasos, subir→analizar→almacenar, construir→probar→publicar	E Tubería circular (v3)	`assets/template-e-pipeline.html`
Entrada→generar→múltiples salidas, convertir, organizar (necesita etiquetas de texto)	B Arriba→Abajo bifurcación (v2)	`assets/template-b-flow.html`
Habla tanto de "generar con una frase" como de "poder modificar después de generar" (necesita sensación de interfaz)	C-1 Estado de edición de lienzo (v2)	`assets/template-c-ui.html`
Arquitectura en capas (acceso / servicio / datos) explicada capa por capa	C-2 Estado de selección de capas (v2)	`assets/template-c-arch.html`

Para detalles ver references/layouts.md. Si no estás seguro: ≤ 4 puntos usa D o E; la información debe presentarse en paralelo solo entonces usa C-2 (es la más clara en miniatura).

Paso 3 · Modificar plantilla

Copia una plantilla, solo modifica estas partes, no toques ni una línea del CSS de la carcasa:

Texto de .title;
Etiquetas cortas (2–4 caracteres) en cada entrada/cada nodo/cada tarjeta;
Texto de la insignia .badge (4 caracteres) + top (distancia vertical entre dos insignias ≥40px);
Texto de ejemplo en la barra de entrada / burbuja;
Al eliminar un elemento, elimina también sus líneas de conexión y flechas, de lo contrario quedarán cabos sueltos;
Al modificar líneas de conexión debes seguir el método de «Cómo dibujar líneas para que no se rompan» con «nodo central + tramos independientes», no añadas giros innecesarios.

Paso 4 · Renderizar

python <SKILL_DIR>/scripts/render.py <input.html> <output.png>

<SKILL_DIR> es el directorio de instalación de esta skill (donde se encuentra SKILL.md), no el directorio de trabajo actual — tu cwd suele ser el proyecto del usuario, escribir directamente scripts/render.py no encontrará el archivo.

El script copia el HTML a un directorio temporal ASCII y luego llama al navegador headless — las rutas con caracteres chinos hacen que el headless falle silenciosamente y genere una salida en blanco o anticuada. También verifica que la salida sea 1760×1120 y verifica automáticamente si los extremos de cada línea de conexión están sueltos — código de salida 3 significa líneas rotas, no entregar.

Paso 5 · Autocomprobación de miniatura (el paso más importante)

python <SKILL_DIR>/scripts/preview.py <output.png> --width 240

Debes mirar realmente la miniatura, verificar con references/checklist.md. El criterio de evaluación es solo una frase:

¿Reducida a 240px, aún se puede leer el título, la idea general de cada etiqueta, y "qué parte es importante"?

Si no se puede, reduce elementos, aumenta el tamaño de fuente, no intentes solucionarlo añadiendo detalles.

v3 · Gráfico (impulsado por iconos y elementos gráficos)

En una frase: Lo que se pueda dibujar, no lo escribas.

Cada elemento de v2 es "rectángulo redondeado + icono + texto", isomórficos entre sí, por lo que toda la imagen se lee como un montón de bloques de proceso. v3 solo cambia tres cosas: elimina la tarjeta de contenido blanca, triplica el tamaño de los iconos, deja que los gráficos asuman el significado.

Tres reglas estrictas

No colocar la tarjeta de contenido blanca. Los gráficos flotan directamente sobre el panel azul claro; el fondo blanco solo se usa para pequeños elementos como insignias y flotadores. Los límites se definen con sombras, no con trazos.
Iconos ≥ 84px. Ancho visual de línea = stroke × tamaño de visualización / 24, objetivo 7–9px (aproximadamente 1px al reducir a 240px).
Etiquetas ≤ 4 lugares, cada una de 2–3 caracteres. Más de 4 lugares, significa que todavía estás usando texto para explicar cosas — vuelve y dibuja esa información como gráfico.

Biblioteca de iconos (50 piezas)

assets/icons.svg es un sprite. Incrusta todo el contenido en línea en la página para poder usarlo:

<body>
  <!-- Pega todo el contenido de assets/icons.svg aquí -->
  <svg><use href="#i-database"/></svg>
</body>

Las referencias externas (<use href="icons.svg#i-database"/>) serán bloqueadas por el navegador en file:// debido a restricciones de CORS, y los iconos desaparecerán por completo en la captura de pantalla headless, sin errores.

python <SKILL_DIR>/scripts/iconlib.py --list            # Lista todos los IDs agrupados
python <SKILL_DIR>/scripts/iconlib.py --preview p.png   # Genera un mural de iconos para seleccionar

Agrupaciones: Gráficos / Diagramas 12 · Elementos técnicos 15 · AI y contenido 18 · Interacción 5.

Dentro de symbol no se escribe stroke-width, ajústalo según el tamaño de visualización:

Tamaño de visualización	stroke
84–108	1.9–2.0
130–140	1.5
170–190	1.3

Si no encuentras uno adecuado, elige uno similar, no dibujes nuevas formas a mano — si el estilo de línea no es uniforme, toda la imagen se notará.

Componentes gráficos (15 piezas)

assets/parts.html es una página con todos los componentes, cada uno con ejemplo visual + nombre de clase + tamaño, simplemente copia el HTML + CSS:

Mosaico degradado · Insignia circular blanca · Insignia flotante que rompe el marco · Cápsula de etiqueta · Marco de ventana · Apilamiento de capas · Flecha degradada · Línea discontinua · Mango de selección · Burbuja de comando · Progreso circular · Micro gráfico de barras · Textura de puntos · Estrella · Mosaico seleccionado.

Dos maquetaciones

D Rama central → Un núcleo → Múltiples salidas. El centro son «tres páginas desplazadas apiladas + estrella», no un solo icono.
E Tubería circular → A→B→C tres pasos. La parte central es el único elemento degradado, y también el primer punto de atención del lector.

Ambos están compuestos por los componentes anteriores, solo necesitas cambiar iconos y etiquetas de 2–3 caracteres.

Esqueleto de maquetación v2

B Arriba→Abajo bifurcación (template-b-flow.html) Cápsula de entrada 690×136 centrada → línea vertical → mosaico degradado 200 → línea vertical hasta línea principal → línea principal horizontal se divide en tres ramas → tres tarjetas de salida 360×120. Insignia en la esquina superior derecha.

C-1 Estado de edición de lienzo (template-c-ui.html) Mosaico superior izquierdo 170 + barra de entrada 850×118 → placa de lienzo azul claro 1160×352, que contiene tres nodos 330×132, el nodo central seleccionado → burbuja de comando inferior 430×112, conectada al nodo seleccionado con una línea discontinua de 4px. Insignia en la esquina superior derecha.

C-2 Estado de selección de capas (template-c-arch.html) Tres barras de capa 910×152 apiladas verticalmente (espaciado 40, todo el grupo centrado verticalmente), la barra central seleccionada con un pequeño mosaico degradado de 104px → dos insignias a la derecha. Menor cantidad de información, mejor legibilidad en miniatura.

Componentes de elementos v2 (6 piezas, suficientes)

Mosaico de icono degradado — 170–200 / r44-52 / linear-gradient(135deg,#4A9DFC,#5E92F9 45%,#7C6BF5) + icono lineal blanco (84-100px, stroke-width 1.6) + luz suave inferior 0 18 40 rgba(74,157,252,.42), 0 0 40 8 rgba(124,107,245,.14).
Insignia flotante — Fondo blanco 320×128 / r32 + 0 20 48 rgba(31,71,141,.16) + icono azul 46px + texto 44px.
Barra de capa / Nodo — Fondo blanco + borde 3px #C9DCF2 + bloque de icono redondeado azul claro de 90px + etiqueta 50px/500. No coloques barras esqueléticas, escribe directamente el texto real.
Estado seleccionado — 5px #4A9DFC + 0 0 0 12px rgba(74,157,252,.11) + mangos de 20px en las cuatro esquinas (centro alineado con la esquina) + pequeño mosaico degradado opcional incrustado. No dibujes un cuadro de selección discontinuo (las líneas de conexión lo atravesarán).
Línea de conexión — 4px / #A9C7EC / dasharray 12 10, la flecha es un triángulo isósceles M827 716 h16 l-8 14 z. No se puede usar un triángulo rectángulo.
Placa de lienzo — #F8FBFF / 2px #DDEBFB / r36, agrupa "nodos + burbujas" para evitar que la imagen se disperse.

Cómo dibujar líneas para que no se rompan

Las líneas de conexión son la única parte que necesita coordenadas absolutas escritas a mano, y también la más propensa a errores. Un segmento de línea que falte unos cientos de píxeles, toda la imagen se verá "como si fuera correcta" — en la imagen original de 1760 no se nota sin ampliar, al reducir a 240px es completamente invisible, hasta que la imagen ya se ha entregado y alguien lo señala.

Las bifurcaciones deben dividirse en «nodo central + tramos independientes»

Incorrecto — un solo path gira en el camino y se bifurca, la línea principal solo cubre la rama más a la izquierda:

<path d="M835 652 V690 H435 V716"/>   <!-- Vertical → Horizontal izquierdo → Vertical, se rompe aquí -->
<path d="M835 690 V716"/>
<path d="M1235 690 V716"/>            <!-- El punto de inicio cuelga en el vacío -->

Correcto — todas las intersecciones coinciden al nivel de los extremos:

<path d="M835 652 V690"/>    <!-- Línea vertical cae al nodo central (835,690) -->
<path d="M835 690 H435"/>    <!-- Mitad izquierda de la línea principal -->
<path d="M835 690 H1235"/>   <!-- Mitad derecha de la línea principal -->
<path d="M435 690 V716"/>    <!-- Tres ramas, el punto de inicio y de la línea principal son iguales -->
<path d="M835 690 V716"/>
<path d="M1235 690 V716"/>

Tres reglas:

Un path solo hace una cosa: o baja recto, o cruza horizontalmente. No gira en el camino y luego se bifurca.
Los dos extremos de la línea principal deben ser iguales a la x de la rama más a la izquierda y más a la derecha, estos tres números deben ser literalmente iguales en el código. Si modificas un lado, el otro debe seguir.
La y del extremo de la rama = top de la tarjeta − 14 (14 es la altura de la flecha), la y del punto de inicio de la rama = y de la línea principal.

Cada renderizado se verifica automáticamente

render.py después de renderizar llama automáticamente a linklint.py: hace que el navegador calcule los extremos reales de cada línea, y determina si está tocando el borde de algún elemento (≤8px) o se cruza con otra línea (≤3px). Si no cumple, está suelto, imprime directamente las coordenadas:

[x] Se encontró 1 extremo suelto:
    Línea 6, punto de inicio en (1235,690), el objeto más cercano está a 40px  d="M1235 690 V716"

En este caso, el código de salida es 3, no entregar. También se puede verificar por separado:

python <SKILL_DIR>/scripts/linklint.py scene.html -v

Las formas rellenas como triángulos de flecha y rombos de relación no participan en la verificación (su base ya está tocando el extremo de la línea), pero se consideran objetivos conectables — por lo tanto, conectar una línea a una flecha es válido.

Esta verificación solo reconoce geometría, no "se ve más o menos bien". Una vez detectó un accidente real: A la rama derecha de una bifurcación en tres le faltaba un tramo completo de 800px de línea horizontal, y toda la imagen se veía completamente normal a simple vista.

Errores comunes (todos reales)

Síntoma	Causa	Solución
Al reducir a 240px se vuelve una mancha gris	Elementos demasiado pequeños o muchos	Reducir elementos a ≤7, aumentar tamaño de fuente a 48px, engrosar trazos a 3–5px
Las barras esqueléticas parecen ruido gris en miniatura	Usar barras decorativas	Reemplazar con etiquetas cortas reales (2–4 caracteres)
Aparece una banda blanca en la parte inferior, el panel parece solo tener borde	El degradado se desvanece a `#FBFCFE`	Terminar en `#F5FAFF`
La insignia cubre el contenido	El elemento de contenido supera 1230	Controlar el borde derecho del contenido dentro de 1230
El mango flota fuera de la esquina	El top escrito a mano no se reduce a la mitad	`handle.left = x de la esquina − 10`, `top = y de la esquina − 10`
La línea discontinua no se ve	Cubierta por el halo del nodo seleccionado	Agregar `z-index:6` al svg de la línea de conexión
Flecha torcida, parece un triángulo rectángulo	Ruta mal escrita	Usar triángulo isósceles, ver componente 5
La línea principal horizontal presiona la tarjeta	El punto de bifurcación demasiado bajo	Parte inferior del mosaico → línea principal ≥38px, línea principal → tarjeta ≥40px
Espaciado desigual entre tres tarjetas	left escrito a mano	Distribuir equidistantemente y verificar si el centro está alineado con la flecha
Renderizado en blanco o anticuado	HTML en ruta con caracteres chinos	Usar `scripts/render.py`
Las tres imágenes tienen densidades inconsistentes	Tamaños de elementos diferentes	Todos tomar valores de la tabla «Límites de tamaño de elementos»
La línea de conexión se rompe a medio camino, la rama cuelga	Un solo path gira y solo cubre parte de las ramas	Dividir en «nodo central + tramos independientes», ver «Cómo dibujar líneas para que no se rompan»
La línea discontinua de la burbuja tiene un espacio con el nodo	El punto de inicio no cae en el borde del elemento	Inicio y = bottom del elemento, dejar que `linklint` verifique a 0px

Índice de archivos

Esta skill es autocontenida: las siguientes rutas son relativas al directorio donde se encuentra SKILL.md, no necesitas acceder a otros repositorios o documentación externa.

SKILL.md
├── references/
│   ├── style-tokens.md    Tabla completa de tokens de colores, tamaños de fuente, radios y sombras (incluye tokens gráficos v3)
│   ├── layouts.md         Diagramas de esqueleto de las cinco maquetaciones, escenarios de aplicación y recetas de elementos
│   └── checklist.md       Verificación ítem por ítem antes de entregar (incluye verificación de miniatura de 240px e ítems específicos de v3)
├── assets/
│   ├── icons.svg          Sprite de 50 iconos lineales (incrustar en la página y usar `<use href="#i-xxx"/>`)
│   ├── parts.html         Página con 15 componentes gráficos, se pueden ver y copiar
│   ├── template-d-orbit.html      D Rama central (v3)
│   ├── template-e-pipeline.html   E Tubería circular (v3)
│   ├── _blank-shell.html          Solo la carcasa, para empezar desde cero la maquetación
│   ├── template-b-flow.html       B Arriba→Abajo bifurcación (v2)
│   ├── template-c-ui.html         C-1 Estado de edición de lienzo (v2)
│   └── template-c-arch.html       C-2 Estado de selección de capas (v2)
├── scripts/
│   ├── render.py          HTML → 1760×1120 PNG (manejo de rutas + detección de navegador + verificación de líneas)
│   ├── linklint.py        Verifica si los extremos de cada línea de conexión están sueltos (render.py lo llama automáticamente)
│   ├── preview.py         Genera miniatura de 240px para autocomprobación de miniatura
│   └── iconlib.py         Lista IDs de iconos / genera un mural de iconos
└── examples/              5 imágenes finales + archivos fuente renderizables, solo como referencia, no participan en la generación

El texto y los gráficos en las plantillas son ejemplos reales y funcionales, es más rápido modificar directamente sobre ellos que empezar desde una página en blanco.

hwcloud-scene-image

¿Qué es hwcloud-scene-image?

Preguntar en tu IA favorita

Documentación