Claude Code · Codex · Cursor · OpenCode

Design-Skills für Claude Code, Codex und Ihren Agent.

138 Open-Source-Skills für PPT und Präsentationen, Frontend- und UI-Design, Markensysteme, Motion und Design-Review – katalogisiert aus echten SKILL.md-Dateien. Starten Sie mit einem Skill-Namen oder mit der Aufgabe, die Sie erledigen müssen.

OpenDesign herunterladen Alle 138 Skills durchsuchen

Kennen Sie die Aufgabe, aber nicht den Skill-Namen? Katalog nach Aufgabe filtern

anthropics/skills01

--- name: frontend-design description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults. --- # Frontend Design Approach this as the design lead at a design studio known for giving every client a distinct visual identity that is not mistaken for anyone else's. This client has already rejected proposals that felt cliché or templated, and is paying for a distinctive point of view: make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and take aesthetic risk …

nextlevelbuilder/ui-ux-pro-max-skill02

--- name: ui-ux-pro-max description: UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, … ---

pbakaus/impeccable03

--- name: impeccable description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, … ---

Front Matter aus den ursprünglichen SKILL.md-Dateien · frontend-design, ui-ux-pro-max, impeccableStand 2026-09-14

Skills

138 für Claude Code & CodexGelesen aus den echten SKILL.md-Dateien, nicht aus Verzeichnislisten

Sources

34 Open-Source-RepositorysJeder Eintrag verlinkt auf seine ursprüngliche Datei

Licenses

MIT · Apache-2.0 · 3 weitereAuf Datei- oder Repository-Ebene verifiziert, auf jeder Karte angezeigt

Zuletzt verifiziert

2026-09-14Quellen, Lizenzen und Repository-Stars an diesem Datum geprüft

01 Alle Skills

Alle 138 Design-Skills, nach Aufgabe.

PPT und Präsentationen, Frontend und UI, Mobile, Markensysteme, Motion und Video, Design-Review. Jede Karte verlinkt zur SKILL.md des Skills.

Keine passenden Skills.

02 Auswählen und starten

Wie Sie einen Design-Skill auswählen und in Claude Code oder Codex ausführen.

Wählen Sie nach Aufgabe und Ausgabe, prüfen Sie die Anforderungen des Skills und installieren Sie ihn dann in Ihrem Agent und führen Sie eine echte Aufgabe aus. Die gleichen drei Schritte funktionieren in Claude Code, Codex, Cursor und OpenCode.

1
Wählen Sie die Aufgabe, nicht den Skill-Namen
Filtern Sie nach dem, was Sie erstellen müssen – eine Landing-Page, eine Präsentation, ein Brand-System, ein Review. Vergleichen Sie die Anwendung in einer Zeile und den Output-Typ, bevor Sie Sterne vergleichen.
PrüfenZwei oder drei Kandidaten, deren Ausgabe der Datei entspricht, die Sie tatsächlich benötigen.
Katalog · nach Aufgabe gefiltert01

Motion & Video 27

gsap-scrolltrigger
Scroll-gebundene Animation mit ScrollTrigger: Pinning, Scrub, Triggers, Parallax.
Motion & VideoUI-Code15.248 repo stars
animate
Erstellt eine Animation von Grund auf und legt dabei Zweck, Tool, Eigenschaften, Kurve und Dauer in der richtigen Reihenfolge fest.
Motion & VideoUI-Code37.516 repo stars
2
Prüfen Sie, was der Skill benötigt
Öffnen Sie die Quelle und lesen Sie die Anforderungen. Einige Skills funktionieren nur mit einem bestimmten Tool wie Google Stitch, HyperFrames oder GSAP; andere benötigen einen Bildgenerierungsdienst. Der Katalog listet diese unter Benötigt auf, wenn die SKILL.md sie angibt.
PrüfenDas Tool oder der Dienst, den der Skill nennt, ist in Ihrem Projekt verfügbar, bevor Sie ihn installieren.
greensock/gsap-skills · SKILL.md02

gsap-scrolltrigger

