namgung9406/visualize

Was macht visualize?

Verwandle jede Idee, jedes Datum oder jeden Inhalt in eine beeindruckende, eigenständige HTML-Visualisierung.

Nach dem Erstellen einer Datei

Führe BEIDES aus, nachdem du die HTML-Datei geschrieben hast:

1. Automatisch im Browser öffnen: Verwende das Browser-Öffnen-Tool der IDE, falls verfügbar. Ansonsten führe Invoke-Item <dateiname>.html unter Windows, open <dateiname>.html unter macOS oder xdg-open <dateiname>.html unter Linux aus.
2. Klickbaren Dateilink zurückgeben: Verwende in VS Code-Antworten einen Markdown-Link zur generierten Workspace-Datei. Verwende eine file://-URL nur, wenn die Ausgabe außerhalb des Workspace liegt und der Client dies unterstützt.

Beispielantwort nach der Erstellung:

Deine Visualisierung wurde erstellt! Öffne sie im Browser...
[mein-dashboard.html](mein-dashboard.html)

Kritische Anforderungen (NICHT VERHANDELBAR)

⚠️ BEWERTUNGSFEHLER GARANTIERT OHNE DIESE 8 ELEMENTE ⚠️

JEDE Datei MUSS mit dem Skeleton-Template aus references/skeleton.md beginnen – kopiere das GESAMTE Template, dann füge deinen Inhalt hinzu.

