CommunityImagegithub.com

Espace doré

Compose affiches, visuels sociaux, illustrations, schémas et icônes avec blanc, proportions, hiérarchie, typo et couleur, et livre un vrai fichier SVG ou bitmap.

Qu'est-ce que Espace doré ?

À utiliser pour une affiche, une image clé, une icône ou un schéma. Les contraintes de blanc, de proportion, de hiérarchie et de couleur s'appliquent pendant la création, puis le résultat est relu. On livre un SVG éditable ou un PNG, JPEG ou WebP, pas un prompt ni une critique sans fichier.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/guardyanz/golden-space/tree/HEAD/skills/golden-space

Installed? Explore more Image skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Demander à votre IA préférée

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

Documentation

Golden Space

Créez l'artefact visuel demandé avec une composition intentionnelle et une source modifiable lorsque c'est approprié. Respectez le contenu, la marque, le support, les dimensions et le style du brief. Lorsqu'on vous demande de réaliser une affiche ou une image, produisez l'artefact plutôt que de vous arrêter à des conseils de conception, un plan ou un prompt de génération d'image.

Choisir et livrer l'artefact

  • Livrez le format demandé par l'utilisateur : SVG modifiable, ou raster tel que PNG, JPEG, ou WebP. Ce sont des livrables finaux alternatifs ; aucun ne nécessite la livraison des deux. Lorsqu'aucun format n'est spécifié, choisissez SVG pour les œuvres adaptées au vectoriel et raster pour les travaux photographiques ou picturaux. Indiquez brièvement le choix lorsque c'est utile.
  • Pour les affiches adaptées au vectoriel, les graphiques pour réseaux sociaux, les illustrations plates, les diagrammes et les icônes, créez et enregistrez un fichier .svg complet par défaut. L'utilisateur n'a pas besoin de demander SVG séparément. Si le rendu est disponible, fournissez également un aperçu PNG sans remplacer le master modifiable. Une demande explicite pour un autre format a priorité.
  • Une affiche raster ou une illustration plate peut être composée sous forme de SVG intermédiaire et exportée avec un moteur de rendu disponible. Livrez le fichier raster demandé ; incluez sa source SVG uniquement si demandé ou utile pour la transmission. Ne modifiez jamais l'extension d'un fichier en remplacement du rendu ou de l'encodage du format demandé.
  • Pour la photographie, le photoréalisme ou les images picturales, appliquez les mêmes contraintes de composition via l'outil de génération ou d'édition d'image disponible. Lisez references/image-direction.md pour ce flux de travail. Livrez l'image raster demandée. Si SVG est également demandé, créez une interprétation vectorielle distincte lorsque c'est réalisable et identifiez toute perte de détail ; ne remplacez pas silencieusement le style visuel demandé.
  • Une image raster placée à l'intérieur d'un SVG est une composition hybride, pas une œuvre vectorielle entièrement modifiable. Proposez-la uniquement lorsque c'est pertinent, étiquetez clairement le raster intégré et conservez le texte vivant et les superpositions vectorielles séparées. Ne la présentez pas comme le master vectoriel portable décrit ci-dessous.
  • Utilisez le répertoire de sortie de l'utilisateur et un nom de fichier correspondant au format choisi, par exemple poster.svg ou poster.png. Écrivez le fichier lorsque les outils de fichier sont disponibles et liez-le dans la transmission. Si l'écriture de fichier n'est pas disponible, retournez le code SVG complet. Une balise de code est un repli, pas un substitut pour un fichier que les outils disponibles peuvent créer.

Établir la composition

Utilisez le brief fourni. Si des détails manquent, choisissez des valeurs par défaut raisonnables et indiquez-les brièvement. Ne demandez que lorsque la réponse manquante modifie sensiblement le résultat. Pour un design existant, préservez son objectif et son langage visuel utile.

Identifiez le message, l'élément focal, l'ordre de lecture, la taille de sortie et la plus petite taille d'affichage prévue. Avant de générer, formez une spécification de conception interne compacte : placement du point focal, proportion ou grille, marges de sécurité, relations d'espacement, rôles typographiques, palette et toute zone de copie protégée. Utilisez-la pour construire le SVG ou pour diriger l'outil d'image ; nommer des principes dans une explication finale est insuffisant. Pour des décisions proportionnelles et optiques concrètes, lisez references/composition.md.

  • Traitez le nombre d'or phi = (1 + sqrt(5)) / 2, environ 1.618, comme une relation optionnelle. Une division utilisable est approximativement 61.8% / 38.2% après les marges et les gouttières. Comparez-la avec des colonnes égales, des tiers ou une mise en page pilotée par le contenu. Conservez-la uniquement lorsque le contenu et l'équilibre optique en bénéficient. Ne prétendez jamais qu'un rapport prouve la beauté ou n'ajoutez pas de spirale uniquement pour signaler la sophistication.
  • Donnez un travail à l'espace blanc : séparer des sujets, connecter des éléments liés, protéger la lisibilité ou créer un point focal. L'espacement interne doit généralement être plus petit que l'espacement entre les groupes. N'imposez pas un pourcentage universel de toile vide.
  • Construisez la hiérarchie avec des différences délibérées de taille, de poids, de position et d'espace. Utilisez l'alignement et des intervalles répétés pour rendre les relations visibles. Ajustez les cercles, diagonales et lettres alignés géométriquement lorsqu'ils semblent décentrés.
  • Faites en sorte que la palette et la typographie servent le sujet. Gardez le corps du texte lisible à la taille de livraison ; ne réduisez pas le texte pour sauver une composition surchargée. N'inventez pas de copie pour remplir l'espace.
  • Pour les graphiques d'information et les interfaces, communiquez le sens avec des étiquettes ou des formes ainsi que la couleur. Vérifiez le contraste par rapport à l'arrière-plan réel. Les seuils de couleur et l'applicabilité se trouvent dans la référence de composition.

