@trybe/stencil

Ein Inhalt,jedes Format.

Eine Vorlage ist bei uns keine Datei mit Code, sondern ein lesbares Drehbuch aus Daten — und dasselbe Drehbuch wird Post, Banner, Druck und Video.

se-pop.json26 Zeilen Daten

1{
2  "stencil_version": 1,
3  "key": "se.pop",
4  "layers": [
5    { "layer": "content", "children": [
6      { "$": "anchor", "vertical": "center", "inset": 64,
7        "style": [
8          { "prop": "font-family", "value": "var(--wulkan)" },
9          { "prop": "font-size", "value": { "$": "state", "path": "wSize" } },
10          { "prop": "color", "value": { "$": "state", "path": "fontColor" } }
11        ],
12        "children": [
13          { "$": "each", "as": "line", "index": "i",
14            "value": { "$": "call", "fn": "split", "args": {
15              "value": { "$": "state", "path": "slots.w" }, "separator": "/" } },
16            "children": [
17              { "$": "el", "tag": "br", "when": { "value": {
18                "$": "call", "fn": "gt", "args": {
19                  "a": { "$": "var", "name": "i" }, "b": 0 } } } },
20              { "$": "text", "value": { "$": "var", "name": "line" } }
21            ] }
22        ] }
23    ] },
24    { "layer": "chrome", "children": [{ "$": "partial", "name": "sig" }] }
25  ]
26}

Regler

slots.wKein Zucker./Kein Palmöl./Kein Geschwätz.
wSize96
fontColorvar(--brand-ink)

Kein Zucker.

Kein Palmöl.

Kein Geschwätz.

happyhug

Serif-Statement

Ausschnitt der Vorlage „Serif-Statement“ — die Zeilenumbrüche entstehen aus einem Trennzeichen im Text, nicht aus drei Feldern.

Jedes Format ein neues Dokument.

Der Post liegt im einen Programm, der Banner im anderen, das PDF baut jemand von Hand nach. Ändert sich der Preis, ändert er sich viermal — und dreimal richtig.

Post 4:5
Beikost-Set
24,90 €
Banner
Beikost-Set
24,90 €
Beileger A6
Beikost-Set
22,90 €
PDF
Beikost-Set
24,90 €

Preis in einem Dokument nicht mitgezogen.

Vier Dateien, ein Inhalt — und ein Preis, der nur dreimal stimmt.

01Vier Formate, vier Dateien, ein Inhalt.
02Die Vorlage kann nur ändern, wer das Programm hat.
03Was gerendert wurde, lässt sich nicht mehr nachrechnen.

01 / 03 · Vorlagen als Daten lesen

Vorlagen sind Daten.

Ein Stencil ist ein Baum aus Element-Knoten mit Bindings, Bedingungen und Schleifen — lesbar, versionierbar, prüfbar. Wer die Vorlage verstehen will, liest sie einfach.

–Element-Knoten mit Bindings statt Layout-Datei.
–Bedingungen und Schleifen im Drehbuch.
–Registrierte Bausteine statt beliebiger Code-Schnipsel.

se-pop.json

{ "$": "each", "as": "line",
  "value": { "$": "call", "fn": "split", "args": {
    "value": { "$": "state", "path": "slots.w" },
    "separator": "/" } },
  "children": [
    { "$": "el", "tag": "br", "when": { … } },
    { "$": "text", "value": { "$": "var", "name": "line" } }
  ] }

Schleife — eine Zeile je Fundstück
Bedingung — der Umbruch nur ab der zweiten Zeile
Bindung — der Text kommt aus dem Zustand

Erzeugt

Kein Zucker.Kein Palmöl.Kein Geschwätz.

Wer die Vorlage verstehen will, liest sie — kein Programm nötig.

02 / 03 · Einmal setzen, überall ausgeben

Ein Drehbuch, viele Ausgaben.

Dieselben Daten werden zu Ebenen gerendert — als Bild für Social, als Druckvorlage, als PDF und über Stencil Motion als Video. Kein Nachbauen, kein Export-Chaos.

–Bild, Druck und PDF aus derselben Quelle.
–Video über Stencil Motion, ohne zweite Vorlage.
–Änderung an einer Stelle wirkt in allen Formaten.

Ein Drehbuchse-pop.json

Kein Zucker.
Post4:5
Kein Zucker.
Banner1920 × 1080
Kein Zucker.
BeilegerA6
Kein Zucker.
VideoStencil Motion

Press

Dieselben Daten, gerendert zu Ebenen: chrome · content · sticker.

Ein Inhalt, vier Flächen — und kein Export dazwischen.

03 / 03 · Mit Vorlagen starten

61 Vorlagen liegen bereit.

Social, Banner, Druck und Präsentation sind abgedeckt, bevor du die erste eigene Vorlage schreibst. Jede davon ist genauso lesbar wie deine eigene.

–27 Social-Vorlagen, dazu Banner, Druck, Beileger und Decks — 61 insgesamt, in 16 Familien.
–Jede Vorlage ist Daten, also anpassbar.
–Nachschlagewerk öffentlich dokumentiert.

Bibliothek

16 Familien

Social (8 Familien)27
Rezept-Karten14
Banner5
Druck & Beileger5
Booklet4
Karussell3
Folien3
16 Familien61

Regler über alle Vorlagen1.471

Je Vorlage 9 bis 63, Median 20.

Jede davon ist Daten — also lesbar, kopierbar, änderbar.

Herkunft

Es kennt deine Tokens schon.

Farben, Schriften und Katalog kommen aus dem Brain, nicht aus der Vorlage. Deshalb sieht jedes gerenderte Format nach deiner Marke aus, auch wenn die Vorlage von jemand anderem stammt.

Liest aus dem Brain

Design-Tokens
Katalog
Medien

Gibt zurück

Gerenderte Formate als Daten-Ergebnis

Daten, die du lesen kannst.

Alle Formate der Suite entstehen so — vom Social-Post bis zum PDF, das der Server exportiert.

61
Vorlagen in 16 Familien: 4
Ausgaben aus einer Quelle: Bild, Druck, PDF, Video: 0
Layout-Dateien, die niemand lesen kann

–Jede Vorlage lässt sich im Klartext prüfen.
–Farben kommen aus Tokens, nicht aus der Vorlage.
–Dasselbe Drehbuch rendert Bild und Video.

Schluss mit Export-Chaos.

Trag dich ein und schreib deine Vorlagen einmal statt viermal.

Teil der trybe suiteNachschlagewerk lesen →