SankiWork contro Figma e Claude Design — Una guida completa
Un tour completo di SankiWork costruito attorno a una domanda: dove si colloca un workspace agent-native accanto a Figma? Installalo, configura un agente qualsiasi, lavora con i design system, costruisci una vera landing page, itera con gli strumenti su canvas ed esporta. Basato sulla guida pratica di Anton Larichev.
Questa guida è una panoramica completa di SankiWork costruita attorno a una domanda: dove si colloca un workspace di design agent-native accanto a Figma e Claude Design? Installa l'app, configura un agente, lavora con i design system integrati, costruisce una vera landing page dall'inizio alla fine, itera con gli strumenti su canvas ed esporta il risultato. Segue il percorso intrapreso da Anton Larichev (PurpleSchool) nella sua guida pratica, riscritto e aggiornato alla release attuale. Guarda il video qui sopra per la dimostrazione dal vivo, oppure continua a leggere per la versione scritta.
Il workspace di SankiWork — prototipi, presentazioni, immagini e video in un'unica canvas familiare e pulita.
Cos'è SankiWork?
SankiWork è una piattaforma di design local-first che gira sopra il coding agent che già usi. Invece di essere legata a un solo modello, rileva le CLI già presenti sulla tua macchina — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode e un paio di dozzine in più — e lascia che sia quell'agente a guidare la generazione. La sintesi di Anton è precisa: in superficie assomiglia molto a Claude Design, ma sotto il cofano è “semplicemente una UI aggiuntiva che pilota gli stessi agenti che hai già installato”. Non paghi un secondo abbonamento sopra il tuo piano di coding.
Ciò che lo rende degno di un'occhiata seria:
- Completamente gratuito — senza abbonamento, ospitalo in self-hosting, usalo nel lavoro per i clienti.
- Gira in locale — nulla viene caricato; i tuoi progetti risiedono in cartelle sulla tua macchina.
- Agnostico rispetto all'agente — puntalo verso qualsiasi CLI supportata, oppure porta la tua API key per un harness diverso.
- Una ricca libreria di design system e skill integrata, così non parti da una tela bianca.
- Più del semplice design statico — prototipi, presentazioni, generazione di immagini e video, tutto da un unico workspace.
In cosa differisce da Figma
Questo è il confronto che la maggior parte delle persone vuole davvero, quindi diciamolo chiaramente.
Figma è un editor vettoriale manuale e collaborativo. Sposti ogni frame, disegni ogni componente, e il suo punto di forza è la precisione e il lavoro di squadra in tempo reale. Nulla qui genera il design al posto tuo — sei tu il designer che fa il lavoro.
SankiWork ribalta tutto questo. Descrivi ciò che vuoi, scegli un design system e l'agente genera un vero artefatto HTML interattivo che poi rifinisci. L'output è codice, non un file vettoriale — il che significa che qualunque cosa costruisci è immediatamente più vicina al tuo progetto reale.
Un punto su cui Anton è sincero: al momento SankiWork è debole nell'estrarre un design system da un file Figma. Se oggi gli passi un export di Figma, il sistema estratto tende a tornare disordinato. Quindi, se la tua fonte di verità vive in Figma, la strada più pulita è far convertire prima quel design Figma in codice dal tuo agente, e poi portare il codice in SankiWork (più avanti su questo). Considera SankiWork come una superficie di generazione e iterazione, non come un importatore di Figma.
In cosa differisce da Claude Design
Se hai usato Claude Design, l'interfaccia ti sembrerà immediatamente familiare — stessa estetica pulita, stesso ciclo incentrato sugli artefatti. Le differenze che contano:
- Qualsiasi modello, non solo uno. Claude Design ti vincola a Opus 4.7. SankiWork pilota l'agente che scegli — e puoi cambiarlo a metà progetto.
- Generazione di media integrata. Aggiungi le chiavi dei provider (OpenAI GPT Image, MiniMax, ElevenLabs e altri) e SankiWork genererà immagini, audio e video inline. Questa è la differenza distintiva che Anton sottolinea — uno strumento di design legato a un solo provider non ti offre tutto ciò.
- Locale e sicuro per uso commerciale. L'approccio local-first significa che il lavoro per i clienti non lascia mai la tua macchina e non richiede abbonamenti né il permesso di nessuno.
Passo 1 — Installa SankiWork
Hai tre modi per iniziare. Scegli quello più adatto a te:
| Percorso | Ideale per | Requisiti |
|---|---|---|
| App desktop | La maggior parte delle persone — zero configurazione | Nessuno. Basta scaricare e aprire. |
| Esegui dal sorgente | Sviluppatori che vogliono leggere o modificare il codice | Node ~24, pnpm 10.33.x |
| Installa nel tuo agente | Chi vive nel terminale | Una CLI di coding agent già esistente |
Opzione A — App desktop (consigliata, zero configurazione)
Vai su sanki-ai.cloud/download e scarica la build per il tuo sistema operativo. Dopo l'installazione, l'app rileva automaticamente ogni CLI di coding agent già presente nel tuo PATH e carica per te le skill e i design system integrati. È il modo più rapido per arrivare a un workspace funzionante.
Opzione B — Esegui dal sorgente
Se preferisci eseguirlo dal repository — come fa Anton nel video — bastano pochi comandi:
git clone https://gitea.com/Sanki5211/sankiwork-community.git
cd sankiwork
corepack enable && pnpm install
pnpm tools-dev run webApri l'URL locale che viene stampato. Risolve una porta dinamica, quindi non scriverne una fissa nel codice — basta cliccare l'indirizzo che mostra. Servono Node ~24 e pnpm 10.33.x; Corepack seleziona per te la versione di pnpm fissata.
Opzione C — Installa nel tuo coding agent
Per richiamare SankiWork come skill all'interno del tuo agente, senza mai aprire la GUI:
od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | gemini | opencode | …Poi, all'interno dell'agente: Use sankiwork to generate a landing page with the Stripe design system.
Passo 2 — Configura il tuo agente
Al primo avvio, SankiWork analizza la tua macchina e mostra ogni CLI trovata, poi ti guida attraverso una breve configurazione:
- Scegli l'agente e il modello. Anton usa Claude Code su Opus 4.7 (“uno dei migliori per il design”), ma puoi puntare a Codex, Gemini CLI o qualsiasi altro agente rilevato. C'è un pulsante Test per confermare la connessione.
- Oppure usa una API key. Preferisci non usare una CLI locale? Imposta invece una base URL, una chiave e un modello.
- Aggiungi i provider di media. Questo è l'elemento distintivo — aggiungi le chiavi per OpenAI GPT Image, MiniMax, ElevenLabs e altri per generare immagini, audio e video al volo.
- Attiva o disattiva le skill. Abilita le skill di design che ti servono (system design, prototipo, brand guideline e altro); lascia spente le altre.
Puoi cambiare tutto questo in seguito, quindi mantieni semplice la prima configurazione.
Passo 3 — Lavora con i design system
La libreria di design system è il cuore dello strumento. Ogni voce prende un marchio reale e ne codifica la palette, la tipografia, i componenti e l'atmosfera complessiva in un sistema riutilizzabile.
La libreria di design system: ogni voce scompone un marchio reale in palette, tipografia, componenti e atmosfera visiva che puoi riutilizzare.
Ci sono due modi per portare dentro il tuo marchio, e Anton li prova entrambi:
- Importa uno ZIP di Claude Design (oggi la via più pulita). Hai costruito un sistema in Claude Design? Aprilo lì, scegli Share → Download project as .zip e trascina quello ZIP in SankiWork. Tutti i tuoi token e componenti si trasferiscono direttamente.
- Estrai un sistema dal codice esistente. Crea un file ad alta fedeltà senza alcun design system associato, fai puntare il suo import a una cartella del tuo codice reale e chiedi all'agente di derivarne un design system — colori, tipografia, spaziature e un kit di componenti JSX. Non sarà perfetto, ma è un solido punto di partenza che puoi regolare.
Puoi sfogliare l'intera libreria di plugin sul web su sanki-ai.cloud/plugins prima di installare qualsiasi cosa.
Passo 4 — Costruisci una pagina reale e itera
Il vero flusso di lavoro è costruire prototipi e presentazioni. Nel video, Anton costruisce una pagina di pricing/landing per PurpleSchool su un design system importato:
- Crea un progetto, scegli web/desktop/mobile e seleziona wireframe o alta fedeltà.
- Collega il design system e incolla il tuo brief (Anton usa una breve specifica: hero, pricing, features, FAQ, footer).
- Scegli il tuo modello nel progetto (qui Claude Code su Opus) e invia.
- Rispondi alle domande di chiarimento che SankiWork pone prima di scrivere una riga — superficie, pubblico, tono — poi guardalo lavorare su una to-do list.
La libreria di template: punti di partenza per prototipi, slide, immagini e video che puoi filtrare per tipo e clonare per iniziare.
Dove SankiWork dimostra il suo valore è nell'iterazione su canvas: seleziona un blocco qualsiasi e commentalo, disegna direttamente sull'anteprima per indicare ciò che vuoi cambiare, modifica font e dimensioni inline e verifica il layout alle larghezze desktop/tablet/mobile. È il ciclo di feedback rapido che è scomodo da riprodurre con un semplice agente in un terminale.
Quando sei soddisfatto, esporta il risultato come HTML autonomo o come ZIP e consegnalo al tuo team — oppure porta il codice direttamente nel tuo progetto.
Consigli
- Non passargli file Figma grezzi. L'estrazione da Figma è oggi la via più debole; converti prima Figma in codice, poi importa il codice.
- Importa uno ZIP di Claude Design quando ti serve il tuo marchio — è il modo più fluido per iniziare.
- Usa una CLI locale così la generazione si appoggia a un abbonamento che già paghi, invece dei costi API per chiamata.
- Affidati agli strumenti di commento e disegno su canvas — selezionare un blocco e disegnarci sopra è molto più veloce che descrivere la modifica a parole.
- Aspettati una bozza solida, poi rifinisci. Esporta presto per cogliere piccole derive di spaziatura e formattazione.
FAQ
Dovrei sostituire Figma con SankiWork? No — fanno lavori diversi. Figma è un editor manuale preciso e collaborativo; SankiWork è una superficie agent-native di generazione e iterazione che produce codice. Usa SankiWork per passare rapidamente dal brief a una bozza reale e coerente con il marchio, e tieni Figma per il lavoro che richiede precisione manuale e collaborazione dal vivo.
Può importare i miei design Figma? Indirettamente. L'estrazione diretta da Figma è oggi approssimativa. La via affidabile è convertire il design Figma in codice con il tuo agente, poi importare quel codice (o importare uno ZIP di Claude Design) in SankiWork.
Devo per forza usare Claude? No. SankiWork pilota qualsiasi agente supportato — Codex, Gemini CLI, Cursor, OpenCode e altri — e puoi cambiare modello a metà progetto, oppure portare la tua API key.
È gratuito? L'app è completamente gratuita e da eseguire in locale senza costi. Paghi solo l'uso del modello e dei media dell'agente e dei provider che colleghi.
Questa guida scritta si basa sulla guida pratica di Anton Larichev. Guarda il video completo qui sopra e iscriviti a PurpleSchool | Anton Larichev per altri approfondimenti su sviluppo e strumenti AI.