# Für Agenten und Sprachmodelle > Wie Maschinen diese Seite lesen. Adressen, Dateien, ein Skill zum Einbinden, Vorlagen für typische Aufträge und die Grenzen, die für jeden Agenten gelten. Quelle: https://brand.heyalbert.family/ki/ · Hey Albert Marke und Designsystem Diese Seite hat zwei Leserschaften. Menschen sehen Farbfelder, Zeichnungen und Beispiele. Agenten bekommen dieselben Inhalte als Markdown und JSON, mit denselben Werten. Beides entsteht aus derselben Quelle, beim selben Bau. ## Adressen | Adresse | Inhalt | | --- | --- | | https://brand.heyalbert.family/llms.txt | Verzeichnis aller Kapitel und Dateien für Sprachmodelle | | https://brand.heyalbert.family/llms-full.txt | Alle Kapitel auf Deutsch in einer Datei | | https://brand.heyalbert.family/en/llms-full.txt | Alle Kapitel auf Englisch in einer Datei | | https://brand.heyalbert.family/.md | Jedes Kapitel als Markdown, z. B. /farbe.md | | https://brand.heyalbert.family/tokens/tokens.json | Alle Tokens, aufgelöst, hell und dunkel, mit Bedeutung | | https://brand.heyalbert.family/tokens/tokens.dtcg.json | Tokens im Format der W3C Design Tokens Community Group | | https://brand.heyalbert.family/tokens/tokens.css | CSS-Variablen, hell und dunkel | | https://brand.heyalbert.family/tokens/tailwind.css | Tailwind-v4-Theme | | https://brand.heyalbert.family/tokens/Tokens.swift | SwiftUI-Tokens | | https://brand.heyalbert.family/regeln.json | Wortlisten, Register, Grenzen, Gestaltungsregeln | | https://brand.heyalbert.family/bauteile.json | Alle Bauteile mit Typen und Prompt | | https://brand.heyalbert.family/skill/SKILL.md | Agent-Skill zum Einbinden in Claude Code und andere Werkzeuge | Jede Seite gibt es auch als Markdown unter ihrer Adresse mit `.md`: `/farbe.md`, `/iphone.md`, `/en/stimme.md`. Die Startseite heißt `/index.md`. Wo ein Mensch ein Farbfeld sieht, steht im Markdown eine Tabelle mit Token, Wert hell, Wert dunkel und Bedeutung. ## llms.txt `/llms.txt` folgt dem Vorschlag von llmstxt.org: ein kurzes Verzeichnis in Markdown, mit einem Satz je Kapitel und den Adressen der Daten. Ein Agent liest es zuerst und lädt dann nur, was er braucht. `/llms-full.txt` und `/en/llms-full.txt` enthalten alle Kapitel einer Sprache in einer Datei. ## Die Daten | Datei | Wann laden | |---|---| | `regeln.json` | vor jedem Text und jeder Oberfläche: verbotene Wörter, Register mit Satzlängen, Format von Zeit und Datum, Gestaltungsregeln, Definition of Done | | `tokens/tokens.json` | vor jedem Code mit Farbe, Maß oder Schrift: jeder Token mit CSS-Variable, hell, dunkel und Bedeutung | | `bauteile.json` | vor jeder Oberfläche: alle Bauteile mit Quelle, Typen und Prompt | | Kapitel als `.md` | für die Aufgabe selbst, etwa `iphone.md` für einen Screen oder `social-media.md` für ein Motiv | Die Namen von Tokens, Bauteilen und Props sind deutsch, mit Absicht. Ein Agent übersetzt sie nicht. ## Der Skill `/skill/SKILL.md` ist ein Agent-Skill. Er sagt einem Agenten, welche Dateien er zuerst lädt und welche Regeln nie gebrochen werden. Er entsteht beim Bau aus `regeln.json`. So bindest du ihn in Claude Code ein: ```bash # für dieses Repository mkdir -p .claude/skills/hey-albert-brand curl -s https://brand.heyalbert.family/skill/SKILL.md -o .claude/skills/hey-albert-brand/SKILL.md # für alle eigenen Projekte mkdir -p ~/.claude/skills/hey-albert-brand curl -s https://brand.heyalbert.family/skill/SKILL.md -o ~/.claude/skills/hey-albert-brand/SKILL.md ``` Im Monorepo selbst gibt es dazu den Skill `hey-albert-design`. Er zeigt direkt auf `packages/design-system` und braucht keinen Download. Für Texte gibt es den Skill `texten`. ## Vorlagen für Aufträge Gute Aufträge nennen die Quelle, die Familie, die Grenze und die Prüfung. Die folgenden Vorlagen lassen sich kopieren und anpassen. ### Einen Screen bauen ```text Bau die Fläche „Heute“ für das iPhone in apps/web. Lies zuerst https://brand.heyalbert.family/iphone.md, /bauteile.json und /tokens/tokens.json. Nimm nur Bauteile aus packages/design-system; fehlt eines, leg es dort zuerst an. Daten: Seed Familie Sonntag, Mittwoch 3. September. Lena (9) hat 15:30 Schwimmen, Tobias fährt. Fertig heißt: leerer Zustand, Skelett, :focus-visible, hell und dunkel, Rückgängig, Zielflächen 44/56. Prüfe am Ende mit dem Agenten design-pruefer und pnpm qa. ``` ### Einen Text schreiben ```text Schreib den leeren Zustand für die Einkaufsliste. Register: Family Manager (R2), höchstens 12 Wörter je Satz. Regeln: /regeln.json. Drei Teile: was hierher gehört, warum es leer ist, ein Knopf mit einem Verb. Kein Ausrufezeichen, kein Emoji, „ihr“ zur Familie. Beispiel mit Familie Sonntag. Gib zwei Fassungen und sag, welches Register du gewählt hast. ``` ### Ein Social-Motiv entwerfen ```text Entwirf einen Instagram-Beitrag 4:5 zum Thema Fahrten. Lies /social-media.md und /bildsprache.md. Fläche Blau, weil es um eine Fahrt geht. Titel als Szene mit Uhrzeit und Name: „Freitag, 18:40. Oma Grete fährt.“ Screen: Main (iPhone). Keine Kindergesichter, kein Stockfoto, kein erzeugtes Bild. Wörter aus nie_in_der_vermarktung in /regeln.json sind tabu. ``` ### Prüfen ```text Prüfe apps/web/src/app/(albert)/(app)/heute gegen das Designsystem. Grundlage: /regeln.json (gestaltung, fertig) und /tokens/tokens.json. Finde Hex-Werte, Schatten, freie Radien, Deckkraft für inaktiv, :focus statt :focus-visible, Zielflächen unter 44, verbotene Wörter, fehlende leere Zustände. Ändere nichts. Gib je Fund Datei, Zeile, Regel und Vorschlag. ``` ## Was Agenten nie tun > **Nicht so** > > - echte Familiendaten in Code, Seeds, Screens, Prompts oder Beispiele schreiben > - einen Wert erfinden, der kein Token ist — fehlt eine Rolle, wird sie in der Quelle angelegt und begründet > - ein Bauteil nur in einer App bauen > - verbotene Wörter in Oberfläche oder Vermarktung schreiben, auch nicht „nur als Entwurf“ > - Bilder von Menschen oder Kindern erzeugen oder Stockfotos einsetzen > - ohne Freigabe veröffentlichen: kein `git push`, kein Deploy, kein Beitrag in einem Kanal > **So** > > - Quelle lesen, bevor gebaut wird > - Familie Sonntag und ihre Woche benutzen > - Unklares als offen benennen, statt es still zu entscheiden > - am Ende prüfen lassen: `design-pruefer`, `pnpm qa`, Bildvergleich ## Arbeiten mit Agenten und Albert im Produkt Zwei Dinge heißen ähnlich und sind getrennt. **Agenten beim Arbeiten** schreiben Code, Texte und Entwürfe für das Team. Für sie gilt diese Seite. **Albert im Produkt** liest nur Post, für die eine Regel der Familie greift. Jede Ableitung ist ein Vorschlag mit Vorschau, „Übernehmen“ und „Rückgängig“. Nichts wird still geändert oder versendet. An ein Modell geht erkannter Text, nie ein Bild, und kein Anbieter aus den USA liegt im Datenpfad. Gesundheits- und Kinderdaten bleiben auf dem Gerät. Die vollständigen Regeln stehen in `docs/34-ki-und-daten.md`. In der Gestaltung zeigt sich das so: Jeder Vorschlag von Albert hat einen gestrichelten grauen Rand. Ein Mensch sieht damit ohne Nachdenken, dass der Vorschlag nicht von einem Menschen kam. ### VorschlagKarte Quelle: `packages/design-system/components/karten/VorschlagKarte.jsx` Alberts Vorschlag auf dem iPhone – gelb, mit Formen, immer mit zwei Knöpfen. ```jsx ``` So klingt Albert: eine Beobachtung, eine Frage, zwei Knöpfe. Nie "Ich habe für dich…". Auf dem Mac nimmst du stattdessen `` - dort ist der Vorschlag gestrichelt und ohne Füllung. ```ts /** * Alberts Vorschlag am iPhone: gelbe Karte mit Formen, zwei Knoepfe, Unterzeile. */ export interface VorschlagKarteProps { /** Eine Beobachtung: "Samstag fehlt ein Fahrer." */ titel: string; /** Zwei kurze Saetze: was er sieht, was daraus folgt. */ text?: React.ReactNode; /** Erster Knopf, ein Verb: "Tobias fragen", "Übernehmen". */ schritt?: string; onSchritt?: () => void; /** Zweiter Knopf. Es gibt immer zwei - Albert erledigt nie still. */ zweitSchritt?: string; onZweitSchritt?: () => void; unterzeile?: string; style?: React.CSSProperties; } export function VorschlagKarte(props: VorschlagKarteProps): JSX.Element; ```