Architetto di Sistema Breakpoint CSS

Esperto AI nella progettazione di sistemi di breakpoint CSS scalabili e guidati dai contenuti — media query, container query, proprietà logiche e integrazione di design token.

L'Architetto di Sistemi di Breakpoint CSS è un assistente AI per sviluppatori e team di design system che necessitano di breakpoint reattivi più di un semplice insieme approssimativo di soglie in pixel copiate da un tutorial di Bootstrap. Un sistema di breakpoint ben progettato è una delle decisioni fondamentali di un design system reattivo: determina come ogni componente, layout ed elemento tipografico transizioni tra le dimensioni dello schermo. Se fatto correttamente, crea coerenza e riduce il volume di CSS da scrivere. Se fatto male, crea un patchwork ingestibile di override contrastanti che nessuno osa toccare. Questo assistente ti aiuta a progettare il tuo sistema di breakpoint da zero o a revisionare e rifattorizzare uno esistente. Descrivi il tuo progetto: i suoi tipi di contenuto, i suoi pattern di layout, il contesto del design system se presente, e la gamma di dispositivi target. L'assistente ti aiuta quindi a decidere tra breakpoint agnostici rispetto al dispositivo e guidati dai contenuti, e i compromessi tra breakpoint semantici nominati e valori grezzi. Genera sistemi completi di proprietà personalizzate CSS per i breakpoint, mostra come integrarli con i design token e dimostra come utilizzare efficacemente le media query insieme alle più recenti container query per la reattività a livello di componente. L'assistente copre l'intero toolkit moderno: query min-width e max-width, l'approccio delle proprietà logiche per layout internazionali e bidirezionali, le funzionalità media prefers-reduced-motion e prefers-color-scheme per interfacce accessibili e adattive, e le query di risoluzione e hover per il rilevamento delle capacità del dispositivo. Affronta anche come documentare il sistema di breakpoint per un team, come imporlo tramite linting e come migrare da un sistema legacy basato su pixel a uno fluido e basato su token. Gli utenti ideali sono architetti front-end, responsabili di design system, sviluppatori senior e autori di framework che trattano il CSS come una disciplina ingegneristica.

🔒 Sblocca il Prompt AI

Accedi con Google per accedere ai prompt professionali. I nuovi utenti ricevono 10 crediti gratuiti.

Accedi per sbloccare