Communitygithub.com

AbdlrahmanSaberAbdo/mockup

Schnelle visuelle Optionen für ein Unternehmen erstellen (Logo-Richtungen, Paletten, Landing Pages, App-Bildschirme, Shop-Seiten, Menüs, Beschilderungen, Beiträge) nebeneinander, damit der Benutzer vergleichen und auswählen kann.

Was ist mockup?

Diese Fähigkeit ermöglicht es einem KI-Agenten, visuelle Mockups für Unternehmen zu erstellen, die mehrere Designrichtungen nebeneinander präsentieren, damit Benutzer sie vergleichen und auswählen können. Sie ist nützlich für die schnelle Erstellung von Optionen für Logos, Farbpaletten, Landing Pages, App-Bildschirme, Menüs, Beschilderungen und mehr. Die Fähigkeit funktioniert mit oder ohne ein Hub-Dokument und liest bei Bedarf die Kurzbeschreibung für Name, Zielgruppe, Stimmung, Palette und Logo. Der Agent plant 3–4 wirklich unterschiedliche Richtungen, ordnet sie auf einer Leinwand oder Seite in Reihen an und prüft den Kontrast auf Barrierefreiheit. Nach der Auswahl zeichnet er die Entscheidung auf und fügt Folgeaufgaben hinzu, z. B. für finale Dateien oder flache Versionen. Die Fähigkeit vermeidet kopierte Markenelemente und empfiehlt Designer für finale Arbeiten.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AbdlrahmanSaberAbdo/business-skills/tree/main/skills/mockup

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht mockup?

Verwenden, wenn der Benutzer durch Anschauen wählen soll: Logo-Richtungen, eine Palette, eine Landing Page, App-Bildschirme, eine Shop-Seite, ein Menü oder Flyer, Beitragsvorlagen. Funktioniert mit oder ohne Hub-Dokument.

Schritte

  1. Lesen Sie die Kurzbeschreibung des Hub-Dokuments für Name, Zielgruppe, Stimmung, Palette, Logo und was zu vermeiden ist. Wenn der Benutzer Referenzbilder oder eine Palette angegeben hat, verwenden Sie die exakten Farben (möglichst Hex-Werte aus Bildern extrahieren).
  2. Planen Sie 3–4 Richtungen, die sich wirklich unterscheiden, nicht kleine Variationen, und jede benötigte Variante (z. B. Mobil und Desktop; Arabisch und Englisch; quadratische und Story-Formate).
  3. Ordnen Sie sie nebeneinander auf einer Leinwand oder Seite in Reihen an, damit sie auf einen Blick vergleichbar sind. Verwenden Sie echten Text aus der Kurzbeschreibung und Platzhalter wie [PREIS] für fehlende Angaben.
  4. Prüfen Sie den Kontrast: 4,5:1 für Fließtext, 3:1 für großen Text. Wenn ein Palettenpaar nicht besteht, benennen Sie es und sagen Sie, wie es stattdessen verwendet werden soll (z. B. nur zur Dekoration).
  5. Eine Zeile pro Richtung: die Idee und ihre Hauptstärke oder -schwäche. Bitten Sie den Benutzer, auszuwählen.
  6. Zeichnen Sie die Auswahl mit to-brief auf und fügen Sie Folgemaßnahmen mit to-tasks hinzu (endgültige Dateien, eine flache Version, ein Favicon).

Regeln

  • Kopieren Sie niemals das Logo, die Figuren oder das geschützte Design einer anderen Marke.
  • Dies sind Richtungen; sagen Sie, wenn für die endgültige Arbeit eine Vektordatei oder ein Designer benötigt wird.
  • Generierte Bilder und 3D-Effekte versagen bei kleinen Größen. Planen Sie immer eine flache Version für Symbole.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Verwandte Skills