Editorial Card Screenshot

Genererar HTML-infokort i magasin-stil och renderar dem som ratio-fasta PNG:er via headless Chrome

Testad · Fungerar ★ 8.8/10

Vad den gör

Förvandlar källtext till ett högtäthetsredaktionellt HTML-infokort i schweizisk/magasin-stil, och fångar det sedan som en fast-ratio PNG (3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, 5:2) med hjälp av ett medföljande headless-Chrome-skript. Utlöses när en användare tillhandahåller text och vill ha ett designat infokort, omslag eller skärmbildsredo layout i ett specifikt bildförhållande. HTML-generering kräver inga beroenden; PNG-steget kräver en lokal Chrome- eller Chromium-binär.

Testrapport

Hämtade SKILL.md och refererade filer via rå GitHub. capture_card.sh, references/ratios.md och assets/card-template.html returnerar alla HTTP 200; den refererade scripts/trim_card_bottom.sh returnerar 404 (saknas). Jag skrev två 4:3-kort från samma källtext ("Three Rules for Better Code Review"): en naiv baseline och en som följde färdighetens brödtext, körde sedan färdighetens egen capture_card.sh med den verkliga lokala Chrome (hittades på standard macOS-sökvägen). Båda PNG:erna renderades exakt 2000x1500. Baseline fyllde endast de översta ~18% av duken och lämnade ~80% tomt vitt utrymme; färdighetsartefakten fyllde den kant till kant med en varm #f5f3ed pappersbakgrund, ett asymmetriskt mörkt hero-block plus två ljusare sidomoduler, Oswald-rubrik, röda accentregler och överdimensionerade siffror, och en sidfotslist – exakt det 4:3-skelett som brödtexten föreskriver. Trigger-fraser bedömdes: SKA utlösas – "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"; SKA INTE – "build a responsive marketing landing page with pricing", "take a screenshot of example.com". Inga säkerhetsbrister (skriptet kör endast lokal headless Chrome; Google Fonts laddas över nätverket, dokumenterat).

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

Kommandon och exempelprompter

/editorial-card-screenshotGenererar HTML-infokort i magasin-stil och renderar dem som ratio-fasta PNG:er via headless Chrome

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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 hela rapporten →