Skip to content

Commit 985fb90

Browse files
committed
feat: add design toolkit to creative mode prompt
Expand the creative HTML generation prompt with a comprehensive CSS-only design toolkit: animated counters via @Property, keyframe animations, border-radius, box-shadow, clip-path, gradient backgrounds, hover transitions, SVG SMIL animations, and fluid typography. This gives the AI a palette of modern techniques to choose from without prescribing specific elements, resulting in more visually dynamic landing pages.
1 parent 42cbe08 commit 985fb90

File tree

1 file changed

+17
-0
lines changed

1 file changed

+17
-0
lines changed

Classes/Service/ContentGeneratorService.php

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -494,6 +494,23 @@ private function buildCreativePrompt(Template $template, array $briefingAnswers,
494494
8. Responsive: Relative Einheiten (rem, em, %, vw) und Media Queries.
495495
9. Das umgebende Theme-CSS kommt vom TYPO3-Template — erstelle NUR den Inhalt.
496496
497+
DESIGN-TOOLKIT (nutze diese Techniken kreativ — nicht alle auf einmal, aber
498+
waehle passend zum Inhalt fuer ein modernes, lebendiges Ergebnis):
499+
- @keyframes-Animationen: fade-in beim Laden, slide-in von links/rechts, sanfte
500+
Puls-Effekte fuer CTAs, dezente Float-Animationen fuer SVG-Dekorationen
501+
- Animierte Zahlen/Statistiken: @property mit syntax "<integer>" + @keyframes +
502+
counter() fuer hochzaehlende Kennzahlen (z.B. "500+ Projekte", "99% Zufriedenheit")
503+
- border-radius: Abgerundete Ecken fuer Karten, Bilder und Buttons (8px-24px)
504+
- box-shadow / backdrop-filter: Tiefe und Glasmorphismus-Effekte
505+
- clip-path: Wellenfoermige Sektionstrennungen, ausgefallene Bildmasken
506+
- Gradient-Hintergruende: Mehrstufige linear-gradient/radial-gradient als Sektionshinterlauf
507+
- :hover-Transitions: transform scale, box-shadow, Farbwechsel auf interaktive Elemente
508+
- SVG-Animationen: SMIL <animate>/<animateTransform> fuer dezente Icon-Bewegungen
509+
- CSS Custom Properties: --primary, --secondary etc. fuer konsistentes Farbschema
510+
- Dekorative Elemente: Geometrische SVG-Muster, Kreise, Linien als visuelle Akzente
511+
- Grid/Flexbox-Layouts: Asymmetrische Raster, Overlap-Effekte, gestaffelte Karten
512+
- Typografie: font-size clamp() fuer fluide Groessen, letter-spacing fuer Eleganz
513+
497514
TOKEN-BUDGET BEACHTEN:
498515
- Halte CSS kompakt: Shorthand-Properties, keine redundanten Regeln.
499516
- SVGs klein halten: Einfache, dekorative Grafiken, keine komplexen Pfade.

0 commit comments

Comments
 (0)