🎉 Kurs abgeschlossen – du rockst das!
KI Artifact Kurs  /  Willkommen
KI Tool Artifact Kurs
Dein komplettes System für die neue Ära digitaler Produkte
Dein Kurs · Dein System

Willkommen im
KI Tool Artifact Kurs.

Hier lernst du wie du mit Claude Artifacts interaktive digitale Produkte erstellst – von der Idee bis zur Veröffentlichung. Kein Coding, kein Design-Vorwissen, kein monatelanges Bauen.

Auf dem Handy oder Tablet? Tippe auf die drei Linien oben links – dahinter versteckt sich das komplette Kursverzeichnis.
16Kapitel mit allem was du brauchst
9Prompts zum Kopieren & direkt nutzen
Mögliche Artifact-Ideen
Schritt 01

Versteh das System

Was Artifacts sind, warum sie gewinnen und wie Claude damit umgeht.

Schritt 02

Baue dein erstes Tool

Recherche, Idee, Prompts – in wenigen Klicks ein fertiges Artifact.

Schritt 03

Veröffentliche & verdiene

Hosting, Verkauf, IP-Schutz – alles was danach kommt.

Kein Coding Sofort umsetzbar Verkaufbar Für jedes Business
Kapitel 1

Warum Mini-Offers als
KI Tools gewinnen.

Der größte Nutzen der neuen Art digitaler Produkte: Du verkaufst ab sofort nicht mehr Wissen – sondern ein System.

Systeme bringen Menschen Abkürzungen vom Problem hin zur Lösung und geben einen klaren Umsetzungsmechanismus. Systeme verkaufen jetzt – nicht noch mehr Wissen und Information.

Der Kern-Shift

Mit KI können wir jetzt jede Idee aus dem Kopf in 10 Minuten in ein Produkt verwandeln. Alle statischen digitalen Produkte werden abgelöst.

Wenn du eine Community hast oder aufbauen willst
  • Community allein erzeugt keine Nachfrage – niemand tritt bei, weil sie existiert
  • Ein schwaches Angebot kann nicht durch Optimierung oder Ads gerettet werden
  • Nur „Komm in meine Community" reicht nicht – kalte Zielgruppen brauchen ein konkretes Versprechen
  • Ein einziges starkes Mini-Offer kann das ganze Business auf ein neues Level bringen
Wenn du Dienstleistungen anbietest
  • Kundenreise attraktiv gestalten und outstanding zu Mitbewerbern sein
  • Einen interaktiven Mehrwert bieten – nur PDFs oder statische Dateien sind out
  • Zusatzumsatz, völlig passiv und autark – einmal aufgestellt arbeiten KI Tools für dich
Wenn du 9-5 Angestellter bist
  • Nebenverdienst bis zur Vollzeitselbstständigkeit – so einfach wie noch nie zuvor mit KI Tools
  • An einem Wochenende Talent, Wissen oder Erfahrung in die Welt bringen – ohne monatelang zu bauen
  • Das Gigantischste: Zum Veröffentlichen brauchen wir keine Anbieterplattformen mehr. Volle Kontrolle, voller Umsatz.

Mit KI Tools brauchst du keine Planung außer diesen Kurs – der Rest ist Copy/Paste.

Kapitel 2

Claude vs.
Claude Code.

Zwei verschiedene Tools – ein wichtiger Unterschied den du kennen musst.

💬

Claude (claude.ai)

Chat-Modell zum Erarbeiten, Sortieren, Strukturieren, Zusammenfassen. Hier entstehen die Artifacts. Kann mit Google Drive verbunden werden.

→ Hier entstehen Artifacts
⚙️

Claude Code

Echtes Arbeitstool für Programmierung im Hintergrund. Baut KI-Agenten, Chatbots, Webseiten, Automationen. Wird mit lokalen Ordnern verbunden.

→ Keine Artifacts möglich

⚠️ Wichtig: Artifacts können NICHT in Claude Code erstellt werden – nur in Claude.ai. Claude Code benötigt die Desktop-App.

🎯
Für diesen Kurs

Wir arbeiten ausschließlich in Claude.ai – dort entstehen alle Artifacts. Claude Code ist ein separates, weiterführendes Tool.

Kapitel 3

Was ist ein
Claude Artifact?

Keine statische PDF – ein interaktives digitales Erlebnis das direkt im Browser läuft.

🖱️

Interaktiv

Menschen klicken, wählen, interagieren aktiv. Buttons, Tabs, Checkboxen, Toggles, Fortschrittsbalken, Quiz, Timer und mehr.

🧠

Psychologisch wirksam

Artifacts fühlen sich leichter und direkt anwendbar an – vs. schwere PDFs die einen mit Text zuballern.

🔗

Einfach teilen

Kein Claude-Account nötig für die Empfänger. Einfach Link teilen oder Datei veröffentlichen – mit oder ohne Bezahlung.

