Scissor Studio

Un programma di grafica gratuito, alternativo ai grandi nomi

Cosa fa

Strumento di grafica nel browser, gratuito, pensato come alternativa ai programmi di design più costosi.

Come guadagna

Presentato su Hacker News dal suo creatore, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: funzioni avanzate a pagamento, modelli premium.

Rendilo tuo

• Non competere su tutto: uno strumento solo per un compito, come le grafiche per i social dei negozi.
• Modelli pronti in italiano per le festività e i saldi.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Grafica Facile": uno strumento di grafica nel browser, gratuito per l'uso base, per creare post social, locandine, biglietti da visita e copertine con modelli pronti, testi, forme e immagini. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con i modelli per formato e "Inizia a creare"
2. Editor: tela al centro, elementi a sinistra, proprietà a destra
3. Modelli per formato (post Instagram, storia, locandina A4, biglietto da visita)
4. I miei progetti
5. Pagina Pro

Stile: creativo e pulito: interfaccia grigio chiaro #F4F4F5, viola #7C3AED per le azioni, carattere "Inter", tela bianca grande al centro con le guide di allineamento rosa. 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": nome, formato, contenuto della tela in JSON, miniatura, collegati all'utente
- "modelli": nome, formato, contenuto in JSON, gratuito o Pro

Regole di sicurezza obbligatorie:
- ogni utente vede solo i suoi progetti
- i modelli Pro si caricano solo per gli utenti Pro
- le immagini caricate stanno in uno spazio privato

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. L'editor sulla tela

L'editor usa la libreria Konva (canvas con oggetti): testi, forme, immagini, icone, che si spostano, ruotano e ridimensionano con le maniglie; guide di allineamento che compaiono vicino al centro e ai bordi; livelli, raggruppamento, annulla/ripeti.

Tutto il progetto si salva come JSON (posizioni, testi, colori), quindi resta modificabile; il salvataggio è automatico ogni 5 secondi dopo una modifica.

Esportazione in PNG e JPG ad alta risoluzione (codice nei Dettagli tecnici) e in PDF per la stampa. Caratteri da Google Fonts ospitati sul sito.

4. Modelli e Pro

Modelli per formato divisi per tema (ristorante, saldi, evento, compleanno), personalizzabili cambiando testi e colori.

Pro: tutti i modelli, rimozione dello sfondo dalle foto, esportazione PDF per la tipografia con margini di taglio, kit del marchio (colori e caratteri salvati) e nessuna filigrana.

5. Pagamenti con Stripe

Aggiungi un abbonamento a 5,99 € al mese. Gratis l'utente ha: modelli base ed esportazione PNG con una piccola filigrana. Con il piano Pro sblocca: tutti i modelli, rimozione sfondo, PDF per la stampa, kit del marchio e nessuna filigrana.

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. Stampa: esporta una locandina A4 in PDF e stampala: i testi devono essere nitidi e nulla deve essere tagliato vicino ai bordi.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Tela con oggetti ed esportazione nitida

Crea la tela con Konva, aggiunge un testo trascinabile con le maniglie e la esporta a 3 volte la risoluzione dello schermo per una stampa nitida.

import Konva from "konva";

export function creaTela(contenitore: HTMLDivElement, larghezza: number, altezza: number) {
  const tela = new Konva.Stage({ container: contenitore, width: larghezza, height: altezza });
  const livello = new Konva.Layer();
  tela.add(livello);

  const maniglie = new Konva.Transformer({ rotateEnabled: true, keepRatio: true });
  livello.add(maniglie);

  // Clic su un oggetto: compaiono le maniglie; clic sul vuoto: spariscono
  tela.on("click tap", (e) => maniglie.nodes(e.target === tela ? [] : [e.target]));
  return { tela, livello, maniglie };
}

export function aggiungiTesto(livello: Konva.Layer, testo: string) {
  const t = new Konva.Text({
    text: testo, x: 50, y: 50, fontSize: 48, fontFamily: "Inter", fill: "#111827", draggable: true,
  });
  livello.add(t);
  return t;
}

// Salvataggio come JSON (resta modificabile) ed esportazione ad alta risoluzione
export const salva = (tela: Konva.Stage) => tela.toJSON();

export function esporta(tela: Konva.Stage, maniglie: Konva.Transformer, formato: "png" | "jpeg" = "png") {
  maniglie.nodes([]);                                  // le maniglie non devono finire nell'immagine
  return tela.toDataURL({ mimeType: "image/" + formato, pixelRatio: 3, quality: 0.95 });
}

Progetti e modelli Pro

I progetti salvati come JSON e i modelli, con quelli Pro leggibili solo dagli abbonati.

create table progetti (
  id uuid primary key default gen_random_uuid(),
  utente_id uuid not null references auth.users(id) on delete cascade,
  nome text not null,
  formato text not null,
  contenuto jsonb not null,
  miniatura_url text,
  aggiornato_il timestamptz not null default now()
);
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);

create table modelli (
  id uuid primary key default gen_random_uuid(),
  nome text not null,
  formato text not null,
  contenuto jsonb not null,
  pro boolean not null default false
);
alter table modelli enable row level security;
create policy "modelli gratuiti o pro" on modelli for select using (
  not pro or exists (select 1 from profili p where p.id = auth.uid() and p.piano = 'pro'));

Pezzi comuni a tutti i progetti

• Pagamenti con Stripe
• Profili, piano e crediti
• Controllo finale prima di pubblicare

Glossario

JSONB

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

Storage

Lo spazio di Supabase dove si salvano i file, come foto e audio, con le sue regole di accesso.

Konva

Una libreria che rende gli elementi disegnati su canvas spostabili e modificabili come in un programma di grafica.