Custom instructions, Styles und Artifacts

# Custom instructions, Styles und Artifacts

Schluss damit, in jeden Chat dieselben Anweisungen zu kopieren: „sei knapp, kein Vorgeplänkel, britische Schreibweise“. Mit Claude legen Sie Ton und Format einmal fest und verwandeln die Unterhaltung selbst in einen lebendigen Workspace, in dem Claude baut, Sie editieren und das Ergebnis tatsächlich läuft. Diese Lektion verbindet beide Ideen: dauerhafte Personalisierung über custom instructions und Styles sowie die Build-Umgebung im Seitenpanel namens Artifacts.

Custom instructions vs. Styles: zwei verschiedene Regler

Das wird ständig verwechselt, deshalb hier die klare Trennung.

Custom instructions sind dauerhafte Regeln, die für einen Kontext gelten. Auf Account-Ebene (Settings) betreffen sie jeden Chat. Innerhalb eines Project gelten die Instructions des Projekts nur für diesen Workspace und kommen zusätzlich zu Ihren Account-Instructions dazu. Hier gehören dauerhafte Fakten und Constraints hin: „Ich bin Product Manager bei einem Fintech, verwende standardmäßig einfache Sprache, weise immer auf regulatorische Risiken hin, erfinde niemals Zahlen.“

Styles steuern, *wie Claude schreibt*, nicht *was Claude weiß*. Ein Style ist ein wiederverwendbares Profil für Stimme und Format, das Sie pro Konversation zuschalten. Claude bringt Presets wie Formal, Concise und Explanatory mit, und Sie kkThe average number of new users each existing user generates through referrals. Above 1.0, growth compounds on itself and becomes exponential.Vollständige Definition ansehen →önnen einen Custom Style erstellen, indem Sie Beispiele für den gewünschten Schreibstil vorgeben. Claude leitet daraus die Muster ab (Satzlänge, Struktur, Formatierungsgewohnheiten) und wendet sie an.

Die praktische Aufteilung:

• Was immer gilt, gehört in die custom instructions.
• Wie es gerade klingen soll, gehört in einen Style, den Sie umschalten kkThe average number of new users each existing user generates through referrals. Above 1.0, growth compounds on itself and becomes exponential.Vollständige Definition ansehen →önnen.

Ein Custom Style ist das bessere Werkzeug, wenn sich Ihre Stimme je Aufgabe ändert. Release Notes schreiben Sie in einem knappen „Engineering“-Style, Kunden-E-Mails in einem wärmeren „Support“-Style, alles unter denselben Account-Instructions. Siehe die offizielle Anleitung zum Erstellen und Verwenden von Styles.

Einen Style bauen, der sitzt

Der schnellste Weg zu einem guten Custom Style: Fügen Sie zwei oder drei Beispiele Ihres echten Schreibens ein und lassen Sie Claude die Regeln ableiten. Dann verfeinern Sie in Worten: „Straffer. Keine Bullet-Listen, außererThe ratio of interactions (likes, comments, shares) to reach for a given piece of content, used to gauge how well audiences respond relative to how many people saw it.Vollständige Definition ansehen → ich frage danach. Beginne mit der Antwort, nicht mit dem Kontext.“ Styles lassen sich nach der Erstellung bearbeiten, behandeln Sie die erste Version also als Entwurf.

Eine Warnung: Ein starker Style konkurriert mit starken Anweisungen im Chat. Wenn Sie eine formale juristische Zusammenfassung verlangen, während ein „Casual“-Style aktiv ist, entsteht Spannung. Passen Sie den Style zur Aufgabe oder schalten Sie ihn ab.

Artifacts: der Chat wird zum Workspace

Ein Artifact ist ein umfangreicher, in sich geschlossener Inhalt, den Claude in einem eigenen Seitenpanel rendert statt inline im Chat. Code, ein vollständiges Dokument, ein SVG-Diagramm, eine HTML-Seite: Wenn der Output etwas ist, das Sie behalten, bearbeiten oder wiederverwenden, legt Claude es ins Artifacts-Panel, wo es bestehen bleibt und über mehrere Turns hinweg aktualisiert wird.

