# How to Vibe Code Your Own Sleek (and Stop Paying for It)

> AI-powered mobile app design tool

- Site: https://sleek.design
- Category: Design & AI
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

Build a personal subset for yourself, but keep paying if you want the polished Figma clipboard bridge and agent skills. The single biggest catch is engineering the LLM layout AST parser to output clean, valid mobile component trees instead of jumbled divs.

Sleek is a focused SaaS combining prompt generation with mobile layout parsing and a clever clipboard exporter. While a solo developer canvibecode a personal clone that generates mobile mockups and exports Tailwind React code within a couple of weeks, replicating the exact clipboard schema that pastes directly into Figma as native editable vector layers without a custom plugin requires reverse-engineering complex clipboard formats. Additionally, building the REST API and agent skill for terminal tools takes rigorous backend discipline. Unless you want it purely as an interesting sandbox project, subscribing to the real product saves you hours of clipboard debugging.

### What you can't replicate

- The exact proprietary clipboard schema for native Figma vector/layer paste without a plugin
- The active community of 60,000 founders and pre-built design reference library

## What it does

Generate multi-screen mobile UI mockups, layouts, components, and complete design flows purely through natural language prompting or reference image uploads with one-click export to Figma or React/Tailwind code.

### Core features

- Text-to-Mobile-UI Generation with strict adherence to iOS Human Interface Guidelines and Material Design
- Multi-screen generation (Bento grid, glassmorphism, neo-brutalism, soft clay styles)
- Visual editor with inline manual tweaking of layouts, styling, and text hierarchy
- One-click copy/paste directly into Figma as native, fully editable layers without plugins
- Code export to HTML and React with Tailwind CSS
- REST API and AI coding agent skill integration for Claude Code, Cursor, and Codex

## The business

### Pricing

- Free: $0 — Try Sleek with limited trial AI credits.
- Starter: $24.99/mo — For higher limits and regular side projects.
- Pro: $49.99/mo — Most popular plan with API and agent access.
- Team: $69.99/user/mo — Built for collaborative teams.

Founded 2025.
Team size: 1-5.

## The hard parts

- Prompt-to-layout pipeline constraining LLM output into precise structured JSON AST for mobile UI components rather than broken text
- Clipboard serialization supporting native Figma paste schemas as editable vector/layer nodes
- AI agent protocol and token-bucket credit metering tied to Stripe webhooks
- Rendering accurate mobile dimensions, safe areas, and tap-target sizing consistently across aesthetic themes

## How to vibe code Sleek

### Prerequisites

- Node.js (free): Runtime for Next.js full-stack framework
- GitHub (free): Source control and deployment pipeline connection
- Anthropic API key (pay-as-you-go): Powers the Claude model generating UI component layouts

### Recommended AI tools

- Claude Code: Best-in-class terminal agent for scaffolding complex full-stack apps and debugging layout pipelines
- Cursor: Ideal for iterative frontend component design and reviewing Tailwind styling diffs

### Stack

- Frontend: Next.js with React and Tailwind CSS
- Backend: Next.js Server Actions and REST API routes
- Database: Turso (SQLite at the edge for projects, screens, and credit tracking)
- Auth: better-auth
- Payments: Stripe
- Other: Vercel AI SDK, Anthropic API, Resend

### Hosting

- Vercel (Hosting the Next.js frontend, API routes, and Server Actions): $0-20/mo
- Turso (Serverless SQLite database for projects, generations, and user credits): $0/mo

### Build guide

1. **Project Scaffolding & Database Schema** — Initialize a Next.js project with Tailwind CSS, configure Turso database connectivity, and set up better-auth for user management.

```
Initialize a new Next.js TypeScript project with Tailwind CSS. Set up Drizzle ORM connected to Turso. Create database tables for users, projects, screens (storing JSON layout AST), and user_credits. Configure better-auth with email/password authentication and a clean login/signup layout. Verify the build runs cleanly with no TypeScript errors.
```

2. **AI Prompt-to-Layout Pipeline** — Implement the core generation engine using the Vercel AI SDK and Anthropic API to convert text prompts into structured mobile UI component trees.

```
Implement an API route in Next.js that accepts a user prompt and design style (e.g., Glassmorphism, Neo-Brutalism, Soft Clay). Using the Vercel AI SDK and Anthropic Claude Sonnet, prompt the model to return a strict JSON AST representing mobile UI screens (containers, text hierarchy, bento grids, buttons, colors). Validate the output schema using Zod, store the generated screen data in Turso linked to the project, and handle error retries if the JSON is malformed.
```

3. **Visual Mobile Canvas & Editor** — Build an interactive mobile canvas that renders the JSON AST into previewable iOS/Android screens with live text and style editing.

```
Create a responsive mobile frame canvas component in React that dynamically renders the generated screen JSON AST into preview cards mimicking mobile device dimensions (iPhone/Android frame, status bar, safe areas). Add an inspector sidebar allowing users to select individual components, tweak background colors, border radii, and text content. Ensure local state syncs back to the backend database on save.
```

4. **Code & Clipboard Exporters** — Implement export functionality for React/Tailwind code and clipboard HTML formatting for Figma integration.

```
Build export modals for the generated screens. Provide a React + Tailwind code generator that converts the screen AST into clean, copy-pasteable JSX components. Additionally, implement a clipboard copy function that serializes selected nodes into HTML/CSS formats compatible with standard clipboard pasting into design tools.
```

5. **REST API & Agent Skill Endpoint** — Expose a secure REST API and agent skill definition allowing external coding agents like Claude Code to programmatically create projects and generate screens.

```
Build a secure REST API protected by API keys for Pro users. Create endpoints: POST /api/projects to create projects, POST /api/screens/generate to trigger text-to-UI generation programmatically, and GET /api/screens/[id] to fetch screen AST and code. Include credit deduction logic per generation. Write a companion Markdown agent skill instruction file (`SKILL.md`) explaining how an AI coding agent can authenticate and drive these endpoints.
```

6. **Credit Metering & Polish** — Add credit tracking, Stripe billing webhooks, and polish the dashboard UI.

```
Implement a credit metering middleware that deducts credits from user balance upon screen generation or edit. Set up a Stripe webhook endpoint to handle subscription purchases (Starter and Pro plans) and credit top-ups. Polish the dashboard with a clean sidebar, project selector, and loading skeletons during AI generation.
```

### Cost vs paying

**Starting costs (one-time):**

- Domain name: $12 one-time
- Anthropic API initial credits: $20 one-time
- Total: ~$32 one-time

**Ongoing costs (monthly):**

- Vercel Hobby/Pro & Turso: $0-5/mo
- Anthropic API usage: ~$10-20/mo
- Total: ~$15-25/mo

- Paying for the SaaS instead: $49.99/mo (Pro Plan)
- Build time: 25-35 hours
- AI tool credits: $20/mo (Claude Pro) + ~$15 API credits
- Break-even: 1 month of building vs paying

## Sources

- [Sleek Landing Page & App Scrapes](https://sleek.design)
- [Indie Hackers - Hitting $10k MRR in six weeks with an AI design tool](https://www.indiehackers.com)
- [TrustMRR - Sleek Revenue & Tech Stack Breakdown](https://trustmrr.com)