Editorial Card Screenshot

Generer HTML-infokort i magasin-stil og gjengi dem som ratio-faste PNG-er via headless Chrome

Bestått ★ 8.8/10

Hva den gjør

Gjør kildetekst om til et høydensitets redaksjonelt HTML-infokort i sveitsisk/magasin-stil, og fanger det deretter som en fast-ratio PNG (3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, 5:2) ved hjelp av et inkludert headless-Chrome-skript. Utløses når en bruker leverer tekst og ønsker et designet infokort, omslag eller skjermbilde-klart layout i et spesifikt sideforhold. HTML-generering krever ingen avhengigheter; PNG-trinnet krever en lokal Chrome- eller Chromium-binær.

Testrapport

Hentet SKILL.md og refererte filer via rå GitHub. capture_card.sh, references/ratios.md, og assets/card-template.html returnerer alle HTTP 200; den refererte scripts/trim_card_bottom.sh returnerer 404 (manglende). Jeg skrev to 4:3-kort fra samme kildetekst ("Three Rules for Better Code Review"): en naiv baseline og en som fulgte ferdighetsteksten, deretter kjørte jeg ferdighetens egen capture_card.sh med den virkelige lokale Chrome (funnet på standard macOS-sti). Begge PNG-ene ble gjengitt nøyaktig 2000x1500. Baseline fylte bare de øverste ~18% av lerretet og etterlot ~80% blankt hvitt rom; ferdighetsartefakten fylte det kant-til-kant med en varm #f5f3ed papirbakgrunn, en asymmetrisk mørk helteblokk pluss to lysere sidemoduler, Oswald-overskrift, røde aksentregler og overdimensjonerte tall, og en bunntekstbånd — det nøyaktige 4:3-skjelettet som teksten foreskriver. Trigger-fraseringer vurdert: BØR utløses — "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"; BØR IKKE — "build a responsive marketing landing page with pricing", "take a screenshot of example.com". Ingen sikkerhetsbrudd (skriptet kjører kun lokal headless Chrome; Google Fonts lastes over nettverk, dokumentert).

Testet på: 2026-07-21 · Claude Code 2.x (agent harness)

Installer

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

Kommandoer og eksempelprompter

/editorial-card-screenshotGenerer HTML-infokort i magasin-stil og gjengi dem som ratio-faste PNG-er via headless Chrome

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

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

Full rapport →