Pot să vibecodez Sleek?

Ce construiești

Generate one design system, generate each mobile screen as a standalone Tailwind HTML file against it, review them together in phone frames, and export PNGs plus editable Figma layers.

ce îți trebuie

• LLM API key
• Node 22+
• Playwright for screenshot export

The first AI mobile-UI entry on the list, and an awkward one: the thing it sells is largely free inside the reader's own coding agent, and the Figma converter it leaned on is MIT on npm.

Promptul

Un weekend cu un agent de coding. Golurile care rămân sunt mai jos, la „ce pierzi”.

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.

Ce pierzi

• clicking an element to change it instead of re-prompting the whole file
• a tuned multi-step pipeline · you get one prompt on one model, and you close the gap in your own iteration time
• sketch input · photograph a hand-drawn screen and get it back as a design
• share links, project history, and team seats

De ce se plătește în continuare

Nobody pays for one screen, and that is the honest read on this category: the single-screen version got free the day coding agents got good. What is left is thinner than it looks. There is no network here, no proprietary dataset, no integration treadmill, and the Figma converter that used to be the hard part is MIT on npm. What is left is real work all the same. The prompt below is one call to one model; the product is a chain of them, each step routed to whichever model is the right trade of quality against speed for that step, with the prompts behind each layer rewritten over months of iteration. None of that shows up on screen one. It shows up on screen nine, and in how many re-prompts it took to get there. The other thing money buys is a canvas, where a change is a click instead of a whole file re-prompted. Neither is a moat, and the prompt below is the honest test of what they are worth to you.

moat: Calitatea execuției ce e un moat

output quality + editing UX

Alternative gratuite

N-ai chef să ți-o construiești? Astea există deja, sunt gratuite sau open source, și le-am verificat una câte una.

nume stele ultimul commit instalare ce e

Google Stitch gratis (si apre in una nuova scheda) — — serviciu găzduit Prompt or screenshot to multi-screen UI, editable canvas, prototypes, Figma copy, and frontend code export; usage is capped, not trialled.

Respinse (3) — și de ce

• Motiff (si apre in una nuova scheda) — The service has been discontinued; the remaining site is an export notice wearing a product's clothes.
• OpenPencil (si apre in una nuova scheda) — Open source and interesting, but explicitly not production-ready and not a dependable prompt-to-code workflow yet.
• Visily (si apre in una nuova scheda) — Its free tier allows only two editable boards and removes both Figma and code export, which are central to Sleek's job.

Cine l-a construit deja

Să pornești de aici e tot vibecoding: promptul e pentru când o vrei exact în felul tău.

• dom-to-figma (se deschide într-o filă nouă) — 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 (se deschide într-o filă nouă) — open-source design tool where a multi-screen mobile file stays editable, if you want layers rather than a folder of PNGs (alive)
• Onlook (se deschide într-o filă nouă) — 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)

Ești de acord?

Aplicații similare

Figma 20 $ NU CHIAR Canva 18 $ CAM AȘA Gamma 12 $ CAM AȘA