# For agents and language models

> How machines read this site. Addresses, files, a skill to install, templates for typical briefs, and the limits that apply to every agent.

Source: https://brand.heyalbert.family/en/ki/ · Hey Albert brand and design system

This site has two audiences. People see colour swatches, drawings and examples. Agents get the same content as Markdown and JSON, with the same values. Both come from the same source in the same build.

## Addresses

| Address | Content |
| --- | --- |
| https://brand.heyalbert.family/llms.txt | Index of all chapters and files for language models |
| https://brand.heyalbert.family/llms-full.txt | All chapters in German, one file |
| https://brand.heyalbert.family/en/llms-full.txt | All chapters in English, one file |
| https://brand.heyalbert.family/en/<kapitel>.md | Every chapter as Markdown, e.g. /en/farbe.md |
| https://brand.heyalbert.family/tokens/tokens.json | All tokens, resolved, light and dark, with meaning |
| https://brand.heyalbert.family/tokens/tokens.dtcg.json | Tokens in W3C Design Tokens Community Group format |
| https://brand.heyalbert.family/tokens/tokens.css | CSS variables, light and dark |
| 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 | Word lists, registers, limits, design rules |
| https://brand.heyalbert.family/bauteile.json | All components with types and prompt |
| https://brand.heyalbert.family/skill/SKILL.md | Agent skill for Claude Code and other tools |

Every page also exists as Markdown at its address with `.md`: `/en/farbe.md`, `/en/iphone.md`, `/stimme.md` for the German version. The start page is `/en/index.md`. Where a person sees a swatch, the Markdown has a table with token, light value, dark value and meaning.

## llms.txt

`/llms.txt` follows the llmstxt.org proposal: a short Markdown index with one sentence per chapter and the addresses of the data. An agent reads it first and then loads only what it needs. `/llms-full.txt` and `/en/llms-full.txt` hold every chapter of one language in a single file.

## The data

| File | Load it |
|---|---|
| `regeln.json` | before any copy or interface: banned words, registers with sentence lengths, time and date format, design rules, definition of done |
| `tokens/tokens.json` | before any code with colour, size or type: every token with CSS variable, light, dark and meaning |
| `bauteile.json` | before any interface: every component with source, types and prompt |
| chapters as `.md` | for the task itself, for example `iphone.md` for a screen or `social-media.md` for a post |

Token, component and prop names are German, by design. An agent does not translate them.

## The skill

`/skill/SKILL.md` is an agent skill. It tells an agent which files to load first and which rules are never broken. It is generated at build time from `regeln.json`.

To add it to Claude Code:

```bash
# for this 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

# for all your own projects
mkdir -p ~/.claude/skills/hey-albert-brand
curl -s https://brand.heyalbert.family/skill/SKILL.md -o ~/.claude/skills/hey-albert-brand/SKILL.md
```

Inside the monorepo there is also the skill `hey-albert-design`. It points straight at `packages/design-system` and needs no download. For copy there is the skill `texten`.

## Templates for briefs

Good briefs name the source, the family, the limit and the check. Copy and adapt the templates below. The product copy itself stays German.

### Build a screen

```text
Build the „Heute“ (today) surface for iPhone in apps/web.
First read https://brand.heyalbert.family/en/iphone.md, /bauteile.json and /tokens/tokens.json.
Use only components from packages/design-system; if one is missing, add it there first.
Data: the Sonntag family seed, Wednesday 3 September. Lena (9) has swimming at 15:30, Tobias drives.
Done means: empty state, skeleton, :focus-visible, light and dark, undo, targets 44/56.
Finish with the design-pruefer agent and pnpm qa.
```

### Write copy

```text
Write the empty state for the shopping list, in German.
Register: Family Manager (R2), at most 12 words per sentence. Rules: /regeln.json.
Three parts: what belongs here, why it is empty, one button with one verb.
No exclamation mark, no emoji, „ihr“ to the family. Example with the Sonntag family.
Give two versions and say which register you chose.
```

### Draft a social post

```text
Draft a 4:5 Instagram post about drives.
Read /en/social-media.md and /en/bildsprache.md. Blue surface, because it is about a drive.
Title as a scene with time and name: „Freitag, 18:40. Oma Grete fährt.“
Screen: Main (iPhone). No children’s faces, no stock photo, no generated image.
Words from nie_in_der_vermarktung in /regeln.json are off limits.
```

### Review

```text
Review apps/web/src/app/(albert)/(app)/heute against the design system.
Basis: /regeln.json (gestaltung, fertig) and /tokens/tokens.json.
Find hex values, shadows, free radii, opacity for disabled, :focus instead of :focus-visible,
targets below 44, banned words, missing empty states.
Change nothing. For each finding give file, line, rule and a suggestion.
```

## What agents never do

> **Don't**
>
> - write real family data into code, seeds, screens, prompts or examples
> - invent a value that is not a token — if a role is missing, it is added to the source with a reason
> - build a component in one app only
> - write banned words into interface or marketing copy, not even „just as a draft“
> - generate images of people or children, or use stock photos
> - publish without approval: no `git push`, no deploy, no post on a channel

> **Do**
>
> - read the source before building
> - use the Sonntag family and their week
> - name what is unclear as open instead of deciding it quietly
> - have the work checked at the end: `design-pruefer`, `pnpm qa`, visual regression

## Agents at work and Albert in the product

Two things sound alike and are kept apart.

**Agents at work** write code, copy and drafts for the team. This site applies to them.

**Albert in the product** reads only mail that one of the family’s rules covers. Every inference is a suggestion with a preview, „Übernehmen“ (accept) and „Rückgängig“ (undo). Nothing is changed or sent quietly. A model receives recognised text, never an image, and no US provider sits in the data path. Health and children’s data stay on the device. The full rules are in `docs/34-ki-und-daten.md`.

In the design this shows as follows: every suggestion from Albert has a dashed grey outline. Anyone can tell at a glance that it did not come from a person.

### VorschlagKarte

Source: `packages/design-system/components/karten/VorschlagKarte.jsx`

Alberts Vorschlag auf dem iPhone – gelb, mit Formen, immer mit zwei Knöpfen.

```jsx
<VorschlagKarte titel="Samstag fehlt ein Fahrer."
  text="Rückfahrt vom Auswärtsspiel, 14:00. Bei Tobias steht ab 13:00 nichts."
  schritt="Tobias fragen" zweitSchritt="Später" />
```

So klingt Albert: eine Beobachtung, eine Frage, zwei Knöpfe. Nie "Ich habe für dich…". Auf dem Mac nimmst du stattdessen `<Karte art="vorschlag">` - 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;
```
