Portfolio/src/pages-vite/portfolio/projects/automated-ad-creatives.mdx

---
slug: "automated-ad-creatives"
title: "Automatisierte Ad Creatives: KI-gestützte Werbemittel-Erstellung"
description: "Entwicklung eines Workflows zur automatisierten Erstellung von Facebook Ad Creatives mit Claude Opus 4.5 - ohne Designsoftware, komplett im Chat"
excerpt: "Von der Designvorlage zum fertigen Werbemittel: Wie KI die Ad-Creative-Erstellung revolutioniert."
date: "2024-12-12"
category: "KI & Automatisierung"
coverImage: "/images/projects/automated-ad-creatives/cover.jpg"
client: "Eigenprojekt"
duration: "1 Tag"
url: ""
repository: ""
documentation: ""
published: true
featured: true
technologies: ["Claude Opus 4.5", "HTML/CSS", "PNG Export", "Prompt Engineering"]
tags: ["KI", "Automatisierung", "Facebook Ads", "Marketing", "No-Code"]
videoUrl: "https://www.tella.tv/video/automatisierte-ad-creatives-1kyw"
---

<div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden', marginBottom: '2rem', borderRadius: '12px' }}>
  <iframe
    src="https://www.tella.tv/video/automatisierte-ad-creatives-1kyw/embed?b=0&title=1&a=1&loop=0&autoPlay=false&t=0&muted=0&wt=0"
    style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 'none' }}
    allowFullScreen
    loading="lazy"
  />
</div>

<div style={{ margin: "20px 0", padding: "20px", backgroundColor: "#3d3d3d", borderRadius: "8px" }}>
  <p style={{ fontSize: "1.1rem", lineHeight: "1.6" }}>
    Programme wie Illustrator, InDesign, Figma oder Canva können kompliziert sein. Dieses Projekt zeigt, wie sich Facebook Ad Creatives vollständig im KI-Chat erstellen lassen - ohne Designsoftware, ohne Programmierkenntnisse.
  </p>
</div>

<hr style={{ margin: "40px 0", border: "none", height: "1px", backgroundColor: "#ddd" }} />

<h2 style={{ marginBottom: "20px" }}>Die Herausforderung</h2>
<div style={{ marginBottom: "30px" }}>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Die Erstellung von Werbemitteln für Facebook-Kampagnen erfordert traditionell:
  </p>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li>Kenntnisse in Designsoftware (Illustrator, Figma, Canva)</li>
    <li>Zeit für Einarbeitung und Umsetzung</li>
    <li>Verständnis für Formatvorgaben und Best Practices</li>
    <li>Iterationen zwischen Design und Marketing</li>
    <li>Budget für Designer oder Design-Tools</li>
  </ul>
</div>

<h2 style={{ marginBottom: "20px" }}>Der Lösungsansatz</h2>
<div style={{ marginBottom: "30px" }}>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Ein KI-gestützter Workflow, der den gesamten Prozess im Chat-Fenster abbildet:
  </p>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li>Designvorlage als visuelle Referenz für die KI</li>
    <li>HTML-Generierung durch natürlichsprachliche Prompts</li>
    <li>Automatische Konvertierung zu PNG-Bilddateien</li>
    <li>Integration zusätzlicher Bilder per Drag & Drop</li>
    <li>Iterationen durch einfache Chat-Anweisungen</li>
  </ul>
</div>

<h2 style={{ marginBottom: "20px" }}>Technische Umsetzung</h2>
<div style={{ marginBottom: "30px" }}>
  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Der Workflow im Detail</h3>

  <h4 style={{ marginTop: "15px", marginBottom: "10px" }}>Schritt 1: Designgrundlage</h4>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Auf Envato Elements nach "Facebook Ads Kampagne" suchen und ein passendes Template als Designreferenz herunterladen. Dieses Bild definiert Stil, Farbgebung und Layout.
  </p>

  <h4 style={{ marginTop: "15px", marginBottom: "10px" }}>Schritt 2: Erster Prompt</h4>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Das Referenzbild zusammen mit einem beschreibenden Prompt an Claude Opus 4.5 senden. Die KI analysiert das Bild und generiert eine HTML-Datei, die das Design nachbildet.
  </p>

  <h4 style={{ marginTop: "15px", marginBottom: "10px" }}>Schritt 3: HTML zu PNG</h4>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Im zweiten Prompt die KI bitten, die HTML-Datei als PNG zu exportieren. Das Ergebnis ist eine fertige Bilddatei für Facebook Ads.
  </p>

  <h4 style={{ marginTop: "15px", marginBottom: "10px" }}>Schritt 4: Bilder hinzufügen</h4>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Zusätzliche Bilder (z.B. von Unsplash) per Drag & Drop in den Chat ziehen. Die KI integriert sie in das bestehende Creative.
  </p>
