dejanandClaude Opus 5 89434d728e Notizzettel, keine Schatten, Szenen-Mockup
Drei Aenderungen am Generator, im selben Bereich der Datei verzahnt.

Notizzettel: die StickyNote aus dem Pitch-Projekt als HTML nachgebaut,
Variante purple, Farbwerte uebernommen und die Masse auf das 1080er Blatt
hochskaliert. Liegt auf der Workflow-Slide und ist wie jedes andere Element
verschiebbar.

Schatten: raus, ueberall. Kein box-shadow, kein drop-shadow. Tiefe entsteht
ueber Ueberlappung, Rahmenfarbe und Versatz. Der Umschalter faellt mit weg,
er haette nichts mehr zu schalten gehabt. Die Blaetter im Stapel-Rahmen
bekommen eine Haarlinie, sonst laege auf der hellen Variante Weiss auf Weiss.

Szenen-Mockup: Macbook Air und iPad Pro in Perspektive, aus einem Pixeden-PSD
freigestellt. Beide Displays sind ausgeknockt, die Screenshots liegen dahinter
und werden per matrix3d in die Flaechen projiziert. Die Eckpunkte sind
gemessen, nicht geschaetzt: beim Macbook aus dem transform_box des
Smart-Objekts, beim iPad ueber Ausgleichsgeraden auf den vier Glaskanten, weil
das Smart-Object dort zu hoch sitzt. Der Spalt zur weggefallenen Glasplatte
wird spaltenweise aus den Nachbarfarben interpoliert, damit am Displayrand
Schwarz und am Gehaeuse Metallic steht.

Das PSD selbst bleibt draussen: Pixeden erlaubt die Nutzung, nicht die
Weitergabe.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-05 21:36:55 +02:00
2026-08-05 21:35:49 +02:00

HiveGrid Social — Design-Library & Post-Generator

Eigenständige Werkbank für HiveGrid-Social-Grafiken. Slides werden im Browser als HTML gebaut, im Canvas bearbeitet und pixelgenau als Instagram-taugliche PNGs exportiert.

Das Repo ist bewusst autark. Keine CDN-Verweise, keine Google-Fonts zur Laufzeit, keine Pfade in andere Repos. Alles, was ein Post braucht — Schrift, Logos, Mockups, Screenshots, Bibliotheken — liegt hier.

Starten

./serve.sh          # http://127.0.0.1:4321

Downloads landen direkt in ~/Downloads, ohne Browser-Dialog.

Projekte

Projekt Datei Inhalt
Post 1 · Lösung post1.html Carousel, 5 Slides
Post 2 · Statement index.html Einzelbild

Oben im Bedienfeld wechselt man zwischen ihnen. Jedes Projekt speichert seinen Stand — Einstellungen, Layouts, Muster und alle Verschiebungen aus dem Canvas überleben einen Reload. „Projekt zurücksetzen" wirft ihn weg.

Bedienung

Taste Wirkung
← → Slide wechseln (im Bearbeiten-Modus: Element verschieben)
E Bearbeiten an/aus
W Streifen ⇄ Einzelansicht
V Variante hell/dunkel
L M I Layout · Muster · Intensität
C G T Durchgehend · Tag-Ausrückung · Perspektive
D A Slide laden · alle als ZIP

Im Bearbeiten-Modus lassen sich Elemente ziehen, mit den Pfeiltasten pixelweise schieben (⇧ = 10 px) und über A−/A+ in der Größe ändern.

Aufbau

assets/
├── brand/      Wortmarke hell/dunkel, G-Marke (SVG + PNG), Wabe, Geerkens
├── partner/    DATEV, KWP, Google Calendar, Google Drive, MS Outlook, MS Teams
├── mockups/    Geräte-Mockups (Displays ausgeknockt, Screenshot liegt dahinter)
├── screens/    Software-Screenshots
└── fonts/      Manrope 400–800, lokal
vendor/         html-to-image, JSZip
serve.py        Statischer Server + /save-Endpunkt
rules.md        Gestaltungsregeln, Farbwerte, Export-Wissen

Regeln

rules.md ist die Arbeitsgrundlage. Farbwerte, Geometrie, Typografie, Layout-Template, Instagram-Export und die Liste der Fallen, in die wir schon getappt sind. Vor jeder Änderung an der Gestaltung dort nachsehen.

Marken-Werte stammen aus der Website (HiveGrid-Website) und sind hier gespiegelt, nicht verlinkt. Ändert sich dort etwas, muss es hier nachgezogen werden.

S
Description
No description provided
Readme
84 MiB
0 Stars 9 Watchers 0 Forks
Languages
HTML 98.7%
Python 0.7%
JavaScript 0.4%
CSS 0.2%