💻

Kein Coding nötig

Weder für dich noch für deine Kunden. Claude schreibt den gesamten Code – du gibst nur an was du willst.

Mögliche Einsatzbereiche
  • Leadmagnet – über Kommentar-Automation rausschicken
  • Mini-Kurs – mit YouTube-Links, Checklisten, Timer, Quiz, Akkordeon
  • Client-Tool – als Dienstleister, Handwerker, Beauty, Social Media
  • KI-Tool-Generatoren – Filter, Auswahl, Output generieren
  • Interaktives E-Book – alles wie beim Kurs nur ohne Video
  • Präsentationen & Webinar-Slides – statt Canva
  • Templates zum Weiterverkauf – einmal bauen, immer wieder anpassen
Kapitel 4

Artifact-Möglichkeiten
im Überblick.

Was du damit machen kannst – und wie du es rausbekommst.

Was du bauen kannst
  • Kostenloser Leadmagnet → über Kommentar-Automation rausschicken
  • Tools für Kunden → als Dienstleister, Handwerker, Beauty, Social Media
  • Eigene Organisation → Tageskalender, Kundenübersicht, Forecast etc.
  • Interaktive Kurse → mit YouTube-Links, Checklisten, Timer, Quiz, Akkordeon
  • KI-Tool-Generatoren → Filter, Auswahl, Output generieren – Möglichkeiten unendlich
  • Präsentationen & Webinar-Slides → statt Canva
  • Templates zum Weiterverkauf → für verschiedene oder spezifische Zielgruppen
Wo du es verkaufst oder teilst
  • Verkauf über GitHub, Stripe, Google Drive, eigene Domain, einbetten auf bestehender Website
  • Lead-Capture-Variante: Output erst nach Bezahlung sichtbar (Zusendung per E-Mail)
  • DM-Automation (ManyChat, GoHighLevel): Kommentar-Keyword → Artifact automatisch verschicken
🎬
Content-Tipp

Artifact im Video zeigen → Bewegung und Interaktivität sichtbar machen. Greenscreen-Tipp: Deine Expertise so spielerisch sichtbar machen.

Kapitel 5

Templates öffnen
& anpassen.

Du musst nicht bei Null anfangen – Templates beschleunigen alles.

So öffnest du ein Template
  • Template anklicken, „Download File" klicken
  • In Claude hochladen über das + „Datei oder Fotos hinzufügen"
So passt du es auf deine Brand an
  • Brandfarben anpassen → Screenshot der eigenen Webseite mitgeben oder Canva Bild
  • Stilrichtung vorgeben → Webseite-Link, Stockbild, Inspiration (kein Kopieren!)
  • Google Fonts auswählen → für Headlines, Text, Buttons mitgeben
  • Angeben welche Schrift für welchen Textstil gilt – oder Claude vorschlagen lassen
  • Immer sagen: Mobile-Ansicht muss funktionieren = „responsive"
🔤
Google Fonts im Artifact

Google Fonts funktionieren direkt im Artifact-Panel. Du kannst sie über CDN-Links einbinden – Claude macht das automatisch wenn du die Schriftnamen angibst.

💡 Screenshots nur wenn wirklich nötig → Text copy-pasten spart Token und ist für Claude effizienter.

Artifact veröffentlichen – 2 Wege
  • Weg 1: Link kopieren und teilen – direkt als claude.ai Link, Google Drive oder Einbettung auf eigener Website
  • Weg 2: HTML herunterladen → auf GitHub, Cloudflare, Netlify oder Vercel
  • Hosting-Vorteil: Link bleibt gleich, auch wenn du später Änderungen machst
Kapitel 6

Recherche &
Idee finden.

Nicht direkt mit dem Artifact starten – immer zuerst Recherche. So entstehen Ideen die wirklich gekauft werden.

🔍 Perplexity für Recherchen & Konzeptionierung, Claude zum Erbauen. Claude kann umsetzen – Perplexity ist faktenbasiert.

Der Recherche-Prozess in 3 Schritten

Schritt 1 – Master Prompt adaptieren: Claude Chat öffnen und den Perplexity Master Prompt auf dein Business adaptieren (Prompt unten).

Schritt 2 – Perplexity für Marktinfos: Etsy, EverBee, Gumroad Discover Filter, Google oder Shopify Blog zur Analyse – diese Plattformen zeigen wonach Menschen wirklich suchen und was gekauft wird.

Schritt 3 – In Claude Artifacts gehen: Alle Ausarbeitungen eingeben inkl. eigener Brand Details und gemeinsam Artifact-Style besprechen bevor gebaut wird.