Scroll-gebundene Animation mit ScrollTrigger: Pinning, Scrub, Triggers, Parallax.

Benötigt: GSAP im Projekt

--- name: gsap-scrolltrigger description: Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks … ---
3
Installieren Sie ihn in Ihrem Agent und führen Sie eine echte Aufgabe aus
Installieren Sie den Skill so, wie der Autor ihn dokumentiert – für die meisten Repositories ist das ein npx skills add-Befehl – und führen Sie dann eine echte Aufgabe mit Ihrem eigenen Inhalt in Claude Code, Codex oder Ihrem Agent aus. Das Kopieren eines Befehls ist keine erfolgreiche Installation, bis der Agent den Skill erkennt und verwendet.
PrüfenDer Agent listet den Skill mit Namen auf und seine Ausgabe ändert sich, wenn Sie ihn aufrufen.
Terminal03
```
$ npx skills add https://github.com/greensock/gsap-skills --skill gsap-scrolltrigger
✓ gsap-scrolltrigger added for 1 agent
$ claude
› /gsap-scrolltrigger  pin the hero and scrub the timeline on scroll…
```
Beispielsitzung · Installationsschritte und Ausgabe variieren je nach Agent

03 In OpenDesign ausführen

38 dieser Skills sind in OpenDesign enthalten. Importieren Sie den Rest über einen Link.

OpenDesign liest dasselbe SKILL.md-Format, das Claude Code verwendet, sodass jeder Skill in diesem Katalog damit läuft – mit Claude Code, Codex, Cursor oder OpenCode als Engine.

38
Bereits enthalten
frontend-design, ui-ux-pro-max, impeccable, guizang-ppt-skill, die acht GSAP-Skills und weitere finden Sie in Plugins → Skills nach der Installation. Sie tragen im Katalog oben die Markierung In OpenDesign.
↗
Jeden anderen Skill über seinen Link importieren
Plugins → Add → Skill → Import from link, fügen Sie den GitHub-Link des Skill-Ordners ein – derselbe Link wie unter Source auf jeder Karte – und er landet in Ihren persönlichen Skills. Ein lokaler Ordner-Upload funktioniert ebenfalls.
›_
Läuft mit dem Agent, den Sie bereits verwenden
Wählen Sie den Skill in der oberen Leiste, und seine SKILL.md wird zusammen mit Ihrer DESIGN.md in den Prompt komponiert. Claude Code, Codex, Cursor oder OpenCode erledigt die Arbeit; Vorschau und Exporte kommen von OpenDesign.

OpenDesign

Design-Skills mit den Coding-Agents ausführen, die Sie bereits verwenden.

OpenDesign ist ein Open-Source, Local-First Design-Workspace. Er macht Coding-Agents zur Design-Engine für Prototypen, Webseiten, Slides und HTML-Video – echte lauffähige Dateien auf Ihrer eigenen Maschine mit Ihren eigenen Keys.

OpenDesign herunterladen Quickstart lesen

Die Skills in diesem Katalog sind unabhängige Open-Source-Projekte. 38 sind in OpenDesign enthalten; die übrigen werden über ihren Repository-Link importiert. Die jeweilige Anleitung des Skills gilt weiterhin.

Ölgemälde eines Dorfes am Hang über einer blauen Bucht, im malerischen Stil, der auf der gesamten OpenDesign-Website verwendet wird

Design-Skills für Claude Code, Codex und Ihren Agent.

Alle 138 Design-Skills, nach Aufgabe.

Wie Sie einen Design-Skill auswählen und in Claude Code oder Codex ausführen.

Wählen Sie die Aufgabe, nicht den Skill-Namen

Prüfen Sie, was der Skill benötigt

Installieren Sie ihn in Ihrem Agent und führen Sie eine echte Aufgabe aus

38 dieser Skills sind in OpenDesign enthalten. Importieren Sie den Rest über einen Link.

Bereits enthalten

Jeden anderen Skill über seinen Link importieren

Läuft mit dem Agent, den Sie bereits verwenden

Design-Skills mit den Coding-Agents ausführen, die Sie bereits verwenden.