</div>

<h2 style={{ marginBottom: "20px" }}>Verwendete Tools</h2>
<div style={{ marginBottom: "30px" }}>
  <table style={{ width: "100%", borderCollapse: "collapse" }}>
    <thead>
      <tr style={{ borderBottom: "2px solid #ddd" }}>
        <th style={{ textAlign: "left", padding: "10px" }}>Tool</th>
        <th style={{ textAlign: "left", padding: "10px" }}>Zweck</th>
      </tr>
    </thead>
    <tbody>
      <tr style={{ borderBottom: "1px solid #ddd" }}>
        <td style={{ padding: "10px" }}><strong>Claude Opus 4.5</strong></td>
        <td style={{ padding: "10px" }}>KI für HTML-Generierung und Bildexport</td>
      </tr>
      <tr style={{ borderBottom: "1px solid #ddd" }}>
        <td style={{ padding: "10px" }}><strong>Envato Elements</strong></td>
        <td style={{ padding: "10px" }}>Designvorlagen als Referenz</td>
      </tr>
      <tr style={{ borderBottom: "1px solid #ddd" }}>
        <td style={{ padding: "10px" }}><strong>Unsplash</strong></td>
        <td style={{ padding: "10px" }}>Kostenlose Bilder für die Creatives</td>
      </tr>
    </tbody>
  </table>
</div>

<h2 style={{ marginBottom: "20px" }}>Vorteile des Ansatzes</h2>
<div style={{ marginBottom: "30px" }}>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li><strong>Keine Design-Skills nötig:</strong> Die KI übernimmt die technische Umsetzung</li>
    <li><strong>Schnelle Iterationen:</strong> Änderungen in Sekunden durch Chat-Anweisungen</li>
    <li><strong>Skalierbar:</strong> Beliebig viele Varianten für A/B-Tests</li>
    <li><strong>Kosteneffizient:</strong> Keine teuren Design-Tools erforderlich</li>
    <li><strong>Flexibel:</strong> Funktioniert auch mit Gemini oder ChatGPT</li>
  </ul>
</div>

<h2 style={{ marginBottom: "20px" }}>Einsatzszenarien</h2>
<div style={{ marginBottom: "30px" }}>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li><strong>Performance-Marketing:</strong> Schnelle Creative-Tests ohne Wartezeit</li>
    <li><strong>E-Commerce:</strong> Produktwerbung in großem Umfang</li>
    <li><strong>Startups:</strong> Professionelle Ads ohne Design-Team</li>
    <li><strong>Agenturen:</strong> Effiziente Kundenarbeit bei Ad-Erstellung</li>
  </ul>
</div>

<h2 style={{ marginBottom: "20px" }}>Fazit</h2>
<div style={{ marginBottom: "30px" }}>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Der Workflow demonstriert, wie KI die Erstellung von Ad Creatives vereinfacht. Das Ergebnis ist vielleicht noch nicht auf dem Niveau eines professionellen Grafikdesigners - aber für schnelle Tests, erste Entwürfe oder Teams ohne Designressourcen ist dieser Ansatz eine echte Alternative.
  </p>
  <p style={{ fontSize: "1rem", lineHeight: "1.6", marginTop: "15px" }}>
    Die Technologie entwickelt sich rasant weiter. Was heute noch "nicht perfekt integriert" ist, wird in wenigen Monaten deutlich besser funktionieren.
  </p>
</div>