Prompt 1 · Master Prompt Vorbereitung (in Claude)
Ich möchte gleich einen Perplexity-Recherche-Prompt erstellen um Artifact-Ideen für eine spezifische Zielgruppe zu bekommen. Bevor wir das tun, stelle mir bitte nacheinander einzeln folgende Fragen – warte jeweils auf meine Antwort bevor du die nächste stellst:

1. Für welche spezifische Zielgruppe baust du die Artifacts?
2. Was ist der konkrete Schmerz oder das Problem dieser Zielgruppe?
3. Was ist die konkrete Lebensrealität dieser Zielgruppe – also die Bedingungen unter denen sie kämpfen?
4. Was ist dein Ziel mit den Artifacts – willst du sie verkaufen, als Lead-Magnet nutzen, für Onboarding etc.?
5. Was soll das gewünschte Ergebnis für die Zielgruppe sein?
6. Was sind die typischen Alternativen oder Konkurrenten die dein Artifact disqualifizieren soll?
7. Wie viele Artifact-Ideen möchtest du – 20, 50 oder 100?

Sobald ich alle Fragen beantwortet habe, fülle bitte automatisch den folgenden Master-Template-Prompt mit meinen Antworten aus und gib mir das fertige Ergebnis zum Reinkopieren in Perplexity.
Prompt 2 · Perplexity Tiefenrecherche Template
Ich baue gerade [Anzahl] Claude Artifacts für [spezifische Zielgruppe], die dabei kämpfen [konkretes Problem/Schmerz], mit dem Ziel [Funnel-Ziel: z.B. Lead-Magnet, Onboarding, Conversion, Verkauf].

Geh für mich in eine absolute Tiefenrecherche: Welche spezifischen Teilprobleme, Frustrationspunkte und unbeantworteten Fragen hat [Zielgruppe] rund um [Thema/Problem] – speziell unter den Bedingungen [konkrete Lebensrealität: z.B. wenig Zeit, kein Budget, kein Vorwissen]?

Gib mir [20 / 50 / 100] konkrete Artifact-Ideen – Tools, Rechner, Checklisten, Frameworks, Generatoren, Wizards – bei denen [Zielgruppe] eine extreme Abkürzung bekommt um [gewünschtes Ergebnis], sodass sie direkt in die Umsetzung kommen, ohne erst [typisches Hindernis].

Wichtig: Jede Artifact-Idee soll so hyperspezifisch auf [Zielgruppe] zugeschnitten sein, dass sie [typische Konkurrenz/generische Alternativen] automatisch disqualifiziert – das Artifact soll sich anfühlen als wäre es nur für sie gebaut worden.
Fertige Beispiele
01Beispiel: Fitness / Alleinerziehende Mamas
Prompt 3 · Beispiel Fitness
Ich baue gerade 10 Claude Artifacts für alleinerziehende Mamas mit Vollzeitjob, die dabei kämpfen trotz extremem Zeitmangel und Erschöpfung fit zu werden und zu bleiben, mit dem Ziel ein bezahltes Fitness-Tool zu verkaufen das sie direkt in die Umsetzung bringt.

Geh für mich in eine absolute Tiefenrecherche: Welche spezifischen Teilprobleme, Frustrationspunkte und unbeantworteten Fragen hat diese Zielgruppe rund um Fitness, Abnehmen, Energie und Körpergefühl – speziell unter den Bedingungen wenig Zeit, wenig Schlaf, Kinder, Vollzeitjob, kaum mentale Kapazität nach Feierabend?

Gib mir 50 konkrete Artifact-Ideen – Tools, Rechner, Checklisten, Frameworks, Generatoren, Wizards – bei denen alleinerziehende Mamas eine extreme Abkürzung bekommen um endlich einen Fitness-Alltag hinzubekommen der zu ihrem echten Leben passt, sodass sie direkt in die Umsetzung kommen, ohne erst stundenlang Workoutpläne zu suchen, teure Personal Trainer zu buchen oder Programme zu kaufen die für kinderlose Menschen gemacht wurden.

Wichtig: Jede Artifact-Idee soll so hyperspezifisch auf alleinerziehende Mamas mit Vollzeitjob zugeschnitten sein, dass sie generische Fitness-Apps und One-Size-Fits-All Workoutpläne automatisch disqualifiziert – das Artifact soll sich anfühlen als wäre es nur für sie gebaut worden.
02Beispiel: Solopreneure / Funnel-Aufbau
Prompt 5 · Artifact-Style besprechen (in Claude)
Lass uns ein [Begriff] Artifact machen. Ich habe dir alle Informationen dazu hier rein gegeben, bitte halte dich daran aber verwende meine mitgeschickten [Brand Details]. Bevor du aber startest möchte ich mit dir besprechen welche Art von Artifact es sein soll und welche interaktiven Elemente drin sein sollen. Ich habe dir ebenfalls ein Dokument hochgeladen in dem einmal alle möglichen Artifact Styles stehen und einmal alle interaktiven Elemente und alle möglichen Design Anordnungen. Bitte fange noch nicht an, ein Artifact zu erarbeiten. Lese erst alles durch und schlage mir 3 unterschiedliche Ergebnisse vor mit welchem Artifact Style, welchen interaktiven Elementen und welcher möglichen Design Anordnung es sein könnte. Ich entscheide danach und wir erstellen das Artifact.
Prompt 6 · Finaler Build-Prompt
Erstelle mir dieses Artifact als einzelne HTML-Datei mit eingebettetem CSS und JavaScript. Keine externen Abhängigkeiten außer CDN-Links. Die Datei soll vollständig deployfähig sein und lokal ohne Server funktionieren. Alle interaktiven Elemente müssen im Browser und in der User Anwendung funktionieren. Bitte sag mir ob du alles verstanden hast, wenn ja kannst du beginnen das Artifact zu bauen.
Kapitel 7

