Communitygithub.com

MotionSites Prompt Capture

Verwenden, wenn der Benutzer die Erstellung einer Webseite (Landingpage, SaaS-Seite, Portfolio, Agenturseite, Hero-Bereich, etc.) anfordert und UI-Design erwähnt oder explizit nach Website-Prompts von motionsites.ai sucht. Besuchen Sie https://motionsites.ai, finden Sie die relevanteste Prompt-Vorlage für die Anfrage des Benutzers und liefern Sie den Prompt zusammen mit einem Optimierungsplan, der an den Tech-Stack des Benutzers angepasst ist.

Was ist MotionSites Prompt Capture?

Diese Fähigkeit ist ein spezialisierter Skill für KI-Agenten (wie Claude Code, Cursor, Codex), der den Workflow zur Erstellung von Website- und UI-Designs optimiert. Anstatt sofort Code zu generieren, besucht der Agent https://motionsites.ai, sucht nach passenden Prompt-Vorlagen (kategorisiert nach Seitentyp, visuellem Stil und Animationseffekten) und liefert einen maßgeschneiderten Optimierungsplan für das konkrete Projekt des Benutzers. Der Skill stellt sicher, dass Design und Entwicklung getrennt betrachtet werden, und vermeidet so generische oder ineffiziente Ergebnisse. Er unterstützt gängige Tech-Stacks wie React/Next.js mit Tailwind CSS und shadcn/ui, bietet aber auch Anleitungen zur Migration von Prompts, die für Lovable, Bolt, Cursor oder Claude geschrieben wurden. Der Optimierungsplan umfasst die Anpassung des Tech-Stacks, die Implementierung von Animationen (GSAP ScrollTrigger, Lenis), visuelle Assets, Teststrategien und Risikohinweise. Der Agent fordert die Bestätigung des Benutzers an, bevor er mit der Code-Implementierung beginnt, wodurch ein menschen-in-der-Schleife (Human-in-the-Loop) Ansatz gewährleistet wird. Der Skill ist ideal für Entwickler und Designer, die hochwertige, individuelle Webseiten mit modernem UI und reibungslosen Animationen erstellen möchten, ohne bei Null anfangen zu müssen.

Funktioniert mit✓Claude Code~Codex CLI✓Cursor
Part ofDesign & UI
npx skills add bingo33-gif/motionsites-promptcapture
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht MotionSites Prompt Capture?

Ziel

Wenn der Benutzer eine Website-/UI-Design-Anforderung stellt, besuche motionsites.ai, finde passende Prompt-Vorlagen und gib einen Optimierungsplan für das Projekt des Benutzers aus. Die Ausgabe dieses Skills ist „Empfohlener Prompt + Optimierungsplan“, nicht direkt Code.

Arbeitsablauf

1. Anforderungen extrahieren

Zuerst die wichtigsten Informationen ermitteln. Bei fehlenden Angaben mit sinnvollen Standardwerten fortfahren, nicht wiederholt nachfragen:

  • Seitentyp: Landingpage / SaaS-Website / Portfolio / Agenturseite / Hero-Bereich / E-Commerce-Seite usw.
  • Visueller Stil: Dunkelmodus, Glas-Effekt, Verlauf, Minimalismus, 3D, Partikel-Hintergrund usw.
  • Animationsanforderungen: Scroll-Animationen, Parallaxe, sanftes Scrollen, 3D-Interaktionen usw.
  • Inhaltsstruktur: Welche Abschnitte werden benötigt (Navigation, Hero, Funktionen, Preise, Footer usw.)
  • Tech-Stack: Standardmäßig React/Next.js + Tailwind + shadcn/ui (Build-Web-Apps-Plugin-Umgebung); wenn der Benutzer einen anderen Stack angibt, diesen verwenden.

2. Auf motionsites.ai zugreifen

  • Bevorzugt den In-App-Browser verwenden (falls bereits geöffnet oder verfügbar), um https://motionsites.ai/ zu öffnen und die Kategorien zu durchsuchen (SaaS, Agentur, Portfolio, Landingpages, Hero-Bereiche usw.).
  • Wenn der Browser nicht verfügbar ist, open_page oder eine Websuche verwenden, um Seiteninformationen zu erhalten. Beachte, dass die Seite eine JS-gerenderte SPA ist; statisches Abrufen liefert möglicherweise keine Kategorieinhalte. In diesem Fall darauf hinweisen, dass die Verwendung eines Browsers genauer wäre.
  • Nach den drei Dimensionen „Typ + Stil + Animation“ filtern und 1–3 am besten passende Prompts finden.

3. Empfohlenen Prompt ausgeben

  • Den vollständigen Originaltext des ausgewählten Prompts zeigen, ohne Umschreiben oder Übersetzen.
  • Die Begründung für die Auswahl jedes Prompts angeben (warum er zur Anforderung des Benutzers passt).
  • Wenn keine exakte Übereinstimmung gefunden wird, den nächstgelegenen auswählen und die Unterschiede klar benennen; niemals nicht existierende Prompts erfinden.

4. Optimierungsplan geben

Die Optimierungspunkte auf das tatsächliche Projekt des Benutzers ausrichten:

  • Tech-Stack-Anpassung: Der Prompt ist standardmäßig auf Lovable/Bolt/Cursor/Claude ausgerichtet; erklären, wie er auf den Stack des Benutzers übertragen werden kann (Standard: React + Tailwind + shadcn/ui; Komponentenaufteilung, Wiederverwendung von Design-Tokens).
  • Animationsimplementierung: motionsites verwendet oft GSAP ScrollTrigger + Lenis für sanftes Scrollen; wichtige Kompromisse bei der Umsetzung nennen (Leistung, Fallbacks, Barrierefreiheit, prefers-reduced-motion).
  • Visuelle Assets: Wenn Hero-Bilder, Texturen oder Symbole benötigt werden, erklären, dass sie mit imagegen generiert oder aus den vom Prompt geforderten Ressourcen bezogen werden können.
  • Validierungsmethode: Nach der Implementierung mit Playwright / frontend-testing-debugging eine Browser-Validierung durchführen (responsives Design, Animationen, Konsolenfehler).
  • Risikohinweise: Auf Teile des Prompts hinweisen, die möglicherweise nicht für das aktuelle Projekt geeignet sind (Abhängigkeiten, Leistungsaufwand, Platzhalterinhalte).

5. Abschluss

Zum Schluss den Benutzer fragen, ob mit der Implementierung nach dem Optimierungsplan begonnen werden soll. Keinen Code schreiben, bevor der Benutzer zustimmt.

Beispiele für Auslöser

  • „Ich brauche eine Website mit UI-Design“
  • „Ich möchte eine SaaS-Landingpage erstellen, suche mir bitte einen Prompt von MotionSites“
  • „Erstelle mir eine Portfolio-Seite mit Hero-Animation und gib mir erstmal das Konzept“

Hinweise

  • Nicht den Schritt „Prompt finden“ überspringen und direkt Code schreiben.
  • Den Originaltext des Prompts unverändert lassen; der Optimierungsplan bezieht sich auf das Projekt des Benutzers und ändert den Prompt selbst nicht, es sei denn, der Benutzer fordert es.
  • motionsites.ai bevorzugt mit einem echten Browser durchsuchen, bevor eine Auswahl getroffen wird, um zu vermeiden, aus dem Gedächtnis zu raten.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community