83.3K+Download
Zur Nutzungsanleitung springen
imagegen-frontend-mobilevon Leonxlnx

ImageGen Frontend Mobile Skill.

Ein Claude Code- und Codex-Skill für Mobile-App-Design: hochauflösende Mobile-Screen-Konzepte und Flows über Bilderzeugung.

  • Mobile Apps
  • Image
OpenDesign herunterladenAnleitung ansehen
Leonxlnx/taste-skill · skills/imagegen-frontend-mobile/SKILL.mdSKILL.md
--- name: imagegen-frontend-mobile description: Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. PLATFORM MODE RULE ## 3. MANDATORY SCREEN-FIRST RULE ## 4. GENERATE ENOUGH SCREENS RULE ## 5. DO NOT CROP OLD IMAGES RULE ## 6. APP DESIGN BIBLE RULE
Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 40.285 Zeichen insgesamt

01 Was es tut

Was der imagegen-frontend-mobile Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Dieser Skill generiert hochwertige Bilder für mobile App-Bildschirme für iOS, Android und plattformübergreifende Produkte, darunter Onboarding-Abläufe, Dashboards, Profilbildschirme, Auth-Abläufe, E-Commerce-, Fintech-, Gesundheits-, Produktivitäts- und Social-Apps. Er legt Wert auf klare Hierarchie, lesbaren Text, starke Konsistenz über mehrere Bildschirme hinweg, kontrollierte Farbpaletten, unverwechselbare kreative Ausrichtung, texturierte Oberflächen, bildgeführte Komposition und individuelle Iconografie.

Bildschirme erscheinen standardmäßig in dezenten, hochwertigen iPhone- oder ähnlichen Telefon-Mockups mit sichtbaren Rahmen. Der Skill generiert ausschließlich Bilder – kein Code, keine Implementierung, keine Bild-zu-Code-Umwandlung. Er nutzt Konfigurationswerte wie DESIGN_VARIANCE: 8, ART_DIRECTION: 9, TEXT_READABILITY_PRIORITY: 10 und CONSISTENCY_STRENGTH: 10, um generischen KI-Mobile-Ausgabemustern aktiv entgegenzuwirken, darunter unechte Fintech-Dashboards, winzigen unlesbaren Text, generische Lila-Blau-Paletten und inkonsistente Bildschirmsätze.

Was er erzeugt

  • Ein oder mehrere Bilder mobiler Bildschirme in klaren Telefon-Mockups mit sichtbaren Gerätekanten, wobei der Hauptfokus auf dem App-Inhalt selbst bleibt
  • Optional zusätzliche Detailansichten oder eigenständige neue Bildschirmbilder, wenn ein Detail unklar ist, gezielt generiert statt aus größeren Bildern zugeschnitten
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Plattformmodus zuerst wählen

    Wählen Sie iOS-native Premium, Android-native Premium oder plattformübergreifende neutrale Premium-Variante, um Navigationsmuster, den Umgang mit sicheren Bereichen und das Chrome-Verhalten festzulegen, bevor Sie Bildschirme generieren.

  2. 02
    Interne Design-Bibel festlegen

    Legen Sie beim Generieren mehrerer Bilder für dieselbe App einen konsistenten Plattformmodus, Gerätestil, eine Farblogik, Typografie-Stimmung, ein Abstandssystem, Eckenradien, einen Icon-Stil und ein Navigationsmodell fest und halten Sie diese über alle Bildschirme hinweg konsistent.

  3. 03
    Visuelles Ausrichtungssystem wählen

    Wählen Sie ein Theme-Paradigma, einen Typografie-Charakter, eine Struktur-Tendenz, eine Art-Direction-Tendenz für Bilder, eine Texturbehandlung, eine Palettenlogik, genau 4 charakteristische Komponenten, genau 2 dekorative Assets und genau 2 durch Bewegung implizierte Sprachen, um repetitive Ergebnisse zu vermeiden.

  4. 04
    Frische Detail-Renderings bei Bedarf erzeugen

    Wenn ein Screen oder ein Detail eine eigene Ansicht benötigt, erzeugen Sie ein neues eigenständiges Screen-Bild, statt es aus einem zuvor generierten größeren Bild zuzuschneiden, um Abstände, Proportionen und Typografie zu erhalten.

  5. 05
    Qualitätsprüfung durchführen

    Prüfen Sie vor der Finalisierung 27 Kriterien, darunter, ob es sich wie eine echte mobile App und nicht wie eine Website anfühlt, ob sichere Bereiche eingehalten werden, ob der erste Screen aufgeräumt ist, ob der Text lesbar ist, ob genügend Screens generiert wurden und ob der Flow stimmig ist sowie das Mockup-Framing saubere ist.

