Figma AI funktioniert nur so gut wie die Anweisungen, die Sie ihm geben. Vage Prompts erzeugen generische Layouts, die Sie von Grund auf neu erstellen müssen. Spezifische Prompts – mit Bildschirmtyp, Abschnitten, Komponenten, Rahmengröße und Abständen – erzeugen routinemäßig 70–85% produktionsbereite Ausgaben in einem Durchgang. Diese 15 Vorlagen sind für Figmas 2026 AI-Stack strukturiert: den Design Agent, Figma Make, Skills und die kostenlosen Funktionen (Auto Layout, Ebenen umbenennen, Inhalte ersetzen), die null Credits kosten.

Kopieren Sie eine beliebige Vorlage, tauschen Sie die eckigen Platzhalter gegen Ihr Produkt aus und lassen Sie sie durch den kostenlosen Prompt Optimizer laufen, wenn Sie strengere Einschränkungen wünschen. Für Ein-Klick-Optimierung in ChatGPT, Claude und Gemini während Sie Agent-Anweisungen entwerfen, fügt TresPrompt ICCSSE-Stil-Struktur zu Ihrer Seitenleiste hinzu.

Wichtigste Erkenntnis

Jeder starke Figma AI-Prompt benennt vier Dinge: welchen Bildschirm Sie erstellen, welche veröffentlichten Komponenten zu verwenden sind, die Rahmengröße und Abstandsregeln. Fügen Sie negative Einschränkungen hinzu („keine unbenannten Rahmen verwenden", „kein lorem ipsum") und der Agent hört auf zu raten. Skills kodieren diese Muster, damit Sie sie nicht jede Sitzung neu eingeben müssen.

Design Agent Vorlagen (Bildschirme auf Leinwand)

1 Mobile Einstellungsseite
Erstelle eine mobile Einstellungsseite (390×844) mit: 1. Account — Avatar, Name, E-Mail, Bearbeiten-Buttons 2. Benachrichtigungen — Schalter für E-Mail, Push, SMS 3. Erscheinungsbild — Dark Mode Schalter, Schriftgrößen-Auswahl 4. Sicherheit — Passwort ändern, 2FA-Schalter 5. Fußzeile — destruktiver Abmelden-Button, App-Versionstext Verwende nur veröffentlichte Komponenten. Auto Layout: 16px Elementabstand, 32px zwischen Abschnitten. Section Header Komponente für Gruppenlabels.
2 Dashboard-Übersicht (Desktop)
Erstelle ein Desktop-Analytics-Dashboard (1440×900) mit: - Obere Navigation: Logo, Suche, Benutzermenü - Linke Seitenleiste: 5 Navigationselemente, aktiver Zustand auf „Übersicht" - Hauptbereich: 4 KPI-Karten in einer Reihe, Liniendiagramm darunter, Tabelle mit aktuellen Aktivitäten (5 Zeilen) Verwende Design-System-Variablen für Farbe und Abstand. Card-Komponente für KPIs. Table-Komponente für Aktivitäten. Verwende keine Platzhalter-Diagrammdatenlabels wie „Serie 1".
3 Onboarding-Ablauf (3 Rahmen)
Erstelle 3 mobile Onboarding-Bildschirme (390×844), von links nach rechts: 1. Willkommen — Schlagzeile, Untertext, primärer CTA „Loslegen" 2. Berechtigungen — Liste Benachrichtigungen + Standort mit Schaltern 3. Erfolg — Häkchen-Illustrationsbereich, „Du bist startklar" CTA Verwende Primary Button und Secondary Button Komponenten. Fortschrittsanzeige mit Schritt 1/3, 2/3, 3/3. Einheitlicher 24px horizontaler Abstand auf allen Rahmen.
4 Leerer Zustand + Fehlerzustand
Erstelle zwei mobile Rahmen (390×844): Rahmen A — Leere Suchergebnisse: Icon-Bereich, Schlagzeile „Keine Ergebnisse", Fließtext, sekundärer „Filter löschen" Button Rahmen B — Fehler: Warnsymbol, „Etwas ist schiefgelaufen", primärer „Erneut versuchen", tertiärer „Support kontaktieren" Verwende veröffentlichte Empty State und Alert Komponenten falls verfügbar. Zentrierter Inhalt, maximale Breite 280px für Textblock.
5 Barrierefreie Einstellungen (Agent + a11y)
Erstelle eine mobile Einstellungsseite (390×844) mit Barrierefreiheitsanforderungen: - Interaktive Elemente mindestens 44×44px Touch-Ziele - Textkontrast mindestens 4,5:1 (verwende Design-System-Textfarben) - Überschriftenhierarchie H1 → H2, keine übersprungenen Ebenen - Schalter enthalten sichtbare Textlabels (nicht nur Icons) - Fehlerzustände verwenden Farbe UND Text (nicht nur Farbe) Verwende veröffentlichte Komponenten. Auto Layout 16px / 32px Abstand.

