Das bekommst du
- Eine HTML-Datei mit eingebetteten Schriften und Bildern, ohne Netzwerkanfragen
- Shader-Hero, Kunden-Laufband, Studioband, versetztes Arbeitsraster und ein durchsuchbares Projektregister
- Eine Seite pro Fallstudie plus Journal, Datenschutz, AGB und eine Nicht-gefunden-Seite
- Leistungs-Tabs, Projektpläne mit Währungsumschalter, Angebote, Team, FAQ und ein Projekt-Briefformular
- Optionale Studio-, Fall- und Teamfotos und eine Fallkarten-Schleife, mit PopNow nach einem Credit-Angebot erzeugt
Gut für
- Design-, Branding-, Web-, Motion- und 3D-Studios
- Freelancer und kleine Beratungen mit echten Projekten zum Zeigen
- Architektur- und Innenarchitekturbüros, die ein ruhiges, hochwertiges Portfolio wollen
Nicht für
- Onlineshops oder dunkle, neonlastige Marken
- Seiten, die hinter der Überschrift ein Foto oder Video brauchen
- Websites ohne fertige Arbeiten zum Präsentieren
So nutzt du ihn
In Claude oder ChatGPT
Nutze den PopNow-Skill „Shader-Hero-Website für Agenturen“ (creative-agency-website) dafür: Baue die Website für Quarrow, ein Marken- und Web-Studio mit vier Leuten in Porto. Projekte: Relaunch eines Keramikshops, eine Fähr-Fahrplan-App und eine Bäckerei-Identität. Engagements: Sprint, Launch, Retainer.
In einem Coding-Agent
/popnow-creative-agency-website Baue die Website für Quarrow, ein Marken- und Web-Studio mit vier Leuten in Porto. Projekte: Relaunch eines Keramikshops, eine Fähr-Fahrplan-App und eine Bäckerei-Identität. Engagements: Sprint, Launch, Retainer.
Dann probier
Nenn mir die Preise für Fotos der drei Fallstudien und ein Team-Raster, bevor du etwas erzeugst.
Mach aus der Fähr-Fallkarte eine langsame Video-Schleife aus dem Hero-Foto und nenn mir vorher den Preis.
Das solltest du bereithalten
- Studioname, ein Satz zur Positionierung, Städte und Kontaktdaten
- Zwei bis sechs Projekte mit Briefing, deiner Leistung und einem messbaren Ergebnis
- Leistungen, wie Kunden dich beauftragen, und die Menschen, die führen
- Optional: ein PopNow-API-Schlüssel oder eigene Studio- und Projektfotos
Ähnliche Skills
Alle ansehen →3D-Avatar-Maker
+3Baue im Browser eine niedliche 3D-Figur im Plüschtier-Look und speichere sie als transparentes PNG oder 3D-Seite.
Kalender-Heatmap
+3Ein Jahr täglicher Aktivität als schattiertes Kalenderraster, mit Serien, Summen und Tastaturbedienung.
KI-SaaS-Landingpage
+3Warmes Sandpapier und feine Linien um ein lebendiges Kanban-Board, auf dem ein Assistent Aufgaben plant.
Animierte Hero-Section
+3Ein Landingpage-Hero mit sanft wechselndem Schlagwort, zwei Buttons und einem breiten Bildrahmen.
Dunkle SaaS-Landingpage
+3Eine dunkle, bewegungsreiche Marketingseite für ein Softwareprodukt, geliefert als eine eigenständige HTML-Datei.
Designer-Portfolio-Website
+3Sechs geneigte Karten um eine verblassende Überschrift auf ruhigem Grau, eine rote Porträtkarte, Fallstudien.
Entwickler-Portfolio-Website
+3Eine dunkle persönliche Website für Entwickler mit Fallstudien, Artikeln, Vorträgen, Lebenslauf und Kontaktformular.
Redaktionelle SaaS-Website
+3Marineblauer geteilter Hero, Serifen-Überschrift neben einem Dokumentarbild, schräge Bänder, ein Kobaltakzent.
Glassmorphism-Website-Vorlage
+3Mattglas-Pillen auf Fastschwarz, große Serifen-Überschrift mit einem kursiven Wort und E-Mail-Anmeldung.
Website für Hardware-Produkte
+3Riesige haarlinige Modellnamen auf Silber-Studioaufnahmen, Datenkarten und eine maßstabsgetreue Reihe.
Interaktives Architekturdiagramm
+3Ein offline nutzbares, klickbares Systemdiagramm aus einem geprüften JSON-Modell, mit den Belegen zu jedem Kasten.
Interaktiver Raster-Hero
+3Dunkles Raster feiner Fäden, das sich zum Cursor neigt und bei jedem Klick einen Ring ausrollt.
Knowledge-Graph-Explorer
+3Mach aus Projektnotizen einen durchsuchbaren Offline-Graphen, in dem jede Aussage auf ihre Quellzeile verweist.
KPI-Dashboard-Vorlage
+3Vier KPI-Kacheln mit Veränderungs-Chips über einem leuchtenden Liniendiagramm, Aufschlüsselung und Zielbalken.
Landingpage aus KI-Mockups
+3Drei Entwürfe ganzer Seiten ansehen, einen wählen, dann baut dein Agent ihn als sauberen Code.
Magazin-Website-Vorlage
+3Eine Magazin-Website in Printqualität mit Artikeln, Themen, kleinem Shop und Abos, als eine HTML-Datei.
Partikel-Animations-Hero
+3Text auf warmem Papier neben einer drehenden Kugel aus Tinten- und Türkispunkten, die sich je Idee formt.
Persönliche Marken-Website
+3Ein Porträt, das in warmes Papier übergeht, darüber eine feine Klammer, daneben kurze und fette Aussagen.
Kinoreife Produkt-Launch-Seite
+3Fastschwarze Filmseite: Serifen-Titelkarte über gleitendem Licht, Letterbox-Nachtszene, Reservierungsformular.
Admin-Dashboard-Vorlage
+3Eine funktionierende Backoffice-Konsole mit Diagrammen, Tabellen, Kanban und Kalender, als eine Offline-HTML-Datei.
SaaS-Landingpage-Vorlage
+3Eine ruhige, helle Marketingseite für ein Softwareprodukt mit funktionierender Produktkonsole, Preisen und Registrierung.
Portfolio-Website im Scrapbook-Stil
+3Ein mehrseitiger Online-Lebenslauf aus Papierobjekten, mit Fallstudien und druckbarem Lebenslauf.
Sneaker-Shop-Website-Vorlage
+3Ein kompletter Schuh- oder Modeshop mit Katalog, Produktseiten, Warenkorb und Demo-Checkout in einer HTML-Datei.
Landingpage für Workflow-Automatisierung
+3Graphit-Seite mit kleiner Überschrift und einem lebenden Knotengraphen, der läuft und Logs streamt.
Fragen
Bremst der Shader die Seite aus?
Er rendert mit reduzierter Auflösung und begrenztem Pixelverhältnis, pausiert, sobald der Hero den Bildschirm verlässt oder der Tab verborgen ist, und zeigt bei reduzierter Bewegung ein Standbild. Darunter liegt eine CSS-Version desselben Looks, sodass die Seite auch ohne WebGL fertig aussieht.
Was erzeugt PopNow hier?
Fotos für das Studioband, jede Fallstudie und das Team, alle in einer Bildsprache, dazu optional eine langsame Schleife, die das Standbild einer Fallkarte ersetzt. Der Hero selbst ist Code und braucht nichts. Jeder Lauf wird in Credits angeboten und startet erst nach deiner Zustimmung.
Kann ich es ohne PopNow-API-Schlüssel nutzen?
Ja. Die mitgelieferten Studiofotos bleiben als neutrale Platzhalter, Fallmedien werden zu CSS-Flächen in den Farben der jeweiligen Kunden, und Zitate nutzen Initialen-Avatare. Der Skill listet die Plätze auf, die noch echte Fotos brauchen.
Kann ich das Orange als Akzent ändern?
Ja, über wenige Tokens und die Farbvoreinstellungen des Shaders. Die Seite behält einen einzigen Akzent und meidet Lila- und Violetttöne, was der Validator prüft; ein DESIGN.md deines Projekts wird auf diese Tokens abgebildet.