# Gig Cards

> Profesyonel pazarlama/gig kartı görselleri üret (Fiverr gig kartı, OG image, sosyal kart, YouTube thumbnail benzeri): HTML/CSS tasarımını headless Chromium'da (Playwright) piksel-hassas render edip PNG'ye çevirir. Editoryal tasarım dili hazır: tam-kadraj artwork + sinematik scrim, Space Grotesk display başlık, IBM Plex Mono overline/meta, dergi köşe indeksi, grain dokusu. Tetikleyiciler: "gig kartı yap", "og image üret", "kart görseli", "fiverr görseli", "sosyal medya kartı", "marketing card", "thumbnail tasarla".

- Skill: `emircbngl/gig-cards` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add emircbngl/gig-cards`
- Raw SKILL.md: https://api.skillmd.com/api/skills/emircbngl/gig-cards/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: emircbngl (https://skillmd.com/u/emircbngl)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/emircbngl/gig-cards

---


# gig-cards: HTML/CSS → Chromium → PNG kart üretimi

Neden bu yol: Satori/vercel-og yalnız flexbox + CSS alt kümesi destekler; headless Chromium
TAM CSS verir (grid, filter, blend, değişken fontlar). Kalite farkı buradan gelir.
(Araştırma: github.com/vercel/satori değerlendirildi, tam-CSS gereksinimi nedeniyle
Playwright screenshot yaklaşımı seçildi. Fontlar: github.com/google/fonts.)

## Kullanım

1. Çalışma dizini hazırla (proje içinde `cards/` gibi): `fonts/`, `assets/`, `out/` klasörleri.
2. Fontlar yoksa indir (google/fonts, OFL lisans):
   ```bash
   curl -sL -o fonts/SpaceGrotesk.ttf "https://raw.githubusercontent.com/google/fonts/main/ofl/spacegrotesk/SpaceGrotesk%5Bwght%5D.ttf"
   curl -sL -o fonts/Inter.ttf "https://raw.githubusercontent.com/google/fonts/main/ofl/inter/Inter%5Bopsz%2Cwght%5D.ttf"
   curl -sL -o fonts/IBMPlexMono-Medium.ttf "https://raw.githubusercontent.com/google/fonts/main/ofl/ibmplexmono/IBMPlexMono-Medium.ttf"
   ```
3. Bağımlılık: `python3 -m playwright install chromium` (bir kez) + Pillow.
4. `scripts/render_cards.py`'ı çalışma dizinine kopyala, `CARDS` config listesini düzenle
   (id / accent / overline / index / head_a / head_b / meta / art / art_mode), çalıştır.
   Çıktı: `out/<id>.png`, 1280×769 (W/H sabitlerinden değiştirilebilir; OG için 1200×630).

## Tasarım kuralları (klişeden kaçınma — bunlar öğrenilmiş ders)

- ROZET + ÇİP + degrade-panel formülü KLİŞE — kullanma. Onun yerine: mono overline,
  tek satır mono meta, ince accent rule, dergi köşe indeksi ("01 / KATEGORİ").
- Başlık İRİ (kart 1280px'te ~100px), 2 satır, ikinci satır accent renkli; nokta ile bitir
  ("Automate Blender **with Python.**") — cümle gibi okunur, slogan gibi değil.
- Artwork tam-kadraj; metin okunurluğu scrim'le (78deg çift linear-gradient) sağlanır,
  kutuyla değil. Fotoğraf yoksa inline SVG generatif art (glow'lu eğri/ağ; ikon klişesi yok).
- 2x render → LANCZOS küçültme = keskin tipografi. Grain overlay %5 opacity.
- Alt %10 bandı boş bırak (platform overlay'leri için).
- Her kart farklı accent, aynı grid → seri kimliği.

## Doğrulama

Render sonrası her PNG'yi Read ile AÇ ve bak: metin taşması, scrim yetersizliği,
artwork-metin çakışması. Kartı görmeden "bitti" deme.