Sites web
Design d’un site web de recrutement
Kimi Careers par OpenDesign
Une page Carrières racontée en huit scènes lunaires, avec des transitions liées au défilement et un processus de candidature illustré en quatre étapes.
Exemple de hackathon
La bibliothèque d’études de cas de design
Vitrine OpenDesign :
Exemples de design par IA
- Sites web
- Applications
- Tableaux de bord
- Présentations
- Visuels
Dix-huit exemples de design par IA créés avec OpenDesign et livrés sous forme de code exploitable, de présentations ou de prototypes d’application. Chacun présente le brief, le modèle et les choix de mise en page, puis se termine par un prompt réutilisable.
18 études de cas · deux séries · 10 modèles
Études de cas
Trouvez l’inspiration pour votre prochaine idée
Filtrez les projets par type de livrable, objectif, série ou modèle utilisé.
Exemple de hackathon
Sites web
Design du site Bianjing Night Tour
Bianjing After Dark par OpenDesign
Un voyage nocturne interactif dans une Bianjing imaginaire de l’époque Song, entre ville fluviale omniprésente, poésie, lanternes et chapitres au rythme adapté à plusieurs langues.
LLM Arena · GPT 6 Sol
Sites web
Design d’un site web pour une visite nocturne de Kaifeng
Bianjing After Dark par OpenDesign
Suivez une rivière illuminée par des lanternes à travers les cinq chapitres de Bianjing After Dark, de la porte de la ville et du marché nocturne à la poésie et au lâcher de lanternes.
LLM Arena · Claude Opus 5.5
Tableaux de bord
Design du tableau de bord de planification de voyage
Halcyon Cove par OpenDesign
Organisez une journée en six étapes à Halcyon Cove : reliez lieux enregistrés, emplacements sur la carte et temps de marche dans un seul tableau de bord.
LLM Arena · Claude Opus 5
Applications
Design de l’application de collection marine
Abyssal Log par OpenDesign
Une collection de spécimens marins liée à des missions de plongée. Chaque fiche de spécimen inconnu indique la tâche et la progression nécessaires pour le découvrir.
LLM Arena · Claude Opus 5
Tableaux de bord
Design du tableau de bord personnel
Life System par OpenDesign
Un score hebdomadaire, des indicateurs corporels, les rythmes quotidiens et cinq expériences sur un tableau de bord pour ordinateur, présentés à travers quatre vues détaillées annotées.
Exemple de hackathon
Sites web
Design d’un site web de réservation au restaurant
Ember & Pepper par OpenDesign
Plats signature et informations pratiques, avec une fenêtre de réservation pour les clients prêts à réserver.
LLM Arena · GPT 5.6 Sol
Applications
Conception d’un jeu d’aventure insulaire
Harbor Skirmish par OpenDesign
Une petite île en bord de mer, avec des itinéraires sur les toits, trois emplacements d’armes et une interface à la première personne pleine de fantaisie.
LLM Arena · GPT 6 Astra
Présentations
Conception d’une présentation produit
Agent-Native Workspace par OpenDesign
Une histoire produit en trois diapositives : une idée directrice, un concept d’application mobile complémentaire et une salle de contrôle pour les entreprises.
Exemple de hackathon
Applications
Conception d’un planificateur d’excursion à la journée
Solara Bay par OpenDesign
Six étapes à horaires définis dans la ville fictive de Solara Bay, avec une carte illustrée, des estimations de marche et des avertissements utiles sur l’itinéraire.
LLM Arena · GPT 5.6 Sol
Applications
Conception d’une application de collection de découvertes
Abyssal Atlas par OpenDesign
Une collection de spécimens reliée à une file de plongée : fiches verrouillées, deux rangées de filtres et compteurs de progression indiquent les prochaines découvertes.
LLM Arena · Grok 4.6
Sites web
Conception d’un site de restaurant de fondue chinoise
Yàn Huǒ par OpenDesign
La fondue chinoise est présentée avec un menu signature et ses prix, une galerie du restaurant et des informations pratiques avant la réservation.
LLM Arena · Qwen 3.8 Max
Sites web
Design d’un site web de restauration forestière
Second Spring par OpenDesign
Une branche tombée interactive mène à des récits de terrain en forêt, à un plan de restauration et à des façons simulées de contribuer.
LLM Arena · DeepSeek V4.1 Flash
Sites web
Conception d’un site de conservation interactif
Second Spring par OpenDesign
Faites pousser une touffe de mousse sur un tronc tombé, puis découvrez les récits du sol forestier et des façons simulées d’agir.
LLM Arena · Claude Fable 5.1
Visuels
Conception d’un explicateur produit interactif
iPhone Inside par OpenDesign
Les couches séparées d’un téléphone conceptuel, avec des préréglages photo, un curseur et un panneau regroupant huit ensembles de composants.
LLM Arena · GPT Astra
Applications
Conception d’un jeu de tir à la première personne sur une île
Harbor Skirmish par OpenDesign
Un écran titre audacieux sur une île mène à une partie à la première personne, avec des panneaux d’état encadrés et des commandes d’armes numérotées.
LLM Arena · DeepSeek V4.1 Flash
Visuels
Conception d’un site de CV
Tom Goodman par OpenDesign
Un CV fictif qui associe expérience, graphiques de compétences et réalisations sélectionnées, avec une lecture en deux colonnes et une mise en page distincte pour l’impression.
Exemple de hackathon
Visuels
Conception d’un site de portfolio créatif
Maya Rowan par OpenDesign
Un portfolio fictif qui relie des cartes de projets façon affiches, une pratique en trois étapes, des notes de travail et un contact.
Exemple de hackathon
Aucun projet ne correspond à ces filtres
Effacez les filtres pour voir tous les projets ou parcourez un autre type de création.
La pagination remplace le défilement infini afin que chaque projet reste accessible au clavier et aux robots d’exploration.
Communauté
Revisitez le hackathon et comparez les modèles
Un hackathon communautaire qui vient de se terminer et une série d’évaluations où dix modèles ont répondu aux mêmes briefs.
Hackathon de design produit
Terminé · 18 sept. 2026- Dates
- 9–18 sept.
- Récompenses
- Les 10 premiers + les 50 premiers participants
- Exemples
- 5
Les designers ont publié sur X des produits créés avec OpenDesign, avec une publication et un lien communautaire par participation. Les participations ont été classées selon le nombre de mentions J’aime.
- Kimi Careers
- Life System
- Agent-Native Workspace
- Tom Goodman
- Maya Rowan
LLM Arena sept. 2026
Notes sur la série- Modèles
- 10
- Briefs communs
- 6
- Études de cas
- 13
Six briefs, chacun traité par deux modèles. Chaque page indique le modèle et la tâche, pour comparer les réponses côte à côte.
- Claude Opus 5
- GPT 5.6 Sol
- DeepSeek V4.1 Flash
- Qwen 3.8 Max
- Grok 4.6
- GPT Astra
- GPT 6 Astra
- Claude Fable 5.1
- GPT 6 Sol
- Claude Opus 5.5
Comment créer des exemples de design IA dans OpenDesign
Partez d’une étude de cas proche de votre idée
Filtrez les études de cas ci-dessus par type de résultat et ouvrez-en une qui se rapproche de ce que vous souhaitez créer. Lisez son brief, découvrez le modèle utilisé et les choix de mise en page expliqués, puis notez ce que vous garderiez et ce que vous changeriez.
Rédigez le brief avant de demander une proposition visuelle
Indiquez le type de résultat, les écrans ou les sections, le contenu d’exemple et l’interaction essentielle. Précisez quelles informations sont réelles et lesquelles sont des espaces réservés, afin que le design n’invente pas de faits.
Prompt suggéréCrée un design de site web pour une boulangerie de quartier fictive. Ajoute une section principale avec les fournées du jour, un menu réparti entre matin et après-midi, les horaires d’ouverture et un formulaire de précommande avec des champs réservés clairement indiqués. Garde une navigation explicite, crée tous les titres sous forme de texte réel et prévois une mise en page mobile lisible.
Choisissez un modèle ou comparez-en deux
Choisissez le modèle auquel vous faites confiance pour la mise en page et les textes. Pour voir comment deux modèles traitent le même brief, lancez-le dans LLM Arena d’abord, comme l’ont fait les études de cas de l’Arena sur cette page.
Affinez une section avant de travailler sur toute la page
Demandez des modifications section par section : hiérarchie, espacements, états et texte. Vérifiez la mise en page sur mobile et l’affichage avec réduction des animations avant d’étendre un effet à toute la page.
Exportez et obtenez un lien de partage
Exportez le design final au format HTML, puis utilisez Partager dans OpenDesign pour obtenir un lien. Ouvrez-le dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée et ses ressources se chargent avant de l’envoyer.
Pour commencer
Créez vous-même le prochain exemple
Gratuit, open source et exécuté sur votre propre machine avec vos propres clés. Apportez un brief, choisissez un modèle et créez un site web, une application, un tableau de bord ou une présentation à partager.
Versions pour macOS et Windows. Gratuit et open source sous licence Apache-2.0.
