AI UI Designer Logo
AI UI Designer

Conception de service d’images IA · Pack de maquettes SVG

Maquettes UI pour service d’images IA : pensez le parcours avant de coder

Ces maquettes UI s’adressent aux développeurs indépendants et aux équipes produit qui préparent un service de génération d’images. Reliez la saisie du prompt à l’historique, aux offres et au compte. Adaptez ensuite les SVG avec le Skill AI UI Designer gratuit dans Codex ou Claude Code, selon vos champs, vos textes et votre thème.

Inclus dans un abonnement payant actif, sans déduction de crédits.

Examiner les écrans inclus

Maquettes SVG statiques · Textes d’exemple en chinois · Sans code applicatif

Maquette claire avec saisie du prompt, réglages de génération et cartes de résultats
Maquette de l’espace de génération · Thème clair
Pages pour ordinateur
6
Thèmes de couleurs
2
Références mobiles
2
Sources modifiables
SVG

Que voit l’utilisateur après avoir créé une image ?

Parcourez les écrans pour examiner la création, la recherche d’images, le choix d’une offre et les réglages du compte. Chaque page pour ordinateur est fournie en wireframe gris et en versions claire et sombre.

Maquette claire d’accueil avec présentation, galerie d’images et étapes d’utilisation

Accueil du service

Présentez le service et ses exemples, puis examinez la place de l’entrée de génération.

Maquette de connexion avec champs du formulaire et accès à l’inscription

Connexion et inscription

Vérifiez le formulaire de connexion et les champs d’inscription dans la planche d’états.

Maquette de génération avec zone de prompt, réglages et cartes d’images

Espace de génération

Réunissez prompt, modèle, proportions, nombre d’images, coût en crédits et résultats.

Maquette d’historique avec recherche, cartes et détail de l’image sélectionnée

Historique des images

Examinez la recherche, le détail, la reprise des réglages et la confirmation de suppression.

Maquette claire avec solde de crédits et trois offres d’exemple fictives

Offres et crédits

Comparez l’affichage du solde, des offres fictives et du résultat d’achat.

Maquette de compte avec formulaire de profil et retour après enregistrement

Paramètres du compte

Organisez le profil, la confirmation d’enregistrement et la déconnexion.

Les aperçus conservent les textes chinois du pack et des données fictives. Boutons, formulaires et écrans d’achat restent statiques.

Prévoir aussi les écrans vides et les erreurs

Le ZIP rassemble les pages SVG, les références de composants et les indications de scénario pour comparer les écrans pendant vos modifications.

Des sources SVG à reprendre

Modifiez les textes, les formes et la mise en page. Conservez le pack d’origine et faites vos ajustements dans une copie de travail.

De la structure à la couleur

2 fichiers JSON de thèmes accompagnent les maquettes. Examinez la hiérarchie en niveaux de gris avant de choisir une version claire ou sombre.

Composants et situations à anticiper

Consultez boutons, champs, sélecteurs, cartes et dialogues, ainsi que les états de génération en cours, historique vide, crédits insuffisants, erreur de connexion et échec de paiement.

Un périmètre mobile explicite

L’espace de génération et l’historique sont dessinés en 390px de large. Pour les autres pages, le scénario décrit le comportement mobile ; il n’y a pas de maquette mobile séparée.

Importez le ZIP, puis précisez les changements

Le pack s’utilise avec le Skill gratuit. Les scripts d’import nécessitent Python 3.9 ou une version ultérieure.

  1. 1

    Récupérer les fichiers avec votre abonnement

    Connectez-vous avec un abonnement AI UI Designer payant actif. Télécharger le pack ne consomme aucun crédit de génération.

  2. 2

    Indiquer le chemin du ZIP au Skill

    Installez AI UI Designer Skill dans Codex ou Claude Code, puis demandez à l’assistant d’importer le ZIP depuis son emplacement local.

  3. 3

    Adapter le contenu et relire le SVG

    Précisez le thème, les champs et la disposition souhaités. Contrôlez le résultat et poursuivez les retouches sur une copie, en conservant les originaux.

Exemple de brief : des visuels pour fiches produit

Utilise le thème clair du pack de génération d’images pour concevoir un espace de visuels e-commerce. Prévois le nom du produit, ses points forts et le format de l’image. Conserve l’indication du coût en crédits et les cartes de résultats. Fournis une maquette SVG modifiable.

Partir de votre brief ou de maquettes existantes ?

Le Skill gratuit permet de concevoir depuis vos besoins, d’importer un pack et d’appliquer ses thèmes. L’abonnement payant actif donne accès au téléchargement de ce jeu de pages sur le site.

Concevoir depuis votre brief
Skill gratuit · Gratuit
Importer des packs et appliquer les thèmes
Skill gratuit · Gratuit
Télécharger ce jeu de pages
Pack de scénarios · Abonnement payant actif
Utiliser les fichiers téléchargés en local
Pack de scénarios · Même après la fin de l’abonnement
FAQ

Ce que vous recevez, et ce qu’il reste à développer

Les réponses sur les fichiers, leur langue et les conditions de téléchargement.

Examinez le parcours, puis adaptez-le à votre service

Consultez les maquettes UI de génération, d’historique et d’offres. Si elles correspondent à votre projet, téléchargez les SVG avec votre abonnement payant actif et ajustez-les avec le Skill gratuit.

Télécharger les maquettes SVG

Inclus dans un abonnement payant actif, sans déduction de crédits.