aubarcito48/portfolio

Générer un Design

Créez de nouveaux écrans de design à partir de descriptions textuelles, d'images ou de maquettes, éditez des écrans existants avec des prompts et des tokens de système de design, et générez des variantes de design à l'aide de Stitch MCP.

[!NOTE] Reportez-vous à votre prompt système pour savoir comment gérer les préfixes des outils MCP mentionnés dans cette compétence (par exemple list_projects, generate_screen_from_text, edit_screens).

🎨 Pipeline d'Amélioration des Prompts

Avant d'appeler tout outil de génération ou d'édition Stitch, vous DEVEZ améliorer le prompt de l'utilisateur.

1. Analyser le Contexte

• Projet : Utilisez list_projects pour trouver le projectId approprié. Si aucun projet adapté n'existe, créez-en un avec create_project.
• Système de Design : Vérifiez si un système de design existe pour le projet via list_design_systems. S'il existe, les tokens de design (couleurs, polices, arrondis) sont déjà appliqués au niveau du projet — n'incluez AUCUNE instruction de couleur, police ou thème dans le prompt de génération. S'il n'en existe pas, déléguez d'abord à la compétence manage-design-system avant de générer des écrans.

2. Affiner la Terminologie UI/UX

Consultez Design Mappings pour remplacer les termes vagues.

• Vague : "Faire un joli en-tête"
• Professionnel : "Barre de navigation fixe avec effet de verre dépoli et logo centré"

Utilisez Prompting Keywords pour les noms de composants, les palettes d'adjectifs, les rôles de couleurs et les descriptions de formes.

3. Structurer le Prompt Final

Formatez le prompt amélioré pour Stitch. Concentrez-vous exclusivement sur la mise en page, le contenu et la structure — n'incluez jamais de couleurs, polices ou instructions de thème (celles-ci sont gérées par la compétence manage-design-system au niveau du projet).

Pour les nouveaux écrans, utilisez ce modèle :

