← Tutte le idee Intelligenza artificiale

Sleek

Descrivi un'app e ottieni le schermate già disegnate

Incasso mensile: 20.000 USD (fonte indicata nella scheda)

Cosa fa

L'utente descrive a parole l'app che ha in mente e l'AI disegna le schermate per telefono: grafica, pulsanti, testi. Serve a chi vuole vedere un'idea prima di costruirla o mostrarla a qualcuno.

Come guadagna

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

Rendilo tuo

  • Specializzalo per un settore: schermate di app per ristoranti, palestre o negozi, con i testi già scritti in italiano.
  • Esporta le schermate come presentazione da mandare a un cliente o a un investitore.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Schermate": trasforma la descrizione di un'idea di app nelle schermate già disegnate, da mostrare a soci, clienti o programmatori. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con un esempio dall'idea alle schermate e prezzi
2. Registrazione e accesso
3. Nuovo progetto: descrivi l'app e scegli lo stile
4. Pagina del progetto con le schermate in cornici di telefono
5. Esportazione e condivisione

Stile: creativo e pulito: sfondo grigio chiarissimo #F4F4F5, nero #18181B, accento blu elettrico #2563EB, carattere "Inter", le schermate mostrate grandi dentro cornici di iPhone. 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:
- "progetti": descrizione dell'app, pubblico, stile scelto, collegati all'utente
- "schermate": nome, ordine, codice HTML della schermata, collegate al progetto

Regole di sicurezza obbligatorie:
- ogni utente vede e modifica solo i suoi progetti e schermate
- 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 alle schermate

Nella pagina "Nuovo progetto" l'utente descrive l'app (cosa fa, per chi, 3 funzioni principali) e sceglie uno stile tra 6 (minimal, colorato, scuro, aziendale, giocoso, elegante).

Il pulsante "Disegna le schermate" chiama prima Claude per proporre l'elenco delle schermate necessarie (es. benvenuto, registrazione, home, dettaglio, profilo), modificabile dall'utente. Poi, per ogni schermata, la Edge Function "schermata" (nei Dettagli tecnici, un credito ciascuna) chiede a Claude il codice HTML con Tailwind di una schermata per telefono larga 390 pixel, coerente con le altre.

Mostra le schermate affiancate in cornici di telefono, dentro un iframe isolato, con il pulsante "Rifai" su ognuna e un campo per chiedere modifiche a parole ("metti il pulsante in basso").

4. Esportazione e condivisione

Aggiungi l'esportazione: tutte le schermate in PNG (una per file, in un zip), in un PDF unico da presentare, e il codice HTML. Link di condivisione di sola lettura da mandare a soci o programmatori, con la possibilità per chi guarda di lasciare commenti su ogni schermata.

5. Pagamenti con Stripe

Aggiungi pacchetti di crediti: 20 schermate a 9 €, 100 schermate a 29 €. Ogni nuovo utente riceve 5 crediti gratis. Ogni schermata disegnata o rifatta costa un credito. 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. Sicurezza: il codice HTML generato va mostrato solo dentro un iframe con l'attributo sandbox, mai inserito direttamente nella pagina.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Tabelle del database

Progetti e schermate dell'utente.

create table progetti (
  id uuid primary key default gen_random_uuid(),
  utente_id uuid not null references auth.users(id) on delete cascade,
  descrizione text not null,
  stile text not null,
  link_condivisione uuid unique default gen_random_uuid(),
  creato_il timestamptz not null default now()
);

create table schermate (
  id uuid primary key default gen_random_uuid(),
  progetto_id uuid not null references progetti(id) on delete cascade,
  utente_id uuid not null references auth.users(id) on delete cascade,
  nome text not null,
  ordine int not null default 0,
  html text not null default ''
);

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

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

Istruzioni per l'AI: schermata

Le istruzioni fisse che la Edge Function "schermata" dà a Claude. 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 app mobili. Ricevi la descrizione di un'app, lo stile scelto e il nome di una schermata. Restituisci solo il codice HTML completo di quella schermata, per un telefono largo 390 pixel, usando Tailwind CSS da CDN. Testi realistici in italiano, niente lorem ipsum, nessun JavaScript. Mantieni colori, caratteri e componenti coerenti con lo stile indicato.

Mostrare le schermate in sicurezza

Il codice generato dall'AI si mostra dentro un iframe con "sandbox": così, anche se contenesse qualcosa di strano, non può toccare il resto del sito.

<!-- srcdoc contiene l'HTML della schermata; sandbox senza permessi blocca gli script -->
<iframe
  title="Schermata: Home"
  sandbox=""
  srcdoc="..."
  style="width: 390px; height: 844px; border: 0; border-radius: 32px;">
</iframe>

Pezzi comuni a tutti i progetti

Glossario

iframe sandbox
Una finestra isolata dentro la pagina, che mostra un contenuto senza permettergli di toccare il resto del sito.