Zum Hauptinhalt springen
snipKI

Brandkonforme Charts mit Claude Projects erstellen

Lerne, wie du mit Claude Projects und Artifacts Daten sowie Screenshots per Prompt in markenkonforme, interaktive Charts in deinem Corporate Design transformierst.

Kostenlos ansehen20 minFortgeschritten
Video wird geladen …

Ein Snip von Moritz

Über diesen Snip

In diesem Snip lernst du Schritt für Schritt, wie du mit Claude Projects interaktive, markenkonforme Charts erstellst. Anstatt Diagramme mühsam manuell in Tabellenkalkulationen nachzubauen, nutzt du Claudes Artifacts-Feature, um unformatierte Daten, Tabellenauszüge oder Screenshots externer Studien direkt in Grafiken im eigenen Corporate Design zu verwandeln.

Zunächst analysiert Claude bestehende Vorlagen deines Unternehmens und fasst Designregeln wie Farbschemata, Schriftarten, Abstände und Achsenformatierungen in Brand Guidelines zusammen. Diese Regeln werden anschließend als Knowledge Base in einem Claude Project hinterlegt und durch präzise Custom Instructions ergänzt.

Im Praxistest wird demonstriert, wie du Tabellenkopien und Reportscreenshots einfügst und das Diagramm über iteratives Prompting verfeinerst. Zudem erfährst du, wo die aktuellen Grenzen der KI-Generierung liegen und wann sich der Einsatz besonders lohnt.

Transkript nachlesen

