Posso vibecodare Sleek?

Cosa costruisci

Generare un solo design system, generare ogni schermata mobile come file HTML Tailwind autonomo che lo rispetta, rivederle tutte insieme dentro cornici da telefono, ed esportare i PNG più i livelli Figma modificabili.

cosa ti serve

• una API key per un LLM
• Node 22+
• Playwright per l'export degli screenshot

La prima voce di UI mobile con AI della lista, e pure scomoda: quello che vende è in gran parte gratis dentro il coding agent che il lettore ha già, e il convertitore Figma su cui si appoggiava è MIT su npm.

Il prompt

Un weekend con un agente di coding. I buchi che restano sono qui sotto, in «cosa perdi».

Build me a mobile app screen designer to replace Sleek. Requirements:

- A local Next.js app (App Router) calling the Anthropic API (claude-opus-5,
  key in .env). Stream it with max_tokens 32000 · a screen plus its thinking
  share that budget, and it rejects sampling params and assistant prefills
  outright. Screens are files on disk, no database.
- One route handler takes a plain-language description of the app, or a sketch
  I drop on the page, and answers with a screen list first: 6 to 10 names, one
  line of purpose each. I edit that list, then it builds every screen on it.
- That same first call writes design-system.json (5 hex colors, 2 fonts with a
  6-step type scale, radius, spacing unit, icon set) and _nav.html, and nothing
  regenerates either afterwards · every later call gets both pasted in verbatim,
  which is what stops screen 9 drifting away from screen 1.
- Each screen is public/screens/<name>.html: one standalone file, Tailwind via
  CDN, Lucide icons, a 402x874 viewport with 62px top and 34px bottom insets as
  CSS variables, 44px minimum tap targets, and that same nav.
- Edits re-send the current file plus my instruction and overwrite it in place,
  so untouched parts stay put; every version lands in screens/.history/.
- The page is a gallery: each screen in an iframe inside a phone frame, side by
  side, a text box under each for the next edit. `npm run export` runs
  Playwright at deviceScaleFactor 3 into exports/ plus a contact sheet.
- A "copy all to Figma" button: @figit/dom-to-figma (MIT), one frame per screen
  passing that iframe's contentDocument.body, convert({ frames }), then
  clipboard.write with its toClipboardItem(). Cmd+V in Figma lands the whole
  set as editable layers. Keep it in a client component and fire it from a real
  click, or the write is blocked.
- Out of scope, do not build: a click-to-edit canvas, share links, or hosting.
  Runs on my machine, no accounts, no telemetry.
- README: the API key, `npx playwright install chromium`, where files land, and
  that remote images need an imageLoader proxying around CORS.

Cosa perdi

• cliccare un elemento per modificarlo invece di rifare il prompt sull'intero file
• una pipeline multi-step messa a punto · qui hai un prompt su un modello solo, e il divario lo colmi con il tuo tempo di iterazione
• l'input da schizzo · fotografi una schermata disegnata a mano e te la ritrovi come design
• link di condivisione, storico dei progetti e postazioni per il team

Perché pagano ancora

Nessuno paga per una schermata sola, ed è la lettura onesta di questa categoria: la versione a schermata singola è diventata gratis il giorno in cui i coding agent sono diventati buoni. Quello che resta è più sottile di quanto sembri. Qui non c'è un network, non c'è un dataset proprietario, non c'è il tapis roulant delle integrazioni, e il convertitore Figma che era la parte difficile è MIT su npm. Quello che resta, però, è lavoro vero lo stesso. Il prompt qui sotto è una chiamata a un modello solo; il prodotto è una catena di chiamate, ogni passaggio instradato al modello che offre il compromesso giusto tra qualità e velocità per quel passaggio, con i prompt dietro ogni livello riscritti nell'arco di mesi di iterazione. Niente di tutto questo si vede alla schermata uno. Si vede alla schermata nove, e in quanti prompt ripetuti ci sono voluti per arrivarci. L'altra cosa che i soldi comprano è una tela, dove una modifica è un clic invece di un intero file da rigenerare con un nuovo prompt. Nessuna delle due è un moat, e il prompt qui sotto è il test onesto di quanto valgano per te.

moat: Qualità di esecuzione cos’è un moat

qualità dell'output + UX di editing

Alternative gratuite

Non hai voglia di costruirtelo? Queste esistono già, sono gratis o open source, e le abbiamo controllate una per una.

nome stelle ultimo commit installazione cos’è

Google Stitch gratis (si apre in una nuova scheda) — — servizio ospitato Da prompt o screenshot a UI su più schermate, tela modificabile, prototipi, copia per Figma ed export del codice frontend; l'uso ha un tetto, non è una prova a tempo.

Scartate (3) — e perché

• Motiff (si apre in una nuova scheda) — Il servizio è stato chiuso; quel che resta del sito è un avviso di export travestito da prodotto.
• OpenPencil (si apre in una nuova scheda) — Open-source e interessante, ma dichiaratamente non pronto per la produzione e non ancora un workflow prompt-to-code affidabile.
• Visily (si apre in una nuova scheda) — Il piano gratuito concede solo due board modificabili e toglie sia l'export Figma sia quello del codice, che sono il cuore del lavoro di Sleek.

Chi l’ha già costruito

Partire da qui è vibecoding lo stesso: il prompt serve quando lo vuoi esattamente a modo tuo.

• dom-to-figma (si apre in una nuova scheda) — MIT converter turning a DOM tree into editable Figma layers on paste; Sleek's own team ships it and the README says it runs in production there (alive)
• Penpot (si apre in una nuova scheda) — open-source design tool where a multi-screen mobile file stays editable, if you want layers rather than a folder of PNGs (alive)
• Onlook (si apre in una nuova scheda) — Apache-2.0 visual editor for React codebases, the nearest thing to click-to-edit; web-focused, and the hosted product is now waitlisted (alive)

Sei d’accordo?

App correlate

Figma 20 $ NON PROPRIO Canva 18 $ QUASI Gamma 12 $ QUASI