> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.
> ## Agent Instructions
> Internal links on these pages omit the .md extension. Append .md to a docs page URL, or send an Accept: text/markdown header, to get that page as markdown.
# Progettare la tua app
> Personalizza l'aspetto della tua app con il pannello Theme per colori e font globali, Edit mode per lo stile dei singoli elementi e la chat AI per temi, modalità scura e animazioni.
Base44 offre diversi modi per progettare la tua app: il pannello **Theme** per colori e font globali, la modalità **Edit** per lo stile del singolo elemento e la chat AI per modifiche più ampie. Questa pagina copre il pannello Theme e lo stile globale; per i flussi di design guidati dall'AI con prompt che puoi usare direttamente, vedi [Progettare con l'AI](/Building-your-app/Designing-with-AI).
***
## Lavorare con l'IA sul design
L'AI è al centro di come progetti in Base44. Descrivi ciò che vuoi in linguaggio naturale e l'AI aggiorna codice, stili e componenti per te.
Per imparare a dare un brief all'AI come a un designer, ritoccare gli elementi in modalità **Edit**, impostare limiti con gli AI Controls e scegliere tra le opzioni di design che propone, vedi [Progettare con l'AI](/Building-your-app/Designing-with-AI).
***
## Modifiche globali
Il pannello **Theme** ti permette di impostare colori e font per l'intera app da un unico punto. Ogni modifica si applica ovunque all'istante, così non devi aggiornare gli elementi uno per uno.
Il pannello mostra un'anteprima della tua palette attuale in alto, seguita da un elenco di ruoli di colore personalizzabili, come background, foreground, primary, secondary, card e popover. Clicca **Fonts** in alto per impostare invece il font della tua app.
### Colori del tema
Clicca su qualsiasi ruolo di colore per aggiornarlo in tutta la tua app.
**Per cambiare un colore nel tuo tema:**
1. Clicca l'icona **Theme** in alto nell'editor dell'app.
2. Clicca su qualsiasi ruolo di colore nell'elenco per aprire il selettore. La barra in alto è un'anteprima della palette attuale e non è cliccabile.
3. Scegli il colore trascinando il selettore, inserendo un valore esadecimale, usando il contagocce per campionare un colore sullo schermo o scegliendo da una palette dal menu a discesa in basso.
4. Clicca **Apply** per vedere l'anteprima nella tua app.
5. Clicca **Save & Apply** nel pannello **Theme** per applicarlo ovunque.
Inizia dal colore primario e dallo sfondo, poi lascia che guidino le altre scelte. Mantenere colori di primo piano e sfondo con contrasto elevato rende il testo leggibile in tutti i componenti.
Se i colori del tuo tema non corrispondono a quelli attuali della tua app, puoi chiedere alla chat AI di sincronizzarli. Per esempio: `Update my theme to match the colors used in my app`.
### Font
Imposta i font della tua app dalla scheda **Fonts** nel pannello **Theme**. Per ogni font usato dall'app appare un menu a discesa.
**Per cambiare i font dell'app:**
1. Clicca l'icona **Theme** in alto nell'editor dell'app.
2. Clicca la scheda **Fonts**.
3. Clicca un menu a discesa e seleziona un font. Puoi cercare per nome, sfogliare **Brand Fonts** e **All fonts** o cliccare **Upload Fonts** per aggiungere i tuoi.
4. Clicca **Save & Apply** per applicare le modifiche a tutta l'app.
Se non vedi la scheda **Fonts**, la tua app potrebbe non avere ancora variabili di font del tema impostate. Chiedi alla chat AI di aggiungerle: `Add theme font variables to my app so I can change fonts from the Theme panel`.
***
## Modifiche degli elementi
Quando sei in modalità **Edit**, puoi impostare lo stile di qualsiasi singolo elemento direttamente. Seleziona un elemento e usa le icone nella barra Edit per cambiare colori, tipografia, spaziatura, raggio degli angoli, opacità o aggiungere classi Tailwind personalizzate. Le opzioni disponibili nella barra cambiano in base al tipo di elemento selezionato.
La modalità Edit funziona sulla maggior parte degli elementi che contengono testo, inclusi elementi di lista, celle di tabella, pulsanti e citazioni. Le modifiche vengono salvate e aggiornano subito l'anteprima live, e se una modifica non può essere applicata a un elemento, un messaggio ti spiega perché.
### Colori
Puoi impostare il colore di sfondo e del testo di qualsiasi elemento usando i colori definiti nel tema o un colore personalizzato.
**Per cambiare il colore di un elemento:**
1. Clicca **Edit** in alto nell'editor.
2. Seleziona l'elemento da modificare.
3. Clicca l'icona **Colors** nella barra Edit.
4. Seleziona la parte da modificare, come sfondo o testo.
5. Scegli il colore:
* **Theme:** scegli tra i ruoli di colore definiti nel tema, come background, foreground, card e primary.
* **Custom:** trascina il selettore, inserisci un valore esadecimale, usa il contagocce o scegli da una palette.
6. Clicca **Apply** per confermare la modifica.
Per gli elementi immagine, la barra mostra un pulsante **Replace** al posto dell'opzione Colors. Clicca **Replace** per sostituire l'immagine.
### Tipografia
Quando selezioni un elemento di testo, la barra Edit mostra i controlli per famiglia e dimensione del font. Un pannello **Text style** separato dà accesso ad allineamento, maiuscole e decorazione.
**Per modificare il contenuto del testo:**
1. Clicca **Edit** in alto nell'editor.
2. Seleziona l'elemento di testo.
3. Clicca l'icona **T** nella barra Edit.
4. Digita le modifiche nel campo **Text content**.
Se il contenuto del testo è generato dinamicamente, il pannello Text Content mostra un messaggio che non può essere modificato direttamente. Usa la chat AI per cambiare il testo dinamico.
**Per cambiare il font:**
1. Clicca **Edit** in alto nell'editor.
2. Seleziona l'elemento di testo.
3. Clicca il menu a discesa della famiglia di font nella barra Edit.
4. Cerca o sfoglia i font e clicca su uno per applicarlo. Passa il mouse su un font con una freccia **>** per vedere i pesi disponibili, poi clicca un peso per applicarlo.
Per usare un font personalizzato, clicca **Upload Fonts** in fondo al menu a discesa. Puoi caricare file TTF, OTF, WOFF o WOFF2 fino a 5 MB. I font caricati appaiono sotto **Custom Fonts** nel filtro.
**Per cambiare la dimensione del font:**
1. Clicca **Edit** in alto nell'editor.
2. Seleziona l'elemento di testo.
3. Clicca il menu a discesa della dimensione nella barra Edit.
4. Scegli una dimensione. Le dimensioni disponibili vanno da 12 a 128.
**Per cambiare lo stile del testo:**
1. Clicca **Edit** in alto nell'editor.
2. Seleziona l'elemento di testo.
3. Clicca l'icona **Text style** nella barra Edit.
4. Regola le impostazioni che vuoi cambiare:
* **Alignment:** left, center, right o justify.
* **Case:** none, uppercase, lowercase o capitalize.
* **Decoration:** none, underline, strikethrough o italic.
### Spaziatura
Puoi impostare il margine e il padding di qualsiasi elemento in px, controllando ciascun lato in modo indipendente.
**Per cambiare la spaziatura di un elemento:**
1. Clicca **Edit** in alto nell'editor.
2. Seleziona l'elemento da modificare.
3. Clicca l'icona **Spacing** nella barra Edit.
4. Inserisci valori in px per margine e padding. Usa i controlli abbreviati orizzontale e verticale per impostare entrambi i lati.
### Raggio degli angoli
Puoi arrotondare gli angoli di qualsiasi elemento inserendo un valore in px.
**Per cambiare il raggio degli angoli di un elemento:**
1. Clicca **Edit** in alto nell'editor.
2. Seleziona l'elemento da modificare.
3. Clicca l'icona **Corners** nella barra Edit.
4. Inserisci un valore in px o usa le frecce per regolarlo.
### Opacità
Puoi rendere qualsiasi elemento completamente opaco, semi-trasparente o via di mezzo.
**Per cambiare l'opacità di un elemento:**
1. Clicca **Edit** in alto nell'editor.
2. Seleziona l'elemento da modificare.
3. Clicca l'icona **Opacity** nella barra Edit.
4. Trascina lo slider o inserisci un valore da 0 (trasparente) a 100 (opaco).
### Classi Tailwind
Per gli stili non coperti dalle altre opzioni, puoi inserire qualsiasi classe Tailwind CSS direttamente.
**Per aggiungere classi Tailwind a un elemento:**
1. Clicca **Edit** in alto nell'editor.
2. Seleziona l'elemento da modificare.
3. Clicca l'icona **Tailwind classes** nella barra Edit.
4. Digita qualsiasi classe Tailwind CSS. Per esempio, `shadow-lg` aggiunge un'ombra grande e `border border-gray-200` aggiunge un bordo sottile.
***
## Design system
Queste sezioni spiegano come stabilire modelli di design coerenti a livello di app tramite la chat AI. Consideralo il livello delle regole che rende coesivi il tema globale e le modifiche ai singoli elementi.
### Sistema di colori
Il colore è uno dei tuoi strumenti più forti per definire l'atmosfera e guidare l'attenzione. Inizia definendo ruoli piuttosto che codici esadecimali casuali. Punta a:
* 1 colore primario del brand
* 1 colore secondario
* 1 colore accent per gli evidenziamenti
* Da 3 a 5 grigi neutri per sfondi, superfici e bordi
* Colori chiari per gli stati di successo, avviso ed errore
Puoi chiedere all'IA di proporre e applicare un sistema completo da zero:
```text theme={null}
Create a color system for this app:
- 1 primary brand color
- 1 secondary color
- 1 accent color for highlights
- 4 neutral grays for backgrounds, surfaces, and borders
Map colors to roles such as primary, surface, border, success, warning, error.
Ensure text on backgrounds meets accessibility contrast levels.
Apply this system across the app and replace one off colors.
```
Mantieni il significato dei colori coerente. Per esempio, usa il colore del successo solo per stati positivi e quello dell'errore solo per i problemi, non per decorazione.
Se hai già codici esadecimali da una brand guide o uno strumento esterno, incollali e lascia che l'IA li mappi ai ruoli:
```text theme={null}
Use this palette and assign each hex to a role:
- #1D4ED8
- #6366F1
- #10B981
- #F3F4F6
- #111827
Define which are primary, secondary, accent, and neutral roles.
Replace hard coded colors with tokens or Tailwind classes that follow these roles.
```
Puoi caricare uno screenshot o un'immagine della tua palette direttamente nella chat AI e chiedere di applicare i colori alla tua app:
```text theme={null}
Apply the colors from this image to my app.
Map each color to a role such as primary, background, foreground, and accent.
Replace existing colors across the app to match.
```
***
### Sistema tipografico
La tipografia controlla quanto la tua app risulti leggibile e scansionabile. Meglio pochi stili di testo chiari che molti simili.
Definisci ruoli come:
* Titolo di pagina
* Titolo di sezione
* Testo del corpo
* Metadati piccoli come etichette e timestamp
Puoi chiedere all'IA di impostarlo e applicarlo ovunque:
```text theme={null}
Set up a typography system:
- Page titles: largest size, bold, modern sans serif
- Section headings: medium size, semibold
- Body text: standard size, regular weight
- Metadata: small uppercase with extra letter spacing
Apply these roles consistently across all pages and remove ad hoc font sizes.
```
Puoi anche indicare le dimensioni in modo diretto:
```text theme={null}
Make typography more readable:
- Increase base body text size slightly
- Increase line height for paragraphs
- Ensure headings are at least 1.4x the size of body text
Keep font families the same.
```
Puoi usare font personalizzati e applicarli tramite il tuo layout.
1. Prendi lo snippet di embed (per esempio da Google Fonts su [https://fonts.google.com](https://fonts.google.com)).
2. Chiedi all'IA di aggiungerlo a `Layout.js` e collegarlo al tuo sistema tipografico.
Esempio di prompt:
```text theme={null}
Import the "Raleway" font from Google Fonts.
Use it for page titles and section headings.
Keep the current body font for paragraphs.
Update styles across the app to follow this rule.
```
Cerca di limitarti a una o due famiglie di font. Troppi font rendono l'interfaccia meno strutturata e più difficile da mantenere.
***
### Spaziatura e densità
Spaziatura e densità controllano quanto l'app risulti comoda da usare. Una semplice scala di spaziatura evita spazi casuali e sezioni troppo compresse.
Puoi definire una scala come 4, 8, 12, 16, 24 e chiedere all'IA di applicarla:
```text theme={null}
Normalize spacing using this scale: 4, 8, 12, 16, 24.
- Use larger values between major sections
- Use medium values inside cards and panels
- Use small values between labels and inputs
Reduce areas that feel cramped and avoid random spacing values.
```
Se una pagina sembra affollata o troppo vuota, puoi lasciare che la chat AI diagnostichi e risolva:
```text theme={null}
Look at this page and adjust spacing:
- Add more top and bottom padding around each section
- Increase the gap between rows of cards
- Ensure long paragraphs have a comfortable line length
Keep the existing colors and content.
```
***
### Elementi principali e stati
Una volta impostati colore, tipo e spaziatura, standardizza gli elementi di base che usi ovunque.
Concentrati su:
* Pulsanti (primary, secondary e text only)
* Card e pannelli
* Barre di navigazione e sidebar
* Campi dei form (default, focus, error, disabled)
* Chip, tag e badge se li usi
Puoi chiedere all'IA di rilevare e unificare i modelli:
```text theme={null}
Standardize core elements:
- Buttons: define primary, secondary, and text only styles
- Cards: define corner radius, padding, shadow, and header/body layout
- Navigation: define active, hover, and disabled states
- Form fields: define default, focus, error, and disabled states
Apply these patterns across the app and replace mismatched styles.
```
Questo ti dà un linguaggio riutilizzabile per far sembrare le nuove pagine parte dello stesso prodotto.
***
## Immagini e risorse visive
Le risorse visive come immagini, icone e video definiscono l'atmosfera dell'app. L'IA può aiutarti a crearle, posizionarle, definirne lo stile e collegarle ai dati e al codice.
Carica immagini o video nella chat AI per dare contesto visivo sullo stile, layout o contenuto della tua app.
Puoi chiedere alla chat AI di aggiungere hero image direttamente alle tue pagine:
```text theme={null}
Add a full width hero image to the homepage that matches the current color palette.
Use a placeholder image that suggests a modern analytics dashboard.
```
Per sostituire un'immagine placeholder:
1. Apri il file della pagina rilevante come `Store.js` nella vista codice.
2. Trova il tag `![]()
`.
3. Aggiorna l'attributo `src` con l'URL della tua immagine.
Puoi anche caricare immagini per le entità nella sezione **Data** e collegarle ai componenti in modo che card ed elenchi mostrino automaticamente le immagini giuste.
Chiedi alla chat AI di generare brevi video per sezioni visive come hero, anteprime di prodotto, tutorial o schermate di onboarding.
Esempio di prompt:
```text theme={null}
Create a short onboarding video for my fitness app showing a simple morning workout routine. Add it to the welcome screen above the Get Started button.
```
Generare video dalla chat AI richiede un [piano Starter](/Account-and-billing/Billing-and-plans) o superiore. Ogni video generato usa i crediti messaggio del prompt più 1 credito messaggio aggiuntivo.
Puoi anche permettere alle persone di generare video nella tua app in produzione. Scopri di più sulla [generazione di video](/Integrations/built-in-integrations#generating-videos).
Le immagini di riferimento aiutano a guidare visivamente il design mostrando alla chat AI uno stile, layout, palette di colori o direzione visiva da usare.
1. Clicca l'icona **Upload (+)** nella chat AI.
2. Carica un'immagine di ispirazione o uno screenshot.
3. Di' all'IA esattamente cosa vuoi prendere e cosa ignorare.
Idee di prompt:
```text theme={null}
Use this reference as inspiration.
Keep my layout and content, but:
- Match the button shapes and shadows
- Match the card corner radius and border style
- Apply a similar soft gradient only to the top header
Do not copy the exact colors, just the structure and feel.
```
```text theme={null}
From this screenshot, extract design rules for:
- Color roles
- Font sizes and weights
- Corner radius and shadows
- Spacing between sections and cards
Explain the rules, then apply a similar style using my current brand colors.
```
Puoi copiare stili visivi direttamente da uno strumento di design come Figma e chiedere a Base44 di applicarli, invece di provare a descrivere ogni dettaglio a parole.
**Per copiare da Figma:**
1. In Figma, seleziona l'elemento di cui vuoi copiare lo stile.
2. Passa alla modalità **Dev mode** e apri il pannello **Code**.
3. Copia la riga CSS rilevante, per esempio uno sfondo con gradient: `background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);`
4. In Base44, apri **Visual Edit** e seleziona l'elemento corrispondente.
5. Incolla lo stile in un prompt AI e di' a Base44 esattamente cosa cambiare, per esempio:
```text theme={null}
Change the background style of this element to:
background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);
Keep all other styles the same.
```
Questo ti permette di abbinare gradienti, ombre, bordi e altri stili dal tuo file di design in modo molto preciso.
Le icone devono supportare il significato, non essere solo decorative. La coerenza è fondamentale.
Compiti comuni:
* Sostituire icone generiche con altre più significative.
* Allineare dimensioni e spessore del tratto delle icone.
* Abbinare le icone alle etichette di testo dove la chiarezza è importante.
Puoi usare librerie di icone come Lucide e chiedere alla chat AI di collegarle:
```text theme={null}
Replace generic icons with more meaningful ones:
- Use icons that clearly match each navigation item and main action
- Keep icon size and stroke width consistent
- Align icons neatly with labels in navigation, lists, and buttons
```
```text theme={null}
Update all primary call to action buttons:
- Use the "sparkles" icon to the left of the label
- Keep icon size small and padding even
- Do not add icons to secondary or destructive buttons
```
***
## Layout e responsività
Il layout controlla come le informazioni sono raggruppate e scansionate. La responsività assicura che funzioni su ogni dispositivo.
Pensa in termini di tipi di pagina piuttosto che schermate isolate:
* Landing e pagine di marketing
* Dashboard
* Elenchi e tabelle
* Pagine di dettaglio
* Form e wizard
* Pagine di impostazioni e profilo
Puoi chiedere alla chat AI di rilevare e standardizzare i modelli:
```text theme={null}
Identify the main page types in this app (landing, dashboard, list, detail, form, settings).
For each type:
- Propose a consistent layout structure
- Suggest which existing components to reuse
Apply those layouts to all pages of the same type, without changing content.
```
Gerarchia e spazio bianco aiutano le persone a vedere subito ciò che conta.
Idee da chiedere all'IA:
```text theme={null}
Improve visual hierarchy and white space on this page:
- Make the page title clearly stand out above other text
- Use consistent section headings to group content
- Add more top and bottom padding around each section
- Increase the gap between rows of cards
Avoid adding new colors or fonts.
```
Lo spazio bianco è particolarmente importante per contenuti densi come dashboard e tabelle, quindi lascia respirare gli elementi chiave.
La tua app deve risultare naturale su telefoni, tablet e desktop.
Puoi codificare regole responsive in un unico prompt:
```text theme={null}
Make this layout responsive:
- On phones, use a single vertical column and stack sections
- On tablets, use two columns for cards where space allows
- On desktops, use three or four columns for cards
Keep images in a 4:3 aspect ratio.
Collapse the sidebar into a top menu on smaller screens.
Avoid horizontal scrolling at all breakpoints.
```
Usa l'anteprima dispositivo nell'editor di Base44 per verificare come si comportano queste regole su diverse dimensioni di schermo, poi affinale con prompt successivi.
### Personalizzare la tua app per mobile
La tua app Base44 adatta automaticamente il layout a qualsiasi dispositivo, ma puoi usare l'anteprima mobile dell'editor e gli strumenti di personalizzazione per rifinire come appare e funziona su mobile. Questo ti permette di creare un'esperienza comoda e fluida per gli utenti mobili.
**Per personalizzare la tua app per mobile:**
1. Vai all'editor della tua app.
2. Clicca l'icona **Screen** in alto e seleziona **Mobile**.
3. Rivedi layout, navigazione e contenuto.
4. Apporta le modifiche necessarie tramite:
* Chiedere alla chat AI di modificare la versione mobile.
* Usare la modalità **Edit** nella chat AI per cambiare design o layout di elementi specifici.
**Consigli per far apparire bene la tua app su mobile:**
* Assicurati che il testo sia leggibile
* Ridimensiona gli elementi per adattarli allo schermo mobile
* Nascondi o mostra elementi secondo necessità
* Assicurati che pulsanti e icone siano facili da toccare
* Verifica che le immagini appaiano bene
***
## Tipi di pagina
Tipi di pagina diversi richiedono scelte di design diverse. Puoi usare questi modelli come punto di partenza e adattarli con l'IA.
Concentrati su una promessa chiara, un'unica call to action e una forte gerarchia visiva.
Consigli di design:
* Usa un header semplice con navigazione minima.
* Rendi la hero section chiara e focalizzata, con un titolo breve e un unico pulsante primario.
* Usa sezioni di supporto per vantaggi, funzionalità e prove sociali.
* Mantieni i form brevi e sopra la piega quando possibile.
Esempio di prompt:
```text theme={null}
Design the homepage as a focused landing page:
- Clean hero section with a short headline, one supporting sentence, and one primary call to action
- Follow with three key benefits in cards
- Add a simple social proof section with logos
- Keep navigation minimal
Use my existing color and typography system.
```
Le dashboard dovrebbero rispondere a "Come sto andando?" a colpo d'occhio.
Consigli di design:
* Metti la metrica o lo stato più importante in alto a sinistra.
* Raggruppa metriche correlate in card con titoli chiari e brevi descrizioni.
* Evita troppi tipi di grafico in una schermata, riusa alcuni standard.
* Mantieni filtri e intervalli temporali visibili e coerenti.
Esempio di prompt:
```text theme={null}
Restructure this dashboard:
- Place the main KPI at the top left in a prominent card
- Group related metrics into a 2x2 grid of cards
- Move filters and date range controls into a clean top bar
- Reduce visual noise in charts by using consistent colors and styles
```
Elenchi e tabelle permettono di scansionare e agire su molti elementi.
Consigli di design:
* Usa intestazioni di colonna chiare con abbastanza spaziatura.
* Mantieni l'altezza delle righe comoda, non troppo compressa.
* Usa zebrature o separatori sottili per tabelle grandi.
* Metti le azioni alla fine della riga o in un menu coerente.
* Aggiungi stati vuoti, di caricamento ed errore.
Esempio di prompt:
```text theme={null}
Clean up this table view:
- Increase row height slightly
- Use subtle row separators or zebra striping
- Align actions in a consistent column at the end
- Add a clear empty state with a short message and primary action
```
Le pagine di dettaglio devono rendere evidenti l'oggetto principale e le sue azioni chiave.
Consigli di design:
* Metti il titolo dell'oggetto e le azioni primarie in alto.
* Usa un layout chiaro con una colonna principale e un pannello laterale opzionale.
* Raggruppa le informazioni correlate con intestazioni o tab.
* Mantieni le azioni distruttive visivamente distinte e posizionate con cura.
Esempio di prompt:
```text theme={null}
Improve this detail page:
- Move the main title and primary actions to the top of the page
- Use a two column layout with main content on the left and secondary info on the right
- Group related fields under small headings
- Make destructive actions clearly labeled and visually distinct
```
I form sono dove avvengono molti flussi chiave. Devono risultare semplici e tolleranti.
Consigli di design:
* Raggruppa campi correlati sotto intestazioni.
* Usa un layout a colonna singola per la maggior parte dei form.
* Mostra la progressione per flussi lunghi e multi-step.
* Metti i messaggi di errore vicino ai campi e rendili chiari.
* Usa etichette e testi di aiuto chiari.
Esempio di prompt:
```text theme={null}
Redesign this form for clarity:
- Use a single column layout
- Group related fields under short headings
- Add clear labels and helper text where needed
- Show inline error messages under each field when validation fails
Use my existing typography and spacing system.
```
***
## Temi e modalità
La direzione visiva è il tono generale della tua app. I temi sono modi per esprimere quel tono usando profondità, colore ed effetti. In Base44 puoi puntare su un tema mantenendo intatto il tuo brand.
### Temi di design
Elementi morbidi ed estrusi che sembrano premuti o rialzati dallo sfondo.
Ideale per strumenti calmi con contenuti semplici.
Caratteristiche principali:
* Ombre interne ed esterne sottili
* Palette morbide e monocromatiche
* Profondità minima e forme pulite
Idea di prompt:
```text theme={null}
Give this app a soft neumorphic touch:
- Keep the current color palette
- Add subtle shadows to cards and primary buttons
- Avoid heavy contrast backgrounds
- Keep text contrast high for readability
```
Superfici in vetro smerigliato con trasparenza ed effetti di blur.
Ideale per overlay, pannelli laterali e card selezionate.
Caratteristiche principali:
* Blur di sfondo
* Pannelli trasparenti con bordi sottili
* Effetti leggeri di glow e riflesso
Idea di prompt:
```text theme={null}
Apply a subtle glass effect to overlays and side panels only:
- Use translucent surfaces with blur and a thin border
- Keep backgrounds simple so text remains readable
- Maintain strong text contrast on glass surfaces
Do not apply glass effects to all cards or main content.
```
Layout strutturato basato su griglia con elevazione chiara e colori decisi.
Ideale per dashboard, strumenti admin e app con molti dati.
Caratteristiche principali:
* Livelli di elevazione chiari
* Griglie e allineamenti puliti
* Motion intenzionale
Idea di prompt:
```text theme={null}
Move this app toward a soft material style:
- Use clear card elevation for key sections
- Clean up alignment and grids so content lines up
- Use bold, flat colors rather than strong gradients
- Keep transitions subtle and purposeful
```
Elementi morbidi e gonfi con forme arrotondate e ombre delicate.
Ideale per app giocose, onboarding o esperienze più leggere.
Caratteristiche principali:
* Angoli arrotondati
* Palette pastello o morbide
* Ombre morbide e uniformi
Idea di prompt:
```text theme={null}
Add a light clay feel to key components:
- Round the corners of cards and primary buttons more
- Use softer shadows under those components
- Keep backgrounds neutral so the app remains readable
Apply this style only to interactive elements, not long text sections.
```
Deliberatamente audace, con forti blocchi di colore e bordi spessi.
Ideale per landing page e strumenti interni dove la personalità conta più della sottigliezza.
Caratteristiche principali:
* Combinazioni di colori ad alto contrasto
* Bordi spessi e forme forti
* Tipografia grezza e griglie semplici
Idea di prompt:
```text theme={null}
Apply a controlled neo brutalist feel to the marketing pages:
- Use one bold accent color, one dark, and one light neutral
- Add thick borders and clear sections
- Make headings large and confident
- Keep body text highly readable
Do not apply this style to data tables or dense forms.
```
### Temi light e dark
I temi light e dark permettono alle persone di scegliere ciò che preferiscono e possono aiutare in ambienti diversi.
Puoi chiedere alla chat AI di aggiungere il supporto ai temi e un interruttore.
Cambiare modalità ridefinisce lo stile dell'intera app, non solo lo sfondo.
Prompt:
```text theme={null}
Add light and dark mode support:
- Light mode: soft gray backgrounds and dark text
- Dark mode: near black backgrounds, light text, and subtle borders
- Primary and accent colors should remain readable and consistent in both modes
Add a theme toggle in the header and remember the choice per visitor.
```
Il supporto ai temi tocca molti componenti, quindi può richiedere all'IA un po' di tempo per collegare tutto. Puoi anche specificare modifiche che si applicano solo in modalità light o solo in modalità dark.
***
## Motion e feedback
Motion e feedback aiutano le persone a capire cosa sta accadendo sullo schermo. Puoi usarli per rendere i click reattivi, mostrare che qualcosa si sta caricando e spiegare cosa fare dopo. In Base44 l'IA può aggiungere questi modelli per te, quindi non devi scrivere a mano ogni animazione.
Usa questa sezione quando la tua app funziona già ma sembra un po' piatta o statica e vuoi renderla più viva e rassicurante.
Le micro interazioni sono piccole reazioni visive a ciò che una persona fa, per esempio:
* Un pulsante che si ingrandisce leggermente e si illumina al passaggio del mouse.
* Una card che si solleva quando il mouse la sorvola.
* Un'icona che mostra una piccola animazione di spunta quando qualcosa viene salvato.
Questi effetti rendono l'app reattiva senza trasformarla in un cartone animato.
Puoi chiedere all'IA di introdurre un set coerente di interazioni:
```text theme={null}
Add subtle interactions:
- Fade in each page on load with a short duration
- Make primary buttons gently grow and brighten on hover and focus
- Add a small lift effect to cards on hover
Respect reduced motion preferences and avoid any rapid flashing.
```
Per pagine di marketing o promozionali puoi usare un tono più forte:
```text theme={null}
On marketing pages only:
- Slide hero sections in from the side on first load
- Animate icons when a feature card becomes focused or hovered
- Keep animations short so the page still feels fast
```
Aggiungi motion dopo essere soddisfatto di colori, layout e tipografia. Il motion deve supportare la chiarezza, non nascondere una struttura debole.
Gli stati di caricamento, vuoto ed errore sono i punti dove le persone spesso si sentono bloccate. Un buon feedback qui rende la tua app molto più rifinita e tollerante.
Esempi:
* Caricamento: forme scheletro che corrispondono al layout finale invece di uno spinner generico.
* Vuoto: un messaggio amichevole che spiega cosa apparirà qui e un pulsante per creare o collegare qualcosa.
* Errore: una breve spiegazione umana e un modo chiaro per riprovare o chiedere aiuto.
Puoi chiedere all'IA di creare questi modelli in tutta l'app:
```text theme={null}
Improve feedback states:
- For each main list and dashboard, add a skeleton loader that matches the layout
- Design an empty state with an icon, one line explanation, and a primary action
- Add a clear error state with a short message and a retry button where relevant
Use the existing color and typography system.
```
Queste modifiche non influiscono sui tuoi dati o sulla logica, cambiano solo il modo in cui l'app comunica alle persone quando qualcosa si sta caricando, manca o è andato storto.
***
## Personalizzazione avanzata
Quando vuoi andare oltre ciò che l'IA e la modalità **Edit** offrono di base, puoi portare il tuo codice e pacchetti npm. L'IA può comunque aiutarti a collegare e allineare tutto.
Puoi usare i [pacchetti npm](/Building-your-app/NPM-packages) per portare motion più ricchi, effetti visivi e componenti interattivi nella tua app Base44 senza costruire tutto da zero. I pacchetti provengono dal registro pubblico npm e vengono installati tramite la chat AI nell'editor dell'app, così resti nello stesso flusso.
**Esempi orientati al design:**
* Librerie di animazioni (per esempio, anime.js) per aggiungere transizioni, effetti hover e micro interazioni.
* Librerie di componenti UI o motion per gestire modali, tooltip, caroselli o flussi a step con modelli di interazione integrati.
* Utility per grafici per visualizzare dati con colori, tipografia e spaziatura coerenti con la tua app.
* Librerie drag and drop o di gesture per rendere i layout più tattili e interattivi.
* Helper per data e ora per formattare timestamp e pianificazioni in modo adatto alla tua UI.
**Dopo l'installazione di un pacchetto, puoi usare la chat AI per:**
* Importare le funzioni o componenti corretti dal pacchetto.
* Collegarli al layout esistente e ai design token (colori, tipografia, spaziatura, radius).
* Regolare props, varianti e motion in modo coerente con il resto dell'app.
* Verificare dettagli di accessibilità come focus, navigazione da tastiera e reduced motion.
**Esempio di prompt**
```text theme={null}
I added the framer-motion npm package. Refactor the existing card grid so each card animates on hover using framer-motion:
- Keep the current layout and copy
- Use the existing color tokens, border radius, and typography
- Respect prefers-reduced-motion and keep keyboard focus outlines clear
```
Tutti i pacchetti npm sono codice di terze parti. Base44 non può garantire qualità o sicurezza, quindi assicurati di rivedere il README del pacchetto, testarlo nella tua app e confermare che soddisfi i requisiti di design e prestazioni del tuo progetto.
Le app Base44 spesso usano utility Tailwind CSS. L'IA può aiutarti a rifattorizzare stili disordinati in qualcosa di più sistematico.
Compiti che puoi chiedere all'IA:
* Sostituire stili inline con utility Tailwind.
* Estrarre modelli ripetuti in componenti riutilizzabili.
* Mappare valori di colore su design token e configurazione Tailwind.
Esempio:
```text theme={null}
Refactor these components to use consistent Tailwind classes:
- Replace inline style attributes with Tailwind utilities
- Use the design tokens for colors, spacing, and typography
- Document the main class combinations for navigation, cards, and buttons
```
A volte vuoi un controllo preciso su layout, animazione o struttura dei componenti. Puoi [aprire file di codice](/documentation/building-your-app/editing-code) direttamente e modificarli tu o chiedere all'IA.
Modifiche comuni legate al design:
* Aggiornare `Layout.js` per cambiare wrapper globali, header o footer.
* Regolare i theme provider o il context.
* Cambiare come i componenti sono composti e quali props accettano.
Per modificare il codice:
1. Apri il file rilevante.
2. Incolla uno snippet di codice nella chat AI.
3. Chiedi una modifica, poi rivedi il diff o l'anteprima.
Esempio:
```text theme={null}
Here is my Layout.js component.
Adjust it so:
- The header is sticky on scroll
- The main content has a max width and is centered on large screens
- The background color uses the surface token from my design system
Explain what you changed in comments.
```
Le scelte di design influiscono sulle [prestazioni](/Performance-and-SEO/App-performance), specialmente quando introduci pacchetti e visual pesanti.
Tieni presente:
* Usa dimensioni immagini ottimizzate invece di enormi asset di sfondo.
* Evita di caricare molte animazioni pesanti o librerie grandi al caricamento iniziale.
* Fai lazy load di sezioni usate raramente come report profondi o filtri avanzati.
* Riusa componenti condivisi invece di molte copie simili.
Puoi chiedere all'IA una revisione focalizzata sulle prestazioni:
```text theme={null}
Review this app's design from a performance perspective:
- Identify heavy visual or code related elements that might slow loading
- Suggest lighter alternatives that keep the same overall look
- Propose specific places where lazy loading or code splitting would help
```
***
## Accessibilità
L'accessibilità fa parte di un buon design. Aiuta più persone a usare la tua app comodamente e può migliorare la chiarezza per tutti.
Le scelte di colore hanno un impatto diretto sulla leggibilità.
Buone pratiche:
* Usa un forte contrasto tra testo e sfondo.
* Evita di usare solo il colore per trasmettere significato.
* Mantieni elementi interattivi come pulsanti e link chiaramente visibili in tutti gli stati.
* Verifica sia modalità light che dark se supporti i temi.
Esempio di prompt:
```text theme={null}
Audit this app for color contrast:
- Identify text or icons with low contrast against their backgrounds
- Strengthen contrast while keeping the same general palette
- Ensure primary buttons and links are clearly distinguishable
Describe the main fixes you applied.
```
Testo leggibile è più della scelta del font.
Buone pratiche:
* Usa dimensioni di font comode su tutti i dispositivi.
* Usa line height sufficiente per i paragrafi.
* Evita font molto leggeri su sfondi chiari.
* Mantieni una lunghezza di riga ragionevole, soprattutto su schermi larghi.
Esempio di prompt:
```text theme={null}
Improve text readability:
- Increase base body font size slightly
- Increase line height for paragraphs
- Ensure headings are clearly larger than body text
- Reduce very long line lengths on wide screens
```
Le persone devono poter usare la tua app con la tastiera e vedere dove sono.
Buone pratiche:
* Assicurati che Tab si sposti tra gli elementi interattivi in ordine logico.
* Assicurati che gli stili di focus siano visibili e distinti.
* Evita trappole della tastiera dove il focus non può spostarsi.
Esempio di prompt:
```text theme={null}
Improve keyboard and focus accessibility:
- Ensure all interactive elements can be reached with Tab
- Add visible focus styles to buttons, links, and form fields
- Fix any focus order issues on this page
Describe any major changes you made.
```
Il motion può aiutare o danneggiare. Alcune persone ne preferiscono meno.
Buone pratiche:
* Rispetta le preferenze di reduced motion.
* Evita lampeggiamenti rapidi o forti flicker.
* Usa animazioni sottili e intenzionali invece di motion costante.
Esempio di prompt:
```text theme={null}
Adjust animations for accessibility:
- Respect the user's reduced motion preference
- Remove or simplify large continuous animations
- Keep only short, subtle motion that helps understanding
```
Un linguaggio chiaro e descrizioni aiutano tutti, incluse le persone che usano tecnologie assistive.
Buone pratiche:
* Usa etichette chiare e descrittive per pulsanti e link.
* Fornisci alt text significativo per le immagini importanti.
* Usa titoli per strutturare il contenuto.
* Evita testi di link vaghi come "clicca qui".
Esempio di prompt:
```text theme={null}
Improve accessibility of labels and alt text:
- Make button and link labels more descriptive where needed
- Add or improve alt text for important images
- Ensure headings follow a clear structure
Keep the tone and brand voice the same.
```
***
## Trucchi rapidi
Se vuoi miglioramenti veloci, queste brevi ricette possono darti molto valore con pochi prompt.
* Introduci un sistema di colori semplice e applicalo globalmente.
* Definisci ruoli di testo chiari e aumenta il line height.
* Aggiungi componenti di base per card e pulsanti e riusali.
Prompt:
```text theme={null}
Polish this prototype:
- Create a simple color system and apply it across the app
- Define typography roles for titles, headings, and body text
- Standardize buttons and cards and use them consistently
Keep content and logic the same.
```
* Aumenta leggermente l'altezza delle righe e aggiungi separatori sottili.
* Sposta le azioni in una colonna o menu coerente.
* Aggiungi filtri in una barra superiore chiara.
* Aggiungi stati di caricamento, vuoto ed errore.
Prompt:
```text theme={null}
Clean up this table page:
- Increase row height and add subtle row separators
- Move row actions into a consistent column at the end
- Add a simple filter bar above the table
- Add clear loading, empty, and error states
```
* Regola spaziatura e gerarchia.
* Aggiorna forme di card e pulsanti.
* Introduci micro interazioni sottili.
Prompt:
```text theme={null}
Give this app a soft visual refresh:
- Keep brand colors the same
- Improve spacing and hierarchy on each page
- Round card and button corners slightly and soften shadows
- Add subtle hover and focus states to primary actions
```
***
## FAQ
Clicca su una domanda qui sotto per saperne di più su come progettare la tua app.
Tailwind CSS è un framework CSS utility first. Invece di scrivere regole CSS personalizzate, aggiungi piccoli nomi di classe direttamente ai tuoi elementi per controllare colore, spaziatura, tipografia e layout. Ogni nome di classe di solito mappa a una singola regola visiva, quindi puoi "leggere" il design dalle classi stesse.
Esempi comuni che potresti vedere:
* Colori: `bg-blue-500` imposta uno sfondo blu, `text-white` imposta il testo bianco.
* Spaziatura: `p-4` aggiunge padding su tutti i lati, `m-2` aggiunge margin su tutti i lati.
* Tipografia: `font-bold` rende il testo grassetto, `text-lg` imposta una dimensione di testo più grande.
* Layout: `flex` crea un container flex, `grid` crea un container grid, `items-center` centra verticalmente gli elementi in una riga flex o grid.
Quando vedi classi Tailwind in Base44, puoi combinarle per descrivere lo stile completo di un elemento. Per esempio, `bg-blue-500 text-white p-4 flex items-center` ti dà una barra blu con testo bianco, padding e contenuto centrato.
Per una referenza più approfondita e l'elenco completo delle utility, puoi consultare la documentazione ufficiale di Tailwind CSS.
Progetta separatamente per mobile, tablet e desktop, poi verifica come i tuoi layout si adattano.
Usa queste linee guida quando progetti in Base44:
* Mobile: Usa una singola colonna verticale, mantieni un'azione primaria chiara per schermata e rendi i target tocco grandi con abbastanza spaziatura. Mantieni il testo breve.
* Tablet: Trattalo come un ibrido. Puoi usare menu laterali o layout split, ma mantieni i pulsanti touch friendly ed evita tabelle molto piccole o controlli densi.
* Desktop: Usa la larghezza extra per layout multicolonna e sidebar. Puoi aggiungere effetti hover, ma ogni azione importante deve funzionare anche con un click o tap.
* Tutti i dispositivi: Usa dimensioni di font leggibili, evita lo scroll orizzontale e lascia che gli elementi si impilino invece di sovrapporsi quando lo spazio è ridotto. Evita altezze fisse che tagliano i contenuti.
Puoi anche chiedere all'IA di applicare regole responsive, per esempio:
```text theme={null}
Make this layout responsive for mobile, tablet, and desktop.
Avoid horizontal scrolling and keep primary actions visible without excessive scrolling.
```
Le scelte di design influiscono direttamente su quanto velocemente l'app si carica e risponde. Quando progetti in Base44, tieni presente queste linee guida:
* Usa dimensioni immagini ottimizzate per non rallentare il caricamento iniziale. Preferisci formati compressi ed evita di caricare immagini molto più grandi di come appaiono sullo schermo.
* Limita animazioni pesanti ed effetti complessi, specialmente in app orientate al mobile. Transizioni brevi e semplici vanno bene, ma evita motion costante o grandi sfondi animati.
* Mantieni i layout puliti e focalizzati. Meno livelli, overlay e componenti nidificati di solito significano rendering più veloce, specialmente su dispositivi di fascia bassa.
* Riusa componenti invece di creare molte versioni leggermente diverse. I componenti condivisi sono più facili da cachare e mantenere.
* Evita di caricare tutto in una volta. Dove possibile, carica il contenuto non critico più tardi, per esempio sezioni secondarie, elenchi lunghi o pannelli usati raramente.
* Stai attento agli embed di terze parti come mappe, video player e widget. Includili solo dove aggiungono valore reale ed evita di impilarne molti in una singola schermata.
Puoi usare il controllo versione del design nella chat AI per annullare le modifiche.
* Ogni prompt AI ha un'opzione **Revert** che annulla istantaneamente tutto ciò che quel prompt ha cambiato nella tua app.
* L'icona dell'orologio nella chat AI apre la cronologia versioni. Puoi scegliere una versione salvata precedente della tua app e ripristinarla in un passaggio.
Scopri di più su [modalità della chat AI e cronologia versioni](/Building-your-app/AI-chat-modes).
Puoi chiedere alla chat AI di rimuovere l'elemento specifico o cliccare **Edit** nella chat AI e selezionare l'elemento, poi cliccare l'icona **Delete** .
Questa pagina è stata tradotta con l'AI. Per le informazioni più accurate e aggiornate, consulta la [versione inglese](/).
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.