Apprendre à utiliser les outils de programmation de l'IA pour générer de belles pages frontales

introductif

pour quelle raison ? Outils de programmation de l'IA Le problème fondamental de la génération de pages d'accueil qui sont belles et de celles qui ne le sont pas est que ces outils ont conçu tout un ensemble d'indices pour générer des pages d'accueil qui contraignent toutes sortes de spécifications d'accueil. Ces indices sont longs...

Non seulement les mots de l'invite sont longs, mais la génération de la page d'accueil nécessite la sortie d'un très grand nombre de jetons... C'est pourquoi vous trouverez un grand nombre de jetons dans le fichier claude La génération officielle du code complet de la page frontale est souvent interrompue.

Deux problèmes doivent être résolus pour que l'IA génère de belles pages d'accueil : la génération des mots-clés nécessaires à la page d'accueil et la génération complète du code de la page d'accueil.

mettre en pratique

1) Générer les mots-clés nécessaires à la page d'accueil

Introduire la première méthode, qui ne nécessite pas de mots-clés super longs, mais plutôt d'apprendre à diriger les questions et les contraintes.

Première série de mots-clés

作为前端设计师帮助产品经理提出UI设计规范。 你要详细了解产品经理描述的用户需求，并针对用户需求调整设计方案。
请遵循以下要求： 1. 现代且有高级感的前端设计 2. 遵守设计规范，注重UI细节和用户体验 3. 引入Tailwind CSS CDN而非编写style样式 4. 图片使用unsplash随机图片 5. 界面中避免出现滚动条

Deuxième série de mots-clés

核心群体是饲养宠物的群体，用户使用产品目标是为宠物购买玩具和视频。用户会在所有设备上使用产品。产品主要功能模块有：首页（展示不同的宠物类别、商品类别）、购物结算页面、宠物购物清单页面、用户中心。没有特别的品牌色彩要求。界面使用多语言。用户一般每周光顾一次。产品没有特殊可访问性要求。

Note : Dans le dialogue du site officiel de Claude, le code de sortie peut ne pas être complet, vous devez simplifier les exigences, d'abord obtenir un exemple de code de page typique, puis essayer d'améliorer le code de la page web complète.

La deuxième méthode, qui utilise des indices textuels clairs ou des images en guise d'exemples

Par exemple, ajoutez le conseil de style d'interface utilisateur suivant au premier mot du conseil :

Vous pouvez également vous rendre sur un site de conception d'interface utilisateur et choisir un style de page qui vous plaît, par exemple :

Cette partie ne montre pas l'effet de la page frontale générée, mise en place dans la partie suivante de la démonstration.

2. génération complète du code de la page frontale

N'entrez pas directement dans le chatgpt ou Claude pour essayer de générer le code frontal complet, leur résultat n'est pas assez long et ils ne sont pas en mesure de construire un code de projet multicouche. C'est pourquoi nous devons choisir unOutils de programmation de l'IALa tache et le Curseur Ce sont tous de bons choix, mais cette fois-ci, nous allons l'essayer avec le Trea, potentiellement moins efficace, afin d'évaluer le résultat final.

1) Tout d'abord, le projet doit être complet, il n'est pas nécessaire de se préoccuper de savoir s'il est beau ou non, il faut seulement qu'il soit pleinement fonctionnel.

Je vais générer une page échantillon aléatoire

2. laisser les outils d'IA fournir des solutions d'optimisation frontales

作为前端设计师帮助产品经理提出UI设计规范。 你要详细了解产品经理描述的用户需求，并针对用户需求调整设计方案。
请遵循以下要求： 1. 现代且有高级感的前端设计 2. 遵守设计规范，注重UI细节和用户体验 3. 引入Tailwind CSS CDN而非编写style样式 4. 图片使用unsplash随机图片 5. 界面中避免出现滚动条

产品经理的需求：
偏好：玻璃拟态（Glassmorphism）
优化页面样式：index.html

先不要生成代码，仅给我前端样式优化建议

Ce dialogue fait principalement référence aux suggestions de l'outil de programmation de l'IA et ne nécessite pas de modifications du code, donc passez au dialogue en mode Chat

Les recommandations sont les suivantes :

基于产品经理的需求和现有的二手车租赁网站，我来提供一些设计优化建议：

