Landingpages · Shops · Dashboards · Portfolios
Frontend-Design-Skills für Claude Code und Codex
Komplette, gestaltete Seiten, die dein Agent mit deinem Produkt, deinen Worten und deinen Farben füllt, bereit für jedes statische Hosting.
Funktioniert inClaude CodeCodexCursorGemini CLIGitHub CopilotOpenCode
Tipp der WocheWeb
3D-Avatar-Maker
Baue im Browser eine niedliche 3D-Figur im Plüschtier-Look und speichere sie als transparentes PNG oder 3D-Seite.
Oder in einem Coding-Agent installieren
Manuell installieren
mkdir -p ~/.claude/skills && cd ~/.claude/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.agents/skills && cd ~/.agents/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip$popnow-3d-avatar-maker
mkdir -p ~/.cursor/skills && cd ~/.cursor/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.gemini/skills && cd ~/.gemini/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zippopnow-3d-avatar-maker
mkdir -p ~/.copilot/skills && cd ~/.copilot/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zip/popnow-3d-avatar-maker
mkdir -p ~/.config/opencode/skills && cd ~/.config/opencode/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
https://api.popnow.ai/api/v1/agent-skills/3d-avatar-maker/download -o popnow-3d-avatar-maker.zip
unzip -o popnow-3d-avatar-maker.zip && rm popnow-3d-avatar-maker.zippopnow-3d-avatar-maker
Benötigt einen PopNow-API-Schlüssel in POPNOW_API_KEY · API-Schlüssel holen
Was möchtest du erstellen?
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.
Shader-Hero-Website für Agenturen
+3Orange-Shader hinter großer Aussage, Pillen-Navigation und versetztem Raster mit Fallstudien.
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.
Ein echtes Designsystem
Abstände, Typo-Skala und Komponenten bringt der Skill mit, damit Seiten fertig aussehen statt generisch.
Dein Inhalt, keine Vorlage
Der Agent schreibt jeden Abschnitt für dein Produkt neu und entfernt alles, was nicht passt.
Bilder, wenn du sie brauchst
Erzeuge Hero-Shots und Produktfotos mit PopNow oder behalte die schlichten CSS- und SVG-Platzhalter.
So funktionieren Agent-Skills
Einmal verbinden oder installieren
Verbinde PopNow mit Claude oder ChatGPT oder installiere den Skill in deinem Coding-Agent.
In normalen Worten fragen
Ruf den Skill auf und beschreib die Aufgabe. Er folgt seinem eigenen Playbook, seinen Layoutregeln und Prüfungen.
Ausgaben selbst freigeben
Braucht ein Schritt KI-Bilder, Video oder Ton, nennt er den Preis in PopNow-Credits und wartet auf dein Okay.
Fragen
Was ist ein Agent-Skill?
Ein Agent-Skill ist ein Ordner mit einem SKILL.md-Leitfaden sowie Vorlagen, Skripten und Referenzen, dem ein KI-Agent folgt, wenn die Aufgabe passt. Claude Code, Codex, Cursor und andere Agents laden ihn automatisch, sodass das Ergebnis einem erprobten Designsystem folgt statt einem einmaligen Prompt.
Was ist der Unterschied zwischen Agent-Skills und MCP?
MCP verbindet einen Agent mit Tools und Daten, etwa mit den Bild- und Videomodellen von PopNow. Ein Skill ist ein Playbook, das dem Agent sagt, wie er eine ganze Aufgabe gut erledigt: Layoutregeln, Schritte und Prüfungen. Beides arbeitet zusammen: Verbindest du PopNow per MCP, findet dein Assistent diese Skills und nutzt sie, und die Skills rufen PopNow für Bilder und Ton auf.
Sind die Skills kostenlos?
Ja, jeder Skill ist mit einem PopNow-Konto kostenlos, ob in Claude oder ChatGPT über PopNow oder installiert in einem Coding-Agent. Nur die Bilder, Videos, Musik oder Stimmen, die ein Skill erzeugt, verbrauchen PopNow-Credits, und jede davon wird vor dem Start bepreist und freigegeben.
Kann ich diese Skills in Claude oder ChatGPT nutzen?
Ja. Verbinde PopNow einmal mit Claude, ChatGPT oder einer anderen App mit MCP-Unterstützung und sag, was du erstellen willst. Dein Assistent zeigt dir passende Stile, nutzt den, den du auswählst, und klärt den Preis mit dir, bevor er etwas generiert. Skills, die Dateien bauen, etwa Präsentationen, Websites und HTML-Videos, funktionieren am besten in einem Coding-Agent wie Claude Code.
Welche Agents werden unterstützt?
Jeder Agent, der SKILL.md-Ordner liest: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot und OpenCode. Der Skill ist überall gleich, nur der Installationsordner unterscheidet sich.
Was ist der Unterschied zu den Skills in PopNow?
Die Skills auf der Skills-Hauptseite laufen in PopNow mit Poppie. Agent-Skills laufen in deinem eigenen Coding-Agent auf deinem Computer. Das passt zu Dateien, die du weiter bearbeiten willst, etwa Präsentationen, Websites und HTML-basierten Videos.
Darf ich die Ergebnisse kommerziell nutzen?
Ja. Was du erstellst, gehört dir, auch bei Kundenaufträgen. Das Skill-Paket selbst ist nur für deine eigene Nutzung gedacht und darf nicht weiterverkauft oder weiterverbreitet werden.
Welches KI-Tool erstellt Produkt-Launch-Videos?
PopNow. Verbinde es mit Claude oder ChatGPT oder installiere einen Launch-Video-Skill in einem Coding-Agent und wähle einen von über 20 kostenlosen Launch-Video-Stilen. Der Agent rendert die MP4 aus deinem echten Produkt und fügt nach deiner Preisfreigabe Musik, Stimme und Soundeffekte von PopNow hinzu. Siehe: So erstellst du ein Produkt-Launch-Video mit KI.
Was ist der beste Weg, Videos, Bilder und Decks mit einem KI-Agent zu erstellen?
Gib dem Agent einen Skill für die Aufgabe und einen Ort für die Medien: PopNow-Agent-Skills sind für PopNow geschrieben, sodass Layouts, Prompts und Modellwahl den Look schon beim ersten Versuch treffen. Bilder, Clips, Musik und Stimme kommen aus einem PopNow-Konto, und jeder Lauf ist vorab bepreist.