template-system

olivenet-iot's avatarfrom olivenet-iot

HTML infographic templates. Use when creating carousel slides or infographics.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 28, 2025
[Visual Content Workflows]

When & Why to Use This Skill

This Claude skill provides a comprehensive HTML-based template system designed for generating professional infographics and Instagram carousel slides. It automates the end-to-end workflow of transforming structured data into high-quality PNG images using Playwright, ensuring consistent branding through pre-defined design constants, typography, and specialized layouts for social media marketing.

Use Cases

  • Automated Instagram Carousel Creation: Generate multi-slide educational content or storytelling carousels directly from text descriptions or topics.
  • Data-Driven Infographics: Convert complex metrics, KPIs, and statistics into polished dashboard-style visuals or 'big number' highlights for social media reports.
  • Step-by-Step Process Visualization: Utilize timeline and process templates to create clear, engaging 'how-to' guides, project roadmaps, or historical sequences.
  • Marketing Comparison Graphics: Quickly produce high-quality 'before-and-after' visuals or side-by-side product comparisons to drive brand engagement and conversions.
  • Social Media Asset Standardization: Maintain brand consistency across all visual posts using a unified set of CSS variables for colors, spacing, and typography.
nametemplate-system
descriptionHTML infographic templates. Use when creating carousel slides or infographics.

Template System

Instagram post ve carousel icin HTML infographic sablonlari. Playwright ile PNG'ye render edilir.

11 Template

Template Amac Kullanim
dashboard-infographic Panel/dashboard gorunumu Metrik gosterimi
feature-grid-infographic Grid layout ozellikler Feature listeleme
timeline-infographic Zaman cizelgesi Surec/tarihce
before-after-infographic Donusum gosterimi Karsilastirma
comparison-infographic Yan yana karsilastirma vs. icerikleri
quote-infographic Alinti/soz Motivasyon
billboard-infographic Buyuk baslik Dikkat cekici
big-number-infographic Buyuk sayi/istatistik %75 gibi rakamlar
process-infographic Adim adim surec How-to
checklist-infographic Kontrol listesi Todo/checklist
visual-template Genel sablon Fallback

Rendering

from app.renderer import render_html_to_png, save_html_and_render

# Direkt render
png_path = await render_html_to_png(
    html_content=html_string,
    width=1080,
    height=1080
)

# HTML + PNG kaydet
html_path, png_path = await save_html_and_render(
    html_content=html_string,
    base_name="carousel_slide_1"
)

Boyutlar

Tip Boyut Kullanim
Instagram Post 1080x1080 Kare post
Instagram Story 1080x1920 Dikey story
Carousel Slide 1080x1080 Her slide

Tasarim Sabitleri (OLIVENET_DESIGN)

Renkler

/* Ana Renkler - visual-guidelines.md ve templates ile senkron */
--olive-900: #1a2e1a;  /* En koyu arka plan */
--olive-800: #243524;  /* Koyu arka plan */
--olive-700: #2d4a2d;  /* Primary button */
--olive-600: #3a5f3a;  /* Hover durumlari */
--olive-500: #4a7c4a;  /* Ana marka rengi */
--olive-400: #5e9a5e;  /* Vurgu elementleri */
--olive-300: #7ab87a;  /* Acik vurgular */
--olive-200: #a3d4a3;  /* Hafif arka planlar */
--olive-100: #d1e8d1;  /* Cok acik arka plan */
--olive-50: #e8f4e8;   /* En acik arka plan */

/* Vurgu */
--sky-500: #0ea5e9;    /* Teknoloji mavisi */
--sky-400: #38bdf8;    /* Acik mavi vurgu */
--sky-300: #7dd3fc;    /* Hafif mavi vurgu */

/* Sektor Renkleri */
--emerald-500: #10b981;  /* Tarim/Sera */
--amber-500: #f59e0b;    /* Enerji */
--violet-500: #8b5cf6;   /* Kestirimci Bakim */

Font

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 700; /* Basliklar */
font-weight: 400; /* Body */

Boyutlar

/* Font Sizes */
--h1: 80px;
--h2: 56px;
--h3: 40px;
--body: 32px;
--small: 24px;

/* Border Radius */
--radius-base: 10px;
--radius-card: 16px;
--radius-cta: 24px;
--radius-button: 8px;

1. Creator.create_carousel_content(topic)
   -> 5+ slide HTML array

2. Her slide icin:
   render_html_to_png(slide_html)
   -> PNG dosyasi

3. Upload to CDN (imgbb)
   -> Public URL array

4. Instagram carousel API
   -> post_carousel_to_instagram(urls, caption)

Template Data Binding

Her template JSON data alir:

# Dashboard ornegi
data = {
    "title": "IoT Dashboard",
    "subtitle": "Gercek Zamanli Izleme",
    "metrics": [
        {"label": "Sicaklik", "value": "24°C"},
        {"label": "Nem", "value": "65%"}
    ]
}

Dosyalar

  • templates/*.html - 11 template dosyasi
  • app/renderer.py - Playwright rendering
  • app/claude_helper.py - Template generation (generate_*_html fonksiyonlari)