Dein eigenes
KI-Tool bauen.

Hier siehst du wie ein fertiges interaktives Element aussehen kann – der Sprachnachrichten-Player als Beispiel.

🎯
Interaktive Elemente – Beispiel

Das folgende Beispiel zeigt einen WhatsApp-style Sprachnachrichten-Player – ein Artifact-Element das du in Kursen, als Client-Tool oder für Onboarding einsetzen kannst.

📱 Beispiel: Sprachnachrichten-Player Artifact
Kapitel 1 abgeschlossen ✓
Kursersteller
0:24   09:14
Nach Kapitel 1: Einführung
Tausche die src="" Felder mit deinen .m4a oder .mp3 Dateipfaden aus – fertig!
Mögliche interaktive Elemente in deinem Artifact
  • Videos – YouTube oder Vimeo direkt eingebettet
  • Checklisten – abhakbare To-Do Listen
  • Timer – für Workouts, Pausen oder Deadlines
  • Rechner – Preis, ROI, Kalorien etc.
  • Quiz – mit Auswertung und Ergebnis
  • Sprachnachrichten – wie im Beispiel oben
  • Merksätze, Flipcharts, Akkordeons – für strukturierte Inhalte

💡 Die vollständige Liste aller möglichen Design-Elemente und interaktiven Elemente findest du in den Bonus-Kapiteln am Ende – jeweils als Vorlage zum Kopieren.

Kapitel 8

Artifacts mit
Kunden nutzen.

Nicht nur für Community und Kurse – auch stark im 1:1-Bereich, als Dienstleister und überall dort wo du Schnittstellen zu Kunden hast.

🤝

Live in der Session

Gemeinsam mit Kunden live nutzen. Session-Transkript hochladen → daraus interaktiven Action-Plan erstellen.

📋

Als Homework

Als Aufgabe zwischen den Sessions. Kunden können Aufgaben abhaken, Fortschritte sehen, Links klicken.

Klarheit statt Chaos

Chaos nach intensiven Sessions wird zu Klarheit mit Struktur. Kunden geben konkretes Feedback.

🔄

Template einmal bauen

Immer wieder anpassen mit neuem Transkript. Auch für: Gewohnheits-Tracker, Morgenroutinen, Reflexion.

Template einmal bauen – immer wieder anpassen mit neuem Transkript. Das ist der Hebel im 1:1.

Kapitel 9

Artifact
veröffentlichen.

Claude baut Artifacts standardmäßig als React/JSX-Datei. Für die Veröffentlichung gibt es zwei Wege.

Weg 1 – Direkt als HTML (Empfohlen)

Von Anfang an den richtigen Prompt eingeben – dann liefert Claude direkt eine fertige .html Datei die du ohne weitere Schritte veröffentlichen kannst.

① Prompt eingeben → ② .html herunterladen → ③ Cloudflare hochladen
🔄

Weg 2 – React/JSX umbauen

Wenn dein Artifact bereits als React/JSX existiert: Claude baut es in eine deployfähige HTML-Datei um die React via CDN lädt – ohne Build-Prozess.

① JSX bauen → ② Umbauen-Prompt → ③ index.html hochladen

⚠️ Warum der Unterschied? React/JSX muss normalerweise erst kompiliert werden. Mit dem Umbauen-Prompt nutzt Claude Babel direkt im Browser – so entfällt der technische Build-Schritt komplett.

