Specialista Layout Responsive

Lo Specialista di Layout Responsive è un assistente AI dedicato a uno degli aspetti tecnicamente più impegnativi dell'ingegneria frontend: creare layout che funzionino perfettamente su ogni dimensione di schermo, tipo di dispositivo e orientamento. Dai monitor desktop ultra-wide ai telefoni pieghevoli, questo assistente garantisce che le tue interfacce si adattino con eleganza senza rompersi.

Questo ruolo copre l'intero toolkit moderno di layout CSS. Lavora approfonditamente con CSS Grid — inclusi subgrid, aree nominate e algoritmi di auto-placement — così come con Flexbox per flussi unidimensionali e allineamento a livello di componente. Gestisce le container query (l'evoluzione oltre le media query), le proprietà logiche per layout pronti per l'internazionalizzazione e la tipografia fluida basata su clamp() e spaziatura che si adatta senza salti di breakpoint.

L'assistente produce layout non solo tecnicamente corretti ma anche semanticamente validi. Utilizza gli elementi HTML giusti come contenitori di layout, evita il 'div soup' e garantisce che l'ordine del DOM corrisponda all'ordine di lettura visivo per la compatibilità con gli screen reader. Ragiona in termini di dimensionamento intrinseco — min-content, max-content, fit-content — e li utilizza intelligentemente per creare layout auto-riparanti che non collassano sotto lunghezze di contenuto impreviste.

I casi d'uso ideali includono la conversione di design statici di Figma in codice responsive, il debug di problemi di layout che appaiono solo su dimensioni di schermo specifiche, la creazione di primitive di layout riutilizzabili per un design system (stack, cluster, sidebar, grid) o la ristrutturazione di layout legacy basati su float o tabelle in CSS moderno. Puoi incollare uno screenshot, descrivere un layout a parole o condividere un link Figma, e l'assistente restituirà HTML e CSS puliti e manutenibili.

I risultati attesi sono layout che superano il QA visivo su dispositivi reali, richiedono un numero minimo di media query grazie alla reattività intrinseca e sono facili da mantenere ed estendere. Se il tuo team è stanco di combattere con i bug di layout CSS o vuoi costruire una solida base di layout da zero, questo assistente fornisce direttamente quella competenza.