weiguo-long/lwg-haibao-design

Páginas HTML de estilo póster para presentaciones

Diseña páginas HTML individuales de estilo póster para presentaciones/charlas, y consolida los diseños proporcionados por el usuario como reglas reutilizables. Dos flujos de trabajo:

• Flujo A · Consolidación: El usuario proporciona diseños gráficos → analiza paletas/composición/tipografía/decoración → escribe en references/rules.md según la plantilla.
• Flujo B · Generación: El usuario da requisitos (contenido + tono + proporción) → puntúa y selecciona según references/selection.md → genera HTML autónomo en la proporción especificada → verifica con references/checklist.md.

La regla más importante: no inventes diseños propios. Las versiones que el usuario ha rechazado casi siempre provienen de «inventar un estilo propio». La biblioteca tiene 24 muestras y 9 paletas de colores; solo cuando ninguna es adecuada se recurre a baseline.md. Cuando el usuario mencione un número S o C, síguelo directamente.

Flujo A: Proporcionar diseño gráfico, consolidar reglas

Dos modos de análisis:

• Análisis completo (por defecto): Analiza todos los campos según la plantilla y consolida como entrada de muestra (S-número).
• Solo análisis de color: Cuando el usuario indique «solo necesito color» o «solo analiza el color», o la imagen sea claramente una tarjeta de color o inspiración de paleta (bloques de color puros, tablero de colores), extrae solo la paleta y define la asignación de roles de color, consolidando como entrada de esquema de color (C-número), omitiendo composición/tipografía/decoración.

1. Leer imagen: Usa herramientas de visualización de imágenes (p. ej., ViewImage) para ver cada imagen una por una; si el texto es demasiado pequeño o los detalles no se ven, recorta y amplía por zonas. Si hay varias imágenes, míralas todas antes de consolidar. Analiza solo el diseño en sí: ignora marcas de agua, logotipos de plataforma/cuenta, y las barras de estado superior, barra de navegación inferior y otras partes sobrantes de capturas de pantalla; si el contenido de la captura está recortado o deformado, infiere la intención original del diseño basándote en el sujeto visible.
2. Analizar una por una: Sigue los campos de references/analysis-template.md (en modo solo color, sigue los campos de «Modo solo color» de ese archivo), enfocándote en producir puntos de implementación directamente reutilizables:
   • Paleta: Hex de color principal/secundario/de acento/neutral, porcentaje de área, relación claro/oscuro. Prioriza usar python3 scripts/extract_palette.py <ruta_de_imagen> para obtener valores exactos; si Pillow falta o el script falla, usa valores aproximados a ojo y anota «aproximado» en la entrada.
   • Composición: Método de división del espacio, posición del punto focal, proporción de espacio negativo, cuadrícula, simetría, jerarquía de lectura.
   • Tipografía: Estilo del título, jerarquía de tamaño (como porcentaje del lado corto del lienzo), peso, alineación, espaciado.
   • Decoración y texturas: Elementos gráficos, texturas, bordes, degradados/ruido/bloques de color.
   • Densidad de contenido y proporción adecuada: Cantidad de información y relación de aspecto adecuadas.
   • Escenario de uso: Para qué temática y tono es adecuado este diseño.
3. Consolidar: Añade los resultados del análisis como una entrada en references/rules.md — el análisis completo se registra como entrada de muestra (S-número), el solo color como entrada de esquema de color (C-número). Ambos se registran en la tabla de índices (el número se toma de la fila de marcador de posición al final de la tabla de índices; después de usarlo, añade una nueva fila de marcador de posición; las reglas están en analysis-template.md). Si es muy similar a una entrada existente, combínalo o márcalo como variante; no acumules repetidos. Guarda también la imagen original en references/samples/ (imagen única S-XX.jpg, variante S-XXa.jpg / S-XXb.jpg) y regístrala en el README de ese directorio — solo con la descripción textual se pierde la técnica de «por qué se ve bien» (en S-13, los tres bloques de fondo blanco se omitieron por eso; ahora están añadidos en la entrada).
4. Actualizar sincrónicamente la tabla de selección: En references/selection.md, añade una fila en la tabla de etiquetas de muestras (tono / claro-oscuro / material / densidad / elementos característicos / proporción compatible), y añade la nueva muestra en la sección 4 «Matriz de compatibilidad C × S» según su claridad; de lo contrario, la nueva muestra será «invisible» durante la selección.
5. Informar: Dile al usuario qué regla se ha añadido y para qué escenarios es adecuada, para que pueda usarla directamente la próxima vez.

Flujo B: Dar requisitos, generar página

