Funktionierendes HTML, keine Mockups
Datei öffnen, durchklicken, deployen. Kein Designtool dazwischen.
Landing Pages & Produktseiten · Portfolios & persönliche Websites · Onlineshops & Admin-Panels
Webdesign-Skills für KI-Agenten
Frontend-Design-Templates, die dein Agent in funktionierendes HTML verwandelt: ganze Landing Pages, Portfolios und Dashboards oder ein einzelner Hero-, Preis- oder Testimonial-Abschnitt.
Funktioniert in
Wähle zum Start einen Webseite-Skill
Was Webdesign-Skills leisten
Jeder Skill hier endet mit einer Datei, die du im Browser öffnen kannst.
Ganze Websites oder einzelne Abschnitte
Mehrseitige Websites oder ein einzelner Hero-, Testimonial- oder Diagrammabschnitt für eine Seite, die du schon hast.
Standardmäßig responsiv
Layouts werden in Desktop- und Mobilbreite getestet, bevor sie ausgeliefert werden.
Webseite-Skills für deine Rolle finden
Jede Rollenseite wählt die Skills aus, die am besten zu diesem Job passen.
Gründer:inProduktseiten, Pitch-Decks und Launch-Videos noch vor der ersten Einstellung.
Designer:inEin Designsystem, das dein Agent wiederholt – so kümmerst du dich um die Details.
MarketerKampagnenseiten, Launch-Videos und Social-Media-Bilder aus einem Briefing.
E-Commerce-Händler:inShopseiten, Poster und Promo-Videos für jedes neue Produkt.So baust du eine Webseite mit einem Skill
Drei Schritte in Claude Code, Codex oder Cursor. Keine Design-App nötig.
- 1
Installations-Prompt einfügen
Kopiere den Installations-Prompt in deinen Agenten oder führe den Befehl unten aus. Der Skill landet im Skills-Ordner deines Agenten.
npx skillry-cli@latest install bs-sage-sneaker-store - 2
Mit einem Slash aufrufen
Tippe einen Slash und den Skill-Namen und sag dann in einfachen Worten, was du willst.
/bs-sage-sneaker-store Baue aus diesem Briefing, diesen Texten und diesem Brand Kit eine responsive Landing Page. - 3
Prüfen und ausliefern
Öffne die erstellte Datei, bitte im selben Chat um Änderungen und veröffentliche oder übergib sie dann.
index.html
Warum einen Webseite-Skill statt eines Prompts nutzen?
Ein Prompt kann eine Seite erzeugen. Ein Web-Skill ergänzt Produktfakten, responsive Interaktion, Validierung und eine wartbare Übergabe.
| Aspekt | Ein einfacher Prompt | Ein Skill |
|---|---|---|
| Inhalt | Füllt ein bekanntes Template mit Platzhaltertext | Baut die Seite rund um dein echtes Publikum, Produktfakten und Belege |
| Interaktion | Zeichnet Buttons und Tabs, die nur richtig aussehen | Verdrahtet echte Zustände, Navigation und Fehlerbehandlung |
| Übergabe | Liefert Code, der fertig aussieht | Folgt deinem Stack, listet Abhängigkeiten auf und prüft Smartphone- und Tastaturbedienung |
Was du mit einem Webdesign-Skill bauen kannst
- 01Landing Pages für einen Launch oder eine KampagneMach aus deinen Texten und Bildern eine Seite mit klaren Abschnitten und einem Anmelde- oder Kaufbutton.
- 02Klickbare PrototypenBilde echte Screens und Buttons nach, damit dein Team das Produkt ausprobieren kann, bevor es gebaut ist.
- 03DashboardsOrdne Zahlen, Tabellen und Diagramme so an, dass sie auf jedem Bildschirm gut lesbar sind.
- 04Wiederverwendbare SeitenbausteineButtons, Karten und Layouts in einem Stil, sodass neue Seiten zu den bestehenden passen.
So wählst du einen Webdesign-Skill
- 1Wähle einen Stil, der zu deinem Produkt passtSaaS-, Portfolio-, Shop- oder Event-Seite: Wähle den Look, der zu dem passt, was du baust.
- 2Live-Beispiel ausprobierenJede Skill-Seite hat eine funktionierende Beispiel-Website, durch die du dich auf Desktop und Smartphone klicken kannst.
- 3Herunterladen und ausprobierenInstalliere ihn in deinem Agenten und baue eine Seite mit deinen eigenen Inhalten. Nach wenigen Minuten weißt du Bescheid.
Jeder Skill, ein Plan
Installiere jeden Skill auf dieser Seite und jeden neuen, den wir hinzufügen. Jederzeit kündbar.
Jederzeit kündbar
Monthly
9,99 $ / Monat
Voller Premium-Zugriff, monatlich abgerechnet.
- Zugriff auf alle Premium Skills
- Installation über Web oder CLI
- Sicherer CLI-Zugriff mit Browser-Autorisierung
- Laufende Skill-Updates
- Neue Premium Skills inklusive
- Kündigen, wann immer du willst
Spare 34 % pro Jahr
Am beliebtestenYearly
79 $ / Jahr
Voller Premium-Zugriff zum günstigeren Jahrespreis.
- Zugriff auf alle Premium Skills
- Installation über Web oder CLI
- Sicherer CLI-Zugriff mit Browser-Autorisierung
- Laufende Skill-Updates
- Neue Premium Skills inklusive
- Kündigen, wann immer du willst
Einmal zahlen · Gründerpreis
GründerangebotFounding Lifetime
169 $ einmalig
Gründerpreis – steigt mit dem Wachstum der Bibliothek.
- Zugriff auf alle Premium Skills
- Installation über Web oder CLI
- Sicherer CLI-Zugriff mit Browser-Autorisierung
- Laufende Skill-Updates
- Neue Premium Skills inklusive
- Kein Abo, keine Verlängerungsrechnung
Jederzeit kündbar. Zahlungen sind nicht erstattungsfähig.
Webseite-Skills: FAQ
Kann ich einen Web-Skill in meinem bestehenden Projekt nutzen?
Ja, wenn der Skill angibt, dass er sich an dein Projekt anpasst. Andernfalls liefert er eine eigenständige Seite, und du planst die Integration selbst.
Bekomme ich bearbeitbares HTML oder nur eine Vorschau?
Bearbeitbarer Code. Dein Agent schreibt die HTML-Dateien für dich, und die Liste „Das bekommst du“ auf der Detailseite nennt die genauen Dateien, Assets und Startschritte.
Sind Zahlungen und Analytics angebunden?
Nein, außer die Detailseite sagt es. Ein Checkout-Button oder ein Diagramm im Design ist nur UI, bis du deinen eigenen Dienst anbindest.
Was sollte ich prüfen, bevor die Seite live geht?
Klick jedes Bedienelement an und teste die Seite dann in Desktop- und Smartphone-Breite, nur mit Tastatur und mit reduzierter Bewegung. Prüfe außerdem lange Texte, Fehlerzustände und jede Export- oder Offline-Funktion, die der Skill verspricht.
Weitere Ergebnistypen entdecken
Finde den passenden Skill für deine nächste Webseite
Landing Pages, Websites und interaktive Seiten als funktionierendes HTML.
Alle Skills ansehen