Editorial Card Screenshot

Genera tarjetas de información HTML estilo revista y las renderiza como PNGs de relación fija a través de Chrome sin interfaz gráfica

Por shaom · shaom/infocard-skills

Probado · Funciona ★ 8.8/10

Editorial Card Screenshot — Genera tarjetas de información HTML estilo revista y las renderiza como PNGs de relación fija a través de Chrome sin interfaz gráfica

Qué hace

Convierte texto fuente en una tarjeta de información HTML editorial de alta densidad al estilo suizo/revista, luego la captura como un PNG de relación fija (3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, 5:2) utilizando un script de Chrome sin interfaz gráfica incluido. Se activa cuando un usuario proporciona texto y desea una tarjeta de información diseñada, una portada o un diseño listo para captura de pantalla en una relación de aspecto específica. La generación de HTML no necesita dependencias; el paso de PNG requiere un binario local de Chrome o Chromium.

Informe de la prueba

Se obtuvo SKILL.md y los archivos referenciados a través de GitHub raw. capture_card.sh, references/ratios.md y assets/card-template.html devuelven todos HTTP 200; el scripts/trim_card_bottom.sh referenciado devuelve 404 (faltante). Escribí dos tarjetas 4:3 del mismo texto fuente ("Three Rules for Better Code Review"): una línea base ingenua y otra siguiendo el cuerpo de la skill, luego ejecuté el propio capture_card.sh de la skill con el Chrome local real (encontrado en la ruta predeterminada de macOS). Ambos PNGs se renderizaron exactamente a 2000x1500. La línea base solo llenó el ~18% superior del lienzo dejando ~80% de espacio en blanco; el artefacto de la skill lo llenó de borde a borde con un fondo de papel cálido #f5f3ed, un bloque hero oscuro asimétrico más dos módulos laterales más claros, titular Oswald, reglas de acento rojas y números sobredimensionados, y una banda de pie de página — el esqueleto exacto 4:3 que prescribe el cuerpo. Frases de activación juzgadas: DEBERÍA activarse — "make a 4:3 editorial info card from this roadmap text", "turn this paragraph into a magazine cover and render a 16:9 PNG", "high-density Swiss-style 1:1 info card as an image"; NO DEBERÍA — "build a responsive marketing landing page with pricing", "take a screenshot of example.com". Sin problemas de seguridad (el script solo ejecuta Chrome sin interfaz gráfica local; Google Fonts cargadas por red, documentado).

Probado el: 2026-07-21 · Claude Code 2.x (agent harness)

Instalación

git clone --depth 1 https://github.com/shaom/infocard-skills.git /tmp/editorial-card-screenshot-src
mkdir -p ~/.claude/skills
cp -R /tmp/editorial-card-screenshot-src/skills/editorial-card-screenshot ~/.claude/skills/editorial-card-screenshot
# HTML card generation needs no deps.
# PNG capture (scripts/capture_card.sh <in.html> <out.png> <ratio>) requires a local Chrome/Chromium.
# Script respects $CHROME_BIN, else defaults to /Applications/Google Chrome.app/... (macOS).
# Note: SKILL.md references scripts/trim_card_bottom.sh, which is MISSING from the repo (404).

Comandos y prompts de ejemplo

/editorial-card-screenshotGenera tarjetas de información HTML estilo revista y las renderiza como PNGs de relación fija a través de Chrome sin interfaz gráfica

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

Make an editorial info card for this article
Create a 16:9 card image from this text
Generate an HTML card and export it as PNG

Informe completo →