Conception d'interface utilisateur frontale basée sur l'IA : Claude produit efficacement des ébauches de conception.

Dans le secteur de l'Internet, qui évolue rapidement, l'importance de la conception de l'interface utilisateur (IU) devient de plus en plus grande. Une excellente conception d'interface utilisateur améliore non seulement l'expérience de l'utilisateur, mais constitue également l'un des éléments clés de la réussite d'un produit. Cependant, pour de nombreux développeurs frontaux, la conception de l'interface utilisateur n'est pas leur spécialité, et la production de projets de conception prend souvent beaucoup de temps et demande beaucoup de travail. Ces dernières années, le développement rapide de la technologie de l'intelligence artificielle (IA) a entraîné des changements dans tous les secteurs, et la conception de l'interface utilisateur ne fait pas exception.

Récemment, l'industrie a commencé à explorer l'utilisation de macromodèles d'IA pour aider les développeurs frontaux à achever le travail de conception de l'interface utilisateur. Il a été prouvé que Claude Les modèles d'IA, tels que représentés par les modèles d'IA, ont montré un potentiel étonnant dans la conception d'interface utilisateur, étant capables de générer rapidement des solutions de conception d'interface basées sur des commandes simples en accord avec les tendances de conception modernes.

Claude 3.5 en conception d'interface utilisateur

Afin de valider l'application pratique de l'IA dans la conception de l'interface utilisateur, l'auteur prend l'exemple d'une application de santé et montre en détail comment guider Claude 3.5 pour qu'il effectue les tâches suivantes à l'aide d'invites claires et concises. Vue d'ensemble de la maison , programme d'exercices , Gestion de la restauration répondre en chantant Fonctions communautaires Conception de l'interface utilisateur pour les modules de base.

Cette approche de conception modulaire contourne intelligemment le problème de la limitation des résultats qui peut survenir lorsque les modèles d'IA traitent des tâches complexes, tout en rendant le processus de conception plus ciblé et en garantissant la finesse et la qualité de la conception de chaque module.

Afin d'améliorer l'efficacité de la conception et la valeur de l'application pratique, les éléments clés suivants sont particulièrement mis en avant dans la définition des mots-clés :

• Mise en œuvre du style. Spécifie l'utilisation de Tailwind CSS (la méthode d'importation CDN) pour une mise en forme rapide des pages.
• Bibliothèque d'icônes. Choisissez Lucide Static CDN comme référentiel d'icônes pour obtenir des icônes de haute qualité rapidement et facilement.
• Intégration des pages. Nécessité d'intégrer les pages connexes d'un même module fonctionnel dans le même fichier HTML pour faciliter la prévisualisation et la gestion.

Les résultats expérimentaux montrent que parmi les nombreux modèles d'IA, Claude 3.5 est le plus performant dans ce scénario d'application, avec une stabilité et une qualité de conception satisfaisantes des résultats de sortie. En comparaison, les modèles d'IA incluant GPT-4o et DeepSeek D'autres modèles, y compris ceux qui ont été utilisés pour accomplir des tâches similaires, présentent encore des lacunes.

Effet de design

Exemple d'APP santé

Entrez l'invite. Santé APP

Claude 3.5 commencera par conceptualiser la fonctionnalité et le style général de l'APP, puis appellera le plugin de visualisation pour prévisualiser le code HTML généré en temps réel. Les utilisateurs peuvent directement créer leur propre code HTML dans un éditeur (par ex. Curseur etc.) pour obtenir un aperçu des résultats.

Effet de la vue d'ensemble de la maison.

Une fois la conception de la page d'accueil terminée, l'IA demandera de manière proactive s'il faut poursuivre la conception d'autres modules et sollicitera le choix de l'utilisateur.

Entrez l'invite. Continuer [module du programme d'exercices]

Efficacité du module de planification de la campagne.

Entrez l'invite. Continuer [Module de gestion diététique]

Efficacité du module de gestion diététique.

Entrez l'invite. Continuer [Fonctions communautaires]

Effet de fonctionnalité communautaire.

Exemples d'autres types d'APP

Outre les applications de santé, Claude 3.5 excelle également dans d'autres types de conception d'interface utilisateur. Par exemple, vous pouvez rapidement générer des designs de haute qualité en tapant simplement des commandes concises telles que "Podcast APP" ou "Twitter-like APP" et en suivant un guide d'amélioration modulaire, étape par étape.

Exemple d'APP de podcast.

Exemple d'une application de type Twitter.

Invitation Invitation Stratégie

Voici les principaux messages-guides utilisés pour guider Claude 3.5 dans le processus de création d'un design d'interface utilisateur :

