17.08.2026, 10:48
Layouts + CSS von einer KI erstellen lassen - bitte klare Anweisungen beim Prompting beachten
Hallo ihr Lieben,
HTML und CSS mit einer KI erstellen zu lassen wird immer beliebter und bringt auch wirklich sehr gute Ergebnisse.
Für alle, die bereits unsere T3 nutzen, gibt es ein paar Dinge zu beachten, um langfristig die Performance des Shops und auch die eigene Übersicht im CSS nicht zu zerstören.
Ganz wichtig ist die Anweisung, dass das CSS mobile first (mit min-width Angabe) passend zu unseren u.a. Breakpoints erstellt wird. Ich sehe oft, dass etwas zusammen gebaut und komplett in unseren XS mobile CSS Bereich kopiert wird. Eine "min-width" oder "max-width" Angabe gehört nicht mehr in unser CS, ausser in einigen technischen Ausnahmefällen.
Das CSS in der T3 ist in viele Bereiche unterteilt, damit nicht auf jeder Seite und mit jedem Endgerät, so wie früher, alles geladen wird. Das ist auch ein wesentlicher Teil unserer Geschwindigkeit.
Folgend unsere Breakpoints:
Informationen zu Breakpoints - wen es interessiert :-)
Bitte beachtet unsere Breakpoints im CSS und kopiert nur den entsprechenden Teil in den dafür vorgesehenen Bereich.
HTML und CSS mit einer KI erstellen zu lassen wird immer beliebter und bringt auch wirklich sehr gute Ergebnisse.
Für alle, die bereits unsere T3 nutzen, gibt es ein paar Dinge zu beachten, um langfristig die Performance des Shops und auch die eigene Übersicht im CSS nicht zu zerstören.
Ganz wichtig ist die Anweisung, dass das CSS mobile first (mit min-width Angabe) passend zu unseren u.a. Breakpoints erstellt wird. Ich sehe oft, dass etwas zusammen gebaut und komplett in unseren XS mobile CSS Bereich kopiert wird. Eine "min-width" oder "max-width" Angabe gehört nicht mehr in unser CS, ausser in einigen technischen Ausnahmefällen.
Das CSS in der T3 ist in viele Bereiche unterteilt, damit nicht auf jeder Seite und mit jedem Endgerät, so wie früher, alles geladen wird. Das ist auch ein wesentlicher Teil unserer Geschwindigkeit.
Folgend unsere Breakpoints:
| xs | mobile klein und hochkant | |
| sm | (min-width 576px) mobile größer und quer | |
| md | (min-width 768px) kleine Tablets | |
| lg | (min-width 992px) Tablets und kleine Desktops | |
| xl | (min-width 1200px) Tablets und Desktops je nach Auflösung | |
| xxl | (min-width 1400px) Tablets und Desktops je nach Auflösung | |
| xxxl | (min-width 1600px) Tablets und Desktops je nach Auflösung |
Informationen zu Breakpoints - wen es interessiert :-)
Bitte beachtet unsere Breakpoints im CSS und kopiert nur den entsprechenden Teil in den dafür vorgesehenen Bereich.