Construire le master SVG modifiable

Lisez references/svg-contract.md avant de générer ou d'éditer du SVG, y compris une source intermédiaire utilisée pour l'export raster. La valeur par défaut est un master modifiable statique, autonome et vectoriel uniquement. Cette section s'applique à la création SVG ; la sortie raster n'a pas besoin de se faire passer pour du contenu vectoriel modifiable.

  • Créez un document SVG complet, avec un espace de noms SVG et un viewBox correctement dimensionné. Pour un livrable final SVG, enregistrez et liez le fichier .svg. Ne remplacez jamais un bitmap enveloppé dans du SVG ou une capture d'écran d'aperçu.
  • Gardez les objets indépendants sélectionnables indépendamment. Utilisez des ID descriptifs uniques, des groupes sémantiques peu profonds, des formes primitives lorsque c'est approprié, et des chemins compacts uniquement là où les courbes l'exigent. Ne transformez pas un design entier en un chemin composé.
  • Conservez le texte sous forme de <text> / <tspan> vivant dans le master. Déclarez une famille de polices et un repli, et divulguez le risque de substitution. Une copie de distribution optionnelle vectorisée est un artefact séparé ; la vectorisation perd l'éditabilité du texte.
  • Préférez les attributs de présentation et les transformations simples. Évitez les dépendances externes, les scripts, le contenu raster intégré, le HTML, les animations, les effets de filtre et l'apparence pilotée par CSS dans le master portable. Utilisez des définitions de dégradé ou de clipping locales uniquement lorsqu'elles servent un objectif visible. Les fonctionnalités sensibles à la compatibilité nécessitent une inspection dans l'éditeur prévu, et non une affirmation de compatibilité non testée.
  • Conservez les ID, le texte vivant, les groupes et la précision utile lors du nettoyage d'un fichier existant. N'exécutez pas silencieusement une optimisation destructive ou n'aplatissez pas une source master.

Adaptez assets/starter.svg uniquement lorsque sa structure correspond au brief. Son ratio, son orientation, ses couleurs et son style sont des exemples, pas des valeurs par défaut à copier dans chaque sortie.

Vérifier et transmettre

Pour un SVG final ou intermédiaire, exécutez le vérificateur structurel fourni lorsque Python est disponible :

python <skill-directory>/scripts/check_svg.py artwork.svg

Corrigez les erreurs. Examinez chaque avertissement ; c'est une demande de révision, pas une preuve automatique d'un mauvais design. --strict échoue également sur les avertissements ; --json émet un rapport lisible par machine. Le vérificateur couvre un profil de création conservateur, pas tout SVG valide. Il ne mesure pas la qualité visuelle, le contraste, le clipping, la géométrie des chemins ou la fidélité entre éditeurs. Ne l'appelez pas un sanitisateur de sécurité.

Pour la livraison raster, vérifiez le format encodé réel, les dimensions en pixels, le rapport d'aspect et l'arrière-plan ou la transparence demandés. PNG ou WebP approprié peut préserver l'alpha ; JPEG nécessite un arrière-plan opaque délibéré. Inspectez la compression et la qualité des bords à la taille de livraison. N'envoyez pas un PNG ou un JPEG via le vérificateur SVG.

Avant la transmission, passez en revue le visuel réel par rapport à la spécification de conception :

  • Le sujet ou le message prévu est-il le point d'entrée, avec un ordre de lecture clair ?
  • Les marges de sécurité protègent-elles le contenu essentiel, avec un espace intentionnel autour du point focal ?
  • Les écarts intra-groupe et inter-groupes sont-ils distincts, sans tangences accidentelles ?
  • La proportion choisie correspond-elle au contenu sans le réduire ni l'encombrer ?
  • Le texte, les relations de couleur, les lignes de base et les poids de trait sont-ils lisibles et cohérents à la taille prévue, sans clipping accidentel ni lettrage inventé ?

Rendez le SVG à la taille de livraison et un aperçu plus petit lorsque c'est possible. Inspectez la sortie et corrigez les problèmes observés avant la livraison ; ne vous contentez pas de lister les règles suivies. Appliquez la même revue visuelle à la sortie raster. Les formules et les lints structurels ne peuvent pas garantir la qualité esthétique. Si un éditeur est disponible, ouvrez le master SVG et vérifiez que le texte et les formes représentatives peuvent être sélectionnés et modifiés indépendamment. Si le rendu ou la vérification par éditeur n'est pas disponible, signalez cette limite sans prétendre qu'elle a réussi.

Livrez le fichier réel dans le format choisi (ou le code SVG complet si l'écriture de fichier n'est pas disponible pour une tâche SVG) ainsi qu'une courte note sur la composition, les polices et les vérifications réellement effectuées. Incluez les dimensions exactes et la proportion choisie lorsque c'est pertinent. Gardez un aperçu séparé de la source. N'ajoutez pas d'essai de conception sauf demande. Respectez les transmissions SVG uniquement ou raster uniquement.

Skills associés