Vibecode Sleek
track this build5 steps, step by step0%One screen is already a yes, and you do not need this site for it: paste "design me a settings screen for an iOS app, Tailwind, 402x874" into the agent you already pay for and you get something decent. What Sleek sells is everything that makes twelve screens look like the same app, and most of that turns out to be prompt discipline rather than product. Decide the design system once, paste it verbatim into every later call, and hand the model the mobile conventions it does not apply unprompted: safe areas, 44px tap targets, native navigation instead of a website cropped to phone width. Two gaps survive that. There is no canvas, so every change is a re-prompt of a whole file rather than a click, and one call to one model is a rougher first draft than a tuned chain of them, which you pay for in your own iteration time. The Figma handoff is not one of the gaps: Sleek's own team ships the converter as MIT on npm, so the DIY build gets editable layers from one install.
You are building a lean indie version of Sleek.
Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt.
===== README.md =====
# Sleek indie build
## Goal
Build the smallest trustworthy replacement for the core Sleek workflow for one developer or a tiny team.
## Scope
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.
## Quick start
1. Install the documented dependencies.
2. Copy `.env.example` to `.env`.
3. Run the development command chosen during implementation.
4. Complete the acceptance checks in `BUILD_PLAN.md`.
## Honest limits
This build deliberately does not replace:
- 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
If those capabilities are essential, use dom-to-figma instead of pretending the gap is solved.
===== AGENTS.md =====
# Agent instructions
- Optimize for a working, understandable weekend build.
- Prefer the fewest moving parts that satisfy the brief.
- Do not invent cryptography, security guarantees, APIs, or compliance claims.
- Keep secrets out of source control and logs.
- Add focused tests for destructive, security-sensitive, and data-loss paths.
- Run the project checks before declaring the build complete.
- Record any deliberate shortcut in the README under "Tradeoffs".
===== BUILD_PLAN.md =====
# Build plan
## Original build brief
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.
## Required capabilities
- LLM API key
- Node 22+
- Playwright for screenshot export
## Delivery order
1. Scaffold the smallest runnable application and document its commands.
2. Implement the primary data model and core workflow.
3. Add validation, safe failure states, and persistence.
4. Cover the critical path with automated tests.
5. Exercise a clean install from the README and fix every missing step.
## Done when
- A new user can go from clone to first successful workflow using only the README.
- The core workflow works without paid infrastructure unless the brief requires it.
- Tests cover the highest-risk behavior.
- Known limitations are explicit rather than hidden.
===== .env.example =====
# Copy to .env and document every variable when it is introduced.
# Never put real credentials in this file.
APP_ENV=development
# Add only values required by the selected implementation.You are building a lean indie version of Sleek.
Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt.
===== README.md =====
# Sleek indie build
## Goal
Build the smallest trustworthy replacement for the core Sleek workflow for one developer or a tiny team.
## Scope
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.
## Quick start
1. Install the documented dependencies.
2. Copy `.env.example` to `.env`.
3. Run the development command chosen during implementation.
4. Complete the acceptance checks in `BUILD_PLAN.md`.
## Honest limits
This build deliberately does not replace:
- 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
If those capabilities are essential, use dom-to-figma instead of pretending the gap is solved.
===== AGENTS.md =====
# Agent instructions
- Optimize for a working, understandable weekend build.
- Prefer the fewest moving parts that satisfy the brief.
- Do not invent cryptography, security guarantees, APIs, or compliance claims.
- Keep secrets out of source control and logs.
- Add focused tests for destructive, security-sensitive, and data-loss paths.
- Run the project checks before declaring the build complete.
- Record any deliberate shortcut in the README under "Tradeoffs".
===== BUILD_PLAN.md =====
# Build plan
## Original build brief
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.
## Required capabilities
- LLM API key
- Node 22+
- Playwright for screenshot export
## Delivery order
1. Scaffold the smallest runnable application and document its commands.
2. Implement the primary data model and core workflow.
3. Add validation, safe failure states, and persistence.
4. Cover the critical path with automated tests.
5. Exercise a clean install from the README and fix every missing step.
## Done when
- A new user can go from clone to first successful workflow using only the README.
- The core workflow works without paid infrastructure unless the brief requires it.
- Tests cover the highest-risk behavior.
- Known limitations are explicit rather than hidden.
===== .env.example =====
# Copy to .env and document every variable when it is introduced.
# Never put real credentials in this file.
APP_ENV=development
# Add only values required by the selected implementation.You are building a production product version of Sleek.
Create the following project files first, then implement the application by following them. Keep the files updated as decisions change. Do not collapse this into a single README or prompt.
===== PRODUCT.md =====
# Sleek product brief
## Problem
One screen is already a yes, and you do not need this site for it: paste "design me a settings screen for an iOS app, Tailwind, 402x874" into the agent you already pay for and you get something decent. What Sleek sells is everything that makes twelve screens look like the same app, and most of that turns out to be prompt discipline rather than product. Decide the design system once, paste it verbatim into every later call, and hand the model the mobile conventions it does not apply unprompted: safe areas, 44px tap targets, native navigation instead of a website cropped to phone width. Two gaps survive that. There is no canvas, so every change is a re-prompt of a whole file rather than a click, and one call to one model is a rougher first draft than a tuned chain of them, which you pay for in your own iteration time. The Figma handoff is not one of the gaps: Sleek's own team ships the converter as MIT on npm, so the DIY build gets editable layers from one install.
## Product outcome
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.
## Target user
A serious builder who needs a maintainable product foundation rather than a one-off demo.
## Required capabilities
- LLM API key
- Node 22+
- Playwright for screenshot export
## Explicit non-goals for v1
- 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
## Success criteria
- The primary workflow is measurable end to end.
- Setup is reproducible in a clean environment.
- Failure, recovery, and support paths are documented.
- Product claims match what the implementation actually guarantees.
===== ARCHITECTURE.md =====
# Architecture
## Starting brief
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.
## Boundaries
Separate the product into replaceable modules for interface, application logic, persistence, external integrations, and operational concerns. Keep domain logic independent from delivery frameworks and vendors.
## Production baseline
- Configuration: validated at startup with safe local defaults where possible.
- Security: least privilege, input validation, secret redaction, rate limits on abuse-prone paths, and no invented security primitives.
- Data: explicit schema and migrations, transactional writes where integrity matters, backup and restore instructions.
- Integrations: adapters around third-party providers, idempotent webhook or job processing, bounded retries, and timeouts.
- Observability: structured logs with request or operation IDs, an error-tracking hook, and health/readiness checks where a server exists.
- Quality: unit tests for domain rules, integration tests at module boundaries, and one end-to-end critical-path test.
## Decision records
For each major dependency, document why it was chosen, its failure mode, and how it can be replaced. Do not introduce infrastructure until a requirement justifies it.
===== AGENTS.md =====
# Agent instructions
- Read `PRODUCT.md` and `ARCHITECTURE.md` before changing code.
- Implement milestone by milestone; keep each change reviewable and leave the application runnable.
- Treat authentication, payments, encryption, imports, webhooks, and destructive actions as high-risk boundaries when present.
- Never invent cryptography or silently weaken a requirement to make a test pass.
- Use provider interfaces for external services and deterministic fakes in tests.
- Add migrations and rollback or recovery notes for persistent data changes.
- Log useful operational context without credentials, tokens, passwords, or personal data.
- Update documentation and run all checks before completing a milestone.
===== MILESTONES.md =====
# Delivery milestones
## M0 — Decisions and scaffold
- Confirm the runtime, persistence model, threat boundaries, and deployment target.
- Create a reproducible local environment and continuous checks.
## M1 — Core workflow
- Implement the smallest end-to-end product path with validation and tests.
- Keep integrations behind interfaces.
## M2 — Trust layer
- Add secure failure behavior, recovery paths, audit-relevant events, and data safeguards.
- Test abuse cases and destructive operations.
## M3 — Operability
- Add structured logs, error reporting hooks, health signals, backup/restore documentation, and deployment configuration.
## M4 — Release gate
- Run a clean-install test, critical-path end-to-end test, dependency review, and documented rollback exercise.
- Compare the shipped behavior with `PRODUCT.md` and publish remaining limitations.
===== OPERATIONS.md =====
# Operations
## Before release
- Validate configuration and secrets at startup.
- Define backup, restore, and rollback procedures and test them.
- Document logs, error tracking, health signals, and alert ownership.
- Set dependency update and vulnerability review expectations.
## Incident checklist
1. Contain the issue without destroying evidence or user data.
2. Record the timeline and affected scope.
3. Rotate exposed secrets and revoke compromised sessions or credentials.
4. Restore from a verified source when needed.
5. Document the root cause, remediation, and regression test.
## Launch constraint
Do not market omitted Sleek capabilities as implemented. The v1 non-goals in `PRODUCT.md` remain user-visible limitations until they are deliberately delivered.# Sleek indie build ## Goal Build the smallest trustworthy replacement for the core Sleek workflow for one developer or a tiny team. ## Scope 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. ## Quick start 1. Install the documented dependencies. 2. Copy `.env.example` to `.env`. 3. Run the development command chosen during implementation. 4. Complete the acceptance checks in `BUILD_PLAN.md`. ## Honest limits This build deliberately does not replace: - 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 If those capabilities are essential, use dom-to-figma instead of pretending the gap is solved.
# Agent instructions - Optimize for a working, understandable weekend build. - Prefer the fewest moving parts that satisfy the brief. - Do not invent cryptography, security guarantees, APIs, or compliance claims. - Keep secrets out of source control and logs. - Add focused tests for destructive, security-sensitive, and data-loss paths. - Run the project checks before declaring the build complete. - Record any deliberate shortcut in the README under "Tradeoffs".
# Build plan
## Original build brief
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.
## Required capabilities
- LLM API key
- Node 22+
- Playwright for screenshot export
## Delivery order
1. Scaffold the smallest runnable application and document its commands.
2. Implement the primary data model and core workflow.
3. Add validation, safe failure states, and persistence.
4. Cover the critical path with automated tests.
5. Exercise a clean install from the README and fix every missing step.
## Done when
- A new user can go from clone to first successful workflow using only the README.
- The core workflow works without paid infrastructure unless the brief requires it.
- Tests cover the highest-risk behavior.
- Known limitations are explicit rather than hidden.# Copy to .env and document every variable when it is introduced. # Never put real credentials in this file. APP_ENV=development # Add only values required by the selected implementation.
# Sleek product brief ## Problem One screen is already a yes, and you do not need this site for it: paste "design me a settings screen for an iOS app, Tailwind, 402x874" into the agent you already pay for and you get something decent. What Sleek sells is everything that makes twelve screens look like the same app, and most of that turns out to be prompt discipline rather than product. Decide the design system once, paste it verbatim into every later call, and hand the model the mobile conventions it does not apply unprompted: safe areas, 44px tap targets, native navigation instead of a website cropped to phone width. Two gaps survive that. There is no canvas, so every change is a re-prompt of a whole file rather than a click, and one call to one model is a rougher first draft than a tuned chain of them, which you pay for in your own iteration time. The Figma handoff is not one of the gaps: Sleek's own team ships the converter as MIT on npm, so the DIY build gets editable layers from one install. ## Product outcome 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. ## Target user A serious builder who needs a maintainable product foundation rather than a one-off demo. ## Required capabilities - LLM API key - Node 22+ - Playwright for screenshot export ## Explicit non-goals for v1 - 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 ## Success criteria - The primary workflow is measurable end to end. - Setup is reproducible in a clean environment. - Failure, recovery, and support paths are documented. - Product claims match what the implementation actually guarantees.
# Architecture
## Starting brief
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.
## Boundaries
Separate the product into replaceable modules for interface, application logic, persistence, external integrations, and operational concerns. Keep domain logic independent from delivery frameworks and vendors.
## Production baseline
- Configuration: validated at startup with safe local defaults where possible.
- Security: least privilege, input validation, secret redaction, rate limits on abuse-prone paths, and no invented security primitives.
- Data: explicit schema and migrations, transactional writes where integrity matters, backup and restore instructions.
- Integrations: adapters around third-party providers, idempotent webhook or job processing, bounded retries, and timeouts.
- Observability: structured logs with request or operation IDs, an error-tracking hook, and health/readiness checks where a server exists.
- Quality: unit tests for domain rules, integration tests at module boundaries, and one end-to-end critical-path test.
## Decision records
For each major dependency, document why it was chosen, its failure mode, and how it can be replaced. Do not introduce infrastructure until a requirement justifies it.# Agent instructions - Read `PRODUCT.md` and `ARCHITECTURE.md` before changing code. - Implement milestone by milestone; keep each change reviewable and leave the application runnable. - Treat authentication, payments, encryption, imports, webhooks, and destructive actions as high-risk boundaries when present. - Never invent cryptography or silently weaken a requirement to make a test pass. - Use provider interfaces for external services and deterministic fakes in tests. - Add migrations and rollback or recovery notes for persistent data changes. - Log useful operational context without credentials, tokens, passwords, or personal data. - Update documentation and run all checks before completing a milestone.
# Delivery milestones ## M0 — Decisions and scaffold - Confirm the runtime, persistence model, threat boundaries, and deployment target. - Create a reproducible local environment and continuous checks. ## M1 — Core workflow - Implement the smallest end-to-end product path with validation and tests. - Keep integrations behind interfaces. ## M2 — Trust layer - Add secure failure behavior, recovery paths, audit-relevant events, and data safeguards. - Test abuse cases and destructive operations. ## M3 — Operability - Add structured logs, error reporting hooks, health signals, backup/restore documentation, and deployment configuration. ## M4 — Release gate - Run a clean-install test, critical-path end-to-end test, dependency review, and documented rollback exercise. - Compare the shipped behavior with `PRODUCT.md` and publish remaining limitations.
# Operations ## Before release - Validate configuration and secrets at startup. - Define backup, restore, and rollback procedures and test them. - Document logs, error tracking, health signals, and alert ownership. - Set dependency update and vulnerability review expectations. ## Incident checklist 1. Contain the issue without destroying evidence or user data. 2. Record the timeline and affected scope. 3. Rotate exposed secrets and revoke compromised sessions or credentials. 4. Restore from a verified source when needed. 5. Document the root cause, remediation, and regression test. ## Launch constraint Do not market omitted Sleek capabilities as implemented. The v1 non-goals in `PRODUCT.md` remain user-visible limitations until they are deliberately delivered.
$ choose a build depth, inspect the files, then open the complete pack in your agent
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.
xclicking an element to change it instead of re-prompting the whole file
xa tuned multi-step pipeline · you get one prompt on one model, and you close the gap in your own iteration time
xsketch input · photograph a hand-drawn screen and get it back as a design
xshare links, project history, and team seats
Don't feel like building it? These folks already made it free.
no votes, no pay-to-list · just what's real
Sleek pricing
| plan | monthly | annual (per mo) | what you get |
|---|---|---|---|
| free | $0/workspace | $0/workspace | 1 project and one-time credits for about 1 design; limited exports; credits do not renew. |
| starter | $24.99/workspace | $20/workspace | 3,000 credits/month, about 100 screens, and 5 projects. |
| pro | $49.99/workspace | $30/workspace | 20,000 credits/month, about 650 screens, and unlimited projects. |
| team | — | $40/user | 30,000 credits/seat/month, about 1,000 screens per seat, and unlimited projects. |
free tier1 project and one-time trial credits for about 1 design; credits never reset.
billingStarter/Pro monthly + annual; Team annual price published; refunds only within 24 hours
hidden costsA generation uses about 30 credits and edits use 5–30. Pro and Team can buy 5,000 non-expiring credits for $15; Starter cannot buy extra credits.
verified 2026-08-11 · source ↗
Is Sleek free?
The free plan is one project on one-time trial credits; nothing renews. Paid is Starter at $24.99/mo (checked 2026-08-07).
Vibecode Sleek
Kinda. The core of Sleek is buildable in a weekend with the prompt on this page, but there are real gaps: 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. Read the honest list above before committing.
How much does Sleek cost?
Sleek costs about $24.99/month (Starter, checked 2026-08-07), which is $299.88 per year.
What do I lose by replacing Sleek?
Honestly: 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. If any of those are load-bearing for you, keep paying.
Is there an open-source alternative to Sleek?
Yes: Google Stitch (Prompt or screenshot to multi-screen UI, editable canvas, prototypes, Figma copy, and frontend code export; usage is capped, not trialled.) The prompt is for when you want it exactly your way.