02 Finden Sie Ihren Favoriten

Wann Sie das imagegen-frontend-mobile Skill verwenden

Verwenden Sie den imagegen-frontend-mobile-Skill in Claude Code oder Codex, wenn die Aufgabe Mobile-App-Design dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • iOS-, Android- und plattformübergreifende Mobile-Produkte, die hochwertige, app-native Screen-Konzepte mit klarer Hierarchie und starker Konsistenz über mehrere Screens benötigen

Grenzen kennen

  • eine Einstellungsansicht aus einem größeren Board ausschneiden
  • winzigen Onboarding-Text aus einer mehrseitigen Collage ausschneiden
  • einen kleinen Kartenausschnitt aus einem größeren Bildschirm herauskropfen, um ihn zu inspizieren
  • sich auf Freisteller verlassen, wenn sie Abstände, Proportionen oder Typografie verzerren

Was Sie bereitstellen sollten

  • AnforderungenBilderzeugungsdienst – wie in der SKILL.md als erforderlich genannt.

03 Innerhalb des Skills

Regeln, die der imagegen-frontend-mobile Skill Claude Code und Codex vorgibt

5 konkrete Anweisungen, Standardwerte und Grenzen, die SKILL.md für den Agenten festlegt — der Teil der Datei, der das Ergebnis verändert.

  1. Nur Bildgenerierung

    Wechseln Sie nicht in den Coding-Modus, beschreiben Sie keinen Code und erstellen Sie kein SwiftUI, React Native, Flutter oder HTML. Generieren Sie ausschließlich Mobile-Screen-Bilder und Screen-Flow-Bilder.

  2. Priorität der Textlesbarkeit

    TEXT_READABILITY_PRIORITY: 10 bedeutet, dass sich Text bei normaler Betrachtungsgröße nie zu klein anfühlen darf. Wirkt der Text klein, ist das Design noch nicht fertig.

  3. Disziplin bei der Screen-Anzahl

    IMAGE_GENERATION_EAGERNESS: 10 bedeutet, bei der Screen-Anzahl nicht nachlässig zu sein. Wenn mehr Screens den Flow verbessern würden, generieren Sie mehr Screens.

  4. Standardmäßige Präsenz eines Phone-Mockups

    Präsentieren Sie die Mobile-UI standardmäßig innerhalb eines sauberen Phone-Mockups mit sichtbarem Geräterahmen.

  5. Disziplin bei der Farbpalette

    COLOR_PALETTE_DISCIPLINE: 10 erfordert stets eine klare, kontrollierte, hochwertige Palettenlogik.

04 In Betrieb nehmen

imagegen-frontend-mobile in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

imagegen-frontend-mobile zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-mobile

Allgemeine skills-CLI-Form für skills/imagegen-frontend-mobile/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste Mobile-App-Design-Aufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt
Design a 5-screen onboarding flow for a premium fitness tracking app targeting iOS users. Include a welcome screen with hero imagery, permissions requests for health data and notifications, personalized goal-setting with activity level selection, and a first dashboard view showing progress rings and weekly activity. Use calm wellness aesthetics with controlled green and slate palette, generous breathing room, and motivating lifestyle photography with fade-to-transparent treatments behind headlines.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • Fühlt sich das wie eine echte mobile App an und nicht wie eine Website in einem Handy? Werden sichere Bereiche visuell eingehalten?
  • Gibt es genügend Screens für den angeforderten Flow? Wurden aus Nachlässigkeit zu wenige Screens generiert? Wurde bei einem unklaren Detail ein neues Detail-Rendering erstellt?
  • Ist das Phone-Mockup-Framing sauber und auf allen Seiten gleichmäßig gepolstert? Ist der Text angenehm lesbar und nicht zu klein?

In OpenDesign ist imagegen-frontend-mobile gebündelt: Plugins → Skills, wählen Sie es in der oberen Leiste aus.

