AI Designer

Interfacce belle per i siti fatti con l'AI, descritte in poche parole

Incasso mensile: 8600 USD (fonte indicata nella scheda)

Cosa fa

Chi crea siti con l'AI spesso ottiene una grafica tutta uguale. Questo strumento genera interfacce curate da poche parole di descrizione.

Come guadagna

Ha entrate ricorrenti ogni mese, verificate su TrustMRR. Prezzi e piani esatti sono indicati sul sito del progetto.

Rendilo tuo

• Stili ispirati al design italiano, pronti da copiare in Lovable o Bolt.
• Una libreria di sezioni per settore: ristoranti, studi, negozi.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Stile Su Misura": crea uno stile grafico unico (colori, caratteri, pulsanti, card) da una descrizione, e lo trasforma in istruzioni e codice da dare a Lovable o Bolt, così i siti fatti con l'AI non sembrano tutti uguali. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con lo stesso sito in 6 stili diversi e i prezzi
2. Registrazione e accesso
3. Nuovo stile: descrivi il progetto e l'atmosfera, scegli un punto di partenza
4. Pagina dello stile: anteprima di pulsanti, card, moduli e una pagina di esempio
5. Esportazione: frase per l'AI, variabili CSS, configurazione Tailwind

Stile: da studio di design: sfondo bianco, nero #0A0A0A, accento viola #7C3AED, carattere "Inter Tight", molto spazio, anteprime grandi. Nessuna immagine generica di stock.

Tutto deve funzionare perfettamente da telefono. Tutti i testi in italiano, chiari e senza parole tecniche.

2. Database, account e sicurezza

Collega il progetto a Supabase e attiva la registrazione con email e password.

Crea queste tabelle:
- "stili": nome, descrizione, colori, caratteri, arrotondamenti, ombre e spaziature, collegati all'utente

Regole di sicurezza obbligatorie:
- ogni utente vede e modifica solo i suoi stili
- i crediti non si modificano dal browser

Usa esattamente il codice SQL che trovi nei "Dettagli tecnici" di questa scheda: eseguilo nel SQL Editor di Supabase prima di continuare, poi collega le pagine alle tabelle.

3. Dalla descrizione allo stile

Nel nuovo stile l'utente descrive il progetto e l'atmosfera ("studio di yoga, calmo, naturale, un po' di lusso") e sceglie un punto di partenza tra 8 (minimal, editoriale, giocoso, tecnico, lusso, retrò, brutalista, morbido).

La Edge Function "stile" (un credito) chiede a Claude un JSON con: 6 colori con nome e uso, 2 caratteri Google Fonts, arrotondamenti, ombre, spaziature e 3 regole di stile. Prima di salvarlo, il sito controlla che testo e sfondo abbiano contrasto sufficiente (codice nei Dettagli tecnici) e, se non basta, scurisce il colore del testo.

La pagina dello stile mostra subito l'anteprima: pulsanti, card, modulo, barra di navigazione e una pagina di esempio completa, con cursori per ritoccare ogni valore.

4. Esportazione per Lovable e Bolt

Crea la pagina di esportazione con tre schede e il pulsante Copia:
1. "Frase per l'AI": un testo pronto da incollare in Lovable o Bolt, che descrive con precisione colori (con i codici), caratteri, pulsanti, card e regole da seguire.
2. "Variabili CSS": il blocco :root con tutte le variabili.
3. "Tailwind": la configurazione dei colori, dei caratteri e degli arrotondamenti.

Libreria degli stili salvati con un'anteprima piccola, duplicazione e modifica.

5. Pagamenti con Stripe

Aggiungi pacchetti di crediti: 10 stili a 9 €, 40 stili a 25 €. Ogni nuovo utente riceve 2 crediti gratis. Ogni stile creato da zero costa un credito; i ritocchi sono gratis. Mostra sempre in alto quanti crediti restano e, quando finiscono, un riquadro per comprarne altri.

A pagamento riuscito il webhook aggiunge i crediti del pacchetto con la funzione aggiungi_crediti.

Per la sessione di pagamento e il webhook segui la guida "Pagamenti con Stripe" di Fattibile.

6. Controlli specifici di questo progetto

Oltre ai controlli della guida "Controllo finale", verifica in particolare:
1. Leggibilità: crea 5 stili molto diversi e controlla che in tutti il testo sia leggibile sullo sfondo, anche nei pulsanti.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Tabella degli stili

Ogni stile è un piccolo documento JSON con colori, caratteri e misure.

create table stili (
  id uuid primary key default gen_random_uuid(),
  utente_id uuid not null references auth.users(id) on delete cascade,
  nome text not null,
  descrizione text not null,
  valori jsonb not null,   -- { colori: {...}, caratteri: {...}, raggio, ombre, spazi }
  creato_il timestamptz not null default now()
);

alter table stili enable row level security;
create policy "le mie righe" on stili
  for all using (auth.uid() = utente_id) with check (auth.uid() = utente_id);

Controllo del contrasto (WCAG)

Calcola quanto un colore si distingue dall'altro con la formula ufficiale delle linee guida sull'accessibilità: serve almeno 4,5 per il testo normale.

// Luminosità percepita di un colore "#RRGGBB"
function luminanza(hex: string): number {
  const [r, g, b] = [1, 3, 5]
    .map((i) => parseInt(hex.slice(i, i + 2), 16) / 255)
    .map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

// Rapporto di contrasto: da 1 (uguali) a 21 (nero su bianco)
export function contrasto(colore1: string, colore2: string): number {
  const [chiaro, scuro] = [luminanza(colore1), luminanza(colore2)].sort((a, b) => b - a);
  return (chiaro + 0.05) / (scuro + 0.05);
}

export const leggibile = (testo: string, sfondo: string, grande = false) =>
  contrasto(testo, sfondo) >= (grande ? 3 : 4.5);

// contrasto("#7C3AED", "#FFFFFF") -> circa 5,7: va bene anche per il testo normale

Istruzioni per l'AI: stile

Le istruzioni fisse che la Edge Function "stile" dà a Claude, che risponde in JSON. Il resto della funzione (accesso, crediti, rimborso se l'AI rifiuta) è uguale per tutti i progetti: è nella guida "Chiamare l'AI dal server".

Sei un designer di interfacce. Dalla descrizione di un progetto crea uno stile grafico originale, non generico. Rispondi solo con JSON: {"colori": {"sfondo", "superficie", "testo", "testoSecondario", "primario", "accento"} in formato #RRGGBB, "caratteri": {"titoli", "testo"} scelti da Google Fonts, "raggio": numero in pixel, "ombre": "nessuna"|"leggere"|"marcate", "regole": [3 frasi brevi su come usare lo stile]}.

Pezzi comuni a tutti i progetti

• Pagamenti con Stripe
• Profili, piano e crediti
• Chiamare l'AI dal server
• Controllo finale prima di pubblicare

Glossario

JSONB

Un tipo di colonna che contiene dati strutturati flessibili, come un piccolo documento.

WCAG

Le linee guida internazionali per rendere i siti leggibili e usabili da tutti, anche da chi vede poco.