## 你是谁
**你是一位资深全栈工程师，同时也是一位经验丰富、审美出色的设计师。你精通全栈开发，拥有极高的审美水平，尤其擅长现代化设计风格，以及移动端 UI 和用户体验设计。**
## 你要做什么
* **用户会提出一个 APP 的设计需求。**
* **你需要根据这个需求进行设计， 模拟产品经理的角色，从用户需求和信息架构出发，构思 APP 的功能需求和界面布局。**
> **在接下来的步骤中，针对每一个小功能模块（根据功能划分，可能包含多个页面），你需要输出一个 HTML 文件。完成一个功能模块的设计后，询问用户是否继续。如果用户输入 "继续"，则按照以下步骤输出下一个功能模块的 UI/UX 参考图。**
* **使用 HTML 结合 Tailwind CSS 设计 UI/UX 参考图。**
* **调用 Artifacts 插件，可视化预览生成的 UI/UX 图 (即你编写的 HTML 代码)。**
## 设计要求
* **设计风格要高级且富有质感，可以巧妙运用玻璃拟态等视觉效果， 遵循主流设计规范，注重 UI 设计细节。**
* **使用 Tailwind CSS CDN 方式引入样式，避免直接编写 style 属性。图片素材使用 Unsplash 图床，确保界面中没有滚动条出现。**
* **图标统一使用 Lucide Static CDN 方式引入，例如 **[https://unpkg.com/lucide-static@latest/icons/XXX.svg](https://unpkg.com/lucide-static@latest/icons/XXX.svg)**，而不是手动输出 SVG 代码。**
* **将一个功能模块的所有页面代码写入一个 HTML 文件中。为每个页面创建简单的 mockup 边框进行预览，将页面横向排列，保证每个页面在各自的 mockup 边框内相互独立，互不影响。**
* **思考过程应侧重于功能需求和整体设计风格的构思，避免在思考阶段就编写代码。代码只在最终结果中输出。**

Idées de conception de base.

L'idée générale est d'utiliser HTML avec Tailwind CSS pour générer le code de l'interface utilisateur et de l'exécuter directement pour prévisualiser l'effet. L'utilisation d'un CDN pour apporter Tailwind CSS élimine le besoin de fastidieux npm install pour un aperçu rapide.

Conseils d'optimisation.

• Lucide Icon CDN. L'utilisation du CDN Lucide Icon empêche l'IA de consommer de grandes quantités de données. Jeton pour générer des chemins d'icônes SVG complexes.
• Conception modulaire. La conception de modules fonctionnels et l'affinement étape par étape permettent d'éviter le problème des résultats tronqués qui ont pu se produire dans Claude 3.5 (bien que Claude 3.7 ait été amélioré à certains égards, 3.5 semble toujours être plus stable et plus fiable).
• Pré-conceptualisation. Avant la conception, les fonctions essentielles et le style général de l'APP doivent être clairement définis, ce qui permettra de maintenir un style unifié et une itération efficace lors de la conception des pages dans les modules suivants.

Performances des autres modèles

Lors du test de comparaison des modèles effectué le 3 mars 2025, il a été constaté que la plupart des autres modèles n'étaient pas aussi stables que Claude 3.5 en termes de conception de l'interface utilisateur. Claude 3.7, bien que relativement performant dans certains domaines, souffre encore de fréquentes troncatures de sortie et doit être rendu plus stable.

GPT-4o.

DeepSeek.

Les résultats des tests montrent que GPT-4o et DeepSeek peuvent présenter certaines déviations dans la compréhension des invites de conception de l'interface utilisateur, ou qu'ils peuvent ne pas être suffisamment compétents dans l'utilisation de Tailwind CSS lors de la génération du code HTML et CSS, ce qui entraîne un écart entre l'effet final de la conception et l'effet escompté. Bien entendu, il ne s'agit que d'un résultat préliminaire, et le potentiel d'autres modèles dans la conception d'interfaces utilisateur doit encore être exploré plus avant.

Dans l'ensemble, Claude 3.5 présente un grand potentiel dans le domaine de la conception d'interfaces utilisateur assistée par l'IA. Claude 3.5 fournit sans aucun doute aux développeurs frontaux un outil d'aide à la conception efficace et pratique, qui devrait améliorer considérablement l'efficacité de la conception de l'interface utilisateur et permettre aux développeurs de se concentrer davantage sur la mise en œuvre des fonctionnalités du produit et l'optimisation de l'expérience de l'utilisateur. Avec les progrès continus de la technologie de l'IA, je pense que l'IA jouera un rôle plus important dans le domaine de la conception de l'interface utilisateur à l'avenir.