App di temi per la tastiera con AI

Temi per la tastiera del telefono creati con l'AI

Incasso mensile: 27.461 USD (fonte indicata nella scheda)

Cosa fa

App per iPhone che permette di personalizzare la tastiera con temi e sfondi creati dall'AI: colori, immagini, suoni dei tasti. Il fondatore è rimasto anonimo.

Come guadagna

Abbonamenti nell'App Store, oltre 1.200 abbonati, 472.000 $ incassati in totale dal 2022. Incassi verificati tramite App Store.

Rendilo tuo

Temi delle squadre di calcio fatti dai tifosi (senza loghi ufficiali).
Temi abbinati allo sfondo e alle icone, tutto in un pacchetto.
Versione Android, dove le tastiere personalizzate sono più libere.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Tasti Belli": un'app per telefono con una tastiera personalizzata: l'utente descrive il tema che vuole ("tramonto al mare", "anime viola") e l'AI crea lo sfondo e i colori dei tasti. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Schermata iniziale con i temi più amati
2. Crea tema: descrizione, stile, anteprima
3. Galleria dei miei temi
4. Guida per attivare la tastiera nelle impostazioni del telefono
5. Abbonamento

Stile: giocoso e colorato: sfondo #FAF5FF, viola #8B5CF6, rosa #F472B6, carattere "Nunito", anteprime della tastiera 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:
- "temi": nome, immagine di sfondo, colore dei tasti, colore del testo, suono, pubblico o privato
- "miei_temi": temi salvati dall'utente
- "crediti": generazioni rimaste

Regole di sicurezza obbligatorie:
- ogni utente vede i suoi temi e quelli pubblici
- le immagini stanno nello Storage
- i crediti si scalano solo dal server

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. Dal testo al tema

L'utente scrive cosa vuole. Una Edge Function genera l'immagine di sfondo con un modello di immagini (per esempio con Replicate o fal.ai) nel formato della tastiera, poi calcola dai colori dell'immagine quelli dei tasti e del testo, scegliendo un contrasto sempre leggibile (codice nei Dettagli tecnici).

La tastiera vera è un'estensione del telefono: su iPhone si fa con una "keyboard extension" che legge il tema salvato. Spiega bene all'utente come attivarla, con le schermate: è il punto dove molti abbandonano.

Privacy: la tastiera non deve inviare quello che l'utente scrive, e lo si dice chiaramente.

4. Galleria e condivisione

Galleria dei temi più amati della settimana, e pulsante "condividi" che crea un video verticale della tastiera in azione: è il formato che gira su TikTok.

Filtro per evitare immagini con marchi o personaggi protetti.

5. Pagamenti con Stripe

Aggiungi un abbonamento a 2,99 € a settimana o 19,99 € all'anno. Gratis l'utente ha: 5 temi già pronti. Con il piano Pro sblocca: temi illimitati creati con l'AI, suoni e galleria completa.

A pagamento riuscito il webhook porta l'utente al piano Pro; se l'abbonamento viene disdetto o non rinnovato lo riporta al piano gratuito.

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 temi molto diversi (chiari e scuri) e controlla che le lettere dei tasti si leggano sempre bene.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Colori dei tasti sempre leggibili

Dal colore medio dello sfondo si sceglie il colore dei tasti; il testo è bianco o nero in base al contrasto più alto.

type RGB = [number, number, number];

const luminanza = ([r, g, b]: RGB) => {
  const c = [r, g, b].map((v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); });
  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
};
const contrasto = (a: RGB, b: RGB) => {
  const [x, y] = [luminanza(a), luminanza(b)].sort((m, n) => n - m);
  return (x + 0.05) / (y + 0.05);
};

export function coloriTasti(medio: RGB) {
  const tasto: RGB = medio.map((v) => Math.round(v * 0.75 + 255 * 0.25)) as RGB;  // un po' più chiaro dello sfondo
  const testo: RGB = contrasto(tasto, [255, 255, 255]) >= contrasto(tasto, [0, 0, 0]) ? [255, 255, 255] : [0, 0, 0];
  return { tasto, testo };
}

Pezzi comuni a tutti i progetti

Glossario

Storage: Lo spazio di Supabase dove si salvano i file, come foto e audio, con le sue regole di accesso.
Keyboard extension: Il modo con cui un'app per iPhone aggiunge una tastiera tutta sua, da attivare nelle impostazioni.