Eine Landing Page aus einem Prompt
Beschreibe dein Produkt. Der Skill hat Hero, Feature-Raster, Preise und FAQ bereits an Bord, sodass der Agent deine Texte in ein funktionierendes Layout schreibt.
Eine Landing Page oder komplette Website · Ein Abschnitt für deine bestehende Website · Ein Portfolio oder Lebenslauf
Website-Template-Skills für KI-Agenten
Jeder Skill ist ein getestetes Website-Design. Installiere ihn, beschreibe dein Produkt, und Claude Code, Codex oder Cursor baut die Landing Page, das Portfolio oder die komplette Website als funktionierendes HTML.
Funktioniert in
Wähle zum Start einen Webdesign-Skill
Was ein Webdesign-Skill deinem Agenten gibt
Jeder Claude-Design-Skill hier ist ein Ordner mit Anweisungen, Layout-Referenzen und Checks. Dein Agent lädt ihn, wenn du eine Seite anforderst – die Designentscheidungen sind also schon getroffen.
Templates, die konsistent bleiben
Portfolios, SaaS-Websites und Onlineshops behalten auf jeder neuen Seite dieselbe Schrift, dieselben Abstände und Animationen.
Frontend-Design, das als Code ausgeliefert wird
Jeder Durchlauf endet mit einer HTML-Datei, die du öffnen, bearbeiten und deployen kannst. Claude Code, Codex und Cursor lesen alle dieselbe SKILL.md.
Webdesign-Skills für deine Rolle finden
Jede Rollenseite wählt die Skills aus, die am besten zu diesem Job passen.
Designer:inEin Designsystem, das dein Agent wiederholt – so kümmerst du dich um die Details.
Gründer:inProduktseiten, Pitch-Decks und Launch-Videos noch vor der ersten Einstellung.
Content CreatorCover, Social Cards und Talking-Head-Overlays in deinem Stil.
MarketerKampagnenseiten, Launch-Videos und Social-Media-Bilder aus einem Briefing.So baust du eine Website 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-scrapbook-resume-site - 2
Mit einem Slash aufrufen
Tippe einen Slash und den Skill-Namen und sag dann in einfachen Worten, was du willst.
/bs-scrapbook-resume-site 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 Webdesign-Skill statt eines Prompts nutzen?
| Aspekt | Ein einfacher Prompt | Ein Skill |
|---|---|---|
| Layout | Bei jedem Durchlauf neu erfunden | Getesteter Hero, Raster und Footer |
| Typografie | Standard-Systemschriften | Eine gewählte Schriftskala und Schriftkombination |
| Konsistenz | Jede Seite sieht anders aus | Jede Seite folgt einem System |
| Ergebnis | Was auch immer das Modell schreibt | Eine geprüfte HTML-Datei, sofort einsatzbereit |
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.
Webdesign-Skills: FAQ
Was ist ein Webdesign-Skill?
Ein Ordner mit einer SKILL.md, Layout-Referenzen und Checks, der deinem KI-Agenten ein bewährtes Website-Design beibringt. Der Agent lädt ihn, wenn du eine Seite anforderst.
Kann Claude Code mit einem Skill eine Website bauen?
Ja. Installiere den Skill in Claude Code, beschreibe die Website, und er schreibt das HTML nach dem Layout des Skills. Codex und Cursor funktionieren genauso.
Bekomme ich HTML, React oder eine Figma-Datei?
Die meisten Webdesign-Skills liefern eine funktionierende HTML-Datei. Einige nennen auf ihrer Detailseite auch Next.js- oder Komponenten-Output; keiner liefert eine Figma-Datei.
Sind die Website-Templates kostenlos?
Manche schon. Kostenlose Skills tragen ein Free-Label; der Rest ist in Pro enthalten oder einzeln kaufbar.
Weitere Anwendungsfälle entdecken
Finde den passenden Skill für deine nächste Website
Landing Pages, Portfolios und komplette Websites, gebaut von deinem Agenten.
Alle Skills ansehen