
Vorschaugalerie
Ähnliche Skills
Alle Skills ansehenDas bekommst du
- Eine eigenständige Website-Datei, die in jedem Browser öffnet und offline funktioniert, mit eingebauten Schriften und Bildern; eine Übertragung in dein eigenes Framework-Projekt, wenn du eines hast.
- Funktionierende Commerce-Abläufe: Produktseiten mit Packungsgrößen, ein Konfigurator für Abo-Kisten, eine Warenkorb-Schublade, eine Checkout-Vorschau mit Prüfung des Liefergebiets und eine Händlerkarte.
- Der charakteristische Hero, Bänder, Wellen und Fotocollage in einem 28-seitigen Beispiel mit 17 Bildern, dazu Seiten für Geschichte, Erzeuger, Journal, Lieferung, FAQ und Richtlinien.
Passt gut für
- Saft-, Kaffee-, Tee- und Snackmarken, die online verkaufen und einen hellen, fröhlichen Storefront wollen.
- Lokale Hersteller, die in festen Zonen liefern oder eine Abo-Box anbieten.
- Cafés und Bäckereien, die den Shop in eine Speisekarte und „So findest du uns“ in einen einzigen Besuchsblock verwandeln können.
Nicht geeignet für
- Echte Zahlungen oder Auftragsabwicklung; der Checkout prüft Angaben, belastet aber niemanden.
- Marken, die einen dunklen, minimalistischen oder seriösen Unternehmenslook statt Verläufen und Bändern brauchen.
- Die fiktiven Halcy-Produkte zu verkaufen oder ihr Flaschendesign als dein eigenes zu nutzen.
Über diesen Skill

Gradient Juice Markenwebsite baut eine fröhliche Marken- und Shop-Website für eine Getränke-, Food- oder Lifestyle-Marke: ein randloses Kampagnenfoto mit Farbverlauf, auf dem jemand aus deiner Flasche trinkt, cremefarbene Textbänder, die entlang geschwungener Pfade gleiten, wellige Übergänge zwischen den Abschnitten und leuchtende Foto-Kacheln. Das Beispiel ist Halcy, eine fiktive Kaltpress-Saftmanufaktur in Ventura, Kalifornien, mit 28 verknüpften Seiten – inklusive funktionierendem Shop, Kisten-Konfigurator und Checkout-Vorschau.

Das bekommst du
- Eine eigenständige Website-Datei, die in jedem Browser öffnet und offline funktioniert, mit eingebauten Schriften und Bildern. Hast du bereits ein Framework-Projekt, wird das Design stattdessen dorthin übertragen.
- Ein vollständiger Shop: sechs Produktseiten mit Packungsgrößen und Live-Preisen, Kollektionen, ein Konfigurator für die Wochenkiste, eine Warenkorb-Schublade, eine Checkout-Vorschau mit Prüfung des Liefergebiets und eine ehrliche Bestätigungsseite.
- Markenseiten: unsere Geschichte, Erzeuger mit Monatsumschalter, ein Journal mit vier Artikeln, eine Händlersuche mit Karte, Lieferung und Rückgabe, FAQ mit Suche, Kontakt, Newsletter, Richtlinien und eine gestaltete 404-Seite.
- Eine einheitliche Art Direction für jedes Bild: passende Produkt-Stillleben mit derselben Flasche im selben Licht, dazu helle Lifestyle-Szenen.
- Bänder mit langsam gleitendem Text, ein schneller Hero-Auftritt und ruhige Einblendungen – alles pausiert bei Einstellungen für reduzierte Bewegung.

So nutzt du es
- Nenne deine Marke, Produkte mit Preisen und Packungsgrößen, wo und wann du lieferst, deine Geschichte und Kontaktdaten. Fehlende Texte werden als plausible Platzhalter entworfen und zur Bestätigung aufgelistet.
- Lass den Agenten ein neues Hero-Foto mit deinem Namen auf der Flasche und ein Stillleben pro Produkt im selben Licht generieren oder schick deine eigenen Fotos. Zwei neutrale Getränkeszenen aus dem Paket können bleiben.
- Öffne jede Seite auf Desktop und Smartphone, leg Produkte in den Warenkorb, stell eine Kiste zusammen, teste die Checkout-Vorschau und wünsch dir Änderungen.

Gesetzt ist alles in Bricolage Grotesque, Figtree und DM Serif Display, eingebettet in die Datei. Neue Bilder stammen aus dem eigenen Bildtool deines Agenten, wofür Nutzungskosten anfallen können; der Checkout nimmt nie Zahlungen entgegen.
Was du vorab brauchst
- Du bringst mit
- Markenname, Produkte mit Preisen und Packungsgrößen sowie eine kurze Geschichte · Marktdetails: Währung, Lieferzonen oder Versand sowie Kontaktdaten · Deine eigenen Produkt- und Teamfotos oder die Freigabe, neue Bilder zu generieren
- Abhängigkeiten
- Node.js 18 oder neuer auf dem Rechner deines Agenten, um das mitgelieferte Skript auszuführen, das die einzelne Offline-Datei baut · Internetzugang während des Builds, damit die Schriften einmal heruntergeladen und eingebettet werden können · Ein Bildtool in deinem Agenten oder deine eigenen Fotos für Hero- und Produktbilder
- Externe Kosten
- Hero-Foto und Produkt-Stillleben werden mit dem eigenen Bildtool deines Agenten generiert, wofür Nutzungskosten anfallen können. Ohne Bildtool lieferst du eigene Fotos; zwei neutrale Getränkeszenen können bleiben. Das Ansehen des Beispiels kostet nichts, und der Checkout belastet nie.
- Zuletzt getestet
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Nutzerbewertungen
Bewertungen werden geladen …








