Figma Skills sind markdown-basierte Anweisungen, die festlegen, wie sich der AI Design Agent in Ihrem spezifischen Kontext verhält. Stellen Sie sich diese als wiederverwendbare benutzerdefinierte Prompts vor — Sie schreiben sie einmal, und sie kodieren die Konventionen, Komponentenregeln und Qualitätsstandards Ihres Teams, sodass der Agent sie automatisch jedes Mal befolgt.
Jeder kann eine Skill schreiben. Kein Code erforderlich. Keine Plugin-Entwicklung. Keine API-Integration. Nur Markdown-Text, der beschreibt, was der Agent tun soll und wie er es tun soll. Skills sind der Unterschied zwischen einem Agenten, der generische Benutzeroberflächen generiert, und einem Agenten, der die Benutzeroberflächen IHRES Teams generiert.
Wichtige Erkenntnis
Skills verwandeln den Design Agent von einer generischen KI in die KI IHRES Teams. Ohne Skills verwendet der Agent Standardkonventionen und errät Ihre Präferenzen. Mit Skills befolgt er automatisch Ihr Abstandssystem, Komponentenbenennungsregeln, Barrierefreiheitsanforderungen und Markenrichtlinien. 30 Minuten für das Schreiben von 3-4 Skills sparen Stunden der Korrektur über Wochen der Agentennutzung hinweg.
Was macht eine Figma Skill aus?
| Skill-Element | Was es bewirkt | Beispiel |
|---|---|---|
| Name (mit /) | Wie Sie sie aufrufen | /create-settings-page |
| Zweck | Was die Skill macht (ein Satz) | "Eine Einstellungsseite gemäß unseren Teamkonventionen generieren" |
| Schritte | Geordnete Anweisungen, die der Agent befolgt | "1. Verwende Section Header für jede Gruppe..." |
| Konventionen | Regeln, die der Agent befolgen muss | "Verwende immer 8px-Raster, niemals absolute Positionierung" |
| Komponenten | Welche veröffentlichten Komponenten zu verwenden sind | "Verwende Toggle/Switch für boolesche Einstellungen" |
| Variablen | Welche Design-Token anzuwenden sind | "Verwende color-surface-primary für Hintergründe" |
| Verbote | Was der Agent vermeiden sollte | "Niemals mehr als 3 Überschriftenebenen pro Seite verwenden" |
Figma startete mit 9 Beispiel-Skills, die folgende Bereiche abdecken: Aufbau von Komponentenbibliotheken, Generierung neuer Designs aus Briefings, Erstellung von Barrierefreiheitsspezifikationen, Koordination von Multi-Agenten-Workflows und Synchronisation von Design-Token mit Code. Erkunden Sie sie unter figma.com/community/skills. Die grundlegende Skill /use-figma gibt dem Agenten ein gemeinsames Verständnis davon, wie Figma strukturell funktioniert. Teams passen von dort aus an.
Ihre erste Skill schreiben (mit Beispiel)
Beginnen Sie mit Ihrer am häufigsten wiederholten Designaufgabe. Wenn Sie wöchentlich Formularlayouts erstellen, schreiben Sie eine /form-layout Skill. Hier ist ein vollständiges, praxisnahes Beispiel:
Diese Skill sagt dem Agenten genau, wie Ihr Team Formulare erstellt. Ohne sie verwendet der Agent Figmas Standardkonventionen. Mit ihr folgt jedes vom Agenten generierte Formular Ihren spezifischen Standards — konsistent über Teammitglieder hinweg, konsistent über Projekte hinweg.
📬 Finden Sie das wertvoll?
Eine umsetzbare KI-Erkenntnis pro Woche. Plus ein kostenloses Prompt-Paket bei der Anmeldung.
Kostenlos abonnieren →Wie Skills im Vergleich zu anderen KI-benutzerdefinierten Anweisungen abschneiden
Skills sind konzeptionell ähnlich zu benutzerdefinierten Anweisungssystemen in anderen KI-Tools:
| Tool | Benutzerdefinierte Anweisungen | Erstellt von | Geteilt? |
|---|---|---|---|
| Figma Skills | Markdown-Dateien, die den Design Agent leiten | Manuell vom Team | Ja (Community-Bibliothek) |
| ChatGPT Custom Instructions | Text, der alle ChatGPT-Antworten formt | Manuell vom Benutzer | Nein (nur persönlich) |
| Claude Code CLAUDE.md | Projektebenen-Anweisungen für Coding-Agent | Manuell vom Team | Ja (über Repository) |
| Hermes Agent Skills | Automatisch generierte wiederverwendbare Aufgabenmuster | Automatisch aus der Nutzung | Ja (Skill-Bibliothek) |
Der wichtigste Unterschied: Hermes Agent erstellt Skills automatisch aus abgeschlossenen Aufgaben — lernt während Sie arbeiten. Figma erfordert manuelle Skill-Erstellung — Sie lehren es explizit. Hermes' Ansatz skaliert mit der Nutzung; Figmas Ansatz gibt Ihnen mehr Kontrolle, erfordert aber eine Vorabinvestition. Beide produzieren bessere KI-Ausgaben als die Verwendung der Tools ohne benutzerdefinierte Anweisungen.
Das zugrundeliegende Prinzip ist bei allen diesen Systemen dasselbe: KI funktioniert besser mit explizitem Kontext über Ihre Präferenzen, Konventionen und Standards. Ob Sie eine Figma Skill, ChatGPT Custom Instructions oder eine Claude CLAUDE.md-Datei schreiben, das ICCSSE-Framework produziert bessere Anweisungen. Der kostenlose Prompt Optimizer wendet diese Struktur automatisch an — fügen Sie Ihren Skill-Entwurf ein, erhalten Sie eine klarere Version zurück.
4 wesentliche Skills, die jedes Designteam braucht
1. /form-layout — Standardisiert Formulardesign im gesamten Team. (Beispiel oben.)
2. /page-layout — Definiert Ihre Seitenstruktur-Konventionen: Kopfzeilenplatzierung, Seitenleistenbreite, maximale Inhaltsbreite, Fußzeilenstruktur, Navigationsmuster, responsive Breakpoints.
3. /component-variant — Sagt dem Agenten, wie neue Komponentenvarianten erstellt werden, die zu Ihrem bestehenden System passen: Benennungskonventionen, Zustandsdefinitionen (Standard, Hover, Aktiv, Deaktiviert, Fehler), Größenskala (sm, md, lg) und Dokumentationsanforderungen.
4. /accessibility-check — Definiert Ihre Barrierefreiheitsstandards: WCAG-Level (AA vs AAA), minimale Touch-Target-Größen, Kontrastverhältnisse, Überschriftenhierarchie-Regeln, erforderliche ARIA-Labels und Screenreader-Annotationsformat. Siehe unseren Barrierefreiheitsspezifikationen-Leitfaden für Details.
📬 Möchten Sie mehr davon?
Eine umsetzbare KI-Erkenntnis pro Woche. Plus ein kostenloses Prompt-Paket bei der Anmeldung.
Kostenlos abonnieren →Häufig gestellte Fragen
Wie viele Skills sollte ich erstellen?
Beginnen Sie mit 3-4, die Ihre häufigsten Designaufgaben abdecken: eine Formular-Skill, eine Seitenlayout-Skill, eine Komponentenvarianten-Skill und eine Barrierefreiheitsprüfungs-Skill. Diese decken 80% der täglichen Designarbeit ab. Fügen Sie weitere Skills hinzu, wenn Sie wiederholte Muster identifizieren, die der Agent inkonsistent behandelt.
Können Skills andere Skills aufrufen?
Ja — Skills können andere Skills referenzieren und dadurch verkettete Workflows erstellen. Eine /new-feature Skill könnte /form-layout für Eingabeabschnitte aufrufen, dann /accessibility-check für Compliance-Überprüfung. Dies ermöglicht komplexe mehrstufige Workflows aus einem einzigen Aufruf.
Verbrauchen Skills Credits?
Die Skill selbst (die Markdown-Anweisungen) verbraucht keine Credits. Die Agenten-Aktionen, die die Skill auslöst (Designs generieren, Komponenten bearbeiten), verbrauchen Credits zum normalen Tarif. Eine gut geschriebene Skill kann tatsächlich Credits sparen, indem sie bessere Ausgaben beim ersten Versuch produziert — weniger Iterationen bedeuten weniger Credit-verbrauchende Regenerationen.
Kann ich Skills mit der Figma-Community teilen?
Ja — Figmas Community-Skills-Bibliothek ermöglicht es Ihnen, Skills zu veröffentlichen und zu durchsuchen. Das bedeutet, Sie können Skills verwenden, die von anderen Designteams für gängige Muster (Dashboard-Layouts, Onboarding-Flows, Einstellungsseiten) geschrieben wurden, ohne sie von Grund auf zu schreiben.
Wo werden Skills gespeichert?
Skills sind mit Ihrer Figma-Organisation oder Ihrem persönlichen Konto verknüpft. Team-Level-Skills sind für alle Teammitglieder zugänglich; persönliche Skills sind nur für Sie zugänglich. Speichern Sie Ihre wichtigsten Skills auf Team-Ebene, damit alle Designer von denselben Konventionen profitieren.
Offenlegung: Einige Links in diesem Artikel sind Affiliate-Links. Wir empfehlen nur Tools, die wir persönlich getestet haben und regelmäßig verwenden. Siehe unsere vollständige Offenlegungsrichtlinie.