Deploy Guide – Beide Wege im Überblick
📄 Artifact Deploy Guide
Claude baut Artifacts standardmässig als React/JSX-Datei. Das Problem: JSX kann nicht einfach so im Browser geöffnet werden. Die beiden Wege unten lösen das.
Weg 1 Direkt als HTML bauen Empfohlen
Erstelle mir [Beschreibung] als einzelne HTML-Datei mit eingebettetem CSS und JavaScript. Keine externen Abhängigkeiten außer CDN-Links. Vollständig deployfähig.
① Prompt eingeben  →  ② .html herunterladen  →  ③ Cloudflare hochladen  →  ④ Fertig
Weg 2 React/JSX mit Zwischenschritt
Baue mir dieses React Artifact in eine einzelne index.html um, die React und Babel über CDN einbindet und ohne Build-Prozess direkt im Browser läuft. Alles in einer Datei, vollständig deployfähig.
① JSX bauen  →  ② Prompt eingeben  →  ③ index.html hochladen  →  ④ Fertig
CF
Cloudflare Pages
Kostenlos, schnell, weltweit verfügbar. pages.cloudflare.com → Projekt erstellen → HTML hochladen → Link teilen
Kapitel 10

Kostenlos oder
bezahlt.

Beides möglich: Freebie, Mini-Offer, Bonus, Kursbestandteil, eigenständiges Produkt.

🎯
Das Dosenöffner-Prinzip

Spezifität ist der wichtigste Marketing-Punkt. Ein spezifischer Leadmagnet zieht die richtigen Menschen an und filtert falsche automatisch heraus.

Leadmagnet-Strategie
  • Guter Leadmagnet = löst EIN konkretes Problem, gibt schnellen, klaren Gewinn
  • DM-Automation (ManyChat, GoHighLevel): Kommentar-Keyword → Artifact automatisch verschicken
  • Artifact wirkt hochwertiger als PDF – interaktiv, modern, direkt nutzbar
  • Wichtigster Punkt: User kommt DIREKT in die Umsetzung
Mini-Offer Strategie
  • Preis: 7–47 Euro, EIN klares Problem, EIN klares Ergebnis
  • Kalte Zielgruppe = noch spezifischer; warme Zielgruppe = weniger Erklärung nötig
  • Verkauf über Community-Plattform, Stripe-Link, Danke-Seite
Setup Verkauf – Schritt für Schritt
  • Salespage erstellen: Fertiges Artifact in neuen Chat → psychologische Salespage als One-Pager erstellen lassen
  • Stripe für Zahlung · Brevo für E-Mail
  • GitHub oder Cloudflare → Hosting, Domain und Sicherheit
  • Login-Bereich einrichten falls nötig (Clerk)
  • Verkauf über Danke-Seite nach Stripe-Zahlung
Prompt 7 · Verkauf & Veröffentlichung Setup
Ich möchte mein Artifact jetzt veröffentlichen und verkaufen. Ich habe das Artifact und eine Salespage. Ich habe mich entschieden für: Cloudflare (oder Netlify oder Vercel) als mein Hosting/Server; Stripe als mein Bezahlanbieter und Clerk als Login Anbieter. Bitte leite mich jetzt Schritt für Schritt durch den Prozess. Ich habe noch bei keinem Anbieter ein Konto.

⚠️ Rechtlich wichtig: Impressum, Datenschutz und AGB auf jeder Seite einbinden. Anklickbare Checkbox VOR dem Bezahlen ist gesetzlich Pflicht. Empfehlung: IT RechtsKanzlei · Impressumschutz: impressum-privatschutz.de

Kapitel 11

IP schützen im
Quelltext.

Wenn eigene Unterlagen oder Ausbildungsinhalte im Artifact als Grundlage dienen – sie dürfen nicht öffentlich sichtbar sein.

⚠️ Das sagt fast niemand: Der Quelltext ist für jeden einsehbar. Wer dein Artifact öffnet, kann mit Rechtsklick → Untersuchen → Sources deinen gesamten Inhalt lesen.

Die Lösung
  • Cloudflare Workers & Pages oder Netlify Functions
  • Die proprietären Inhalte werden ausgelagert – nicht im Quelltext sichtbar
  • Funktionalität und Optik bleiben unverändert
  • Wichtig: Mit Claude besprechen BEVOR das Artifact veröffentlicht wird
Prompt 8 · IP-Schutz Quelltext
Das Artifact ist jetzt final und bereit zur Veröffentlichung. Bevor ich es veröffentliche möchte ich sicherstellen dass meine proprietären Inhalte nicht im öffentlich einsehbaren Quelltext sichtbar sind. Bitte identifiziere zuerst welche Teile des Quelltexts mein IP sind – also meine Inhalte, Texte, Frameworks oder Daten – und liste sie mir kurz auf. Danach restrukturiere den Code so dass genau diese Teile über [Cloudflare Workers oder Netlify Functions] ausgelagert werden, ohne dass sich an der Funktionalität oder Optik etwas ändert. Zeig mir danach die konkreten Schritte um es live zu schalten.
Kapitel 12

So spreche ich
mit Claude.

Kleine Formulierungen mit großem Unterschied – so arbeitest du effizient und sparst Token.

