L'astuce secrète pour que l'IA reproduise des designs dignes de Netflix

Je crée une application avec l'IA, alors pourquoi la mienne a-t-elle l'air si ringarde ?

Si vous vous êtes déjà dit ça, la cause n'est pas un manque de talent. C'est parce que vous demandez un design en utilisant uniquement des « mots ».

Je vais le dire clairement.

Ce n'est pas un problème de compétence.

C'est un problème de « comment vous le transmettez ».

※ Il est recommandé de sauvegarder cet article.

Beaucoup de gens demandent à l'IA comme ça :

« Fais un design cool. »

« Donne-lui un style moderne et élégant. »

« Utilise une UI tendance. »

Mais ce qui revient, c'est toujours une UI générique et sans risque. Ensuite, vous essayez de corriger avec plus de mots et vous vous retrouvez dans une boucle. C'est le cycle infernal.

J'étais pareil.

Le jour où « un frisson m'a parcouru l'échine »

Il y a trois mois, j'ai créé une application de gestion de tâches pour moi-même avec Claude Code. Les fonctions fonctionnaient parfaitement. Mais au moment où j'ai ouvert l'écran, j'ai pensé :

« Wow, ça ressemble à un système interne d'entreprise de 2010... »

Les boutons étaient trop massifs. Les marges étaient incohérentes. La couleur était un bleu mystérieux. Ça fonctionnait, mais je ne voulais le montrer à personne. Un frisson m'a parcouru l'échine.

« Le simple fait d'être ringard donne instantanément un aspect amateur. »

Je l'ai ressenti profondément. Pour être honnête, la façon dont je demandais à l'époque était embarrassante. « Donne-lui une atmosphère sophistiquée comme Apple. » Je ne faisais que lister des mots abstraits que même moi je ne comprenais pas pleinement. Du point de vue de l'IA, il n'y avait pas de standard pour « cool ». C'est pour ça qu'elle ne renvoyait que des UI médiocres et sans risque.

Je comprends bien ce sentiment. Vous croyez qu'en utilisant assez de mots, ça passera. Mais c'était l'entrée du marécage.

Se détendre avec un seul lien

Le tournant a été la découverte d'un certain site : Mobbin.

C'est un site où vous pouvez voir une quantité massive d'UI d'applications réellement publiées. Vous pouvez voir Uber Eats et Netflix. En plus, vous pouvez rechercher par fonction, comme les écrans de connexion, les écrans d'accueil et les écrans de paiement. Ce que vous voyez ici, ce sont de vrais designs réalisés par des designers professionnels internationaux.

Pour être clair, ce n'est pas du « vol ». C'est la technique de « référencement » que les professionnels utilisent toujours. Ce que vous imitez, ce n'est pas la couleur ou le logo, mais la « philosophie de mise en page ».

La première fois que j'ai collé un lien vers l'écran d'accueil de Netflix et dit à l'IA : « Veuillez créer ce design en vous référant à ce lien » — cet écran avec le fond noir et les vignettes de films alignées — j'ai été choqué.

Quand j'ai vu l'écran résultant, j'ai involontairement parlé à voix haute : « Attends, ça l'a déjà fait ? »

Même si c'était mon application, elle possédait cette sensation haut de gamme de Netflix. La qualité que je n'arrivais pas à atteindre après des dizaines de demandes verbales a été obtenue en un seul coup avec un seul lien. Avant de me sentir heureux, j'ai ressenti un sentiment d'épuisement.

« Qu'est-ce que c'était que tout ce temps passé à me faire du souci... »

Parlons chiffres :

• Temps passé à se soucier du design : de 2 heures à 10 minutes.
• Nombre de refontes : de 5 fois à 1 fois.
• Et le niveau résultant était immensément supérieur à avant.

Le temps passé à se soucier a diminué, et la qualité a augmenté. Un renversement complet s'est produit.

Contenu principal | Modèle pratique pour utiliser Mobbin

Voici les étapes spécifiques. Tout ce que vous avez à faire, c'est « préparer un document de spécifications et y coller le lien Mobbin ». Ensuite, demandez à Claude Code de le lire et de le construire.

Voici un exemple de prompt :

