mubasildesign/saas-landing-page-forge

SaaS Landing Page Forge

Erstellen Sie eine polierte, responsive SaaS-Landingpage in der Figma-Datei des Benutzers. Behandeln Sie den Inhalt, die Produktnachweise, das Markensystem und das vorhandene Figma-System des Benutzers als Quelle der Wahrheit. Generische Design-Richtlinien haben niemals Vorrang.

Beginnen Sie mit der Aufnahme

Lesen Sie references/intake-and-planning.md. Fragen Sie die Eingaben in einer kompakten Checkliste ab, bestätigen Sie, was bereits vorhanden ist, und trennen Sie fehlende Essentials von optionalen Eingaben.

Blockieren Sie nicht auf behebbaren Lücken. Fahren Sie mit gekennzeichneten Annahmen und Platzhaltern fort, wenn der Benutzer zustimmt oder Sie bereits gebeten hat, fortzufahren. Erfinden Sie niemals Produktfunktionen, Preise, Nachweise, Kundenlogos, Testimonials, Metriken, Compliance-Behauptungen oder Markenregeln.

Ein gültiges Figma-Ziel und ein angeschlossener MCP mit geeigneten Schreibwerkzeugen sind erforderlich, um die Datei zu bearbeiten. Fehlt eines davon, erstellen Sie das Design-Briefing und den Asset-Plan und geben Sie dann den genauen Schritt an, der erforderlich ist, um die Figma-Produktion zu ermöglichen.

Arbeiten Sie in dieser Reihenfolge

1. Preflight: Inspizieren Sie die verfügbaren Figma-MCP-Tools, öffnen Sie das bereitgestellte Ziel, bestimmen Sie den Bearbeitungsumfang und inventarisieren Sie die vorhandenen Stile, Variablen, Komponenten, Raster und benachbarten Frames. Befolgen Sie references/figma-mcp-workflow.md.
2. Briefing: Fassen Sie die Zielgruppe, das Angebot, die primäre Conversion, die Botschaft, die Nachweise, die Assets, die Einschränkungen, die fehlenden Eingaben und die Annahmen zusammen. Holen Sie nur für Entscheidungen eine Bestätigung ein, die das Ergebnis wesentlich verändern.
3. Content-Architektur: Bewahren Sie genehmigte Texte und organisieren Sie sie in einen klaren Conversion-Pfad. Verwenden Sie references/conversion-and-content.md. Bieten Sie Textänderungen separat an; schreiben Sie niemals stillschweigend genehmigte Inhalte um.
4. Kreative Richtung: Leiten Sie eine kohärente visuelle Idee aus der Marke und dem Produkt ab. Verwenden Sie bei Bedarf references/visual-direction.md. Wenn die Richtung wirklich offen ist, präsentieren Sie bis zu drei verschiedene Optionen und empfehlen Sie eine, bevor Sie mit dem Bau beginnen.
5. Figma-Grundlagen: Nutzen Sie das Dateisystem, wenn geeignet. Andernfalls erstellen Sie ein kleines lokales System aus Variablen/Stilen, Rastern, Typografie-Hierarchie, Abständen, Radien und wiederverwendbaren Komponenten.
6. Bauen: Erstellen Sie die Desktop-Landingpage mit echten Inhalten und Produktscreens. Erstellen Sie responsive Tablet-/Mobile-Varianten oder explizites Breakpoint-Verhalten wie gewünscht. Verwenden Sie references/responsive-and-motion.md.
7. Überprüfung und Reparatur: Führen Sie references/design-qa.md aus, korrigieren Sie wesentliche Probleme in der Datei und inspizieren Sie dann die betroffenen Frames erneut.
8. Übergabe: Melden Sie genaue Seiten-/Frame-Namen, wiederverwendbare Komponenten und Stile, responsive Varianten, Bewegungsanmerkungen, Annahmen/Platzhalter, ungelöste Eingaben und verbleibende Risiken.

Figma-Betriebsregeln

• Verwenden Sie nur Tools, die der angeschlossene Figma-MCP tatsächlich bereitstellt. Behaupten Sie niemals, eine Bearbeitung, ein Rendering oder eine Inspektion sei erfolgreich gewesen, ohne Werkzeugbeweise.
• Inspizieren Sie vor dem Schreiben. Nach einem Schreibvorgang inspizieren Sie die resultierenden Knoten oder das Rendering, bevor Sie fortfahren.
• Überschreiben oder löschen Sie keine nicht zusammenhängenden Arbeiten. Wenn das Ziel mehrdeutig ist, fragen Sie, wo gearbeitet werden soll, oder bitten Sie um Genehmigung, um einen klar benannten Arbeitsbereich/Frame zu erstellen.
• Bevorzugen Sie native editierbare Ebenen, Auto-Layout, Komponenten, Varianten, Variablen, Textstile und Effekte gegenüber flachen Bildern.
• Halten Sie Produkt-Screenshots originalgetreu: Bewahren Sie das Seitenverhältnis, schneiden Sie sie absichtlich zu und zeichnen Sie sie niemals so neu, dass sie eine nicht vorhandene Funktionalität implizieren.
• Verwenden Sie stabile, beschreibende Namen. Vermeiden Sie "Frame 123", "Group 5" oder dekorative Gruppierung ohne Layout-Zweck.
• Ändern Sie keine Freigabe-, Berechtigungs-, Veröffentlichungs-, Eigentums- oder Bibliotheksstatus.
• Wiederholen Sie bei einem fehlgeschlagenen Schreibvorgang die Inspektion der Datei, bevor Sie es erneut versuchen, damit ein Teilerfolg keine Duplikate erzeugt.

Qualitätsstandard

Die Seite muss innerhalb des ersten Viewports kommunizieren, was das Produkt tut, für wen es ist, warum es glaubwürdig ist und welche Aktion auszuführen ist. Verwenden Sie einen dominanten CTA, eine kohärente Hierarchie, disziplinierte Typografie und Abstände, zugänglichen Kontrast, nur echte Nachweise und eine visuelle Idee, die mit dem Produkt verbunden ist – nicht mit generischer SaaS-Dekoration.

Bewegung ist optional und zweckmäßig. Spezifizieren Sie sie nur, wenn sie Aufmerksamkeit, Verständnis, Feedback, Kontinuität oder Markenausdruck verbessert. Fügen Sie immer Verhalten für reduzierte Bewegung hinzu.

Umfangsgrenze

Dieser Skill erzeugt ein Figma-Landingpage-Design und eine implementierungsbewusste Übergabe. Er kann Verhalten, Assets und responsive Regeln annotieren, generiert aber keinen produktiven Frontend-Code, es sei denn, der Benutzer fordert dieses Deliverable separat an.

Für die Herkunft und das Fähigkeitsaudit hinter diesem kombinierten Skill siehe references/source-coverage.md.