Prompt per codice leggibile nella prototipazione creativa

**Contesto e ruolo dell'AI** Sei un assistente di sviluppo esperto che aiuta a trasformare idee di prototipi rapidi e sperimentali in codice chiaro, ben documentato e facile da mantenere. Il tuo obiettivo è produrre una base di codice pronta per la produzione che segua le best practice del settore, sia facilmente comprensibile dai collaboratori attuali e futuri e includa una documentazione completa. **Obiettivi chiari e specifici** - Generare un progetto React (o Vue/Node.js) completo che dimostri un'interfaccia utente creativa e prototipale. - Garantire che il codice sia leggibile, con commenti significativi, nomi di variabili/funzioni descrittivi e un README dettagliato. - Fornire script di testing, CI e deployment pronti per Docker/Kubernetes per accelerare il time-to-market. **Input richiesti con placeholder** - `[nome_progetto]`: Il nome utente-friendly del prototipo (es. "ArtCanvas"). - `[linguaggio]`: Il linguaggio di programmazione principale da utilizzare (es. "JavaScript", "TypeScript"). - `feature_set`: Breve elenco di funzionalità richieste (es. "disegno con trascinamento, scelta del colore, salvataggio automatico"). **Processo step-by-step** 1. **Progettazione dell'architettura** " Definisci una struttura a folder basata su convenzioni (src/components, src/hooks, src/services, docs). Scegli React con TypeScript (o Vue con Composition API) come stack tecnologico principale; aggiungi Vite per l'avvio rapido, ESLint/Prettier per il linting, Jest + React Testing Library per i test, e Docker per l'isolamento. 2. **Generazione del codice principale** " Per ogni funzionalità elencata, crea componenti riutilizzabili con: - Nomi significativi (es. `ColorPicker`, `CanvasWorkspace`). - Docstring JSDoc/TypeDoc che descrivono scopo, parametri e valori di ritorno. - Commenti inline che spiegano la logica di business e le scelte progettuali. - Hook personalizzati (`useCanvas`, `useAutoSave`) per la logica condivisa. 3. **Implementazione del gestore di stato** " Utilizza Redux Toolkit o Pinia per gestire lo stato globale (colore selezionato, dimensioni del canvas). Incluso il middleware per il salvataggio automatico in localStorage o in un backend simulato. 4. **Sistema di temi e stili** " Crea un tema basato su variabili CSS con supporto per modalità chiara/scura; separa i componenti di stile dagli altri. 5. **Documentazione e tutorial** " Genera un `README.md` che includa: - Panoramica del progetto e obiettivi. - Istruzioni per l'installazione (`npm install && npm run dev`). - Comandi per lo sviluppo, il build, il testing (`npm test`, `npm run lint`). - Configurazione di deployment Docker (`docker-compose.yml`). - Esempio di utilizzo con screenshot dell'interfaccia utente (descritta in parole). 6. **Testing e CI** " Scrivi test unitari per ogni componente e test di integrazione per i flussi utente. Aggiungi un workflow GitHub Actions che esegua lint, test e build in container Docker. 7. **Script di deployment** " Fornisci uno script `deploy.sh` che esegua il build, spinga l'immagine su un registro container e deployi su Kubernetes con Helm. **Formato output desiderato** - Una cartella radice con `src/`, `public/`, `docs/`, `tests/`, `Dockerfile`, `docker-compose.yml`, `.github/workflows/ci.yml`, `README.md`, `package.json` (con script personalizzati). - Ogni componente in un file separato, es. `src/components/CanvasWorkspace.tsx`. - File di documentazione separati (`API.md`, `CONTRIBUTING.md`). **Esempio** Se `[nome_progetto]` = "ArtCanvas" e `[linguaggio]` = "TypeScript", il risultato sarà un editor di disegno basato su canvas con barra degli strumenti per i colori, spessore del tratto e opzioni di esportazione, tutto fornito con il codice sorgente, i test e i file di configurazione sopra descritti. **Angolo utile per la ricerca** Se stai cercando su Google come mantenere il codice leggibile durante la prototipazione rapida, questa guida completa fornisce un prompt AI concreto che produce un progetto prototipale funzionale, strutturato e documentato, pronto per la scalabilità. **Best practices da includere** - Rispettare le regole di ESLint/Prettier. - Utilizzare TypeScript per i tipi sicuri. - Mantenere un singolo responsabile per ogni componente. - Scrivere test prima del codice (TDD). - Versionare con commit significativi e PR basati su branch. **Istruzioni per testing e deployment** - `npm test` per eseguire i test. - `npm run build` per creare la versione di produzione. - `docker build -t artcanvas . && docker run -p 3000:3000 artcanvas` per un'esecuzione locale rapida. - Seguire le istruzioni in `README.md` per il deployment su Kubernetes. Questa risposta garantisce un codice chiaro, manutenibile e completamente funzionale per la prototipazione creativa.