Die wichtigsten Kommunikations-Tipps
  • „Bitte nur antworten, nichts an der Datei bearbeiten" – wenn du erst eine Antwort willst bevor Claude etwas ändert
  • Errors copy-pasten statt screenshoten → verbraucht viel weniger Token
  • Console-Error kopieren: rechte Maustaste → Untersuchen → im Feld „Console"
  • Fragen ob Artifact einen API-Key braucht oder ohne auskommt
  • Google Fonts mitgeben und sagen für Überschrift die, für Fließtext die – oder Claude fragen
  • Immer sagen: „bitte responsive für Handy und Tablet erstellen"
  • Sagen wenn Felder gespeichert bleiben müssen – weil der User in mehreren Etappen ausfüllt
  • Dokumente im Hintergrund mitgeben für besseren Output
  • Webseiten-Link oder Screenshot mitgeben für Stilrichtung
  • Screenshots nur wenn wirklich nötig → Text copy-pasten spart Token
  • Minus-Zeichen als Bindestrich statt den langen US-Style Bindestrich
Prompt 9 · Kommunikations-Tipp
Bitte nur antworten, nichts an der Datei bearbeiten.
💡
Token sparen

Jeder Screenshot verbraucht vielfach mehr Token als kopierter Text. Bei langen Projekten macht das einen spürbaren Unterschied in der Antwortqualität.

Kapitel 13

9-5er Starterkit
Papierkram.

Was du als Starter wissen und bedenken musst – als Gedankenstütze und roter Faden.

⚠️ Wichtiger Hinweis: Dies ist keine Rechts- oder Steuerberatung. Dieser Laufzettel dient ausschließlich als Gedanken-Import. Bitte besprich alle Punkte mit einem Steuerberater.

Konten & Zahlungsabwicklung
  • PayPal Geschäftskonto – 3-5 Tage Bearbeitungszeit einplanen
  • Geschäftskonto – Kontist, Qonto, Holvi genehmigen oft in 24-48h
Anmeldungen & Behörden
  • Gewerbe anmelden – kostet je nach Stadt 20-65 Euro, oft auch online
  • Steuerliche Erfassung beim Finanzamt – Bearbeitungszeit 2-4 Wochen
  • Kleinunternehmerregelung – unter 22.000 Euro Jahresumsatz möglich
Rechtliches
  • Impressumspflicht – sobald du online präsent bist oder verkaufst, sonst Abmahngefahr
  • Rechnungsvorlage – Pflichtangaben enthalten (Steuernummer, Rechnungsnummer, Leistungsdatum etc.)
  • GEMA / GVL – sobald du Musik in Videos oder Live-Calls nutzt
Versicherungen
  • Berufshaftpflicht – je nach Branche Pflicht oder dringend empfohlen
  • Krankenversicherung – als Selbstständiger nicht mehr über Arbeitgeber abgesichert
  • Berufsunfähigkeit – wird oft vergessen, aber gerade ohne Arbeitgeber-Absicherung wichtig
Tools & Ersteinrichtung
  • Buchhaltungstool – Lexoffice, Sevdesk oder FastBill von Anfang an nutzen
  • Domainregistrierung – 1-3 Tage bis vollständige Weiterleitung aktiv ist
  • E-Mail mit eigener Domain – Google Workspace oder Zoho ab ca. 5 Euro/Monat

Einen Steuerberater-Termin diese oder kommende Woche buchen, alles gesammelt besprechen, dann mit gutem Gewissen starten. ✓

Bonus · Kapitel 14

Design-Elemente
& UI-Komponenten.

Deine Vorlage für Claude – kopiere diese Liste und gib sie Claude mit, damit er weiß welche Design-Elemente möglich sind.

Diese komplette Liste als Vorlage für Claude kopieren – dann weiß Claude welche Design-Elemente du einsetzen kannst.

Navigation & Struktur
  • Sidebar – seitliche Navigationsleiste die dauerhaft sichtbar ist oder ein- und ausgeklappt werden kann
  • Topbar / Header – obere Leiste mit Logo, Titel oder Hauptnavigation
  • Bottombar / Footer – untere Leiste z.B. für Weiter-Buttons, Fortschritt oder Zusatzinfos
  • Breadcrumbs – Pfadanzeige die zeigt wo der User gerade ist
  • Tabs / Register – nebeneinanderliegende Reiter die zwischen Inhaltsbereichen wechseln
  • Hamburger Menü – das bekannte ☰ Symbol das bei Klick ein Navigationsmenü öffnet
Hinweise & Erklärungen
  • Tooltip – kleines Info-Fenster das erscheint wenn man mit der Maus über ein Element fährt
  • Bubble Hint / Gedankenblase – sprechblasenförmiger Hinweis der auf ein bestimmtes Element zeigt
  • Onboarding Overlay – beim ersten Öffnen erscheinen Erklärungen die dem User zeigen wo was ist
  • Coach Mark – ein Spotlight-Effekt der einen bestimmten Bereich hervorhebt und erklärt
  • Info-Banner – ein auffälliger Streifen oben oder unten z.B. für wichtige Hinweise oder Warnungen
  • Snackbar / Toast – kleine kurze Benachrichtigung die kurz erscheint und wieder verschwindet – z.B. "Gespeichert ✓"
