Communitygithub.com

google-labs-code/enhance-prompt

Transforme des idées d'interface vagues en invites polies et optimisées pour Stitch. Améliore la spécificité, ajoute des mots-clés UI/UX, injecte le contexte du système de design et structure la sortie pour de meilleurs résultats de génération.

Qu'est-ce que enhance-prompt ?

Ce skill est conçu pour les développeurs et les utilisateurs d'agents IA qui travaillent avec des interfaces utilisateur et des systèmes de design. Il prend une description vague ou partielle d'une idée d'interface et la transforme en une invite détaillée, structurée et optimisée pour Stitch. Le skill ajoute automatiquement des mots-clés pertinents en UI/UX, injecte le contexte du système de design (comme Material Design ou un système propriétaire), et organise la sortie en sections claires (comme la structure de layout, les composants, les interactions, et le style visuel). Cela permet d'obtenir des résultats de génération d'interface plus précis et cohérents, réduisant le besoin de multiples itérations. Il est idéal pour les workflows de prototypage rapide et de design conversationnel.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/google-labs-code/stitch-skills/tree/main/skills/enhance-prompt

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 enhance-prompt ?

Transforme des idées d'interface vagues en invites polies et optimisées pour Stitch. Améliore la spécificité, ajoute des mots-clés UI/UX, injecte le contexte du système de design et structure la sortie pour de meilleurs résultats de génération.

Aperçu

Ce skill prend des descriptions d'interface simples, voire ambiguës, et les enrichit avec des détails techniques et de design. Il s'assure que l'invite finale est complète et alignée avec les meilleures pratiques de l'industrie, ce qui améliore la qualité des générations produites par Stitch.

Utilisation

  1. Fournissez une brève description de votre idée d'interface.
  2. Le skill la traite et produit une invite structurée.
  3. Utilisez cette invite directement avec Stitch pour générer l'interface.

Exemple

Entrée :

Un formulaire de connexion avec email et mot de passe, un bouton bleu, et un lien pour réinitialiser le mot de passe.

Sortie :

## Invite optimisée pour Stitch
- **Structure de layout :** Centré, largeur maximale de 400px, avec espacement interne.
- **Composants :**
  - Champ email avec validation et indicateur d'erreur.
  - Champ mot de passe avec bascule de visibilité.
  - Bouton de soumission (bleu primaire, `#1976D2`) avec état de survol et de chargement.
  - Lien de réinitialisation de mot de passe (taille de police 14px, souligné au survol).
- **Contexte du système de design :** Material Design 3, utilisant les jetons de design standard.
- **Interactions :** Validation en temps réel, retour visuel pour les erreurs, chargement asynchrone lors de la soumission.

Plateformes prises en charge

  • Stitch UI Generator
  • Claude Code
  • Cursor
  • Codex

Remarques

  • Ce skill ne génère pas de code directement ; il produit des invites textuelles structurées.
  • Assurez-vous que votre description initiale est aussi claire que possible pour de meilleurs résultats.

Individual skills in this repo

This repo contains 6 individual skills — each has its own dedicated page.

Skills associés