Claude · Custom instructions, Styles und Artifacts

Hören Sie auf, in jeden Chat dieselben Anweisungen zu kopieren: „sei knapp, kein Vorgeplänkel, britische Schreibweise". Bei Claude legen Sie Ton und Format einmal fest, und die Unterhaltung selbst wird zum lebendigen Arbeitsbereich: Claude baut, Sie bearbeiten, und das Ergebnis läuft tatsächlich. 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, also trennen wir es klar.

Custom instructions sind dauerhafte Regeln für einen Kontext. Auf Account-Ebene (Settings) gelten sie für jeden Chat. Innerhalb eines Projects gelten die Instructions des Projekts nur für diesen Workspace und legen sich zusätzlich über die Account-Ebene. Hier stehen dauerhafte Fakten und Einschränkungen: „Ich bin Product Manager bei einem Fintech, nutze 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 Unterhaltung aktivieren. Claude bringt Presets wie Formal, Concise und Explanatory mit, und Sie kkDie durchschnittliche Zahl neuer Nutzer, die jeder bestehende Nutzer über Empfehlungen generiert. Über 1,0 verstärkt sich das Wachstum selbst und wird exponentiell.Vollständige Definition ansehen →önnen einen Custom Style erstellen, indem Sie Beispiele für den gewünschten Schreibstil vorgeben. Claude leitet die Muster ab (Satzlänge, Struktur, Formatierungsgewohnheiten) und wendet sie an.

Die praktische Aufteilung:

• Was immer gilt, kommt in die custom instructions.
• Wie es jetzt klingen soll, kommt in einen Style, den Sie umschalten können.

Ein Custom Style ist das bessere Werkzeug, wenn Ihre Stimme je nach Aufgabe wechselt. Release Notes schreiben Sie vielleicht in einem knappen „Engineering"-Style und 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: zwei oder drei Beispiele Ihrer echten Texte einfügen und Claude die Regeln daraus ableiten lassen. Dann in Worten nachschärfen: „Knapper. Keine Bullet-Listen, außererDas Verhältnis von Interaktionen (Likes, Kommentare, Shares) zur Reichweite eines Inhalts. Zeigt, wie stark die Zielgruppe reagiert, gemessen an der Zahl der Personen, die den Inhalt gesehen haben.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 anfordern, während ein „Casual"-Style aktiv ist, entsteht Spannung. Passen Sie den Style zur Aufgabe an oder schalten Sie ihn ab.

Artifacts: der Chat wird zum Arbeitsbereich

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

Der entscheidende Punkt für diese Lektion: Artifacts kö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 einseitiges Web-Tool in zwei Turns

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

Turn 1: der Prompt

Baue einen einseitigen UTM-Link-Builder als HTML-Artifact. Inputs: Basis-URL, Source, Medium, Campaign, optional Term und Content. Während der Nutzer tippt, zeige die zusammengesetzte URL live mit korrekter Kodierung. Füge einen „Copy"-Button hinzu. In sich geschlossen: CSS und JS inline, keine externen Libraries. Klares, modernes Aussehen.

Claude erzeugt eine vollständige 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: es wurde URLSearchParams verwendet, was Werte gratis korrekt kodiert. Das ist die Art Detail, die man von einem erfahrenen Entwickler erwartet, und Claude hat ohne Aufforderung zum richtigen Primitive gegriffen.

Turn 2: in einfacher Sprache nachschärfen

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 kurz auf „Copied!" ändern, damit ich ein Feedback bekomme.

Claude bearbeitet das bestehende Artifact, anstatt es von null neu zu erzeugen. Das Panel aktualisiert sich an derselben Stelle: zwei neue Inputs erscheinen, und der Copy-Handler tauscht das Label nun zeitgesteuert. Der Diff ist klein und chirurgisch, weil Artifacts ihren State über Turns hinweg behalten. Dieser iterative „zeigen und nachschärfen"-Loop ist der ganze Grund, warum Artifacts wichtig sind. Sie reden sich zum fertigen Tool.

Wenn es fertig ist, können Sie die Datei herauskopieren oder in den Claude-Apps das Artifact publizieren, um einen Live-Link zu teilen. Für React-Artifacts im App-Stil unterstützt Claude interaktive Komponenten, die andere Leute direkt nutzen können.

Wann Artifacts das falsche Werkzeug sind

Artifacts laufen in einem gesandboxten Browser-Kontext. Das ist 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.

Sobald Sie echten Zugriff aufs Dateisystem, Package-Installationen oder ein Repo mit mehreren Dateien brauchen, sind Sie über Artifacts hinausgewachsen und wollen Claude Code, Anthropics agentisches Kommandozeilen-Tool, das in Ihrem echten Projekt arbeitet. Und wenn Claude Live-Daten in den Chat holen soll (Ihren Kalender, ein Google-Drive-Dokument, ein GitHub-Repo), ist das die Aufgabe von Connectors und MCPMCPEin offener Standard, mit dem KI-Assistenten einheitlich und kontrolliert an die Werkzeuge und Daten des Unternehmens angebunden werden, statt jede Integration einzeln zu bauen.Vollständige Definition ansehen →, dem Model Context Protocol, nicht von Artifacts. Halten Sie das mentale Modell klar: Artifacts sind eine Output- und Bearbeitungsfläche, keine Integrationsschicht.

