Editorial Card Screenshot

Generuje HTML informační karty ve stylu časopisu a vykresluje je jako PNG s pevným poměrem stran přes headless Chrome

Otestováno · Funguje ★ 8.8/10

Editorial Card Screenshot — Generuje HTML informační karty ve stylu časopisu a vykresluje je jako PNG s pevným poměrem stran přes headless Chrome

Co umí

Převádí zdrojový text na HTML informační kartu s vysokou hustotou v redakčním stylu (švýcarský/časopis), poté ji zachytí jako PNG s pevným poměrem stran (3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, 5:2) pomocí přibaleného skriptu headless-Chrome. Spouští se, když uživatel dodá text a chce navrženou informační kartu, obálku nebo rozvržení připravené pro snímek obrazovky v konkrétním poměru stran. Generování HTML nepotřebuje žádné závislosti; krok PNG vyžaduje lokální binární soubor Chrome nebo Chromium.

Testovací report

Načten SKILL.md a odkazované soubory přes raw GitHub. capture_card.sh, references/ratios.md a assets/card-template.html vše vrací HTTP 200; odkazovaný scripts/trim_card_bottom.sh vrací 404 (chybí). Napsal jsem dvě karty 4:3 ze stejného zdrojového textu ("Three Rules for Better Code Review"): naivní základní verzi a jednu podle těla dovednosti, poté jsem spustil vlastní capture_card.sh dovednosti se skutečným lokálním Chrome (nalezeným na výchozí cestě macOS). Oba PNG se vykreslily přesně na 2000x1500. Základní verze vyplnila pouze horních ~18% plátna a zanechala ~80% prázdného bílého prostoru; artefakt dovednosti vyplnil plátno od okraje k okraji teplým papírovým pozadím #f5f3ed, asymetrickým tmavým hero blokem plus dvěma světlejšími bočními moduly, nadpisem Oswald, červenými akcentními pravidly a nadrozměrnými čísly a patičkou – přesný 4:3 skelet, který tělo předepisuje. Fráze spouštěče posouzeny: MĚLO BY se spustit – "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"; NEMĚLO BY se spustit – "build a responsive marketing landing page with pricing", "take a screenshot of example.com". Žádné bezpečnostní rizika (skript spouští pouze lokální headless Chrome; Google Fonts načteny přes síť, dokumentováno).

Testováno: 2026-07-21 · Claude Code 2.x (agent harness)

Instalace

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).

Příkazy a ukázkové prompty

/editorial-card-screenshotGeneruje HTML informační karty ve stylu časopisu a vykresluje je jako PNG s pevným poměrem stran přes headless Chrome

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

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

Kompletní testovací report (anglicky) →