OpenDesign herunterladenQuickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branch main
Skill-Datei
skills/imagegen-frontend-mobile/SKILL.md Inhalts-Checksum bei Verifikation erfasst; Commit ccbc156
License
MIT Aus LICENSE.
Repository-Sterne
86.946 GitHub-Snapshot vom 14.09.2026 für das gesamte Leonxlnx/taste-skill-Repository, das 11 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für imagegen-frontend-mobile.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. KERNDIREKTIVE: HOCHWERTIGE ART DIRECTION FÜR MOBILE-APP-BILDERLegt die Rolle als erstklassiger Art Director für Mobile-Produktdesign fest, der hochwertige, app-native Screen-Bilder erzeugt, keine generischen Mockups
  2. AKTIVE BASISKONFIGURATIONLegt 19 Konfigurationswerte fest, darunter DESIGN_VARIANCE: 8, ART_DIRECTION: 9, TEXT_READABILITY_PRIORITY: 10, CONSISTENCY_STRENGTH: 10
  3. PLATTFORM-MODUS-REGELZuerst iOS-nativ Premium, Android-nativ Premium oder plattformübergreifend Premium-neutral wählen und dabei kohärent bleiben
  4. PFLICHTREGEL: BILDSCHIRM ZUERSTBildschirmbilder oder Bildschirm-Sets direkt als Hauptlieferobjekt erzeugen, nicht nur mit Text antworten
  5. REGEL: GENÜGEND BILDSCHIRME ERZEUGENBei der Anzahl der Screens nicht nachlässig sein, so viele erzeugen wie angefragt oder für einen glaubwürdigen Ablauf nötig
  6. REGEL: KEINE ALTEN BILDER ZUSCHNEIDENFür Details neue, eigenständige Bildschirmbilder erzeugen, statt sie aus zuvor erzeugten größeren Bildern zuzuschneiden
  7. APP-DESIGN-BIBEL-REGELPlattform, Farbpalette, Typografie, Abstände, Icons und Textur über alle Screens desselben App-Sets hinweg konsistent festlegen
  8. REGEL: KONSISTENZ ÜBER MEHRERE SCREENSMarken-Stimmung, Typ-Hierarchie, Farbpalette, Navigation, Komponentenfamilie und Oberflächenbehandlung über alle Screens hinweg konsistent halten
  9. REGEL: LOGISCHER ABLAUFDie Reihenfolge der Screens muss als glaubwürdige Nutzerreise Sinn ergeben, nicht als zufällige, unzusammenhängende Screens
  10. REGEL: MOCKUP-DARSTELLUNG PER STANDARDStandardmäßig die UI innerhalb eines klaren Phone-Mockups mit sichtbarem Geräterand darstellen, nur auf ausdrücklichen Wunsch entfernen
  11. REGEL: GERÄTE-MOCKUP-RAHMENEinen einheitlichen Gerätestil verwenden, den Maßstab konsistent halten, das Mockup zentrieren, den äußeren Abstand ausgleichen und den Rahmen sichtbar und klar halten
  12. STIL-VARIATIONS-ENGINETheme-Paradigma, typografischen Charakter, strukturelle Ausrichtung, Bild-Art-Direction, Textur, Farbpalettenlogik, 4 charakteristische Komponenten und 2 dekorative Assets wählen, um wiederholte Ergebnisse zu vermeiden
Die eigene Beschreibung des Skills
„Elite-Skill zur Bildgenerierung mobiler Apps für hochwertige, app-native Screen-Konzepte und Flows. Konzipiert für iOS, Android und plattformübergreifende mobile Produkte. Priorisiert klare Hierarchie, angenehm lesbare Texte, starke Multi-Screen-Konsistenz, kontrollierte Farbpaletten, nicht-generische kreative Richtung, texturierte Oberflächen, bildgeführte Komposition, geschmackvolle Custom-Ikonografie und saubere Phone-Mockup-Rahmen. Standardmäßig sollten Screens innerhalb eines dezenten Premium-iPhone- oder ähnlichen Phone-Mockups mit sichtbarem Rahmen gezeigt werden, während der Fokus auf dem App-Content selbst liegt. Dieses Skill generiert nur Bilder. Es schreibt keinen Code."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 40.285 Zeichen. Die vollständige Datei auf GitHub lesen.

ImageGen Frontend Mobile

imagegen-frontend-mobile für eine echte Mobile-App-Design-Aufgabe ausführen.

Das imagegen-frontend-mobile Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie das Skill unter Plugins → Skills aus, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladenAlle Skills durchsuchen
Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-mobile