Alle drei in einem Project kombinieren

Der echte Workflow stapelt diese Elemente. Stellen Sie sich ein Project namens „Marketing Tools" vor:

• Custom instructions des Projects: „Zielgruppe sind nicht-technische Marketer. Tools müssen Single-File-HTML sein, keine externen CDNs, zugängliche Labels an jedem Input."
• Style: ein Custom Style „Docs" für den Fall, dass Claude die Nutzungshinweise schreiben soll, damit die Erklärungen konsistent bleiben.
• Artifacts: jedes Tool, das Sie bauen (der UTM-Builder, ein Slug-Generator, ein Parser von UTM zu lesbarem Text) existiert als Artifact, zu dem Sie zurückkehren und das Sie nachschärfen können.

Weil die Project Instructions „Single-File, keine CDNs" schon erzwingen, wiederholen Sie die Einschränkungen nicht mehr in jedem Prompt. Die Instructions prägen jedes Artifact, das Claude in diesem Workspace erzeugt. Das ist der Gewinn der Trennung von dauerhaften Regeln, aufgabenbezogener Stimme und baubarem Output: jede Schicht macht eine Aufgabe, und sie lassen sich kombinieren.

Eine Anmerkung zu Skills

Sie werden Skills im Zusammenhang mit diesen Funktionen erwähnt sehen. Ein Skill ist ein gebündeltes Set aus Instructions und Ressourcen (optional auch Code), das Claude lädt, wenn es relevant ist, damit eine spezialisierte Aufgabe konsistent erledigt wird, etwa das Füllen einer bestimmten Dokumentvorlage oder das Einhalten der Brand-Regeln Ihres Teams. Skills überlappen konzeptionell mit custom instructions, sind aber portabler und strukturierter: Sie bauen einen Skill einmal, und Claude ruft ihn über Chats hinweg auf, wenn die Aufgabe passt. Für wiederholbare, klar definierte Jobs ist ein Skill haltbarer als eingefügte Anweisungen. Für einmaliges Feinjustieren der Stimme ist ein Style leichtgewichtiger. Die Anthropic Docs sind der Ort, an dem Sie verfolgen können, wie Skills, Styles und Instructions mit der Weiterentwicklung der Apps dargestellt werden, denn die Platzierung in der UI verschiebt sich.

Das Beste aus der Artifact-Iteration holen

Ein paar Angewohnheiten machen den Zwei-Turn-Loop verlässlich schnell:

Zeigen, nicht wiederholen. Benennen Sie in den Nachschärfungs-Turns das konkrete Verhalten, das sich ändern soll. „Der Copy-Button braucht Feedback" schlägt das erneute Einfügen der Spezifikation. Claude bearbeitet an der Stelle und hält alles andere stabil.

Fragen Sie pro Turn nach einem logischen Änderungspaket. „Felder ergänzen" und „Copy-Feedback ergänzen" zu bündeln, funktionierte, weil beides klein und unabhängig war. Ein Redesign plus ein neues Feature plus ein Bugfix in einer Nachricht macht die Änderung schwerer überprüfbar.

Prüfen durch Benutzen, nicht durch Lesen. Der Vorteil eines laufenden Artifacts ist, dass Sie das tatsächliche Verhalten testen können. Klicken Sie den Button. Fügen Sie eine URL mit bereits vorhandenem ?-Querystring ein und prüfen Sie, dass mit & angehängt wird. Vertrauen Sie dem laufenden Tool mehr als dem Code-Listing.

Hochstufen, wenn Sie darüber hinauswachsen. Wenn ein Tool ein Backend oder ein echtes Repo braucht, lassen Sie Claude die Logik exportieren und verschieben Sie sie in Claude Code oder Ihr eigenes Projekt. Versuchen Sie nicht, Server-Features in die Sandbox zu pressen.

Key Takeaways

• Custom instructions = was immer gilt; Styles = wie es jetzt klingt. Dauerhafte Einschränkungen gehören in die Account- oder Project-Instructions, den Style schalten Sie pro Aufgabe um. Vermischen Sie beides nicht.
• Bauen Sie einen Custom Style aus Ihren eigenen Textbeispielen und schärfen Sie ihn in Worten nach. Passen Sie den Style zur Aufgabe an, denn ein starker Style kämpft mit starken Anweisungen im Chat.
• Behandeln Sie Artifacts als lebendigen Arbeitsbereich, nicht als Code-Ablage. Erzeugen Sie ein in sich geschlossenes HTML- oder React-Tool und schärfen Sie es über mehrere Turns nach, indem Sie auf konkretes Verhalten zeigen. Claude bearbeitet an der Stelle und behält den State.
• Kennen Sie die Grenze. Artifacts sind eine gesandboxte Frontend-Flä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 im Project. Project Instructions erzwingen Ihre Build-Standards automatisch in jedem Artifact, sodass Sie Einschränkungen nicht mehr wiederholen, sondern Tools ausliefern.