Screenshot to Code
Fai uno screenshot di un sito e ottieni il codice per rifarlo
Incasso mensile: 4700 USD (fonte indicata nella scheda)
Cosa fa
L'utente carica uno screenshot o un disegno di una pagina, e l'AI scrive il codice (HTML, React, Tailwind) che la riproduce. Utile a chi crea siti per partire più in fretta.
Come guadagna
Ha entrate ricorrenti ogni mese, verificate su TrustMRR. Prezzi e piani esatti sono indicati sul sito del progetto.
Rendilo tuo
- Da una foto di un menù o di un volantino a una pagina web pronta per ristoranti e negozi.
- Da un disegno fatto a mano su carta a un sito vero, pensato per chi non sa programmare.
- Nota: usalo per le tue idee, non per copiare il sito di qualcun altro.
Le frasi da scrivere all'AI
1. Base del sito e grafica
Crea un'app web in italiano chiamata "Da Foto a Codice": trasforma lo screenshot o il disegno di una pagina web nel codice HTML e Tailwind che la riproduce, da usare come punto di partenza. Usa React, Vite, TypeScript e Tailwind CSS.
Pagine da creare:
1. Pagina iniziale con esempi screenshot → pagina e prezzi
2. Registrazione e accesso
3. Nuova conversione: carica l'immagine e scegli il formato (HTML + Tailwind o React)
4. Risultato: anteprima e codice affiancati
5. Le mie conversioni
Stile: da strumento per sviluppatori: sfondo scuro #0B1120, testo #E2E8F0, accento ciano #22D3EE, carattere "Inter" e "JetBrains Mono" per il codice. 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:
- "conversioni": immagine nello Storage, formato, codice ottenuto, richieste di modifica, collegate all'utente
Regole di sicurezza obbligatorie:
- ogni utente vede solo le sue conversioni e immagini
- 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. La conversione
L'utente carica un'immagine (PNG o JPG, massimo 5 MB) o la incolla con Ctrl+V, e sceglie il formato: HTML con Tailwind, oppure componente React con Tailwind.
La Edge Function "converti" (un credito, codice nei Dettagli tecnici) invia l'immagine a Claude, che restituisce il codice completo: struttura fedele, colori e spaziature il più possibile uguali, testi copiati dall'immagine, immagini sostituite da riquadri segnaposto.
Il risultato si vede affiancato: a sinistra lo screenshot, a destra l'anteprima dentro un iframe isolato, e sotto il codice con il pulsante Copia e Scarica.
4. Ritocchi a parole
Sotto il risultato c'è un campo per chiedere modifiche ("rendi il menu scuro", "aggiungi la versione per telefono"): ogni modifica costa un credito e crea una nuova versione, con la cronologia per tornare indietro.
Pagina "Le mie conversioni" con miniature, formato e data. Ricorda nella pagina che bisogna avere il diritto di riprodurre il design dell'immagine caricata.
5. Pagamenti con Stripe
Aggiungi pacchetti di crediti: 25 conversioni a 9 €, 100 conversioni a 29 €. Ogni nuovo utente riceve 3 crediti gratis. Ogni conversione o modifica 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: mostra il codice generato solo dentro un iframe con sandbox, mai inserito direttamente nella pagina del sito.
Correggi quello che non va e scrivimi cosa hai cambiato.
Dettagli tecnici
Conversione dell'immagine con Claude
La parte centrale della Edge Function: invia l'immagine a Claude e riceve il codice. Credito e accesso si controllano prima, come nelle altre funzioni.
import Anthropic from "npm:@anthropic-ai/sdk";
import { encodeBase64 } from "jsr:@std/encoding/base64";
const claude = new Anthropic({ apiKey: Deno.env.get("ANTHROPIC_API_KEY")! });
const ISTRUZIONI = {
html: "Restituisci un unico file HTML completo che usa Tailwind CSS da CDN.",
react: "Restituisci un unico componente React in TypeScript che usa classi Tailwind.",
};
export async function converti(immagine: Uint8Array, tipo: "image/png" | "image/jpeg", formato: "html" | "react") {
const risposta = await claude.beta.messages.create({
model: "claude-opus-5",
max_tokens: 16000,
betas: ["server-side-fallback-2026-07-01"],
fallbacks: "default",
system: "Riproduci fedelmente la pagina web dello screenshot. " + ISTRUZIONI[formato] +
" Copia i testi visibili, rispetta colori, spaziature e allineamenti, sostituisci le immagini" +
" con riquadri grigi della stessa misura. Rispondi solo con il codice, senza spiegazioni.",
messages: [{
role: "user",
content: [
{ type: "image", source: { type: "base64", media_type: tipo, data: encodeBase64(immagine) } },
{ type: "text", text: "Converti questa pagina in codice." },
],
}],
});
if (risposta.stop_reason === "refusal") return null; // e si restituisce il credito
return risposta.content.filter((b) => b.type === "text").map((b) => b.text).join("");
}Tabella e Storage
Le conversioni con le loro versioni e lo spazio privato per le immagini.
create table conversioni (
id uuid primary key default gen_random_uuid(),
utente_id uuid not null references auth.users(id) on delete cascade,
immagine_path text not null,
formato text not null check (formato in ('html', 'react')),
versioni jsonb not null default '[]', -- [{ richiesta, codice, creato_il }]
creato_il timestamptz not null default now()
);
alter table conversioni enable row level security;
create policy "le mie righe" on conversioni
for all using (auth.uid() = utente_id) with check (auth.uid() = utente_id);
insert into storage.buckets (id, name, public) values ('screenshot', 'screenshot', false);
create policy "la mia cartella" on storage.objects for all to authenticated
using (bucket_id = 'screenshot' and (storage.foldername(name))[1] = auth.uid()::text)
with check (bucket_id = 'screenshot' and (storage.foldername(name))[1] = auth.uid()::text);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.
- iframe sandbox
- Una finestra isolata dentro la pagina, che mostra un contenuto senza permettergli di toccare il resto del sito.