Lohnt sich dein eigenes Sleek?
Prompt-zu-Design-Tool für mobile App-UI mit mehreren Bildschirmen sowie Figma- und Code-Export
Ein einzelner Bildschirm ist schon ein klares Ja, und dafür brauchst du diese Website nicht: Füge „Entwirf mir einen Einstellungsbildschirm für eine iOS-App, Tailwind, 402x874“ in den Agenten ein, für den du ohnehin bezahlst, und du bekommst etwas Ordentliches. Sleek verkauft alles, was zwölf Bildschirme wie dieselbe App aussehen lässt, und das erweist sich größtenteils als Prompt-Disziplin statt als Produkt. Lege das Designsystem einmal fest, füge es wörtlich in jeden späteren Aufruf ein und gib dem Modell die mobilen Konventionen mit, die es nicht ungefragt anwendet: sichere Bereiche, 44px große Tippziele, native Navigation statt einer auf Telefonbreite zugeschnittenen Website. Zwei Lücken bleiben. Es gibt keine Arbeitsfläche, daher ist jede Änderung ein erneuter Prompt für eine ganze Datei statt eines Klicks. Und ein Aufruf an ein Modell liefert einen gröberen ersten Entwurf als eine abgestimmte Kette davon, wofür du mit eigener Iterationszeit bezahlst. Die Übergabe an Figma gehört nicht zu den Lücken: Das eigene Team von Sleek veröffentlicht den Konverter unter MIT auf npm, sodass der DIY-Eigenbau mit einer Installation editierbare Ebenen bekommt.
EN → DERecherche automatisch aus dem Englischen übersetzt. Original-Prompt auf Englisch beibehalten.
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.Der Prompt öffnet sich vorausgefüllt in deinem Agenten. Prüfe ihn vor dem Ausführen.
Wie sähe deine eigene Version aus?
Erzeuge ein Designsystem, generiere jeden mobilen Bildschirm auf dessen Grundlage als eigenständige Tailwind-HTML-Datei, prüfe sie gemeinsam in Telefonrahmen und exportiere PNGs sowie editierbare Figma-Ebenen.
Was du brauchst
- LLM-API-Schlüssel
- Node 22+
- Playwright für Screenshot-Export
Niemand zahlt für einen einzelnen Bildschirm, und das ist die ehrliche Einschätzung dieser Kategorie: Die Version für einen einzelnen Bildschirm wurde kostenlos, als Coding-Agenten gut wurden. Was bleibt, ist dünner, als es aussieht. Es gibt hier kein Netzwerk, keinen proprietären Datensatz und kein endloses Nachpflegen von Integrationen, und der Figma-Konverter, der früher der schwierige Teil war, steht unter MIT auf npm. Trotzdem bleibt echte Arbeit. Der Prompt unten ist ein Aufruf an ein Modell; das Produkt ist eine Kette davon. Jeder Schritt wird an das Modell geleitet, das für diesen Schritt den passenden Kompromiss zwischen Qualität und Geschwindigkeit bietet, und die Prompts hinter jeder Schicht wurden über Monate der Iteration überarbeitet. Nichts davon zeigt sich auf Bildschirm eins. Es zeigt sich auf Bildschirm neun und daran, wie viele erneute Prompts nötig waren, um dorthin zu kommen. Außerdem kauft Geld eine Arbeitsfläche, auf der eine Änderung ein Klick ist statt eines erneuten Prompts für die gesamte Datei. Keines von beidem ist ein Burggraben, und der Prompt unten ist der ehrliche Test dafür, was es dir wert ist.
xein Element anklicken, um es zu ändern, statt die ganze Datei erneut per Prompt bearbeiten zu lassen
xeine abgestimmte mehrstufige Pipeline · du bekommst einen Prompt für ein Modell und schließt die Lücke mit deiner eigenen Iterationszeit
xSkizzen als Eingabe · einen handgezeichneten Bildschirm fotografieren und als Design zurückbekommen
xFreigabelinks, Projektverlauf und Team-Nutzerplätze
Lieber eine fertige Lösung?
Lizenz, Installation und Einschränkungen jeder Alternative.
Was kostet Sleek?
- Monatliche Zahlung
- 29 $/Mon.29 $/Mon.
- Pro Jahr
- 348 $/Jahr348 $/Jahr
- Jährliche Zahlung
- 240 $/Jahr31% günstiger als monatlich
- Mit brasilianischer Karte, inkl. 3,5% IOF
- 152 R$/Mon.1.254 R$/Jahr
In Meine Liste gespeichert. Bei einer Preisänderung erscheint hier ein Hinweis.
Du schließt den Kauf auf der Website von Sleek ab. Vibe Radar wickelt keine Zahlungen ab.
| Tarif | Monatlich | Jährlich (pro Monat) | Enthalten |
|---|---|---|---|
| free | $0/Workspace | $0/Workspace | 1 Projekt und einmalige Credits für etwa 1 Design; begrenzte Exporte; Credits werden nicht erneuert. |
| starter | $29/Workspace≈ 29 $ | $20/Workspace≈ 20 $ | 3,000 Credits/Monat, etwa 100 Bildschirme und 5 Projekte. |
| pro | $69/Workspace≈ 69 $ | $30/Workspace≈ 30 $ | 20,000 Credits/Monat, etwa 650 Bildschirme und unbegrenzte Projekte. |
| team | $99/Nutzer≈ 99 $ | $40.83/Nutzer≈ 40,83 $ | 30,000 Credits/Nutzerplatz/Monat, etwa 1,000 Bildschirme pro Nutzerplatz und unbegrenzte Projekte. |
Kostenloser Tarif1 Projekt und einmalige Test-Credits für etwa 1 Design; Credits werden nie zurückgesetzt.
AbrechnungsbedingungenStarter/Pro monatlich + jährlich; Jahrespreis für Team veröffentlicht; Erstattungen nur innerhalb von 24 Stunden
ZusatzkostenEine Generierung verbraucht etwa 30 Credits, Bearbeitungen 5–30. Pro und Team können 5,000 nicht verfallende Credits für $15 kaufen; Starter kann keine zusätzlichen Credits kaufen.
PreisverlaufStarter, month-to-month: $24.99 → $29 (2026-10)
verified 2026-10-20 · source ↗
Sleek selbst bauen oder abonnieren?
Passe die Zahlen an: Stunden zum Bauen, dein Stundensatz, Betriebskosten und der Abopreis.
Über 24 Monate ist das Abo günstiger.
Startwerte aus der Analyse geschätzt (ein Wochenende). Nicht eingerechnet ist, was dir fehlt (Support, Integrationen, Sicherheit).
Ist Sleek kostenlos?
Der kostenlose Tarif umfasst ein Projekt mit einmaligen Test-Credits; nichts wird erneuert. Der bezahlte Tarif ist Starter für 29 $/Mon. (geprüft am 20.10.2026).
Kann ich Sleek nachbauen?
Teilweise. Den Kern von Sleek baust du mit dem Prompt auf dieser Seite an einem Wochenende, aber es gibt echte Lücken: ein Element anklicken, um es zu ändern, statt die ganze Datei erneut per Prompt bearbeiten zu lassen, eine abgestimmte mehrstufige Pipeline · du bekommst einen Prompt für ein Modell und schließt die Lücke mit deiner eigenen Iterationszeit. Lies die Liste oben, bevor du loslegst.
Was kostet Sleek?
Sleek kostet etwa 29 $/Mon. (Starter, geprüft am 20.10.2026), also 240 $ pro Jahr.
Was fehlt mir, wenn ich Sleek ersetze?
Ehrlich gesagt: ein Element anklicken, um es zu ändern, statt die ganze Datei erneut per Prompt bearbeiten zu lassen; eine abgestimmte mehrstufige Pipeline · du bekommst einen Prompt für ein Modell und schließt die Lücke mit deiner eigenen Iterationszeit; Skizzen als Eingabe · einen handgezeichneten Bildschirm fotografieren und als Design zurückbekommen; Freigabelinks, Projektverlauf und Team-Nutzerplätze. Wenn dir davon etwas wichtig ist, zahl weiter.
Gibt es eine Open-Source-Alternative zu Sleek?
Ja: Google Stitch (Vom Prompt oder Screenshot zur UI mit mehreren Bildschirmen, editierbarer Arbeitsfläche, Prototypen, Kopieren nach Figma und Frontend-Code-Export; die Nutzung ist begrenzt, aber keine bloße Testphase.) Der Prompt ist für den Fall, dass du es genau nach deinen Vorstellungen willst.