AI UI Designer Logo
AI UI Designer

Validez la maquette avant de développer

Un skill de design UI gratuit pour vos premiers écrans

Transformez votre cahier des charges en wireframe SVG avec Codex ou Claude Code. Vérifiez les champs, la hiérarchie et les actions, puis affinez la maquette. Vous pouvez partir de vos besoins sans acheter de pack de scènes.

Téléchargement sans connexion. Sortie SVG statique. L’assistant et l’utilisation des modèles restent à votre charge.

Des besoins à une mise en page concrète

Décidez d’abord où placer les éléments, puis travaillez les couleurs, la typographie et les espacements.

Wireframe SVG avec champs produit, formats, action principale et quatre cartes de résultat
02 Valider le wireframe
Maquette SVG du même outil avec commandes violettes et affiches de produits en bouteille
03 Affiner le design UI

Une même structure, du wireframe à la maquette

Cet outil d’affiches produit illustre le parcours gratuit : champs, choix de format, bouton de génération et grille de résultats. Ouvrez les deux SVG pour comparer la structure et son traitement visuel, sans pack payant.

01 Décrire le besoin

Utilise le skill ai-ui-designer.
Conçois un outil d’affiches produit avec nom du produit, arguments de vente, choix du format, bouton de génération et grille de résultats.

Précisez ce que la page doit permettre de faire.

02 Valider le wireframe

Wireframe SVG avec champs produit, formats, action principale et quatre cartes de résultat
Vérifiez les informations à saisir, l’action principale et la place réservée aux résultats.
Ouvrir le SVG

03 Affiner le design UI

Maquette SVG du même outil avec commandes violettes et affiches de produits en bouteille
Conservez la structure validée et ajustez les caractères, les couleurs et les espacements.
Ouvrir le SVG

Installer le skill et dessiner un premier écran

Téléchargez et décompressez le ZIP. Placez le dossier ai-ui-designer dans le répertoire de skills de votre environnement Codex ou Claude Code.

  1. 1.Placer les fichiers du skill

    SKILL.md doit se trouver directement dans ai-ui-designer. Le téléchargement comprend les consignes de design, les références et les scripts utilitaires.

    Codex
    ~/.agents/skills/ai-ui-designer/
    Claude Code
    ~/.claude/skills/ai-ui-designer/

    Évitez un dossier supplémentaire imbriqué lors de la décompression.

  2. 2.Décrire la page et son objectif

    Appelez le skill dans votre assistant, puis indiquez le public, les contenus et l’action principale.

    Codex: $ai-ui-designer
Claude Code: /ai-ui-designer

Crée un wireframe SVG pour la page d’accueil de mon produit avec proposition de valeur, fonctionnalités et inscription.

  3. 3.Ouvrir le SVG et demander des retouches

    Consultez le fichier dans un navigateur ou un lecteur SVG. Demandez une modification précise : titres plus clairs, bouton mieux mis en valeur, espaces plus généreux.

    Skill introuvable ? Vérifiez le chemin et SKILL.md. Codex détecte les changements automatiquement ; redémarrez si nécessaire. Dans Claude Code, consultez le menu /.

Prévoyez votre propre assistant et accès aux modèles. Les scripts locaux de gestion des packs nécessitent Python 3.9 ou une version ultérieure. Le téléchargement des packs facultatifs du site nécessite un abonnement payant actif.

Prendre les décisions de design dans le bon ordre

Clarifier la hiérarchie

Organisez les blocs, les champs et les actions dans un wireframe en niveaux de gris.

Définir le traitement visuel

Affinez la typographie, les espaces, les couleurs et les visuels sur la structure validée.

Faire évoluer la même maquette

Gardez les SVG dans votre projet et poursuivez les retouches avec des demandes concrètes.

Ce que contient le téléchargement gratuit

Un point de départ fondé sur vos besoins

Le skill couvre les wireframes, les maquettes UI en couleur, l’application de thèmes et la gestion locale des packs.

Les packs de scènes sont des références facultatives. Ils ne sont pas nécessaires pour commencer.

Des maquettes statiques à examiner

Vous obtenez des fichiers SVG et des indications de design. Les boutons dessinés ne déclenchent ni connexion, ni paiement, ni génération d’images.

Le développement de l’application constitue une tâche distincte. L’accès à l’assistant et la facturation des modèles suivent les conditions de chaque outil.

Questions avant de commencer

Faut-il souscrire un abonnement ou acheter un pack ?
Le skill est téléchargeable gratuitement et fonctionne à partir de vos besoins. Seul le téléchargement des packs facultatifs de ce site nécessite un abonnement payant actif.
Comment l’appeler dans Codex et Claude Code ?
Après installation dans le répertoire correspondant, utilisez $ai-ui-designer dans Codex ou /ai-ui-designer dans Claude Code, puis décrivez votre écran.
Le résultat est-il une application fonctionnelle ?
Ce parcours produit des wireframes et maquettes UI en SVG statique. Le code, le backend et les interactions réelles nécessitent une réalisation séparée.
Pourquoi le skill n’apparaît-il pas ?
Vérifiez le répertoire et la présence de SKILL.md directement dans ai-ui-designer. Redémarrez Codex si besoin ; dans Claude Code, cherchez /ai-ui-designer.

Donnez une structure claire à votre prochaine page

Installez le skill de design UI gratuit pour transformer vos besoins en maquette SVG, la vérifier et l’affiner avant le développement.

Télécharger le skill gratuitRevenir à l’installation