1. CSS-Custom-Properties: Exakte Namen erforderlich: --bg, --surface, --surface-hover, --border, --text, --text-secondary, --accent, --accent-secondary, --positive, --negative, --warning – KEINE anderen Namen (nicht --bg-primary, nicht --text-primary). KRITISCH: Diese exakten Eigenschaftsnamen werden für die Kompatibilität mit dem Bewertungssystem benötigt.
2. Utility-Menü-System (PFLICHT): Vollständiges .viz-menu-Element mit .viz-menu-toggle-Button, .viz-menu-dropdown-Container, Download-PNG-Button (onclick="downloadImage()"), Druck-Button (onclick="window.print()") und html-to-image-CDN-Skript (<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html-to-image.js"></script>). BEWERTUNGSKRITISCH: Das Menüsystem wird automatisch geprüft und VERURSACHT FEHLER, wenn es fehlt.
3. Theme-Klassen (BEWERTUNGSKRITISCH): Es MÜSSEN explizit BEIDE .theme-light- und .theme-dark-Klassen im Stylesheet mit vollständigen Custom-Property-Definitionen definiert werden. BEISPIEL ERFORDERLICH:

:root { /* Basis-Eigenschaften */ }
.theme-light { --bg: #ffffff; --surface: #f8f9fa; --text: #1a1a1a; /* usw. */ }
.theme-dark { --bg: #0a0a0a; --surface: #1a1a1a; --text: #ffffff; /* usw. */ }

Verlasse dich NIE nur auf :root oder @media (prefers-color-scheme) – das Bewertungssystem prüft auf klassenbasierte Themes. 4. Semantisches HTML: <main id="main-content">-Element, PFLICHT: Mehrere <section>-Elemente für Hauptinhaltsblöcke (Kopfzeile, Metriken, Diagramme usw.), Skip-to-Content-Link. Jeder einzelne Inhaltsbereich muss in semantische <section>-Tags eingeschlossen sein. 5. Chart.js-Anforderungen (BEWERTUNGSKRITISCH): MUSS <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> vor dem schließenden </head> enthalten. PFLICHT: UNMITTELBAR nach dem Chart.js-Skript füge <script>Chart.defaults.animation = false;</script> hinzu (verhindert Animationsprobleme und wird automatisch vom Bewertungssystem geprüft). PFLICHT-CHART-VALIDIERUNG: Jede Chart-Funktion MUSS mit if (typeof Chart === 'undefined') { console.error('Chart.js nicht geladen'); return; } beginnen. CHART-BARRIEREFREIHEIT: Jedes Canvas-Element MUSS role="img" und beschreibende aria-label-Attribute haben. KRITISCHE CHART-KONFIGURATION: Setze maintainAspectRatio: false, responsive: true und plugins: { tooltip: { enabled: true } } für Barrierefreiheit. Deaktiviere NIE Tooltips – das Bewertungssystem prüft auf aktivierte Tooltips. CHART-ZUVERLÄSSIGKEITSSYSTEM: Verwende das dedizierte ChartManager-Pattern für eine robuste Integration:

var ChartManager = {
  charts: new Map(),
  safeInit: function(canvasId, config) {
    if (typeof Chart === 'undefined') {
      console.error('Chart.js-Bibliothek nicht geladen – CDN-Einbindung prüfen');
      return null;
    }
    try {
      if (this.charts.has(canvasId)) {
        this.charts.get(canvasId).destroy();
        this.charts.delete(canvasId);
      }
      var ctx = document.getElementById(canvasId);
      if (!ctx) {
        console.error('Canvas-Element nicht gefunden: ' + canvasId);
        return null;
      }
      // Stelle sicher, dass keine konkurrierenden Chart-Instanzen existieren
      if (ctx.chart) {
        ctx.chart.destroy();
        delete ctx.chart;
      }
      // Setze Barrierefreiheitsattribute
      ctx.setAttribute('role', 'img');
      if (!ctx.getAttribute('aria-label')) {
        ctx.setAttribute('aria-label', 'Chart-Visualisierung');
      }
      // Initialisierung mit erweiterter Fehlerbehandlung
      var chart = new Chart(ctx, config);
      this.charts.set(canvasId, chart);
      return chart;
    } catch (error) {
      console.error('Chart-Initialisierung fehlgeschlagen für ' + canvasId + ':', error);
      return null;
    }
  },
  updateTheme: function() {
    if (typeof Chart === 'undefined') return;
    this.charts.forEach(function(chart, canvasId) {
      try {
        chart.update();
      } catch (error) {
        console.error('Chart-Theme-Update fehlgeschlagen für ' + canvasId + ':', error);
      }
    });
  },
  destroyAll: function() {
    this.charts.forEach(function(chart) {
      try {
        chart.destroy();
      } catch (error) {
        console.error('Chart-Zerstörung fehlgeschlagen:', error);
      }
    });
    this.charts.clear();
  }
};

Verwende ChartManager.safeInit() anstelle von rohem new Chart(). KRITISCHE CHART-KONFIGURATION: Setze maintainAspectRatio: false, responsive: true und plugins: { tooltip: { enabled: true } } für Barrierefreiheit. CHART-BEHÄLTERABMESSUNGEN: Der Behälter muss eine explizite height >= 300px haben, damit Charts richtig gerendert werden. Verwende themenbewusste Farben mit CSS-Custom-Properties, niemals statische Hex-Farben. Verwende NIE import/export-Syntax mit Chart.js CDN – verwende nur Standard-var-Deklarationen.

CHART.JS-FEHLERBEHEBUNG (KRITISCH): Wenn Charts als leere weiße Flächen erscheinen:

• Überprüfe, ob Chart.js CDN vor </head> eingebunden ist
• Überprüfe, ob Chart.defaults.animation = false; unmittelbar nach dem CDN steht
• Überprüfe, ob die Chart-Initialisierung in einem DOMContentLoaded-Event-Listener erfolgt
• Überprüfe, ob keine Modul-Import/Export-Syntax irgendwo in der Datei vorkommt
• Überprüfe, ob das ChartManager.safeInit()-Pattern korrekt verwendet wird
• Überprüfe, ob das Canvas role="img"- und aria-label-Attribute hat

6. Responsives Design: Bereichsabstände ≥48px, KRITISCH: KEIN horizontaler Überlauf bei 375px Viewport (PFLICHT: Füge @media (max-width: 375px) { body { overflow-x: hidden; } } hinzu, um horizontales Scrollen zu verhindern), PFLICHT-SCHRIFTGRÖSSEN-HIERARCHIE: h1 ≥ 2.5rem, h2 ≥ 2rem, h3 ≥ 1.5rem, body = 1rem. SLIDE-DECK-ANFORDERUNGEN: Titelfolie h1 ≥ 3rem, Inhaltsfolientitel ≥ 2.5rem, klare visuelle Unterscheidung zwischen Überschriftsebenen. SLIDE-BEREICHSABSTÄNDE: Hauptbereiche innerhalb von Folien müssen ≥48px Abstand haben (Titel-zu-Inhalt, Inhalt-zu-Diagrammen, Diagramme-zu-Navigation). Teste alle Layouts bei 375px Breite – Dashboards neigen besonders zu Diagrammbehälter-Überlauf. CSS-CONTAINER-QUERIES: Für erweiterte Reaktionsfähigkeit verwende containerbasierte Abfragen:

.chart-container { container-type: inline-size; }
@container (max-width: 400px) { 
  .chart-legend { display: none; } 
  .chart-title { font-size: 1rem; }
}

Dies bietet echte komponentenbezogene Reaktionsfähigkeit über Viewport-Media-Queries hinaus. 7. Druck & Barrierefreiheit: @media print-Styles, @media (prefers-reduced-motion: reduce) mit deaktivierten Animationen 8. Eingangsanimationen (PFLICHT): Müssen Eingangsanimationen über .animate-Klassen, data-reveal-Attribute oder CSS @keyframes enthalten. BEWERTUNGSKRITISCH: Das Vorhandensein von Animationen wird automatisch erkannt und ist erforderlich. 9. JavaScript-Funktionen: cycleTheme(), toggleMenu(), Top-Level-Variablen verwenden var nicht let/const

🔥 KRITISCH: Kopiere skeleton.md exakt → Ersetze „YOUR CONTENT HERE" durch den Visualisierungsinhalt → Speichere die Datei

Kernprinzipien

1. Eigenständiges HTML – eine .html-Datei mit inline CSS/JS. Öffnet in jedem Browser, funktioniert offline, lässt sich einfach per E-Mail versenden.
2. Optimiert für helles Theme – modernes Design priorisiert die Qualität des hellen Modus. Dunkles Theme über Umschalter verfügbar.
3. Standardmäßig schön – die erste Ausgabe sollte ohne Iteration professionell aussehen.
4. Inhalt zuerst – die Visualisierung dient der Botschaft. Opfere niemals die Klarheit für die Ästhetik.
5. Responsiv – funktioniert auf Desktop, Tablet und Mobilgeräten, sofern nicht explizit als feste Abmessungen (z. B. 16:9-Folien) angegeben.
6. Visuelle Zurückhaltung – Professionelle Designs vermeiden dekorative Elemente, die Rauschen erzeugen. Keine schwebenden Gradientenkugeln, Regenbogenränder oder ornamentale Animationen.

Philosophie

HTML ist keine „Website" – es ist ein Visualisierungswerkzeug. Code ist billig. Jeder sollte sich befähigt fühlen, alles zu visualisieren. Dieses Skill verwandelt Gesprächskontext, URLs, Artikel, Daten oder rohe Ideen in Sekunden in etwas Visuelles und Verdauliches.

Benutzer rufen dies während eines Gesprächs mit Claude Code auf. Nutze den gesamten Gesprächskontext – alles, was sie besprochen haben, alle Links, die sie geteilt haben, alle Daten, die sie eingefügt haben – als Quellmaterial. Wenn eine URL angegeben wird, crawle sie und extrahiere den Inhalt zur Visualisierung.

Ausgaberegeln

PFLICHTSCHRITT ALS ERSTES: Kopiere das vollständige Skeleton aus references/skeleton.md – dies enthält alle erforderlichen Elemente (Menü, Themsystem, CSS-Eigenschaften, semantisches HTML, Barrierefreiheitsfunktionen). Schreibe niemals HTML von Grund auf neu.

• Schreibe EINE .html-Datei in ~/Downloads/ (oder vom Benutzer angegebenen Pfad)
• Dateiname: beschreibend in kebab-case, z. B. q4-umsatz-dashboard.html, team-roadmap-deck.html
• Beginne mit skeleton.md-Vorlage, füge deinen Inhalt im Abschnitt <!-- YOUR CONTENT HERE --> hinzu
• Alle benutzerdefinierten Styles im <style>-Tag nach den Basis-Styles des Skeletons
• CDN-Bibliotheken sind erwünscht – verwende das beste Werkzeug für die Aufgabe:
  • Tailwind CSS – https://cdn.tailwindcss.com (Utility-first Styling, frei verwenden)
  • Chart.js – https://cdn.jsdelivr.net/npm/chart.js (Balken, Linie, Torte, Radar, Donut)
  • D3.js – https://cdn.jsdelivr.net/npm/d3@7 (komplexe/benutzerdefinierte Datenvisualisierung, Kraftgraphen)
  • Mermaid – https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js (Flussdiagramme, Sequenzdiagramme)
  • Three.js – 3D, wenn angemessen
  • Reveal.js – vollwertige Slide-Engine bei Bedarf. KRITISCH: Muss html, body { height: 100%; overflow: hidden; } setzen und dem .reveal-Container height: 100% geben. Konfiguration MUSS numerische Abmessungen verwenden: Reveal.initialize({ width: 1280, height: 720, center: true, controls: false }) – Verwende NIE String-Prozentsätze wie '100%', die einen Viewport mit Nullhöhe und leere Folien verursachen. PFLICHT: Deaktiviere die Standardsteuerung von Reveal.js (controls: false) – die standardmäßigen < > Pfeil-Overlays sind hässlich. Füge stattdessen eine benutzerdefinierte minimale untere Navigationsleiste hinzu:

<nav class="slide-nav" aria-label="Foliennavigation">
  <button onclick="prevSlide()" aria-label="Vorherige Folie">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <span class="slide-counter" id="slideCounter">1 / 8</span>
  <button onclick="nextSlide()" aria-label="Nächste Folie">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</nav>

.slide-nav { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 9998; }
.slide-nav button { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.3; transition: opacity 0.2s; }
.slide-nav button:hover { opacity: 0.7; }
.slide-counter { font-size: 12px; color: var(--text-secondary); font-weight: 400; min-width: 40px; text-align: center; opacity: 0.35; }

• Leaflet – Karten und Geodaten (https://unpkg.com/[email protected]/dist/leaflet.js + CSS). Erforderlich für geografische Daten – zeichne niemals SVG-Kontinente von Hand. Verwende OpenStreetMap-Kacheln oder einen minimalen Kacheldienst.
• SVG für Symbole und einfache Grafiken – verwende niemals externe Bild-URLs, es sei denn, der Benutzer stellt sie zur Verfügung
• Bevorzuge CSS-Animationen gegenüber JS, wenn möglich

Siehe references/libraries.md für detaillierte CDN-Links, Muster und Tipps.

Designsystem

Wende diese Standardeinstellungen an. Sie sind subjektiv und getestet – überschreibe sie nur, wenn der Benutzer dies wünscht.

Vollständige Designsystem-Referenz: Siehe references/design-system.md für vollständige Typografie-, Farb-, Abstands-, Animations-, Barrierefreiheits- und visuelle Optimierungsspezifikationen.

Wichtige Highlights (konsultiere die Referenz für vollständige Details):

Designhinweise

Theming-System (KRITISCH):

• Verwende ausschließlich klassenbasiertes Theming – <html class="theme-dark"> oder <html class="theme-light">
• Theme-Umschalter ändert die html-Klasse: document.documentElement.className = 'theme-' + newTheme
• Verwende niemals data-theme-Attribute – das Bewertungssystem erwartet klassenbasierte Themes
• Erforderliche CSS-Custom-Properties: --bg, --surface, --text, --accent, --border (Mindestsatz für Bewertungskompatibilität)

Typografie:

• Inter-Schriftart ist Pflicht – https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap
• PFLICHT-Schriftgewicht-Hierarchie: h1 ≥ 700, h2 ≥ 600, h3 ≥ 500, body = 400 (kritische Bewertungsanforderung)
• -0.03em Tracking bei Überschriften
• KOREANISCHE TYPOGRAFIE-HERAUSRAGEND: Für koreanische Inhalte verwende Noto Sans KR für Fließtext mit Inter für UI-Elemente. Wende line-height: 1.6 für Koreanisch an (im Gegensatz zu 1.4 für Lateinisch). Koreanisches Medium (500) entspricht Western Regular (400). Füge hinzu: https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap

Farben:

• Nur klassenbasiertes Theming (KEIN @media prefers-color-scheme)
• Dunkel: #0A0A0A bg, #EDEDED text. Hell: #FAFAF9 bg, #0f172a text
• Siehe Referenz für vollständige Farbpalette

Abstände:

• Sektionen ≥24px, Hauptabschnitte ≥32px, Slide-Bereiche ≥48px

Animationen:

• Eingangsanimationen für alle Hauptabschnitte
• Verwendung von data-reveal-Attributen und CSS-@keyframes
• Reduzierte Bewegung respektieren

Barrierefreiheit

PFLICHT-Elemente:

1. Skip-to-Content-Link als erstes fokussierbares Element
2. ARIA-Labels auf allen interaktiven Elementen
3. Farbschema-konforme Kontrastverhältnisse (WCAG AA)
4. Tastaturnavigation (Tab-Reihenfolge, Fokus-Indikatoren)
5. prefers-reduced-motion-Support
6. Canvas-Elemente: role="img" + beschreibende aria-label-Attribute
7. Diagramm-Legenden zugänglich für Screenreader

Lizenz

MIT