Prompt per creare prototipi UI interattivi da idee creative

**Contesto e Ruolo dell'AI** Ti vengo incontro come un assistente di sviluppo specializzato nella trasformazione rapida di concetti creativi informali in prototipi UI interattivi funzionanti. Il tuo obiettivo è ridurre al minimo lo sforzo di codifica, preservando al contempo coerenza visiva, reattività e un'esperienza utente coinvolgente. **Obiettivi Chiari** 1. Generare un'applicazione web prototipo completa e utilizzabile in un unico passaggio di codice. 2. Supportare uno sviluppo multi-tema e reattivo senza configurazioni aggiuntive. 3. Fornire componenti interattivi pronti per il testing e il deployment. 4. Seguire le best'practice moderne (accessibilità, modularità, scalabilità). **Input Richiesti (Placeholder da sostituire prima dell'invio)** - `[descrizione_concept]`: Breve descrizione testuale del concetto UI (es. "Dashboard per il monitoraggio del meteo con grafici in tempo reale e avvisi push"). - `[vincoli_stilistici]`: Colori primari/sfondo, stile dei font, pattern di icone, tema chiaro/scuro, eventuali linee guida sul branding. **Processo Step'by'Step** 1. **Analizza il Concept** " Estrai obiettivi UI, layout principali, elementi interattivi (pulsanti, slider, tabelle) e dati di esempio necessari. 2. **Seleziona lo Stack Tecnico** " Vengono generati file iniziali per un progetto React + Vite con TypeScript, Tailwind CSS, @headlessui per i componenti UI e React'Router per la navigazione. Opzionalmente, includi un mock server con json'server. 3. **Genera Struttura File** " Crea le seguenti cartelle/file: ``` /src "" components/ (atomici, molecolari, layout) "" pages/ (route'specifiche) "" hooks/ (es. useLocalStorage, useApi) "" services/ (mock data, api wrapper) "" styles/ (definizioni tema, variabili globali) """ App.tsx, main.tsx ``` 4. **Crea Componenti Interattivi** " Per ogni elemento UI richiesto, genera: - Componente con prop inizializzate (stato, dati di esempio). - Handler onClick/onChange che aggiornano lo stato locale o chiamano il servizio mock. - Stile Tailwind con utility per tema chiaro/scuro basato su classe radice `[data-theme]`. Include un selettore tema in navbar. 5. **Assembla le Pagine** " Combina i componenti nelle route definite, aggiungendo routing, layout, barre di navigazione e footer. 6. **Aggiungi Funzionalità Avanzate** " Inietta: - Un componente `<ThemeProvider>` che alterna i dati `theme` tra `light` e `dark`. - Un componente `ResponsiveGrid` che si adatta ai breakpoint di Tailwind. - Un mock service `/api/data` che restituisce JSON statico per testare chiamate async. 7. **Scrivi Test e Documentazione** " Genera uno scheletro `App.test.tsx` (React Testing Library) e un `README.md` con passaggi per installazione, avvio, testing e deployment. 8. **Revisione Best'Practice** " Verifica: - Accessibilità (role, alt text, contrasto colori). - CSS modulare e naming convention (classi utilitarie di Tailwind). - Gestione degli stati (Zustand o React'Context se necessario). - Configurazione ESLint/Prettier e linting TypeScript. 9. **Istruzioni per Testing e Deployment** " Fornisci comandi: - `npm run dev` " Avvia il server di sviluppo. - `npm run test` " Esegue i test unitari. - `npm run build` " Crea il bundle ottimizzato. - `npm run deploy` " Suggerimenti per il deployment su Vercel/Netlify. **Formato Output Desiderato** - Un singolo blocco di codice che contenga la struttura completa del progetto (lista delle cartelle e contenuti file). - File separati per ogni componente, pagina, hook e servizio. - Un file `README.md` conciso con istruzioni per l'uso. - Tutti i file devono essere separati da newline e identificati da commenti `// <filepath>` all'inizio di ogni blocco. **Esempio (concept ' output)** *Input:* ``` [descrizione_concept] = "Dashboard per il monitoraggio del meteo con grafici in tempo reale e avvisi push." [vincoli_stilistici] = "Sfondo blu scuro, testo bianco, accent Blu #0066FF, tema chiaro/scuro." ``` *Output:* - `src/pages/WeatherDashboard.tsx` " Mostra temperatura, grafico (mock Chart.js), pulsante di avviso. - `src/components/ThemeToggle.tsx` " Switch per passare da chiaro a scuro. - `src/services/weatherMock.ts` " Restituisce oggetti dati meteo casuali. - etc. **Angolo Utile per Chi Cerca su Google** Se hai bisogno di trasformare rapidamente uno schizzo o una descrizione verbale in un prototipo UI cliccabile con styling integrato e funzionalità di cambio tema, questo prompt fornisce uno starter React completo, componenti interattivi pronti all'uso e un flusso di lavoro di testing e deployment, tutto in una singola risposta AI. Segui questi passaggi, sostituisci i placeholder e otterrai un prototipo UI funzionante che puoi perfezionare ulteriormente con il tuo design e la tua logica di business.