Der für diese Lektion entscheidende Punkt: Artifacts kkThe average number of new users each existing user generates through referrals. Above 1.0, growth compounds on itself and becomes exponential.Vollständige Definition ansehen →önnen laufen. Ein HTML/CSS/JS-Artifact oder eine React-Komponente wird live gerendert. Sie lesen kein Code-Listing, Sie benutzen die Sache. Damit schrumpft der Build-Test-Loop in die Unterhaltung hinein.

Praxisbeispiel: ein One-Page-Webtool in zwei Turns

Bauen wir ein funktionierendes Utility als Artifact: einen UTM-Link-Builder, der eine Basis-URL und Kampagnenparameter nimmt und eine getaggte URL mit Copy-Button ausgibt. Genau die Art Single-File-Tool, die wirklich nützlich ist und für immer in Ihren Bookmarks lebt.

Turn 1: der Prompt

> Baue einen Single-Page-UTM-Link-Builder als HTML-Artifact. Eingaben: Basis-URL, source, medium, campaign, optional term und content. Während der Nutzer tippt, zeige die zusammengesetzte URL live mit korrektem Encoding. Füge einen „Copy“-Button hinzu. In sich geschlossen: CSS und JS inline, keine externen Libraries. Klares, modernes Aussehen.

Claude generiert eine komplette index.html im Artifacts-Panel und rendert sie sofort. Sie tippen in die Felder und sehen, wie sich die URL zusammensetzt. Der Kern des Ergebnisses sieht so aus:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>UTM Link Builder</title>
  <style>
    body { font: 16px/1.5 system-ui, sans-serif; max-width: 560px; margin: 2rem auto; padding: 0 1rem; }
    label { display: block; margin: .75rem 0 .25rem; font-weight: 600; }
    input { width: 100%; padding: .5rem; box-sizing: border-box; }
    #out { margin-top: 1rem; padding: .75rem; background: #f4f4f5; word-break: break-all; }
    button { margin-top: .5rem; padding: .5rem 1rem; cursor: pointer; }
  </style>
</head>
<body>
  <h1>UTM Link Builder</h1>
  <label>Base URL</label><input id="url" placeholder="https://example.com/page" />
  <label>Source</label><input id="source" placeholder="newsletter" />
  <label>Medium</label><input id="medium" placeholder="email" />
  <label>Campaign</label><input id="campaign" placeholder="spring_launch" />
  <div id="out">Your tagged URL appears here.</div>
  <button id="copy">Copy</button>
  <script>
    const fields = ["source", "medium", "campaign"];
    const out = document.getElementById("out");
    function build() {
      const base = document.getElementById("url").value.trim();
      if (!base) { out.textContent = "Enter a base URL."; return; }
      const params = new URLSearchParams();
      fields.forEach(f => {
        const v = document.getElementById(f).value.trim();
        if (v) params.set("utm_" + f, v);
      });
      const q = params.toString();
      out.textContent = q ? base + (base.includes("?") ? "&" : "?") + q : base;
    }
    document.querySelectorAll("input").forEach(i => i.addEventListener("input", build));
    document.getElementById("copy").addEventListener("click", () =>
      navigator.clipboard.writeText(out.textContent)
    );
  </script>
</body>
</html>

Beachten Sie den Einsatz von URLSearchParams, das die Werte gratis korrekt encodiert. Genau das Detail, das Sie von einem Senior Engineer erwarten würden, und Claude hat ohne Hinweis nach dem richtigen Primitive gegriffen.

Turn 2: in einfacher Sprache verfeinern

Sie probieren es aus und wollen zwei Änderungen. Sie beschreiben nicht das ganze Tool neu, sondern zeigen auf das, was nicht passt.