[But général et intention de l'utilisateur pour la page]

**PLATEFORME :** [Web/Mobile], [Desktop/Mobile]-first

**STRUCTURE DE LA PAGE :**
1. **En-tête :** [Description de la navigation et de l'identité]
2. **Section Hero :** [Titre, sous-texte et CTA principal]
3. **Zone de Contenu Principal :** [Détail des composants]
4. **Pied de Page :** [Liens et copyright]

Pour les éditions, soyez précis sur ce qu'il faut changer :

• Emplacement : "Changez le [bouton principal] dans la [section hero]..."
• Visuels : "...en un bleu plus foncé (#004080) et ajoutez une ombre légère."
• Structure : "Ajoutez un bouton secondaire à côté du bouton principal avec le texte 'En savoir plus'."

[!CAUTION] N'incluez PAS de codes hexadécimaux, de noms de polices, de palettes de couleurs, de valeurs d'arrondi ou de tokens de système de design dans un prompt de génération. Ceux-ci sont appliqués au niveau du projet par la compétence manage-design-system et entreront en conflit s'ils sont dupliqués. (Pour les prompts d'édition, les codes hexadécimaux sont acceptables pour des ajustements de couleur précis.)

4. Présenter les Résultats de l'IA

Après chaque appel d'outil, remontez toujours les outputComponents (Description textuelle et Suggestions) à l'utilisateur.

Consultez examples/enhanced-prompt.md pour un exemple complet d'amélioration de prompt avant/après.

---

Étapes

Déterminer le Mode

Décidez du flux à utiliser en fonction de la demande de l'utilisateur :

• L'utilisateur souhaite créer à partir d'une description textuelle → Flux Générer à partir du Texte
• L'utilisateur fournit une image, une capture d'écran ou une maquette → Flux Générer à partir d'une Image
• L'utilisateur souhaite modifier un écran existant → Flux Édition
• L'utilisateur souhaite des variantes de mise en page/couleur/contenu → Flux Générer des Variantes

---

Flux Générer à partir du Texte (Nouvel Écran)

1. Améliorer le Prompt Utilisateur

Appliquez le Pipeline d'Amélioration des Prompts ci-dessus.

2. Identifier le Projet

Utilisez list_projects pour trouver le projectId approprié s'il n'est pas déjà connu.

3. Générer l'Écran

Appelez l'outil generate_screen_from_text avec le prompt amélioré et l'ID du designSystem (s'il a été trouvé à l'étape 1).

{
  "projectId": "...",
  "prompt": "[Votre Prompt Amélioré]",
  "designSystem": "assets/...", // Optionnel : à passer s'il a été trouvé à l'étape 1
  "deviceType": "DESKTOP"  // Options : MOBILE, DESKTOP, TABLET
}

4. Présenter le Retour de l'IA

Affichez toujours la description textuelle et les suggestions provenant de outputComponents à l'utilisateur.

5. Télécharger les Assets de Design

Après la génération, téléchargez les URLs HTML et de capture d'écran depuis outputComponents vers le répertoire .stitch/designs.

• Nommage : Utilisez l'ID de l'écran ou un slug descriptif pour le nom du fichier.
• Outils : Utilisez curl -o via run_command ou similaire.
• Répertoire : Assurez-vous que .stitch/designs existe.

6. Réviser et Affiner

• Si le résultat n'est pas exactement celui attendu, poursuivez avec le flux Édition pour effectuer des ajustements ciblés.
• Ne régénérez PAS à partir de zéro sauf si la mise en page fondamentale est erronée.

---

Flux Générer à partir d'une Image (Image/Maquette → Design)

Utilisez ce flux lorsque l'utilisateur fournit une image, une capture d'écran ou une maquette de design à recréer dans Stitch.

1. Identifier le Projet

Utilisez list_projects pour trouver le projectId approprié. Si aucun projet adapté n'existe, créez-en un avec create_project.

2. Télécharger l'Image

Déléguez à la compétence upload-to-stitch pour télécharger l'image dans le projet. Cela crée un nouvel écran avec l'image comme contenu.

3. Affiner avec l'Édition

Une fois téléchargée, utilisez list_screens pour trouver le screenId nouvellement créé, puis appelez edit_screens avec un prompt descriptif pour affiner le design :

{
  "projectId": "...",
  "selectedScreenIds": ["<id-écran-téléchargé>"],
  "prompt": "[Décrivez ce qu'il faut ajuster, améliorer ou recréer à partir de cette maquette]"
}

[!TIP] Pour de meilleurs résultats, décrivez l'intention derrière l'image plutôt que de simplement dire "faites en sorte que cela ressemble à ça". Par exemple : "Ceci est une maquette de tableau de bord — recréez-la avec un tableau de données approprié, une navigation latérale et des widgets graphiques."

4. Présenter le Retour de l'IA

Affichez toujours la description textuelle et les suggestions provenant de outputComponents à l'utilisateur.

5. Télécharger les Assets de Design

Téléchargez les URLs HTML et de capture d'écran depuis outputComponents vers le répertoire .stitch/designs.

• Nommage : Utilisez l'ID de l'écran ou un slug descriptif pour le nom du fichier.
• Outils : Utilisez curl -o via run_command ou similaire.
• Répertoire : Assurez-vous que .stitch/designs existe.

---

Flux Édition (Modifier un Écran Existant)

1. Identifier l'Écran

Utilisez list_screens ou get_screen pour trouver le projectId et le screenId appropriés.

2. Formuler le Prompt d'Édition

Appliquez le Pipeline d'Amélioration des Prompts, en mettant l'accent sur la spécificité :

• Emplacement : "Changez la couleur du [bouton principal] dans la [section hero]..."
• Visuels : "...en un bleu plus foncé (#004080) et ajoutez une ombre légère."
• Structure : "Ajoutez un bouton secondaire à côté du bouton principal avec le texte 'En savoir plus'."

3. Appliquer l'Édition

Appelez l'outil edit_screens.

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Votre prompt d'édition ciblé]"
}

4. Présenter le Retour de l'IA

Affichez toujours la description textuelle et les suggestions provenant de outputComponents à l'utilisateur.