1. **玻璃拟态风格的应用**
- 将搜索栏和车辆卡片改用玻璃拟态效果，增加背景模糊和透明度
- 添加subtle的光效和渐变，提升高级感
- 考虑在hover状态下增加玻璃材质的光泽变化

2. **配色方案优化**
- 当前的深蓝色(#1e3a8a)略显沉重，建议改用更现代的渐变色
- 可以考虑使用紫蓝色渐变，如 `from-indigo-500 to-purple-500`
- 背景可以添加柔和的渐变和动态效果

3. **布局优化**
- 将搜索栏固定在顶部，实现毛玻璃效果
- 车辆卡片采用网格布局，但增加不规则间距，提升视觉趣味性
- 考虑使用 Masonry 布局，让卡片高度自适应

4. **交互体验提升**
- 为卡片添加平滑的悬浮动画
- 点击时添加ripple效果
- 搜索按钮添加微动效

5. **视觉细节优化**
- 使用 unsplash 的高质量汽车图片，可以考虑固定风格
- 添加subtle的背景图案或几何形状
- 增加适当的阴影层次
- 字体可以考虑更现代的无衬线字体

6. **响应式设计建议**
- 使用 Tailwind 的响应式类
- 在移动端保持玻璃拟态效果但降低模糊度
- 优化触摸区域大小

7. **性能优化建议**
- 使用 Tailwind 的 JIT 模式
- 图片使用 lazy loading
- 考虑使用 webp 格式图片

8. **无障碍性考虑**
- 确保足够的颜色对比度
- 添加适当的 ARIA 标签
- 支持键盘导航

3. optimiser le style de l'interface

我给出以下问题
作为前端设计师帮助产品经理提出UI设计规范。 你要详细了解产品经理描述的用户需求，并针对用户需求调整设计方案。
请遵循以下要求： 1. 现代且有高级感的前端设计 2. 遵守设计规范，注重UI细节和用户体验 3. 引入Tailwind CSS CDN而非编写style样式 4. 图片使用unsplash随机图片 5. 界面中避免出现滚动条

产品经理的需求：
偏好：玻璃拟态（Glassmorphism）
优化页面样式：index.html

前端设计师给出以下建议：
{引用AI编程工具给出的建议}

现在开始优化前端页面

Effet :

Il manque quelque chose...

1. le style n'est pas séparé (il est préférable de réaliser la première étape du tutoriel sur la séparation des styles, et de réduire la duplication du texte et du code, puis de procéder à l'optimisation frontale du style, sinon la quantité de code de la page web sera trop importante et conduira à la génération d'une page incomplète, l'optimisation frontale de la qualité sera également réduite)

2. l'instruction "utiliser l'image aléatoire d'Unsplash", cette phrase n'est pas efficace, ce qui fait que la page ne contient pas d'image. (Les règles officielles d'appel à l'image d'Unsplash ont changé, le grand modèle n'a pas encore compris).

4. la mise au point globale sur la base des questions susmentionnées

Résoudre d'abord le problème de la quantité de code de page, pour les différentes caractéristiques de l'analyse spécifique du problème du projet.

Corriger le problème de l'image placeholder, cette fois-ci au lieu d'appeler unsplash, nous utiliserons simplement l'image placeholder de l'arrière-plan.

L'affichage de l'effet (semble être encore laid...)

Ce type de site web en noir et blanc et de style minimaliste est peut-être mieux adapté, téléchargez l'image de référence et générez à nouveau l'effet.

5. générer un fichier de description de style, d'autres conceptions de pages dues à la conception du document

Partage d'expérience

1) Utiliser l'outil de programmation AI basé sur Claude-3.7-Sonnet.

2. M. dans le code back-end, après la génération du code front-end

3. conserver le document de la note de style

4. ne plus optimiser l'interface utilisateur directement dans les projets complexes, essayer de générer la solution de l'interface utilisateur séparément, les mots clés sont les suivants :

你是一位全栈工程师，同时精通产品规划和UI设计。
我现在想要开发一个“冥想”iOS App，需要输出一套完整的APP原型图，请按照下面的要求执行：
- 模拟真实用户使用冥想类APP的真实场景和需求；
- 结合用户需求，以产品经理的视角去规划APP的功能、页面和交互；
- 结合产品规划，以设计师的视角去输出完整的UI/UX；
- 以上全部页面都在同一个html文件中展示。

5. utiliser davantage de tableaux de référence de l'interface utilisateur, fournir quelques exemples pour éviter la génération de pages trop laides