1# Aperçu de l'application
2- Nom de l'application : MyFit
3- Description en une phrase : Une application pour enregistrer rapidement les séances d'entraînement
4- Cible : 20-30 ans qui s'entraînent 2 à 3 fois par semaine
5
6# Fonctions principales
7- Connexion / Inscription
8- Accueil (Afficher le menu du jour)
9- Saisie du journal d'entraînement
10- Historique / Graphiques pour suivre les progrès
11- Profil / Paramètres
12
13# Référence de design
14Veuillez vous référer à l'UI des applications suivantes. Je souhaite que le ton, les marges, la palette de couleurs et l'utilisation des polices soient proches de ce niveau.
15- Atmosphère générale : (lien Mobbin)
16- Écran de connexion : (lien Mobbin)
17- Écran d'accueil : (lien Mobbin)
18
19# Demande
20Veuillez proposer une politique de design basée sur ce qui précède avant de commencer l'implémentation.

Effet : L'IA peut partager « quoi et à quel niveau » créer dès le départ. Les résultats vagues disparaissent.

3 astuces pour rendre la précision imbattable

1. Collez des liens pour chaque écran séparément. N'en utilisez pas qu'un seul. Mobbin permet de rechercher par fonction. Fournissez des liens séparément pour « La connexion, c'est ça » et « L'accueil, c'est ça ». Effet : La précision devient nettement supérieure à celle d'un seul lien groupé.

1. Ajoutez des mots sur « ce que vous voulez imiter ». Si vous vous contentez de coller un lien, il pourrait ne capter que les couleurs. Alors, soyez explicite. Exemple d'instruction : « Veuillez vous référer à l'espacement des marges, à la palette de couleurs et à l'utilisation des polices. » Effet : L'IA ne manquera pas les points qu'elle doit regarder.

1. Ne le laissez pas construire immédiatement ; demandez-lui d'abord de « proposer une politique ». Alignez-vous une fois sur la direction. Exemple d'instruction : « Avant l'implémentation, veuillez proposer une politique de design. » Effet : Les refontes ultérieures disparaissent presque entièrement.

Réponse à « N'est-ce pas du copier-coller ? »

Quand je recommande cette méthode, on me demande souvent : « Est-ce que c'est correct du point de vue des droits d'auteur ? »

Je comprends cette préoccupation. Veuillez distinguer ces deux choses :

◯ Ce que vous pouvez référencer (les « conventions » de design) :

• Modèles de mise en page
• Utilisation des marges
• Philosophie de la palette de couleurs