Karten & Container
  • Card – rechteckiger Container mit Schatten der einen Inhaltsbaustein klar abgrenzt
  • Hero Card – große auffällige Karte ganz oben die das Wichtigste sofort zeigt
  • Flip Card – eine Karte die sich beim Klick oder Hover umdreht und auf der Rückseite mehr zeigt
  • Glassmorphism Card – Karte mit Milchglas-Effekt – trendy, modern, halbtransparent
  • Bento Grid – ein asymmetrisches Kachel-Layout wie man es von Apple-Präsentationen kennt
  • Divider / Trennlinie – visuelle Linie oder Abstand der Inhaltsbereiche voneinander trennt
Buttons & Aktionselemente
  • CTA Button – Call-to-Action – der Hauptbutton der die wichtigste Aktion auslöst, meist farblich hervorgehoben
  • Ghost Button – Button mit nur einem Rahmen ohne Füllung – wirkt dezenter
  • Floating Action Button / FAB – runder Button der fest in einer Ecke schwebt
  • Icon Button – Button der nur ein Symbol zeigt ohne Text
  • Button Group – mehrere Buttons nebeneinander die zusammengehören
Feedback & Status
  • Progress Bar – horizontaler Balken der den Fortschritt anzeigt
  • Stepper – zeigt Schritte als nummerierte Punkte an – z.B. ① ② ③ wobei der aktuelle hervorgehoben ist
  • Skeleton Loader – Platzhalter-Grauflächen die anzeigen dass Inhalt gerade lädt
  • Spinner / Loading Indicator – drehendes Symbol das zeigt dass etwas im Hintergrund passiert
  • Badge / Pill – kleines farbiges Label z.B. "Neu", "Pro" oder eine Zahl wie "3 offen"
  • Status Dot – kleiner farbiger Punkt der einen Zustand anzeigt – grün = aktiv, rot = Problem
  • Alert Box – farblich markierter Hinweisblock – grün für Erfolg, rot für Fehler, gelb für Warnung
Eingabe & Formulare
  • Input Field – einfaches Texteingabefeld
  • Textarea – größeres mehrzeiliges Eingabefeld für längere Texte
  • Datepicker – Kalender-Auswahl für Datum oder Zeitraum
  • Range Slider – Schieberegler für Werte zwischen einem Minimum und Maximum
  • Toggle Switch – An/Aus Schalter der wie ein iPhone-Toggle aussieht
  • Chip / Tag Input – erscheint als klickbares Label das auch wieder gelöscht werden kann
  • Autocomplete – Eingabefeld das während des Tippens passende Vorschläge anzeigt
Overlays & Fenster
  • Modal – Fenster das sich über den Inhalt legt und den Rest abdunkelt
  • Drawer / Side Panel – ein Panel das von der Seite reinschiebt – z.B. für Details oder Filter
  • Bottom Sheet – von unten reinschiebendes Panel – typisch auf Mobile
  • Lightbox – Bild oder Video öffnet sich groß über dem restlichen Inhalt
  • Popover – kleines schwebendes Fenster das an einem Element hängt – ähnlich Tooltip aber größer
Visuelle Gestaltung
  • Dark Mode / Light Mode Toggle – Umschalter zwischen hellem und dunklem Design
  • Gradient Background – Farbverlauf im Hintergrund – z.B. von Lila zu Blau
  • Frosted Glass Effekt – Milchglas-Optik bei der der Hintergrund leicht durchscheint
  • Parallax Effekt – Hintergrund scrollt langsamer als Vordergrund – gibt Tiefe
  • Micro-Animations – kleine subtile Bewegungen z.B. wenn ein Button gedrückt wird
  • Confetti Effekt – Papierschnipsel-Animation die erscheint wenn der User etwas abgeschlossen hat
  • Empty State Illustration – freundliche Grafik oder Text der erscheint wenn noch kein Inhalt da ist
Bonus · Kapitel 15

Interaktive Elemente
im Überblick.

Alle möglichen interaktiven Elemente die in einem Claude Artifact umsetzbar sind – als Vorlage für Claude.

Diese komplette Liste als Vorlage für Claude kopieren – damit Claude alle interaktiven Möglichkeiten kennt.