5. Télécharger les Assets de Design

Après l'édition, téléchargez les URLs HTML et de capture d'écran mises à jour depuis outputComponents vers le répertoire .stitch/designs, en écrasant les versions précédentes pour garantir que les fichiers locaux reflètent les dernières modifications.

• Nommage : Utilisez l'ID de l'écran ou un slug descriptif pour le nom du fichier.
• Outils : Utilisez curl -o via run_command ou similaire.
• Répertoire : Assurez-vous que .stitch/designs existe.

6. Mettre à Jour les Métadonnées du Projet

Après avoir téléchargé les assets, mettez à jour .stitch/metadata.json pour refléter les changements (par exemple, titres d'écran mis à jour ou nouveaux IDs d'écran provenant de l'édition). Le fichier de métadonnées suit tous les écrans, leurs types d'appareils et les informations du système de design. Consultez le fichier examples/metadata.json de la compétence manage-design-system pour le format.

7. Vérifier et Répéter

• Vérifiez l'écran de sortie pour voir si les modifications ont été appliquées correctement.
• Si plus de finitions sont nécessaires, répétez le flux d'édition avec un nouveau prompt spécifique.

---

Flux Générer des Variantes (Explorer des Variations)

Utilisez ce flux lorsque l'utilisateur souhaite explorer des mises en page alternatives, des schémas de couleurs ou des variations de contenu d'un écran existant.

1. Identifier l'Écran

Utilisez list_screens ou get_screen pour trouver le projectId et le screenId appropriés.

2. Configurer les Options de Variantes

Appelez l'outil generate_variants avec les options appropriées :

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Décrivez la direction des variantes]",
  "variantOptions": {
    "variantCount": 3,
    "creativeRange": "EXPLORE",
    "aspects": ["LAYOUT", "COLOR_SCHEME"]
  }
}

Options de Variantes :

• variantCount : 1 à 5 variantes (par défaut : 3)
• creativeRange : REFINE (subtil), EXPLORE (équilibré) ou REIMAGINE (radical)
• aspects : Concentrez-vous sur des dimensions spécifiques — LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT, TEXT_CONTENT, ou laissez vide pour tout inclure

3. Présenter le Retour de l'IA

Affichez toujours la description textuelle et les suggestions provenant de outputComponents à l'utilisateur.

4. Télécharger les Assets de Design

Téléchargez les URLs HTML et de capture d'écran des variantes depuis outputComponents vers le répertoire .stitch/designs.

• Nommage : Utilisez l'ID de l'écran ou un slug descriptif pour le nom du fichier.
• Outils : Utilisez curl -o via run_command ou similaire.
• Répertoire : Assurez-vous que .stitch/designs existe.

---

💡 Conseils

• Soyez structurel : Décomposez la page en en-tête, hero, fonctionnalités, et pied de page dans votre prompt.
• Contenu d'abord : Décrivez ce que chaque section contient (texte, images, CTA) plutôt que son apparence.
• Polissage itératif : Préférez l'édition pour des ajustements ciblés plutôt qu'une régénération complète.
• Pas de fuite de thème : Ne mettez jamais de codes hexadécimaux, de noms de polices ou de rôles de couleurs dans un prompt de génération — le système de design gère tout le style visuel.
• Spécifiez les interactions : Mentionnez les états de survol, les animations et les comportements de clic plutôt que le style visuel.
• Gardez les éditions ciblées : Une édition à la fois est souvent meilleure qu'une longue liste de changements.
• Référencez les composants : Utilisez des termes professionnels comme "barre de navigation", "section hero", "pied de page", "grille de cartes".
• Couleurs précises dans les éditions : Utilisez des codes hexadécimaux pour une correspondance exacte des couleurs lors de l'édition d'écrans existants.

📚 Références

• Design Mappings — Mots-clés UI/UX et descripteurs d'ambiance.
• Prompting Keywords — Termes techniques que Stitch comprend le mieux.
• Exemple de Prompt Amélioré — Amélioration de prompt avant/après.