Im heutigen Snip lernst du, wie du ein Claude Projects erstellst, mit Hilfe dessen du Charts erstellen kannst, die genau deinem Corporate Branding, also deiner Corporate Identity entsprechen. Und zwar egal, ob das irgendwelche internen Analytics sind oder ob du einfach nur ein Screenshot von irgendeinem externen Report machst und möchtest daraus schöne Charts erstellen, die eben so aussehen, wie sie sein müssen für deine Corporate Identity oder deine Brand. Das schauen wir uns heute an. Und die Schritte sind, dass wir zunächst Brand Guidelines erstellen auf Basis von Charts, die du schon hast in deinem Corporate Branding, und dann diese Brand Guidelines verwenden, um dem Project die Knowledge Base zu geben, dass das Project quasi weiß, wie es die Charts für dich zu erstellen hat. So, bevor wir in die Schritt-für-Schritt-Anleitung gehen, will ich euch noch kurz zeigen, was das Ergebnis ist, wenn ihr beispielsweise Daten in so einem Pivot Table habt oder beispielsweise in so einem hässlichen Google Form, in hässlichen Farben, die alle nicht eurer Corporate Identity entsprechen. Und angenommen, ihr habt so eine rot-schwarz-graue Corporate Identity, dann könnt ihr sehr leicht mit Claude so ein Chart erstellen. Oder wenn ihr beispielsweise einen Report findet, den ihr gerne in einem Social-Media-Post weiterverarbeiten möchtet, aber möchtet quasi das Chart in eurem Chart-Design darstellen, dann könnt ihr einfach den Screenshot nehmen, in euer Claude Project droppen und bekommt am Ende quasi, wie beispielsweise hier auf der rechten Seite, wieder ein Chart in eurer Corporate Identity, in dem Fall rot-schwarz. Und wie das geht, schauen wir uns jetzt an. Erste Schritt ist es, die sogenannten Brand Guidelines zu erstellen. Und zwar nutzen wir da den normalen Claude Chat hier mit dem Modell 3.5. Für alle, die Claude noch nicht genutzt haben: Claude ist einfach eine Alternative zu ChatGPT, was gewisse andere Stärken hat und ist insbesondere für so Data-Analytics-Themen super. Und später, wie wir sehen, mit dem Artifacts-Feature, dass uns quasi auf der rechten Seite das Chart erstellt, während wir auf der linken Seite prompten können. Das macht das Handling sehr leicht und einfach und perfekt für diesen Use Case. Um aber eine Branding Guideline zu erstellen, brauchen wir erstmal gewisse Beispiele für das Modell, dass es versteht, wie unsere Charts so aussehen sollen. Und zwar war ich früher mal als Berater bei Bain & Company in der Strategieberatung, und da wurde sehr darauf geachtet, dass die Charts immer einen ähnlichen Stil haben und einer gewissen Logik folgen und einem gewissen Color Coding. Und so macht das eigentlich für jeden Sinn, der Charts veröffentlicht, dass die irgendwie immer ähnlich aussehen und eure Kunden eben wissen: Okay, das sind Charts von eurer Firma. Idealerweise nutzt ihr so viel Input wie möglich, also so viele Charts, die ihr bereits in eurem Branding erstellt habt, und so viele verschiedene Chart-Typen wie möglich, dass das Modell einfach am besten lernt, wie eure Charts aussehen sollen. Ich habe jetzt hier nur mal ein paar für unser Beispiel reingezogen, aber auch damit klappt es eigentlich schon ganz gut. Wichtig ist, dass ihr so viel unterschiedliche Charts wie möglich, die aber alle irgendwie eurem Corporate Branding natürlich entsprechen, reingebt, damit ihr auch die bestmöglichen Brand Guidelines bekommt. So, jetzt erstellen wir die Brand Guidelines. Dafür müssen wir Claude richtig prompten. Und zwar paste ich hier mal den Prompt rein. Der Prompt ist auf Englisch, weil ich persönlich die Erfahrung gemacht habe, insbesondere wenn es um so Datenthemen oder Coding-Themen geht, da ist Claude meistens noch besser oder versteht es meistens besser, wenn wir auf Englisch prompten. Sonst generell kann Claude aber sehr gut und kann auch guten deutschen Content erstellen, insbesondere für Social-Media-Content und so weiter. Wir gehen aber hier gleich Schritt für Schritt durch. Wenn ihr euch wundert, warum hier so komische Schriftzeichen drin sind und so weiter, und sagt, das würde doch kein Mensch so schreiben: Das stimmt. Den Prompt haben wir generiert mit Hilfe des Prompt Generators hier von Claude, den ihr unter der Konsole findet. Da gibt es auch noch ein anderes Snip zu, ist jetzt auch erstmal nicht relevant für dieses Snip, nur dass ihr wisst, wenn ihr die perfekten Prompts erstellen wollt, dann könnt ihr das über diesen Prompt Generator machen. Da gibt es, wie gesagt, ein separates Snip dazu, dass ihr euch gerne anschauen könnt. Ich gehe aber mal kurz den Prompt für diese Brand Guidelines high-level durch. Wir sagen hier Claude erstmal, was sein Job ist, und zwar ist es, Brand Guidelines zu erstellen für Charts. Und er bekommt Input von uns auf Basis dieser Beispiel-Charts, die wir uns gerade angeschaut haben. Die soll er analysieren erstmal hier in Ruhe und soll dann auf Basis dem Input Common Patterns erkennen, also Gemeinsamkeiten, Design-Themen, Farben und so weiter und so fort. Und haben dann hier noch mal genau gelistet, also dass er sich Color Schemes anschauen soll, wie die Achsen gelabelt sind, wie die Quellen zitiert werden, wie die Titel aussehen sollen, wie die Schrift aussehen soll, wie die Legende aussehen soll, wie der Abstand aussehen soll. Den Prompt findet ihr auch unter dem Snip. Also keine Sorge, wenn das jetzt ein bisschen schnell geht, könnt ihr das noch mal in Ruhe anschauen. Ich will jetzt aber nicht jede einzelne Zeile vorlesen. Das Wichtige ist, dass ihr einfach versteht: Okay, hier erklären wir dem Modell, wie es quasi die Charts analysieren soll, auf was es achten soll und was es dann quasi erstellen soll. Und bevor wir das jetzt rausschicken, laden wir hier noch die Charts rein. Und zwar müsst ihr da beachten, dass man bei Claude immer nur fünf auf einmal hochladen kann. Sprich: Wir machen jetzt zwei Schritte. Wir haben jetzt hier fünf Fotos oder fünf Charts hochgeladen, schicken jetzt unseren Prompt ab, bekommen dann die Brand Guidelines und schicken dann noch mal vier weitere Charts rein und sagen: Okay, cool, hier sind noch mal vier weitere, analysiere die auch und passe dann gegebenenfalls die Brand Guidelines noch mal an. Jetzt schicken wir das aber hier einfach schon mal ab. Jetzt sehen wir schon, wir haben hier ein erstes Ergebnis, genau wie wir gesagt haben: Color Scheme, wie die Achsen aussehen sollen, wie die Quellen aussehen sollen, Titel und so weiter und so fort. Und laden jetzt noch mal die weiteren vier Charts rein und sagen dann noch: Analysiere auch diese vier Charts und passe gegebenenfalls die Brand Guidelines an. So, und hier haben wir jetzt unsere finalen Brand Guidelines. Diese Brand Guidelines sind jetzt der Input für die Knowledge Base für das Projekt, was wir gleich erstellen. Und zwar, um ein Projekt zu erstellen, gehen wir wieder auf claude.ai, klicken dann hier oben links auf Projects und klicken oben rechts auf Create a Project und müssen es jetzt hier benennen. Als Name schreiben wir dann rein: 'Charts in unserem Branding', und dann können wir hier noch eine Beschreibung reinschreiben, was wir schaffen wollen. Und das wäre in unserem Fall: Unser Input sind Daten oder Chart-Bilder, der Output ist ein Chart in unserem Branding. Und klicken auf Create Project. Wenn wir hier in dem Projekt sind, haben wir hier oben zwei Optionen: Wir können die Custom Instructions setzen, das machen wir gleich, und wir können Content hochladen. Für das Hochladen des Contents gibt es genau zwei Optionen: Entweder ich kann Daten von meinem Computer hochladen, wenn ich beispielsweise PDFs oder irgendwelche Text-Files auf meinem Computer habe, oder wenn ich quasi einfach Text kopieren möchte, dann klicke ich hier auf Add Text Content. In unserem Fall haben wir den Text aus dem anderen Chat. Wir haben ja hier unsere Brand Guidelines erstellt, die kopieren wir jetzt und fügen sie dann hier unten ein. Und dann können wir hier oben noch 'Brand Guidelines' reinschreiben und haben dann eben alles, was Claude braucht, um zu verstehen, wie unsere Charts auszusehen haben. Dann klicken wir unten rechts auf Add Content. Und jetzt sehen wir auch schon, die sind jetzt hier als Text hinzugefügt. Wir haben ein Prozent der Knowledge Base benutzt, wir könnten also noch viel, viel mehr hier hinzufügen. Für unseren Fall langt das aber. Und der nächste Schritt sind jetzt die Set Custom Instructions. Und zwar klickt man dann hier drauf und haben jetzt hier wieder die Möglichkeit, Text einzufügen und Claude zu sagen, was es zu tun hat. Und hier haben wir auch wieder mit dem Prompt Generator einen Prompt erstellt. Und das ist einfach die Anweisung. Wir sagen hier, er ist ein Experte in brand-faithful Chart-Design, also so ein bisschen die Rolle definiert. Dann erklären wir, was der Job ist, also dass er Charts erstellen soll, die genau unseren Brand Guidelines entsprechen. Auch hier wieder: Der Prompt steht unter dem Snip, also keine Sorge, wenn ihr hier nicht step by step gleich alles erklärt bekommt. Das Wichtige ist, dass ihr versteht, warum wir das machen, weil wir hier genau sagen: Hey, du hast die Brand Guidelines, auf die musst du dich beziehen. Wir geben dir Input, und zwar diese Brand Guidelines, steht hier unten, und die Daten, die Chart-Daten. Und die Chart-Daten können eine CSV-Datei sein oder ein JPEG. Und zusammen aus diesen Daten und den Infos, die du in den Brand Guidelines hast, musst du die Charts machen. Und um die Charts zu erstellen, musst du folgende Schritte befolgen: Du schaust dir die Input-Data an, also entweder das Bild, was wir reindroppen, oder halt eben die Daten, die wir pasten. Er muss das bestmögliche Chart auswählen für diese Daten und wenn er unsicher ist, soll er fragen. Muss dann unsere Brand Guidelines sehr sorgfältig hinzufügen und muss insbesondere an die Color Schemes denken, an die ans Labeling der Achsen und so weiter und so fort, also alles, was wir im Detail definiert haben bei den Brand Guidelines. Und dann – das ist noch ein wichtiger Hinweis hier – soll er dafür sorgen, dass genug Whitespace rechts und links vom Chart ist, weil es sonst oft passiert, dass es quasi nach dem Chart abgeschnitten ist und dann Text nicht ganz sichtbar ist und abgeschnitten ist. Deswegen ist das ein wichtiger Hinweis beim Erstellen von Charts. Und am Ende soll er noch mal wirklich alles doublechecken, ob alles richtig befolgt wurde. Und last but not least soll er das Chart kreieren, hier noch mal der Hinweis, dass er es als Artifact machen soll. Artifact heißt einfach nur bei Claude, dass auf der rechten Seite wie so ein Splitscreen entsteht und dann auf der rechten Seite wir das Chart sehen können, während wir auf der linken Seite prompten können. Und ja, dann noch ein paar weitere Hinweise, wie er quasi das Chart aufbauen soll und so weiter und so fort. Das, wie gesagt, habt ihr alles unten in der Beschreibung. Auch noch hier ein Hinweis: Never return a blank chart. Manchmal funktioniert es nicht ganz und dann ist irgendwie kein Chart da und da muss man ihm sagen, er muss es noch mal machen. Und das hilft ein bisschen. Aber wie wir auch vielleicht gleich sehen werden: Die Charts sind nicht immer perfekt, aber wenn wir Claude sagen: 'Mach's besser, mach's besser, mach's besser', dann kommen wir iterativ auf jeden Fall zum Ergebnis. Jetzt speichern wir die Instructions ab, und damit ist unser Claude Projects fertig und wir können jetzt testen gehen. So, den ersten Test, den wir jetzt machen, ist: Wenn ihr beispielsweise eure eigenen Daten habt, ihr habt eine Umfrage gemacht mit Google Forms und habt ein Chart, das sieht irgendwie so aus. Das kann man nicht wirklich veröffentlichen, weil auf der einen Seite ist es ein Pie-Chart und niemand sollte je ein Pie-Chart veröffentlichen, aber auf der anderen Seite von den Farben her ist es a) hässlich und b) sind es halt keine Corporate Colors. Da kann ich keinen LinkedIn-Post draus machen. Also muss ich irgendwie diese Daten hier Claude geben und Claude sagen, soll es in meinem Corporate Branding machen. In unserem Fall haben wir jetzt hier die Daten als Pivot Table erstellt und diese Daten könnten wir jetzt entweder als CSV-Datei runterladen und in Claude einfügen. Was Claude aber auch schafft – und das ist recht erstaunlich –, wir können die Daten einfach kopieren, inklusive hier Grand Total, Count of und so weiter, und können das Ganze wiederum in unser Claude Project pasten. Jetzt kann ich sagen: 'Bitte erstelle das Chart in unserem Branding.' Den ersten Satz braucht man eigentlich nicht unbedingt. In 90% der Fälle versteht Claude, okay, was es machen soll, weil es hier die Vorgaben hat und die Brand Guidelines hat. Manchmal passiert es aber, dass es irgendwie doch anders erstellt wird. Das heißt, um das zu vermeiden, könnt ihr den Satz mit hinzufügen. Ihr könnt aber sonst auch, wenn es in den 10% der Fälle nicht funktioniert, sagen: 'Okay, bitte in unseren Brand Guidelines', und dann wird das Chart noch mal neu erstellt. Jetzt schauen wir uns aber einfach mal an, was passiert, wenn wir das Ganze abschicken. Und wir sehen hier: Schön sind die Daten hier oben nicht reingeschrieben, ne? Wir haben hier irgendwie nicht mal irgendwelche Kommas, sondern haben irgendwie die Zahlen, die sind direkt an dem Text dran, wir haben das Grand Total, was hier so komisch unten dran geklebt ist. Und sehen jetzt hier einen ersten Wurf. Das sieht jetzt natürlich erstmal nicht schön aus. Auch die Quelle ist erstmal ausgedacht. Jetzt können wir aber Claude einfach prompten und sagen, dass er es besser machen soll. Und zwar geben wir dann dafür hier ein: 'Make it better', und schauen einfach mal, was passiert. Ich habe jetzt noch nicht gesagt, dass das Chart zu weit rechts ist. Ich hätte jetzt auch noch ein bisschen konkreter sein können und hätte sagen können: 'Hey, man sieht das Chart nicht richtig, das ist ganz auf der rechten Seite.' Oft hilft aber auch einfach die Aussage: 'Make it better.' Und manchmal muss man es zwei-, dreimal machen und wenn es dann nicht funktioniert – ja, es geht schon ein bisschen weiter zur Links. 'The chart is' – und jetzt prompte ich wieder auf Englisch und könnte es auch auf Deutsch machen, meistens klappt es ein bisschen besser auf Englisch: 'The chart is too far on the right, make it better.' Und das ist tatsächlich ein Prompting-Hack bei Claude, insbesondere bei diesem Artifacts-Feature: immer zu sagen: 'Make it better, make it better, make it better', auch wenn ihr irgendwelche anderen Sachen mit Artifacts erstellt. Kommt ihr so iterativ zu einem besseren Ergebnis. 'Chart more to the left, make it better.' Aber ihr seht vor allem schon, dass es genau in dem Design und Branding und in den Brand Guidelines ist wie die Beispiele, die wir Claude gegeben haben. Der Text ist, die Schriftart ist das Gleiche, die Art der Überschrift ist die Gleiche, die Farben der Charts sind die Gleichen. Und so schon mal relativ beeindruckend. Jetzt bewegen wir uns auch schon mal ein bisschen in die richtige Richtung. Jetzt könnten wir zum Beispiel sagen: Okay, finden wir cool so ein Chart, aber vielleicht wollen wir ein 100% Stacked Chart. Das Ganze ist übrigens auch, wie ihr seht, interaktiv. Wir könnten das Ganze jetzt sogar teilen und dann mit anderen Leuten und die könnten auch interaktiv dieses Chart, ja mit dem Chart rumspielen. Jetzt sagen wir aber, wir wollen ein ganz anderes, einen anderen Chart-Typ. Wir wollen 100% Stacked Bar. Und zwar prompten wir dafür: 'Give me a 100% stacked bar vertical', weil ein 100% Bar kann ja auch horizontal sein, wir wollen es jetzt aber vertikal. So, und jetzt hat es so zwei-, dreimal gedauert mit hin und her prompten, bis ich quasi dieses Chart hier hatte. So habe ich beispielsweise gesagt, dass die Quelle snipKI sein soll und hinzugefügt werden soll. Ich habe da am Anfang hier diese größte Antwortmöglichkeit 'Regelmäßiger nutzen' war ganz oben, während die kleinste ganz unten war. Da habe ich ihm noch gesagt, das hätte ich gerne andersherum. Und so könnt ihr quasi ein bisschen hin und her prompten, bis ihr beim Ergebnis seid, was ihr gerne hättet. So, jetzt schauen wir uns noch einen weiteren Use Case an, und zwar kann es ja sein, dass ihr irgendeinen Report findet oder irgendeinen LinkedIn-Post und wollt ein Chart quasi weiterverwenden und in eurem eigenen Branding darstellen. Und wir nutzen jetzt einfach mal hier ein Beispiel aus der FAZ. Was ihr dann machen würdet: Ihr würdet auch wieder in eurem Project sein und würdet prompten: 'Bitte erstelle dieses Chart in unserem Branding' und dann einfach das Chart reindroppen. Es hier reingedroppt haben, schicken wir einfach unseren Prompt ab und schauen jetzt mal, was Claude macht und wie gut der erste Shot sein wird. So, und auch hier sehen wir wieder: Der erste Wurf sieht nicht so toll aus. Also sagen wir Claude wieder: 'Make it better.' Und ich habe die Zusatzinfo noch hier reingebracht, dass ich gar kein Chart sehen kann. So, und jetzt sehen wir, dass das schon deutlich besser aussieht. Es sind auch wieder die Farben, die wir uns gewünscht haben in unserem Branding. Wir sehen hier oben, ist so ein bisschen dieses Wort 'Fachkenntnisse' noch abgeschnitten. Das würde ich aber jetzt noch mal versuchen, mit einem besseren Prompt hinzubekommen. Und zwar steht hier: 'Das Chart ist etwas zu weit links, ich kann den Text Fachkenntnisse nicht erkennen. Füge etwas Whitespace hinzu, damit man den ganzen Text sieht.' Das sollte auch auf Deutsch gut ankommen. Und jetzt sehen wir, dass das Ergebnis so ist, wie wir es uns gewünscht haben. Wir haben hier ein bisschen mehr Whitespace, wir können jeden Text lesen. Die Quelle ist jetzt noch ein bisschen weit zu weit unten, da könnten wir jetzt noch mal prompten, dass er die Quelle ein bisschen nach oben schieben soll. Aber ihr seht, dass ihr so sehr, sehr schnell ein Chart bekommt, was ihr dann weiterverarbeiten könnt. Noch ein kleiner Disclaimer: Wenn ihr irgendwelche Reports baut und viele verschiedene Charts quasi da drin habt, dann habt ihr mit der Methode ein kleines Problem, da ihr es nicht genau hinbekommt, dass jedes Chart exakt gleich aussieht. Also Claude hält sich sozusagen immer an die Brand Guidelines, aber jetzt noch nicht so im Detail oder in der Perfektion, wie ihr es bräuchtet, wenn ihr einen Report erstellt mit mehreren Charts, die wirklich alle perfekt gleich aussehen müssen. Ist aber immer gut, wenn ihr irgendwie mal ein Einzel-Chart braucht für irgendwelche Blogposts, Social Media, was auch immer, interne Kommunikation, oder schnell mal einem Kunden irgendwas schicken möchtet. Dafür ist es auf jeden Fall super. Und das war's auch schon. Was hast du im heutigen Snip gelernt? Du hast gelernt, wie du dir ein Claude Projects anlegen kannst, das dir auf Basis von Daten, die du ihm entweder als CSV-Datei oder als Kopie als Text reinpastest, wie wir das gemacht haben, oder aber als Screenshot von irgendwelchen anderen Reports, wie du aus diesen Daten Charts erstellst, die deiner Corporate Identity entsprechen. Und dafür haben wir zunächst deine Brand Guidelines erstellt auf Basis von bestehenden Charts, die eben schon in deiner Corporate Identity erstellt wurden, haben dann diese Brand Guidelines genommen, haben die als Knowledge Base in das Claude Projects eingefügt und haben dann noch eine Custom Description hinzugefügt, dass das Project jedes Mal weiß, genau weiß, was es zu tun hat, sodass du nicht jedes Mal neu prompten musst. Das Ganze brauchst du immer, wenn du auf Social Media irgendwelche Charts posten willst, wenn du mal schnell einem Kunden oder einer Kundin ein Chart schicken möchtest, für den internen Gebrauch, wie auch immer. Der kleine Disclaimer ist, dass wenn du sehr viele Charts beispielsweise in einem Report in genau dem gleichen Design brauchst, dafür ist dann die KI nicht richtig. Dann müsst ihr doch noch mal in Excel rein und jedes einzelne Chart erstellen und mühsam im Design eurer Corporate Identity, in eurem Branding erstellen. Viel Spaß beim Ausprobieren!

Vom Anschauen zum Anwenden

Was möchtest du aus diesem Snip in deinem Arbeitsalltag ausprobieren? Wähle eine konkrete Aufgabe und überlege, wie du das Ergebnis überprüfen kannst.