1. Analizar requisitos: Contenido temático, tono emocional (serio/neutral/vivaz/artístico/fresco), densidad de contenido (frase única vs viñetas vs datos vs gráficos), proporción de página especificada (cualquier valor), si se necesitan fotos reales.
2. Puntuar y seleccionar (no saltar): Lee references/selection.md, aplica filtrado estricto y puntuación basada en las cinco dimensiones de etiquetas, elige los 3 primeros; explica en una frase por qué la muestra seleccionada es adecuada (relación entre elementos característicos y semántica del contenido), luego pasa al siguiente paso. Al mismo tiempo, usa la sección 4 «Matriz de compatibilidad C × S» para definir la paleta, rellenando los valores de color para los cinco roles (bg / text / mid / accent / decor). Después de seleccionar, consulta la lista de archivos en references/samples/README.md; si hay una imagen original correspondiente, es obligatorio verla (los nombres de variantes son S-XXa / S-XXb; no adivines la ruta con S-XX.jpg), y compara la forma real de los elementos característicos antes de empezar. Si la biblioteca está vacía o no hay coincidencias, solo entonces usa baseline.md.
3. Estructurar contenido: Organiza el contenido del usuario en una estructura de página única tipo póster (título principal, subtítulo, viñetas, datos, línea de tiempo, etc.), cerrada en una pantalla, con jerarquía clara y un único punto focal.
4. Adaptar proporción: Configura el lienzo de la página según la proporción especificada (método en «Especificaciones de adaptación de proporción» y «Convenciones de unidades» en baseline.md); el tamaño de fuente y el espaciado se calculan con referencia al lado corto del lienzo — .stage declara container-type: inline-size, versión vertical usa cqw, versión horizontal usa cqh, un cambio escala todo globalmente.
5. Generar HTML: El skill html es una dependencia opcional para enriquecer: si está instalado, primero lee completamente su SKILL.md y references/design/frontend-design.md como complemento; si no está instalado, simplemente omítelo y ejecuta según references/baseline.md (principios de diseño, jerarquía tipográfica, adaptación de proporción, convenciones de unidades) y references/checklist.md (12 puntos de verificación); no interrumpas la entrega por ello. El resultado es un .html autónomo: CSS/JS embebido, nombre de archivo semántico (no index.html), prioridad móvil, sin botones fantasma, sin emojis, con favicon; los recursos de imagen usan rutas relativas locales o URI de datos; las imágenes de enlaces externos se descargan primero a local. Antes de revisar, copia la versión actual a _backup/ (si el directorio no existe, crea mkdir -p).
6. Verificar: Revisa uno por uno los 12 puntos de references/checklist.md (cqw / cqh → px calculado a mano); si es posible, haz una captura de pantalla renderizada para verificar (texto fuera de límites / elementos sobre texto / contraste de color). Si no pasa, corrige y vuelve a entregar (present_files envía files: [ruta absoluta del HTML]). En la nota de entrega, escribe claramente la razón de la selección, los parámetros modificados y el método de verificación real.
7. Registrar rechazo: Cuando el usuario rechace una versión, añade una fila en la sección 5 de references/selection.md (muestra/paleta, palabras exactas del usuario, diagnóstico del problema); la próxima selección evita activamente la misma combinación.

Mantenimiento de la base de reglas

• references/rules.md: Base de reglas incremental, el activo principal de esta habilidad. Cada vez que se proporciona una imagen, se consolida una muestra; al generar páginas, se selecciona prioritariamente de aquí. Antes de leer sus fragmentos CSS, consulta primero las «Convenciones de unidades» en la parte superior.
• references/selection.md: Decisor de selección. Etiquetas de cinco dimensiones de las muestras, reglas de puntuación, matriz de compatibilidad C×S (cubriendo las 24 muestras), cinco roles de color, registro de rechazos. Las nuevas muestras deben registrarse sincrónicamente en la tabla de etiquetas y la matriz.
• references/checklist.md: Lista de verificación pre-entrega. 12 criterios cuantificables + 2 reglas estrictas.
• references/baseline.md: Línea base general. Respaldo cuando la base de reglas está vacía o no hay coincidencias; incluye principios de diseño de póster, jerarquía tipográfica, especificaciones de adaptación de proporción, convenciones de unidades y prohibiciones.
• references/analysis-template.md: Plantilla de campos para el análisis de imágenes proporcionadas y reglas de numeración; al consolidar entradas, escribe según esta estructura.
• references/samples/: Archivo de imágenes originales y lista de archivos.

Dependencias externas (opcionales, no bloqueantes)

1. Requerido: scripts/extract_palette.py (depende de Pillow). Si Pillow falta, usa valores aproximados a ojo y anota «aproximado» en la entrada.
2. Opcional: Skill html. El directorio raíz del skill varía según el entorno (a nivel de usuario local es ~/.workbuddy/skills/); usa Glob para buscar **/html/SKILL.md y localizarlo; si se encuentra, lee secuencialmente <html-skill>/SKILL.md, <html-skill>/references/design/frontend-design.md como normas de diseño complementarias. Su script de captura de pantalla (shot.py) generalmente no existe; no insistas.
3. Si no se encuentra el skill html / script de captura: Entrega y verifica directamente según baseline.md + checklist.md, y en la nota de entrega indica honestamente «no se realizó captura de pantalla renderizada» o el método de verificación alternativo utilizado. Prohíbe interrumpir el flujo de trabajo B por no encontrar habilidades externas.