Skip to content
Hey AlbertBrand and design system
As MarkdownDeutschDE

Build

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.

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

AddressContent
/llms.txtIndex of all chapters and files for language models
/llms-full.txtAll chapters in German, one file
/en/llms-full.txtAll chapters in English, one file
/en/<kapitel>.mdEvery chapter as Markdown, e.g. /en/farbe.md
/tokens/tokens.jsonAll tokens, resolved, light and dark, with meaning
/tokens/tokens.dtcg.jsonTokens in W3C Design Tokens Community Group format
/tokens/tokens.cssCSS variables, light and dark
/tokens/tailwind.cssTailwind v4 theme
/tokens/Tokens.swiftSwiftUI tokens
/regeln.jsonWord lists, registers, limits, design rules
/bauteile.jsonAll components with types and prompt
/skill/SKILL.mdAgent skill for Claude Code and other tools

https://brand.heyalbert.family

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

FileLoad it
regeln.jsonbefore any copy or interface: banned words, registers with sentence lengths, time and date format, design rules, definition of done
tokens/tokens.jsonbefore any code with colour, size or type: every token with CSS variable, light, dark and meaning
bauteile.jsonbefore any interface: every component with source, types and prompt
chapters as .mdfor 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:

# 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

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

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

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

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

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

components/karten/VorschlagKarte.jsx
Samstag fehlt ein Fahrer.
Rückfahrt vom Auswärtsspiel, 14:00. Tobias hat ab 13:00 frei.
Vorschlag von Albert

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

<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.

Types (.d.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;