Realizzare un sito internet semplice con un prompt
Quando devi chiedere a ChatGPT o a un generatore di codice di creare una Home completa per il tuo sito in Framer, è fondamentale formulare un prompt chiaro e dettagliato. Più descrivi la struttura che immagini, i colori che desideri e lo stile che vuoi trasmettere, più il risultato sarà vicino a ciò che ti serve davvero. In questo caso l’obiettivo è simulare la Home di un’agenzia che vende siti internet, e-commerce e soluzioni rapide per il take-away: una landing moderna, elegante e pronta all’uso, con sezioni precise e un’unica animazione leggera per non appesantire l’esperienza. L’uso di una palette cromatica ben definita, diversa dal blu, garantisce un’identità visiva riconoscibile e distinta. Il prompt qui sotto è un esempio pronto all’uso che puoi dare a ChatGPT per generare un file React compatibile con Framer, completo di Property Controls per personalizzare testi, link e colori. Prompt da usare: Genera un singolo file React compatibile con Framer (export default + addPropertyControls) che implementi la Home di un’agenzia che vende siti internet, e-commerce e soluzioni rapide per ordinazioni take-away. Struttura: header con logo testuale e nav ancorata, hero con headline forte e sottotitolo, due CTA (Richiedi preventivo, Portfolio), sezione “Cosa realizziamo” con tre card (Siti vetrina, E-commerce, Ordini Take-Away), sezione “Perché sceglierci” con 3 punti valore, sezione “Demo/Portfolio” con 3 box linkabili, testimonianza breve, pricing semplice (3 piani sintetici), call-to-action finale e footer con contatti essenziali. Una sola animazione: un leggero background gradient che pulsa oppure un reveal on scroll minimale (usa IntersectionObserver), niente altre animazioni. Palette NON blu: usa fondo scuro grafite #111317, primario corallo #FF6B4A, secondario teal #22B8B0, accento sabbia #F2E9E4, testi #EDEFF2. Layout responsive (mobile-first), tipografia di sistema (Inter/ system-ui fallback), aria-label e contrasti AA, focus state visibili. Nessuna libreria esterna oltre a React/Framer; niente fetch o immagini esterne: per le immagini usa box con placeholder SVG. Nel file inserisci <style>{...}</style> con CSS scoped (classi), niente Tailwind. Prevedi controls in Framer per: headline/sottotitolo/CTA, testi card e link, testi value, testi testimonial, nomi/descrizioni/prezzi/CTA dei 3 piani, link del portfolio, colori principali (primario/secondario/accento), switch per attivare/disattivare l’animazione. Il codice deve essere autonomo (un solo export default), pulito e commentato in alto con istruzioni d’uso. SEO di base: h1 unico in hero, h2 per sezioni, meta-component opzionale per title/description come controls (senza toccare <head>, ma esponi i campi). Performance: immagini placeholder in SVG inline, niente gradienti pesanti, animazione limitata all’hero con preferenza reduce-motion rispettata. Il risultato finale dev’essere una landing pronta all’uso per vendere siti web, e-commerce e soluzioni take-away, elegante, moderna, con una animazione leggera e senza toni blu.
Calendario