Communitygithub.com

AbdlrahmanSaberAbdo/mockup

Créez rapidement des options visuelles pour une entreprise (directions de logo, palettes, pages d'atterrissage, écrans d'application, pages de boutique, menus, signalétique, publications) côte à côte, afin que l'utilisateur puisse comparer et choisir.

Qu'est-ce que mockup ?

Cette compétence permet de générer rapidement des options visuelles variées pour une entreprise, comme des directions de logo, des palettes de couleurs, des pages d'atterrissage, des écrans d'application, des pages de boutique, des menus, des flyers, de la signalétique ou des modèles de publications. L'utilisateur peut ainsi comparer visuellement plusieurs propositions côte à côte sur une même page ou toile, et choisir la meilleure. Elle prend en charge les instructions d'un document hub (Brief) et respecte les spécifications fournies (palette exacte, images de référence, audience, etc.). La compétence est conçue pour fonctionner avec des plateformes comme Claude Code, Cursor ou Codex, en produisant des compositions visuelles directement dans le chat (via des schémas, maquettes ou descriptions structurées) ou en générant du code HTML/CSS pour une visualisation plus poussée.

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

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait mockup ?

À utiliser lorsque l'utilisateur doit choisir en regardant : directions de logo, palette, page d'atterrissage, écrans d'application, page de boutique, menu ou flyer, modèles de publications. Fonctionne avec ou sans document hub.

Étapes

  1. Lisez le Brief du document hub pour obtenir le nom, le public cible, l'ambiance, la palette, le logo et les éléments à éviter. Si l'utilisateur a fourni des images de référence ou une palette, utilisez les couleurs exactes (échantillonnez les valeurs hexadécimales des images lorsque c'est possible).
  2. Planifiez 3 à 4 directions vraiment différentes, pas de petites variations, et chaque version dont elles ont besoin (par exemple, mobile et desktop ; arabe et anglais ; formats carré et story).
  3. Disposez-les côte à côte sur une seule toile ou page, en lignes, pour qu'elles se comparent d'un coup d'œil. Utilisez le vrai contenu du brief et des espaces réservés comme [PRIX] pour les informations manquantes.
  4. Vérifiez le contraste : 4.5:1 pour le texte du corps, 3:1 pour les grands textes. Si une paire de palette échoue, nommez-la et dites comment l'utiliser à la place (par exemple, décoration uniquement).
  5. Une ligne par direction : l'idée, et sa principale force ou faiblesse. Demandez à l'utilisateur de choisir.
  6. Enregistrez le choix avec to-brief et ajoutez des suivis avec to-tasks (fichiers finaux, une version plate, un favicon).

Règles

  • Ne copiez jamais le logo, les personnages ou le design propriétaire d'une autre marque.
  • Ce sont des directions ; dites quand le travail final nécessite un fichier vectoriel ou un designer.
  • Les images générées et les effets 3D échouent à petite taille. Prévoyez toujours une version plate pour les icônes.

Individual skills in this repo

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

Skills associés