📬 Ist das hilfreich für Sie?

Eine umsetzbare AI-Erkenntnis pro Woche. Plus ein kostenloses Prompt-Paket bei Anmeldung.

Kostenlos abonnieren →

Figma Make Vorlagen (Prototyp / Code)

6 Marketing Landing (Make)
Erstelle eine einseitige Marketing-Website aus diesem Figma-Rahmen: - Hero: Schlagzeile, Unterüberschrift, E-Mail-Erfassung + CTA - 3 Feature-Spalten mit Icons - Social Proof Logos-Reihe - Fußzeile mit Links Übernimm Abstände und Farben aus dem ausgewählten Rahmen. Mobile-responsive. Keine externen Bibliotheken außer in Rahmennotizen angegeben.
7 Interaktiver Prototyp (Make)
Erstelle einen klickbaren Prototyp aus Rahmen [Rahmennamen auflisten]: - Klick auf „Registrieren" navigiert zum Registrierungsformular-Rahmen - Absenden zeigt Erfolgs-Toast-Zustand - „Zurück" kehrt zum vorherigen Bildschirm zurück Verwende Komponenten aus der Datei. Behalte Hover-Zustände auf primären Buttons bei. Füge keine neuen Bildschirme hinzu, die nicht in der Design-Datei sind.

Skills Vorlagen (Wiederverwendbare Agent-Anweisungen)

Speichern Sie diese als Skills Markdown-Dateien, damit der Agent jedes Mal den Team-Konventionen folgt.

8 Skill: /einstellungsseite
Beim Erstellen von Einstellungsbildschirmen: - Verwende immer Section Header + gruppiertes Listen-Muster - Füge Fußzeile mit App-Version (Caption-Stil) und destruktivem Abmelden hinzu - Mobile Standard 390×844 außer Benutzer spezifiziert Desktop - Verwende Toggle-Komponente für boolesche Einstellungen, niemals benutzerdefinierte Checkboxen - Abstände: 16px innerhalb von Gruppen, 32px zwischen Gruppen, 24px Bildschirmabstand
9 Skill: /datentabelle
Beim Erstellen von Tabellen: - Verwende Table/Header und Table/Row Komponenten - Füge Sortier-Icon-Spalte nur hinzu wenn Benutzer danach fragt - Zeilenhöhe mindestens 48px für Touch - Kürze langen Text mit Auslassungszeichen, niemals mehr als 2 Zeilen in Zellen umbrechen - Leerer Zustand unter Tabelle bei null Zeilen

Kostenlose Funktionen (Null Credits)

10 Inhalte ersetzen (Stapel)
Ersetze alle lorem ipsum im ausgewählten Rahmen mit realistischem [B2B SaaS / E-Commerce / Gesundheitswesen] Text. Namen: vielfältig, plausibel. Adressen: US-Format. Produktnamen: fiktiv aber professionell. Behalte ähnliche Zeichenanzahl wie Platzhalter bei, damit das Layout nicht bricht.
11 Ebenen umbenennen (Übergabe-Vorbereitung)
Benenne alle Ebenen auf dieser Seite um mit Muster: [Abschnitt]/[Komponente]/[Zustand] Beispiel: Einstellungen/BenachrichtigungZeile/Standard Benenne gesperrte Hintergrundrahmen nicht um. Überspringe versteckte Ebenen.

MCP + Code Übergabe Prompts (Claude Code / Cursor)