✕ Ce que vous ne devez pas prendre (les actifs spécifiques à l'entreprise) :

• Logos / Noms de marque
• Photos / Icônes
• Slogans

Reprendre les actifs uniques d'une entreprise est interdit. Remplacez-les par les actifs de votre propre application. Les conventions d'UI et les modèles de mise en page sont des « templates » partagés dans toute l'industrie. Référencer des templates est tout à fait normal. Si vous êtes inquiet, ajoutez simplement une note à l'IA.

Exemple d'instruction : « Référencez la structure, mais changez la palette de couleurs et le logo pour ma marque. »

Cela garantit que ce ne devienne pas une copie intégrale.

3 pièges dans lesquels tombent les débutants

L'IA ne sait pas où regarder sur la page liée. Si vous ne complétez pas avec « imite cette sensation de marge » ou « utilise ce ton », le résultat sera flou.

Si vous fournissez plusieurs goûts complètement différents, l'IA fera la moyenne. En conséquence, vous obtenez quelque chose de médiocre qui ne ressemble à rien. L'astuce est de se limiter à 1-2 goûts.

Une fois que le template est sorti la première fois, faites des ajustements fins tout en montrant la même référence.

Exemple d'instruction : « Élargis un peu plus cette marge » ou « Rends le bouton plus proche de la forme dans ce lien. »

Avec 2 à 3 tours de ce genre, ça devient soudainement professionnel. La plupart des gens qui abandonnent en disant « ça ne ressemble pas » ne font tout simplement pas cette phase de polissage final.

Mobbin peut-il être utilisé gratuitement ?

Pour ceux qui pensent « Je vais l'ouvrir tout de suite », voici une note honnête sur les tarifs. Vous pouvez commencer à utiliser Mobbin en créant un compte gratuit (sans carte de crédit). Une inscription gratuite est requise pour la visualisation. En conclusion, la version gratuite est plus que suffisante pour ce que vous allez faire aujourd'hui. Avec l'inscription gratuite, vous pouvez voir immédiatement l'UI de Netflix et Uber Eats. Copiez le lien de l'écran qui vous intéresse et donnez-le à l'IA. Cette méthode fonctionne entièrement avec ça.

Si vous voulez l'utiliser plus en profondeur plus tard, vous pourrez envisager Pro à ce moment-là. Pour référence, voici les 4 principales limitations de la version gratuite :

• Vous voyez principalement les applications récemment ajoutées (la bibliothèque complète est Pro).
• La fonction « Flows » est fortement restreinte.
• Le téléchargement en masse de plusieurs écrans est Pro.
• La sauvegarde de collections est limitée à 3.

Ce sont des choses qui comptent après que vous soyez « accro ». Pour l'instant, essayez de coller un écran pour 0 $. Si vous voulez l'utiliser sérieusement, c'est débloqué avec le plan payant Pro (environ 10 $/mois, facturé annuellement). C'est le stade dont on parle. Essayez d'abord gratuitement. Si ce n'est pas suffisant, envisagez de payer. C'est la bonne approche.

La seule différence entre ceux qui sont bons et ceux qui ne le sont pas

En lisant jusqu'ici, certains d'entre vous ont dû réaliser. La différence n'est pas le « pouvoir de créer ». C'est le « pouvoir de trouver ».

Les travaux réels créés par les designers de haut niveau sont dispersés sur tout Internet. Il n'y a pas besoin d'extraire quelque chose à partir de zéro. Trouvez simplement quelque chose de bien et donnez-le à l'IA.

Même à ce moment où vous pensez « Je le ferai plus tard » et fermez cette page, quelqu'un d'autre qui a lu cet article ouvre Mobbin. Il donne des écrans de niveau Netflix à l'IA. Demain, l'application de cette personne apparaîtra sur votre timeline. La différence n'est pas le sens esthétique. C'est de savoir si vous agissez ou non pendant ces 10 minutes.

Le sens du design n'est pas un talent. C'est l'« action » de trouver un bon exemple et de le transmettre, que tout le monde peut faire.

Résumé

• Temps d'inquiétude : « 2 heures → 10 minutes. » Refontes : « 5 fois → 1 fois. »
• La clé est de fournir des écrans de référence par fonction et d'ajouter des mots sur « ce qu'il faut imiter ».
• Ne visez pas la perfection en un seul coup ; peaufinez en 2 à 3 tours tout en montrant la même référence.

Pas besoin de longue explication. Il n'y a qu'une seule chose à faire. Ouvrez Mobbin, choisissez un écran d'une application que vous aimez, et collez ce lien dans l'IA. Rien qu'en faisant ça, l'écran pour lequel vous vous êtes inquiété pendant 2 heures sortira en 10 minutes.

Entre la personne qui termine à zéro et celle qui fait au moins une chose. Lequel serez-vous ? Vous n'avez plus besoin de « sens esthétique ». La prochaine fois que vous montrerez votre application, l'autre personne regardera l'écran et dira :

« Attends, c'est comme Netflix... ? Tu as fait ça toi-même... ? »

Vous n'avez pas besoin de talent. Vous avez juste besoin d'un seul onglet Mobbin ouvert aujourd'hui.

Enfin

Je poste des articles sur les façons d'utiliser l'IA où « le simple fait de savoir fait la différence ». L'écart dans lequel vous vous laissez distancer peut être comblé dès aujourd'hui. Et encore une chose. Pour vous assurer de ne pas simplement « finir par lire » comment utiliser l'IA comme je l'ai écrit dans cet article, je distribue actuellement 32 bonus super-luxueux gratuitement pour une durée limitée.

Les bonus incluent :

• Guide complet ChatGPT / Claude Code / Codex / Gemini
• Roadmap pour un side hustle IA pour gagner 1 million de yens/mois, cartes des genres rentables, listes de prix unitaires, données de marché
• Guides pratiques pour la génération vidéo IA, les agents IA, le vibe coding, etc.
• 100 exemples d'utilisation de l'IA, et plus encore...

Un total de 32 éléments, plus de 860 pages. Et ils sont tous gratuits. Vous n'avez même pas à participer à des séminaires ou à des consultations individuelles gratuites pour tous les obtenir. Ça a l'air d'un mensonge, non ? Mais c'est vrai. La façon de les recevoir est simple. Commencez par rejoindre le chat LINE Open ci-dessous.

Vous pouvez entrer par ici.

Cependant, ces 32 bonus super-luxueux sont pour une durée limitée. Je n'ai pas fixé de date limite, mais quand ça se termine, ça se termine sans préavis. Presque tout le monde oublie « Je le ferai demain ». Veuillez les recevoir pendant que vous le pouvez. Laissez-moi le dire encore une fois. La capacité à gagner de l'argent avec l'IA n'est pas déterminée par le talent. C'est la capacité à apprendre dans le bon ordre. Cet ordre est entièrement contenu dans ces 32 bonus.