J'ai renoncé à demander à mon constructeur d'IA d'écrire de bonnes requêtes multimédias

Chaque site produit par mon créateur de site Web IA était superbe sur un téléphone et faible sur un ordinateur de bureau. Le héros s'étendait bord à bord en une seule colonne anémique. Les grilles de fonctionnalités sont restées sur une seule colonne sur un moniteur de 27 pouces. Le rembourrage des sections qui semblait généreux sur mobile semblait vide sur la largeur du bureau.

J'ai passé deux semaines à essayer de résoudre ce problème du côté des invites. Rien de tout cela n’a fonctionné comme je le souhaitais. Ensuite, j'ai complètement abandonné l'approche et j'ai basculé la génération vers Tailwind via CDN. Le problème du bureau a disparu.

Ceci explique pourquoi l'approche originale était erronée, ce que j'ai essayé en premier et le changement spécifique qui comptait.

Le symptôme

L'invite du système a demandé au modèle d'écrire du CSS axé sur le mobile :

CSS par défaut cible les mobiles (≤480px) ; superposez-vous avec@media (largeur minimale : 768 px)et(largeur minimale : 1 024 px).

Les modèles ont suivi les instructions. Ils ont écrit de bonnes règles mobiles. Ensuite, ils ont écrit des remplacements de bureau minces et sans enthousiasme – une largeur maximale ici, une requête multimédia pour une disposition sur deux colonnes là. Il manquait des éléments essentiels : des largeurs de conteneur délimitées, de véritables grilles à plusieurs colonnes, une typographie véritablement mise à l'échelle, un rythme de remplissage de section délibéré. Le bureau n'était pas cassé, il était sous-conçu. ...
[Courte citation de 8% de l'article original]