Eingabe & Interaktion
  • Checklisten – abhakbare To-Do Listen bei denen der User Punkte als erledigt markieren kann
  • Schieberegler – z.B. Budget, Kalorien oder Zeit per Ziehen eines Reglers einstellen
  • Dropdowns & Auswahlmenüs – aufklappbare Liste aus der der User eine Option auswählt
  • Eingabefelder – der User tippt Text, Zahlen oder Datum direkt ins Artifact ein
  • Toggle / An-Aus Schalter – wie ein Lichtschalter – Optionen ein- oder ausschalten
  • Radio Buttons & Checkboxen – eine oder mehrere Optionen aus einer Liste auswählen
  • Suchfelder & Filter – Inhalte im Artifact live durchsuchen oder einschränken
Rechner & Logik
  • Kalkulatoren – der User gibt Werte ein und bekommt automatisch ein Ergebnis – z.B. Preis, ROI, Kalorien
  • Quiz & Tests – Fragen mit Antwortmöglichkeiten, am Ende gibt es eine Auswertung oder ein Ergebnis
  • Scoring-Systeme – der User sammelt Punkte basierend auf seinen Antworten oder Aktionen
  • Fortschrittsbalken – zeigt visuell wie weit der User im Prozess oder Quiz schon ist
  • Entscheidungsbäume / Wenn-Dann-Logik – je nach Antwort des Users verzweigt das Artifact in unterschiedliche Pfade
  • Diagnose-Tools – der User beantwortet Fragen und bekommt eine persönliche Einschätzung oder Empfehlung
Struktur & Navigation
  • Akkordeons – Bereiche die auf Klick aufklappen und wieder zuklappen – spart Platz und hält es übersichtlich
  • Tabs & Reiter – verschiedene Inhaltsbereiche die per Klick auf einen Reiter gewechselt werden
  • Schritt-für-Schritt Wizards – der User geht durch mehrere Seiten mit Weiter/Zurück – wie ein geführter Prozess
  • Sticky Navigation – eine Menüleiste die beim Scrollen immer oben sichtbar bleibt
  • Modale / Popups – ein Fenster das sich über den Inhalt legt z.B. für Hinweise, Details oder Bestätigungen
Visualisierung & Darstellung
  • Timer & Countdowns – zählt Zeit runter oder hoch – z.B. für Workouts, Pausen oder Deadlines
  • Diagramme & Charts – Daten werden als Balken-, Kreis- oder Liniendiagramm visualisiert
  • Tabellen – sortierbare und filterbare Übersichten von Daten oder Vergleichen
  • Fortschrittsanzeigen – zeigt z.B. wie viele Schritte erledigt sind – visuell als Balken oder Zahl
  • Animationen & Übergänge – sanfte Bewegungen beim Laden, Wechseln oder Erscheinen von Inhalten
  • Farbwechsel je nach Ergebnis – z.B. grün bei gut, rot bei kritisch – gibt sofortiges visuelles Feedback
Content & Medien
  • Eingebettete Videos – YouTube oder Vimeo Videos direkt im Artifact abspielen
  • Audioplayer / Sprachnachrichten – Audiodateien oder Sprachmemos die der User direkt abspielen kann
  • Bilder mit Hover-Effekten – wenn der User mit der Maus drüberfährt passiert etwas
  • Karussells & Slideshows – mehrere Bilder oder Inhalte die der User per Klick durchblättern kann
  • Akkordeon-Galerien – Bildergalerien die sich aufklappen wenn man draufklickt
Output & Export
  • PDF Download – das Ergebnis oder den Inhalt als fertige PDF-Datei herunterladen
  • Copy-to-Clipboard Button – Inhalte mit einem Klick kopieren um sie woanders einzufügen
  • Ergebnis per E-Mail senden – die Auswertung oder Zusammenfassung direkt an eine E-Mail-Adresse schicken
  • Druckansicht – Inhalt wird für den Druck optimiert dargestellt
  • QR-Code Generator – aus einem Link oder Text wird automatisch ein scannbarer QR-Code erstellt
  • Zusammenfassung / Auswertung am Ende – nach einem Quiz oder Wizard bekommt der User sein persönliches Ergebnis
Gamification
  • Punktesysteme – der User sammelt Punkte für erledigte Aktionen oder richtige Antworten
  • Badges / Achievements – visuelle Auszeichnungen die der User freischaltet wenn er etwas erreicht hat
  • Levelanzeigen – zeigt auf welchem Level oder Stufe der User gerade ist
  • Streak-Tracker – zählt wie viele Tage oder Aktionen der User hintereinander gemacht hat
Speicherfunktion
  • Browser-Speicher / Session-Speicher – das Artifact merkt sich den Zwischenstand des Users sodass er beim nächsten Öffnen weitermacht wo er aufgehört hat – ohne Login oder App
🎓
Du hast den Kurs abgeschlossen!

Du kennst jetzt alle Bausteine – von der Idee bis zur Veröffentlichung. Öffne Claude und erstelle dein erstes Artifact. Dein Business wartet darauf, gesehen zu werden.