> Zwei Korrekturen: (1) optionale Felder „term“ und „content“ ergänzen. (2) Der Copy-Button soll sein Label für zwei Sekunden auf „Copied!“ wechseln, damit ich ein Feedback bekomme.

Claude bearbeitet das bestehende Artifact, statt es von Null neu zu generieren. Das Panel aktualisiert sich an der Stelle: zwei neue Inputs erscheinen, und der Copy-Handler macht jetzt einen zeitgesteuerten Label-Wechsel. Das Diff ist klein und chirurgisch, weil Artifacts ihren State über Turns hinweg behalten. Dieser iterative „point and refine“-Loop ist der ganze Grund, warum Artifacts zählen. Sie reden sich zum fertigen Tool.

Am Ende kkThe average number of new users each existing user generates through referrals. Above 1.0, growth compounds on itself and becomes exponential.Vollständige Definition ansehen →önnen Sie die Datei herauskopieren oder in den Claude-Apps das Artifact publizieren, um einen Live-Link zu teilen. Für App-artige React-Artifacts unterstützt Claude interaktive Komponenten, die andere Leute direkt nutzen kkThe average number of new users each existing user generates through referrals. Above 1.0, growth compounds on itself and becomes exponential.Vollständige Definition ansehen →önnen.

Wann Artifacts das falsche Werkzeug sind

Artifacts laufen in einem gesandboxten Browser-Kontext. Perfekt für in sich geschlossene Frontend-Tools, Rechner, Visualisierungen und Dokumente. Es ist *nicht* der Ort, um etwas zu bauen, das Secrets, eine Datenbank oder serverseitige Ausführung braucht.

In dem Moment, in dem Sie echten Dateisystemzugriff, Package-Installationen oder ein Multi-File-Repo brauchen, sind Sie aus Artifacts herausgewachsen und wollen Claude Code, Anthropics agentisches Command-Line-Tool, das in Ihrem echten Projekt arbeitet. Und wenn Claude Live-Daten in den Chat ziehen soll (Ihren Kalender, ein Google-Drive-Dokument, ein GitHub-Repo), ist das die Aufgabe von Connectors und MCP, dem Model Context Protocol, nicht von Artifacts. Halten Sie das mentale Modell sauber: Artifacts sind eine Output- und Editing-Oberfläche, kein Integrationslayer.

Alle drei in einem Project kombinieren

Der echte Workflow stapelt sie. Stellen Sie sich ein Project namens „Marketing Tools“ vor:

• Project custom instructions: „Zielgruppe sind nicht-technische Marketer. Tools müssen Single-File-HTML sein, keine externen CDNs, zugängliche Labels an jedem Input.“
• Style: ein „Docs“-Custom-Style für den Fall, dass Claude die Usage Notes schreiben soll, damit die Erklärungen konsistent bleiben.
• Artifacts: Jedes Tool, das Sie bauen (der UTM-Builder, ein Slug-Generator, ein UTM-to-readable-Parser), lebt als Artifact, zu dem Sie zurückkehren und das Sie verfeinern kkThe average number of new users each existing user generates through referrals. Above 1.0, growth compounds on itself and becomes exponential.Vollständige Definition ansehen →önnen.

Weil die Project-Instructions „Single-File, keine CDNs“ schon erzwingen, hören Sie auf, Constraints in jedem Prompt zu wiederholen. Die Instructions prägen jedes Artifact, das Claude in diesem Workspace produziert. Das ist der Ertrag daraus, dauerhafte Regeln, aufgabenbezogene Stimme und baubaren Output zu trennen: Jede Schicht macht eine Sache, und sie lassen sich kombinieren.

Eine Anmerkung zu Skills

