Editorial Card Screenshot

Generuje karty informacyjne HTML w stylu magazynowym i renderuje je jako PNG o stałym współczynniku proporcji za pomocą headless Chrome

Autor: shaom · shaom/infocard-skills

Testowano · Działa ★ 8.8/10

Editorial Card Screenshot — Generuje karty informacyjne HTML w stylu magazynowym i renderuje je jako PNG o stałym współczynniku proporcji za pomocą headless Chrome

Co robi ten skill

Przekształca tekst źródłowy w wysokiej gęstości redakcyjną kartę informacyjną HTML w stylu szwajcarskim/magazynowym, a następnie przechwytuje ją jako PNG o stałym współczynniku proporcji (3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, 5:2) za pomocą dołączonego skryptu headless-Chrome. Uruchamia się, gdy użytkownik dostarcza tekst i chce zaprojektowaną kartę informacyjną, okładkę lub układ gotowy do zrzutu ekranu w określonym współczynniku proporcji. Generowanie HTML nie wymaga zależności; krok PNG wymaga lokalnego pliku binarnego Chrome lub Chromium.

Raport z testu

Pobrano SKILL.md i odwołujące się pliki przez raw GitHub. capture_card.sh, references/ratios.md i assets/card-template.html wszystkie zwracają HTTP 200; odwołujący się scripts/trim_card_bottom.sh zwraca 404 (brak). Napisałem dwie karty 4:3 z tego samego tekstu źródłowego ("Three Rules for Better Code Review"): naiwną bazową i jedną zgodną z treścią umiejętności, a następnie uruchomiłem własny capture_card.sh umiejętności z prawdziwym lokalnym Chrome (znalezionym w domyślnej ścieżce macOS). Oba PNG zostały wyrenderowane dokładnie w rozdzielczości 2000x1500. Bazowy wypełnił tylko górne ~18% płótna, pozostawiając ~80% pustej białej przestrzeni; artefakt umiejętności wypełnił go od krawędzi do krawędzi ciepłym tłem papierowym #f5f3ed, asymetrycznym ciemnym blokiem hero plus dwoma jaśniejszymi modułami bocznymi, nagłówkiem Oswald, czerwonymi regułami akcentowymi i powiększonymi liczbami oraz paskiem stopki — dokładnie takim szkieletem 4:3, jaki przepisuje treść. Sformułowania wyzwalające oceniono: POWINNO zadziałać — "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"; NIE POWINNO — "build a responsive marketing landing page with pricing", "take a screenshot of example.com". Brak zagrożeń bezpieczeństwa (skrypt uruchamia tylko lokalny headless Chrome; Google Fonts ładowane przez sieć, udokumentowane).

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

Instalacja

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

Komendy i przykładowe prompty

/editorial-card-screenshotGeneruje karty informacyjne HTML w stylu magazynowym i renderuje je jako PNG o stałym współczynniku proporcji za pomocą headless Chrome

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

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

Pełny raport →