DesignCAN I VIBECODE
Sleek?
BUILD FIRST
- One specific customer type and one primary use case
- A vertical slice that completes the main job without manual workarounds
- Visible limits, review steps, and a fallback when an external dependency fails
LEAVE FOR LATER
- Broad third-party integrations
- High-scale collaboration, syncing, and permissions
- Automation that can cause harm without human review
RESEARCH NOTES
What this tool actually does.
Sleek (sleek.design) is an AI-powered mobile app designer. Users describe an app idea in plain language or upload a reference image; the AI generates complete iOS/Android screens — layout, components, copy, styling — following mobile conventions (iOS HIG, Material Design, native navigation, accurate device dimensions, tap-target sizing). Users iterate via chat or edit visually. Exports: one-click paste into Figma as native, editable layers (no plugin) and code as HTML or React with Tailwind CSS. Users own all generated designs/code, including commercial use. Free plan: 1 project, limited AI usage. Paid plans (Starter ~$39/mo, Pro ~$49.99/mo or $30/mo yearly, Team per-user) add AI credits (a screen ≈ 30; edits 5–30), unlimited projects, team features. Pro/Team include a REST API and agent skill so coding agents (Claude Code, Cursor, Codex) create projects, generate screens, and pull HTML/
RESEARCHED BUILD PROMPT
Give this to your coding agent.
Build a web app inspired by Sleek's workflow: an AI mobile app designer where a user describes an app idea (or uploads a reference image) and receives complete, editable mobile screens, then exports them to code. Do not copy Sleek's brand, name, logo, marketing copy, or UI; create an original product with a different name and visual identity.
Workflow: 1) Chat/prompt input with optional image upload; 2) backend calls an LLM to produce a structured screen spec (JSON: screens, layout tree, components, copy, colors, typography) constrained to mobile platform conventions (iOS HIG / Material Design, safe areas, device frames, tap-target sizes); 3) a renderer draws pixel-accurate previews of each screen in the browser; 4) a visual editor lets users select components and tweak properties (text, colors, spacing) and re-prompt the AI for edits; 5) export generates HTML and React + Tailwind CSS files per screen; 6) a REST API (start generation, poll status, fetch HTML/screenshots) so coding agents can drive it.
Technical requirements: React or Svelte frontend; Node/Python backend; LLM API with structured-output/JSON mode; deterministic spec-to-code renderer; project persistence (SQLite/Postgres); API-key auth; async job queue with polling.
Out of scope: Figma plugin/export integration, real-device preview, app-store publishing, image generation, team billing, multi-user collaboration.
Deliver a README covering setup, env vars, how generation works, and important limitations (LLM cost/latency, spec fidelity, no pixel-perfect guarantee, single-user scope).