12 React aus Figma-Rahmen
Lese den ausgewählten Figma-Rahmen über MCP. Generiere eine React-Komponente mit [Tailwind / unserer Shadcn-Bibliothek]: - Übernimm Abstände und Farben aus Design-Tokens in der Datei - Verwende semantisches HTML (nav, main, section) - Füge responsive Breakpoints bei 768px und 1024px hinzu - Exportiere als SettingsPage.tsx mit typisierten Props für Benutzerdaten Verwende keine fest kodierten Hex-Werte — verwende Token-Namen aus Figma-Variablen.

Erkundungs- & Vergleichsvorlagen

13 Drei Layout-Richtungen
Generiere 3 verschiedene Layout-Ansätze für [Bildschirmtyp] auf Desktop 1440×900: A — Seitenleisten-Navigation B — Obere Tab-Navigation C — kartenbasierter Hub Gleicher Inhalt in allen drei. Verwende veröffentlichte Komponenten. Platziere Rahmen nebeneinander mit 80px Abstand. Beschrifte jeden Rahmen „Richtung A/B/C" in kleinem Caption-Text.
14 Design-System-Audit Prompt
Überprüfe die ausgewählte Seite und liste auf: - Komponenten nicht aus der veröffentlichten Bibliothek (markiere als „getrennt") - Farben die keine Variablen verwenden - Text der keine Textstile verwendet - Auto Layout Abstände die nicht 4/8/16/24/32 sind Ausgabe als Checkliste in Rahmennotizen. Nicht automatisch reparieren — nur berichten.
15 Verfeinerungs-Durchgang (zweiter Prompt)
Auf dem generierten Rahmen, wende nur diese Korrekturen an: 1. Erhöhe vertikalen Abstand zwischen Abschnitten auf 32px 2. Tausche primären Button gegen Button/Primary/Large Variante 3. Füge Hilfstext unter E-Mail-Feld hinzu: „Wir werden Ihre E-Mail niemals weitergeben" 4. Richte alle Icons auf 24×24 in Listenzeilen aus Strukturiere das Layout nicht um. Füge keine neuen Abschnitte hinzu.

Wie man Vorlagen verkettet

Produktions-Workflow: Vorlage 13 (erkunden) → Richtung wählen → Vorlage 1 oder 2 (ganzer Bildschirm) → Vorlage 15 (verfeinern) → Vorlage 11 (umbenennen) → Vorlage 12 (MCP zu Code). Jeder Schritt verwendet einen fokussierten Prompt anstatt einer riesigen Anweisung, die den Agent verwirrt.

Für das vollständige Figma AI-Ökosystem (Agent, Make, MCP, Skills, Sites), siehe unseren vollständigen 2026-Leitfaden. Für schrittweise Agent-Einrichtung, siehe wie man den Design Agent verwendet. Für Credit-Budgetierung, siehe Figma AI Credits erklärt.

Häufig gestellte Fragen

Funktionieren diese mit dem kostenlosen Figma-Plan?

Vorlagen 10–11 (Inhalte ersetzen, umbenennen) funktionieren mit kostenlosen Plänen. Design Agent und Make erfordern bezahlte Pläne und Beta-Zugang. MCP funktioniert mit jedem Plan, der Dev Mode / MCP für Ihren Platz aktivieren kann.

Soll ich die ganze Vorlage einfügen oder sie kürzen?

Beginnen Sie mit der vollständigen Vorlage. Sobald Sie sehen, welche Zeilen der Agent ignoriert, kürzen Sie. Kürzere Prompts funktionieren nur, nachdem Sie wissen, welche Einschränkungen Ihr Design-System tatsächlich benötigt.

Kann ich den gleichen Prompt für Make und den Design Agent verwenden?

Nein — Make erwartet Build/Prototyp-Sprache und verbraucht Credits anders. Verwenden Sie Design Agent-Vorlagen für Leinwand-Ebenen und Make-Vorlagen für interaktive Ausgabe. Sie zu mischen erzeugt verwirrte Ergebnisse.

Wie speichere ich Prompts als Skills?

Kopieren Sie Vorlagen 8–9 in Skill-Markdown-Dateien in die Skills-Bibliothek Ihres Teams. Rufen Sie mit /skill-name im Agent-Panel auf. Aktualisieren Sie Skills wenn sich Ihre Komponentennamen ändern — siehe unseren Skills-Leitfaden.

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.