Vom Kunden-Figma zur produktionsreifen Website.
Wie wir für Alzinger Maschinenbau ein bestehendes Designkonzept pixelgenau in WordPress umgesetzt haben — inklusive eigener Mobile-Shell und sechssprachigem Auftritt.
Ein gutes Designkonzept reicht nicht — es muss umgesetzt werden.
Alzinger Maschinenbau baut Industriemaschinen für die Holz- und Recyclingbranche — darunter den Scheibenseparator Lepton 5100. Geschäftsführer Reinhold Alzinger hatte bereits in einen externen Designer investiert und ein vollständiges Figma-Konzept in der Hand: 1920px-Frames, durchdachte Typografie, klare Bildsprache rund um die Maschine Primärholz.
Das Problem war nicht das Design. Das Problem war die Umsetzung.
Zwei vorherige Anläufe — einer mit Wix, einer mit Elementor — scheiterten am gleichen Punkt: Sobald das Figma-Layout in einen Pagebuilder gegossen wurde, verschoben sich Abstände, Typografie verlor ihre Präzision, und die mobile Darstellung wirkte wie ein Nebenprodukt.
Hinzu kam die Sprachenanforderung. Alzinger verkauft nach Österreich, in die Schweiz, nach Italien, Polen, Tschechien. Sechs Sprachen mussten redaktionell gepflegt werden — ohne dass jede Übersetzung das Layout zerschießt.
Pixel-perfekt heißt: keine Interpretation.
Wir haben für Alzinger keinen Pagebuilder eingesetzt. Pagebuilder sind ein Kompromiss zwischen Designtreue und Redaktionsfreundlichkeit — und Kompromisse waren hier nicht vorgesehen.
Stattdessen haben wir unser hauseigenes Plugin codlab-faithful verwendet. Es parst die Figma-JSON-Struktur direkt über die Figma API, extrahiert Tokens (Farben, Spacing, Typografie, Auto-Layout-Regeln) und generiert daraus deterministisches HTML und CSS. Wenn der Designer 32px Abstand vorgesehen hat, sind es im Browser 32px.
Für mobile Endgeräte haben wir bewusst nicht auf automatisches Responsive Stretching gesetzt. Stattdessen eine eigene Mobile Shell: fixierte Topbar in Alzinger-Rot mit weißem Wordmark, kombiniert mit einem seitlich einfahrenden Drawer-Menü. Das Verhalten orientiert sich an nativen Apps, nicht an einer geschrumpften Desktop-Navigation.
Den sechssprachigen Auftritt haben wir mit einer schlanken i18n-Schicht gelöst — ohne kommerzielle Plugins wie WPML. Übersetzungen liegen in strukturierten JSON-Files, die das Redaktionsteam über WP-CLI aktualisieren kann.
Sechs Entscheidungen, die das Ergebnis tragen.
- Pixel-perfekte Umsetzung des 1920px-Figma-Frames — kein Pagebuilder, kein visueller Drift
- Eigene Mobile-Shell mit fixer Topbar (#CA1414) und Slide-Drawer für native Touch-UX
- 8 Unterseiten, davon 3 Produktdetailseiten inklusive Lepton 5100
- Null kommerzielle Plugins — keine Lizenzkosten, keine Update-Risiken
- Hosting innerhalb der EU, DSGVO-konform, ohne Drittanbieter-CDN
- Redaktionelle Updates über WP-CLI-Kommandos — versionierbar, reproduzierbar
Acht Wochen später war die Seite live. Und blieb es auch.
„Wir hatten ein gutes Designkonzept, aber zwei Anbieter haben es nicht hinbekommen. CodLab hat das Figma genommen und es einfach gebaut — ohne Diskussionen über das, was angeblich nicht geht. Heute pflegt mein Team die Seite selbst."
Seit dem Launch gab es keinen einzigen Produktionsbug. Kein Hotfix, kein Rollback, keine nächtliche Eskalation. Das ist für uns der eigentliche Maßstab.
Womit wir es gebaut haben.
Ein Designkonzept, das endlich sauber gebaut wird?
Wenn Sie ein Designkonzept in der Schublade haben, das bisher niemand sauber umsetzen konnte — oder wenn Sie von Anfang an ein Ergebnis ohne Kompromisse wollen: Wir sprechen gerne darüber.
Termin buchen — kostenlos →