DesignKostenlos
frontend-design
Das Gegenmittel zum typischen „KI-Look“: mutige Typografie, eigenständige Farbwelten und gezielte Animation statt lila Verläufen.
- Schriftwahl
- Farbkonzept
- Motion
- Layout
Claude Skills · Design-Ausgabe · Stand September 2026
Was Claude gestaltet, wenn man ihm zeigt, wie.
Skills sind kleine Ordner voller Anleitungen, Skripte und Schriften. Claude lädt sie nur, wenn sie gebraucht werden – und baut dann bessere Websites, Animationen, Poster und Präsentationen. Hier sind die besten für Design, kurz erklärt und vor allem gezeigt.
- 14
- Skills vorgestellt
- 0 €
- kosten die Skills selbst
- 3
- Wege zur Installation
01 — Grundlagen
Ein Skill ist nur ein Ordner.
Darin liegt eine SKILL.md mit Name, Beschreibung und Anleitung – dazu optional Skripte, Vorlagen oder Schriftdateien. Claude liest zuerst nur die Kurzbeschreibung und holt den Rest erst, wenn deine Aufgabe dazu passt. Deshalb kannst du viele Skills gleichzeitig installieren, ohne dass Claude langsamer wird.
poster-studio/ ├─ SKILL.md Anleitung ├─ scripts/ Python, JS … ├─ templates/ HTML, PPTX … └─ fonts/ .ttf, .otf
-
1
Immer im Blick
Name + Beschreibung – ein paar Dutzend Wörter.
-
2
Wenn es passt
Die komplette
SKILL.md: Regeln, Beispiele, Stilvorgaben. -
3
Nur bei Bedarf
Skripte, Vorlagen und Schriften – beliebig groß.
02 — Die Sammlung
14 Skills, die man sehen muss.
Kostenlos? Ja – alle Skills hier kosten nichts. Die Beispiel-Skills von Anthropic und die Community-Skills sind Open Source, die Dokument-Skills sind frei nutzbar, aber nur source-available. Du brauchst allerdings Claude: die Claude-App mit aktivierter Code-Ausführung (bezahlte Pläne), Claude Code oder die API.
14 Skills
MotionKostenlos
algorithmic-art
Generative Kunst mit p5.js: Flow Fields, Partikelsysteme, reproduzierbar über einen Seed – live und interaktiv im Artifact.
- Flow Fields
- Partikel
- Seeds
- Regler
DesignKostenlos
canvas-design
Poster und Grafiken als PNG oder PDF. Claude formuliert zuerst eine Designphilosophie und komponiert dann – mit mitgelieferten Schriften.
- Poster
- Kunstdrucke
- Eigene Fonts
DesignKostenlos
theme-factory
Zehn fertige Themes aus Farbpalette und Schriftpaar – für Folien, Dokumente, Websites. Oder ein neues Theme auf Zuruf.
- 10 Presets
- Farbpaletten
- Schriftpaare
ArtifactsKostenlos
web-artifacts-builder
Für große Artifacts: echte React-Apps mit Tailwind und shadcn/ui, am Ende in eine einzige HTML-Datei gebündelt.
- React
- Komponenten
- State
- Bundling
MotionKostenlos
slack-gif-creator
Animierte GIFs und Emojis Frame für Frame – automatisch auf die Größenlimits von Slack optimiert.
- Emoji-GIFs
- Easing
- Loops
MotionKostenlos
remotion
Videos als React-Code: Claude schreibt Animationen, Kamerafahrten und Titel, Remotion rendert daraus ein MP4.
- Motion Graphics
- Text-Animation
- MP4
DesignKostenlos
brand-guidelines
Wendet Anthropics Markenfarben und Schriften an – die perfekte Vorlage, um daraus einen Skill für deine eigene Marke zu machen.
- Markenfarben
- Typografie
- Vorlage
DesignKostenlos
ui-ux-pro-max
Eine durchsuchbare Design-Bibliothek: Dutzende UI-Stile, Farbpaletten und Schriftpaare, passend zur Branche vorgeschlagen.
- UI-Stile
- Paletten
- Font-Pairings
DesignKostenlos
web-design-guidelines
Prüft dein Interface gegen über hundert Regeln für Barrierefreiheit, Formulare, Animation und Typografie – mit konkreten Fundstellen.
- UI-Audit
- Barrierefreiheit
- Best Practices
DokumenteKostenlos
pptx
Echte PowerPoint-Dateien mit Layouts, Diagrammen und Sprechernotizen – kombiniert mit theme-factory auch richtig schön.
- Folien
- Diagramme
- Vorlagen
DokumenteKostenlos
docx · pdf · xlsx
Word-Dokumente mit Formatierung, PDFs ausfüllen und zusammenführen, Excel-Tabellen mit echten Formeln und Diagrammen.
- Berichte
- Formulare
- Formeln
WorkflowKostenlos
skill-creator
Claude hilft dir, deinen eigenen Skill zu bauen – etwa deinen Hausstil mit Schriften, Farben und Beispielen.
- Eigene Skills
- Struktur
- Testen
WorkflowKostenlos
webapp-testing
Claude öffnet deine Seite im echten Browser, klickt sich durch, macht Screenshots und sieht selbst, ob das Design sitzt.
- Screenshots
- Klick-Tests
- Konsole
03 — Schriften
Sechs Schriftpaare, die Claude sofort nutzen kann.
Alle kostenlos bei Google Fonts. Kopiere den Satz unter einem Paar in deinen Prompt – zusammen mit frontend-design ist das der schnellste Weg weg vom Standard-Look.
Warm · editorial
Gestaltung, die atmet.
Für Magazine, Portfolios und alles, was sich nach Papier anfühlen soll.
Fraunces + Manrope
Laut · modern
Gestaltung, die atmet.
Für Agenturen, Events und Launches, die auffallen wollen.
Syne + Inter
Klassisch · ruhig
Gestaltung, die atmet.
Für Produktseiten und Landingpages mit seriösem Auftritt.
DM Serif Display + DM Sans
Charakterstark
Gestaltung, die atmet.
Für Blogs und Kulturprojekte – eine Grotesk mit Eigensinn trifft eine Lese-Antiqua.
Bricolage Grotesque + Newsreader
Technisch · präzise
Gestaltung, die atmet.
Für Dev-Tools, Dokumentation und Dashboards.
Space Grotesk + JetBrains Mono
Luxus · leise
Gestaltung, die atmet.
Für Mode, Hotels und Manufakturen mit viel Weißraum.
Cormorant Garamond + Work Sans
04 — Techniken
So holst du mehr aus jedem Skill.
-
Stil benennen
Adjektive wirken Wunder. Sag, wie es sich anfühlen soll.
„Editorial, viel Weißraum, eine Akzentfarbe“ -
Referenz zeigen
Ein Screenshot sagt mehr als drei Absätze Beschreibung.
„Orientier dich an diesem Layout“ -
Schriften vorgeben
Zwei Familien reichen. Nenne Gewichte und Rollen.
„Fraunces 600 + Manrope 400“ -
Motion dosieren
Eine orchestrierte Einblendung schlägt zwanzig Micro-Effekte.
„Ein gestaffelter Auftritt beim Laden, sonst ruhig“ -
Palette festlegen
Als CSS-Variablen – dann bleibt alles konsistent, auch im Dark-Mode.
„--ink #1c1a17, --accent #c45a38“ -
Iterieren
Der erste Entwurf ist ein Anfang. Kurze Richtungsimpulse genügen.
„Mutiger. Größere Headline, weniger Farbe.“
05 — Bezugsquellen
Wo du sie bekommst und wie du sie aktivierst.
- Einstellungen → Funktionen öffnen.
- Code-Ausführung und Dateierstellung aktivieren.
- Unter Skills die Anthropic-Skills einschalten – oder einen eigenen Skill als ZIP hochladen.
Verfügbar in den bezahlten Plänen (Pro, Max, Team, Enterprise). Die Freischaltung ändert sich gelegentlich – im Zweifel in den Einstellungen nachsehen.
Offizielle Skills als Plugin-Marketplace:
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
/plugin install document-skills@anthropic-agent-skillsCommunity-Skills mit dem skills-CLI:
npx skills add remotion-dev/skills
npx skills add vercel-labs/agent-skillsOder manuell: den Skill-Ordner nach ~/.claude/skills/ (global) oder .claude/skills/ (pro Projekt) kopieren.
Eigene Skills über die Skills-API hochladen oder Anthropics Dokument-Skills per ID nutzen. Im Request werden sie im Container angegeben, das Code-Execution-Tool muss aktiv sein:
"container": {
"skills": [
{ "type": "anthropic", "skill_id": "pptx", "version": "latest" }
]
}Es fallen normale Token-Kosten an. Den aktuellen Beta-Header findest du in der Anthropic-Dokumentation.