Sie werden Skills im Zusammenhang mit diesen Features sehen. Ein Skill ist ein verpacktes Set an Instructions und Ressourcen (und optional Code), das Claude bei Bedarf lädt, um eine spezialisierte Aufgabe konsistent auszuführen, etwa eine bestimmte Dokumentvorlage zu füllen oder die Brand-Regeln Ihres Teams einzuhalten. Skills überlappen konzeptuell mit custom instructions, sind aber portabler und strukturierter: Sie bauen einen Skill einmal, und Claude ruft ihn chat-übergreifend auf, wenn die Aufgabe passt. Für wiederholbare, klar definierte Jobs ist ein Skill haltbarer als eingefügte Instructions. Für einmaliges Feintuning der Stimme ist ein Style leichtgewichtiger. Die Anthropic-Docs sind der Ort, um nachzuvollziehen, wie Skills, Styles und Instructions mit der Weiterentwicklung der Apps dargestellt werden, denn die Platzierung im UI verschiebt sich.

Das Meiste aus der Artifact-Iteration holen

Einige Gewohnheiten machen den Zwei-Turn-Loop zuverlässig schnell:

Zeigen, nicht wiederholen. In Verfeinerungs-Turns benennen Sie das konkrete Verhalten, das sich ändern soll. „Der Copy-Button braucht Feedback“ ist besser, als die Spec erneut einzufügen. Claude editiert an der Stelle und hält alles andere stabil.

Pro Turn ein logisches Änderungsset. „Felder ergänzen“ und „Copy-Feedback ergänzen“ zu bündeln hat funktioniert, weil beides klein und unabhängig war. Redesign plus neues Feature plus Bugfix in einer Nachricht zu stapeln macht die Änderung schwerer zu prüfen.

Prüfen durch Benutzen, nicht durch Lesen. Der Vorteil eines lebenden Artifacts ist, dass Sie das tatsächliche Verhalten testen kkThe average number of new users each existing user generates through referrals. Above 1.0, growth compounds on itself and becomes exponential.Vollständige Definition ansehen →önnen. Klicken Sie den Button. Fügen Sie eine URL mit bestehendem ?-Query-String ein und bestätigen Sie, dass mit & angehängt wird. Vertrauen Sie dem laufenden Tool mehr als dem Code-Listing.

Weiterziehen, wenn Sie herausgewachsen sind. Wenn ein Tool ein Backend oder ein echtes Repo braucht, bitten Sie Claude, die Logik zu exportieren, und ziehen Sie sie nach Claude Code oder in Ihr eigenes Projekt. Versuchen Sie nicht, Server-Features in die Sandbox zu pressen.

Wichtigste Erkenntnisse

• Custom instructions = was immer gilt; Styles = wie es gerade klingt. Dauerhafte Constraints gehören in Account- oder Project-Instructions, ein Style wird pro Aufgabe zugeschaltet. Nicht vermischen.
• Bauen Sie einen Custom Style aus eigenen Schreibbeispielen und verfeinern Sie ihn dann in Worten. Passen Sie den Style zur Aufgabe, denn ein starker Style kkThe average number of new users each existing user generates through referrals. Above 1.0, growth compounds on itself and becomes exponential.Vollständige Definition ansehen →ämpft gegen starke Anweisungen im Chat.
• Behandeln Sie Artifacts als lebenden Workspace, nicht als Code-Dump. Generieren Sie ein in sich geschlossenes HTML- oder React-Tool und verfeinern Sie es über mehrere Turns, indem Sie auf konkrete Verhaltensweisen zeigen. Claude editiert an der Stelle und behält den State.
• Kennen Sie die Grenze. Artifacts sind eine gesandboxte Frontend-Oberfläche. Sobald Sie Secrets, eine Datenbank oder ein echtes Repo brauchen, wechseln Sie zu Claude Code; für Live-Daten greifen Sie zu Connectors und MCP.
• Kombinieren Sie in einem Project. Project-Instructions setzen Ihre Build-Standards automatisch in jedem Artifact durch, sodass Sie aufhören, Constraints zu wiederholen, und anfangen, Tools auszuliefern.