Editorial Card Screenshot

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

Testet · Virker ★ 8.8/10

Hvad det gør

Omdanner kildetekst til et høj-densitets redaktionelt HTML-infokort i schweizisk/magasin-stil, og fanger det derefter som en fast-ratio PNG (3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, 5:2) ved hjælp af et medfølgende headless-Chrome script. Udløses, når en bruger leverer tekst og ønsker et designet infokort, cover eller skærmbilled-klar layout i et specifikt billedformat. HTML-generering kræver ingen afhængigheder; PNG-trinnet kræver en lokal Chrome- eller Chromium-binær.

Testrapport

Hentede SKILL.md og refererede filer via rå GitHub. capture_card.sh, references/ratios.md og assets/card-template.html returnerer alle HTTP 200; det refererede scripts/trim_card_bottom.sh returnerer 404 (manglende). Jeg skrev to 4:3 kort fra den samme kildetekst ("Three Rules for Better Code Review"): en naiv baseline og en, der fulgte skill-kroppen, og kørte derefter skill'ens egen capture_card.sh med den rigtige lokale Chrome (fundet på standard macOS-stien). Begge PNG'er blev gengivet præcis 2000x1500. Baseline fyldte kun de øverste ~18% af lærredet og efterlod ~80% blankt hvidt rum; skill-artefaktet fyldte det kant-til-kant med en varm #f5f3ed papirbaggrund, en asymmetrisk mørk hero-blok plus to lysere sidemoduler, Oswald-overskrift, røde accentregler og overdimensionerede tal og en footer-bånd — det præcise 4:3 skelet, kroppen foreskriver. Trigger-formuleringer bedømt: SKULLE udlø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"; skulle IKKE — "build a responsive marketing landing page with pricing", "take a screenshot of example.com". Ingen sikkerhedsbrister (scriptet kører kun lokal headless Chrome; Google Fonts indlæses over netværk, dokumenteret).

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

Installation

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 gengiv dem som ratio-faste PNG'er via headless Chrome

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen 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

Læs hele rapporten →