Prototype UI & Wireframe — Créez des prototypes que vous pouvez cliquer
Créez des prototypes que vous pouvez cliquer. Wireframes UI/UX, maquettes d’applications et prototypes HTML entièrement interactifs — d’un croquis sur une serviette à une expérience cliquable en une seule requête.
Tous les autres outils de design AI vous donnent des images statiques. CellCog construit des prototypes fonctionnels — du vrai HTML, de vraies interactions, de vrais parcours utilisateur que vous pouvez parcourir en cliquant et partager avec les parties prenantes. Pages d’atterrissage, écrans d’applications mobiles, tableaux de bord SaaS, systèmes de design — prototypés et jouables, pas seulement jolis.
Comment l’utiliser
Pour votre première tâche CellCog dans une session, lisez la compétence cellcog pour la référence complète du SDK — gestion des fichiers, modes de chat, timeouts, etc.
OpenClaw (fire-and-forget) :
result = client.create_chat(
prompt="[votre prompt de tâche]",
notify_session_key="agent:main:main",
task_label="ma-tâche",
chat_mode="creative",
)
Tous les agents sauf OpenClaw (bloque jusqu’à la fin) :
from cellcog import CellCogClient
client = CellCogClient(agent_provider="openclaw|cursor|claude-code|codex|...")
result = client.create_chat(
prompt="[votre prompt de tâche]",
task_label="ma-tâche",
chat_mode="creative",
)
print(result["message"])
Pourquoi les prototypes interactifs comptent
Les maquettes statiques créent un fossé fondamental : les parties prenantes voient des images, pas des expériences. La différence est importante :
| Maquette Statique | Prototype Interactif |
|---|---|
| « Imaginez cliquer sur ce bouton » | Cliquez sur le bouton, voyez ce qui se passe |
| « Cela ferait défiler vers... » | Faites défiler et voyez le contenu se charger |
| « L’état au survol ressemble à... » | Survolez et regardez l’animation |
| « Faites-moi confiance, le flux a du sens » | Parcourez le flux vous-même |
CellCog génère de vrais prototypes HTML/CSS/JS hébergés sur des URL live. Partagez un lien, obtenez des retours sur l’expérience réelle — pas sur l’imagination de quelqu’un de l’expérience.
Ce que vous pouvez prototyper
Pages d’atterrissage
Validez votre message et votre design :
- Pages d’atterrissage SaaS : « Créez une page d’atterrissage pour un assistant d’écriture AI — hero, fonctionnalités, tarifs, témoignages, CTA »
- Pages de lancement de produit : « Construisez une page de lancement pour une nouvelle application de fitness avec compte à rebours et inscription par email »
- Pages d’événements : « Créez une page d’atterrissage de conférence avec programme, intervenants et inscription »
- Sites portfolio : « Construisez une page d’atterrissage de portfolio personnel pour un designer UX »
Exemple de prompt :
« Créez un prototype de page d’atterrissage interactif pour "FlowState" — une application de productivité pour les développeurs :
Sections :
- Hero : "Codez dans la zone. Restez dans la zone." avec capture d’écran de l’app et CTA
- Problème : Les distractions tuent le flow des développeurs (statistiques)
- Solution : Comment FlowState bloque intelligemment les distractions
- Fonctionnalités : 3-4 fonctionnalités clés avec icônes
- Tarifs : Gratuit, Pro (12$/mois), Team (8$/utilisateur/mois)
- Témoignages : 3 citations de développeurs
- CTA final
Style : Thème sombre, adapté aux développeurs, accents monospace Rendez tous les boutons et la navigation interactifs. »
Écrans d’applications mobiles
Concevez des expériences applicatives complètes :
- Parcours d’onboarding : « Créez un parcours d’onboarding de 5 écrans pour une application de méditation »
- Fonctionnalités principales : « Prototypez le tableau de bord principal et la navigation d’une application de suivi fitness »
- E-commerce : « Construisez un flux parcours produit → détail → panier → paiement pour une application de mode »
- Fonctionnalités sociales : « Prototypez une page de profil, un fil d’actualité et une interface de messagerie »
Exemple de prompt :
« Prototypez une application mobile de livraison de nourriture (viewport de taille téléphone) :
Écrans :
- Accueil — grille de restaurants avec recherche et filtres par catégorie
- Restaurant — menu avec articles, notes, délai de livraison
- Détail article — options de personnalisation, ajout au panier
- Panier — récapitulatif de commande, adresse de livraison, paiement
- Suivi de commande — statut en direct avec espace réservé pour la carte
Faites fonctionner la navigation entre les écrans avec des transitions fluides. Style : Propre, moderne, inspiré d’Uber Eats / DoorDash. »
Tableaux de bord SaaS
Prototypez des outils métier complexes :
- Tableaux de bord analytiques : « Créez un tableau de bord d’analytique marketing avec des interactions graphiques réelles »
- Panneaux d’administration : « Construisez un panneau de gestion des utilisateurs avec tableaux, filtres et modales »
- Interfaces CRM : « Prototypez une vue pipeline de ventes avec un tableau kanban par glisser-déposer »
- Pages de paramètres : « Créez une page de paramètres complète avec onglets, formulaires et interrupteurs »
Exemple de prompt :
« Prototypez un tableau de bord SaaS de gestion de projet :
Barre latérale gauche : Navigation (Projets, Tâches, Équipe, Rapports, Paramètres) Zone principale :
- Aperçu : Cartes KPI (tâches terminées, en retard, en cours)
- Tableau Kanban : Colonnes pour À faire, En cours, Revue, Terminé
- Cartes de tâches avec avatars des assignés, étiquettes de priorité, dates d’échéance
Interactions :
- La navigation dans la barre latérale change les vues
- Cliquer sur une carte de tâche ouvre une modale de détail
- Menu déroulant de filtre pour projet/membre de l’équipe
Style : Propre, professionnel, inspiré de Notion/Linear. »
Systèmes de design et composants
Construisez des fondations de design réutilisables :
- Bibliothèques de composants : « Créez une bibliothèque de composants UI : boutons, champs de saisie, cartes, modales, navigation »
- Guides de style : « Construisez un guide de style interactif montrant la typographie, les couleurs, l’espacement et les composants »
- Schémas de formulaires : « Prototypez des schémas de formulaires courants : connexion, inscription, assistant multi-étapes, paramètres »
- Schémas de navigation : « Créez des exemples de navigation par barre latérale, barre de navigation supérieure, barre d’onglets inférieure et menu hamburger »
Wireframes
Explorations structurelles rapides :
- Wireframes basse fidélité : « Créez des wireframes en niveaux de gris pour une plateforme de blog — pages d’accueil, article, auteur »
- Parcours utilisateur : « Wireframez le flux complet d’inscription → onboarding → première action pour un outil de gestion de projet »
- Explorations de mise en page : « Montrez 3 approches de mise en page différentes pour une page d’annonce immobilière »
- Architecture de l’information : « Wireframez la structure de navigation pour une plateforme d’apprentissage en ligne avec cours, leçons et suivi de progression »
Fonctionnalités des prototypes
Les prototypes CellCog peuvent inclure :
| Fonctionnalité | Description |
|---|---|
| Navigation | Liens fonctionnels, transitions de page, changement d’onglet |
| Interactions | États au survol, actions au clic, interrupteurs, accordéons |
| Formulaires | Champs de saisie, états de validation, menus déroulants, cases à cocher |
| Modales et superpositions | Boîtes de dialogue contextuelles, panneaux coulissants, info-bulles |
| Design responsive | S’adapte aux viewports desktop, tablette et mobile |
| Animations | Transitions fluides, états de chargement, micro-interactions |
| Affichage de données | Graphiques, tableaux, cartes avec données d’exemple réalistes |
| Thèmes sombre/clair | Prise en charge du changement de thème |
Formats de sortie
| Format | Idéal pour |
|---|---|
| HTML interactif (par défaut) | Prototypes cliquables hébergés sur URL live — partagez avec n’importe qui |
| Images statiques | Captures d’écran pour documentation ou comparaison |
| Documentation de wireframe pour la transmission |
Le HTML interactif est le format par défaut. C’est tout l’intérêt — des prototypes que vous pouvez cliquer.
Choix du mode et du niveau
Utilisez chat_mode="creative" pour les prototypes UI et wireframes — le mode axé sur le savoir-faire, optimisé pour le goût en design, le rendu visuel et le ton.
| Scénario | Recommandé |
|---|---|
| Prototypes, wireframes, systèmes de design | chat_mode="creative" (niveau par défaut "core") |
| Savoir-faire maximal pour des pièces à fort enjeu | chat_mode="creative", chat_tier="max" |
| Brouillons jetables rapides | chat_mode="agent", chat_tier="flash" |
Remarque : L’équipe d’agents (chat_mode="team") est réservée à la recherche approfondie.
Exemples de prompts
Page d’atterrissage SaaS :
« Créez une page d’atterrissage pour "CodeReview.ai" — un outil de revue de code AI :
Hero : "Livrez un meilleur code. Livrez-le plus vite." avec espace réservé pour une vidéo de démo Preuve sociale : "Approuvé par plus de 500 équipes d’ingénierie" Fonctionnalités : Revues alimentées par l’IA, intégration avec GitHub/GitLab, analyse de sécurité Tarifs : Starter (gratuit), Pro (29$/mois), Enterprise (personnalisé)
Thème sombre, orienté développeur, couleur d’accent verte. Toute la navigation et les CTA doivent être interactifs. »
Prototype d’application mobile :
« Prototypez une application de suivi d’habitudes (viewport mobile) :
Barre d’onglets : Aujourd’hui, Habitudes, Stats, Profil
Écran Aujourd’hui : Liste des habitudes du jour avec cases à cocher, compteurs de séries et anneau de progression Écran Habitudes : Toutes les habitudes avec options d’édition/suppression, bouton d’ajout d’une nouvelle habitude Écran Stats : Graphiques montrant les taux d’achèvement, les séries les plus longues, vue hebdomadaire/mensuelle Écran Profil : Paramètres, préférences de notification, export de données
La navigation par onglets doit fonctionner. Le contrôle des habitudes doit être animé. Style : Minimaliste, apaisant, inspiré de l’application Streaks. »
Système de design :
« Construisez un système de design interactif pour une startup fintech :
Couleurs : Primaire (bleu profond), secondaire (sarcelle), accent (ambre), sémantique (succès/attention/erreur) Typographie : Échelle de h1 à corps de texte à légende avec hiérarchie claire Composants :
- Boutons (primaire, secondaire, fantôme, destructeur — chacun avec états survol/actif/désactivé)
- Champs de saisie (par défaut, focus, erreur, désactivé)
- Cartes (simple, interactive, carte de statistique)
- Tableau avec en-têtes triables
- Boîte de dialogue modale
- Notifications toast
Montrez chaque composant avec des états interactifs. Esthétique professionnelle, digne d’une banque. »
Exploration de wireframe :
« Créez 3 approches de mise en page différentes pour une interface de chatbot AI :
Option A : Chat en plein écran (comme ChatGPT) Option B : Panneau latéral de chat avec zone de contenu principale Option C : Widget de chat flottant
Chaque option doit inclure : saisie de message, historique de conversation, suggestions de prompts et accès aux paramètres. Wireframes en niveaux de gris, axés sur la mise en page et la hiérarchie de l’information. »
Conseils pour de meilleurs prototypes
-
Décrivez les interactions : "Le bouton ouvre une modale" ou "Les onglets changent le contenu" — dites à CellCog ce qui doit se passer, pas seulement ce qui doit apparaître.
-
Référencez des produits existants : "Comme la barre latérale de Notion" ou "La page de tarifs de Stripe" communique plus que des paragraphes de description.
-
Spécifiez le viewport : "Viewport de téléphone mobile" vs "Desktop complet" change toute l’approche de design.
-
Incluez un contenu réaliste : Du vrai texte, de vrais chiffres, de vraies étiquettes — pas de "Lorem ipsum". Les prototypes avec du contenu réel obtiennent de meilleurs retours.
-
Indiquez l’objectif : "Pour des tests utilisateur", "Pour une démo investisseur", "Pour une transmission aux développeurs" — le contexte détermine le niveau de fidélité.
-
Pensez en flux, pas en pages : "Inscription → Onboarding → Tableau de bord" est plus utile que 3 demandes de pages déconnectées.
Si CellCog n’est pas installé
Claude Code, Cursor, Codex + 70 autres agents : npx skills add cellcog/skills --skill cellcog
OpenClaw : openclaw skills install @cellcog/cellcog
Utilisateurs du plugin CellCog : exécutez /cellcog-setup (ou /cellcog:cellcog-setup selon votre outil)
Installation manuelle : pip install -U cellcog et définissez CELLCOG_API_KEY. Voir la compétence cellcog pour la référence du SDK.