Build Sleek

KINDAreplaces $24.99/mosaves $299.88/yrback to the verdict

0%0 of 17 items done

Saved on this device only. Tick prerequisites first, then work the phases in order · do not start one until the checks above it pass.

A prompt-to-screen tool for mobile apps where one screen is easy and the product is everything that makes twelve screens look like one app: a design system decided once and never regenerated, mobile conventions the model does not apply unprompted and so must be measured rather than eyeballed, edits that leave the rest of a file alone, and a Figma export that only works from a real click.

estimated effort weekendthe files for this build are in the project pack

RuntimeNext.js with the App Router, screens as files on disk, no databaseModelOne provider behind one streaming route handler, model name in the environmentScreensOne standalone HTML file per screen with Tailwind from a CDN and an icon set, shown in a phone frameConsistencydesign-system.json and _nav.html generated once and pasted verbatim into every later callExportPlaywright screenshots at device scale, and @figit/dom-to-figma for editable layers

Before step 1

Everything below is assumed from the first step. Tick each one when you actually have it, not when you plan to.

installfree
Why Runs the application, the checks and the export.
Get it nodejs.org, or nvm install 22. open ↗
Verify node --version prints v22 or higher
API keyper token, roughly one long call per screen and per edit
Why The sketch input and every screen are calls to it, and the cost per screen is what the ceiling protects you from.
Get it A provider account with per-token billing; note the price of a long output before generating ten screens.
Verify One screen generates and its cost appears in calls.jsonl
installfree
Why It measures insets and tap targets and renders the exports; without it every check is by eye.
Get it npm install playwright, then npx playwright install chromium. open ↗
Verify A headless page opens and reports an element's bounding box
decidefree
Why Every screen is generated at one size and checked against one set of insets, and a guessed inset means content under the status bar on the real phone.
Get it Pick the device, take its logical size from the pixel resolution divided by the scale factor, and measure the safe-area insets on a simulator.
Verify project.json holds the width, height and both insets with a note on where they came from
accountfree
Why Editable layers are the export that matters and the only way to confirm them is to paste.
Get it A free Figma account and an empty file. open ↗
Verify A pasted screen appears as layers rather than as an image

Data model

Create these before the first phase that stores anything. Changing a table later is the expensive kind of change.

- project.json(name, description, device, width_pt, height_pt, safe_top_pt, safe_bottom_pt, created_at) · the target device, measured rather than guessed
- design-system.json(colours[5], fonts[2], type_scale[6], radius, spacing_unit, icon_set) · written once, then read only
- _nav.html · the shared navigation, generated with the design system and byte-identical in every screen
- screens/<name>.html · one standalone file per screen, the only thing the model rewrites
- screens/.history/<name>/<timestamp>.html · every version ever produced, never pruned automatically
- calls.jsonl(at, screen, purpose, model, tokens_in, tokens_out, cost_minor) · one line per model call, so the bill is visible before it arrives
- The design system is generated once and copied into every prompt verbatim, because letting later calls improve it is how the twelfth screen stops looking like the first.

Environment variables

These go in a .env file the app reads at startup. The pack's .env.example is this table as a file · copy it, never commit the filled-in version.

Variable	Needed	Example	Where the value comes from
`MODEL_API_KEY`secret	required	`sk-...redacted`	Billed per token on every screen and every edit.
`MODEL_NAME`	required	`the provider's current model id`	Copied from the provider's model list on the day you set up; it changes.
`SCREENS_DIR`	required	`./public/screens`	One file per screen, with .history beside it. Back this folder up.
`DEVICE_SIZE_PT`	required	`402x874`	Logical width and height of the target device. The example is a 2622 by 1206 pixel display at scale three; check yours.
`SAFE_INSETS_PT`	required	`62,34`	Top and bottom safe-area insets, measured on a simulator for your device. Do not copy the example.
`MIN_CONTROL_PT`	required	`44`	The iOS default control size in Apple's guidelines. The check flags anything smaller.
`EXPORT_SCALE`	required	`3`	Device scale factor for screenshots. Output dimensions are asserted against it.
`PROJECT_COST_CEILING_MINOR`	required	`2000`	Refuses further calls at this total. A warning is read as permission.

The build, in order

1
The screen list and the design system, decided once
One call plans the app and fixes its design system, and nothing regenerates that later.
1. Editing a name is free and regenerating a screen is not.
  Files app/api/plan/route.tslib/prompts/plan.ts
2. Every later prompt reads it; nothing later writes it.
  Files lib/design-system.tstests/design-system-locked.test.ts
3. The bill should be visible before it arrives.
  Files lib/calls.ts
done when · tick each as it passes
watch out
- Letting each screen's call improve the palette or the type scale means every screen quietly gets its own design system, and by screen nine the app looks like four apps built by four people. Generate the system once, paste it verbatim into every later prompt, and make regeneration a deliberate destructive action that keeps the previous version.
next phase
2
Screens that obey the phone, checked by machine
Each screen is a standalone file that respects insets, tap targets and native navigation.
1. Safe areas, control sizes, native navigation, no hover states.
  Files lib/prompts/screen.tsapp/api/screen/route.ts
2. Bounding boxes in a headless browser, not a glance at the gallery.
  Files scripts/check-screens.tstests/tap-targets.test.ts
  terminal
  npx playwright install chromium
3. One shared file, compared on every generation.
  Files lib/screens.ts
done when · tick each as it passes
watch out
- Left to itself the model produces a website cropped to phone width: a top navigation bar, hover states, twelve-pixel links and content under the status bar, and it looks fine in the gallery. Put the conventions in the prompt, then measure bounding boxes in a headless browser rather than judging by eye, because the eye is what the model fooled.
next phase
3
Edits that leave the rest alone
An edit changes what was asked and nothing else, and every version is kept.
1. The description is six edits out of date.
  Files app/api/edit/route.tslib/prompts/edit.ts
2. History is the undo, so it must exist before the write.
  Files lib/history.ts
3. A whole-file rewrite should be visible, not discovered.
  Files components/EditDiff.tsxtests/edit-locality.test.ts
done when · tick each as it passes
watch out
- An edit that regenerates the screen from the original description throws away the six edits before it, and nobody notices until the button they moved yesterday is back where it was. Send the current file rather than the description, show the diff, and keep every version.
next phase
4
The gallery, and pixels at device resolution
All screens are reviewed side by side and exported at the density of the phone.
1. Review and the next instruction in one place.
  Files components/Gallery.tsxcomponents/PhoneFrame.tsx
2. Not the gallery page. Assert the dimensions.
  Files scripts/export.tstests/export-dimensions.test.ts
3. CORS failures are otherwise blank rectangles in the export.
  Files app/api/image/route.ts
done when · tick each as it passes
watch out
- Screenshotting the gallery page captures the iframes at the wrong scale with the wrong fonts, and a review on the phone shows soft text nobody saw on the desktop. Render each screen file in its own page at device scale, and assert the output dimensions.
5
Editable layers, a ceiling, and what this is notproduct builder
Screens land in Figma as editable layers, spending stops at a limit, and the README says what a canvas would have given you.
1. Pass the pending conversion to the clipboard item; do not await first.
  Files components/CopyToFigma.tsx
2. With the total shown, not a warning.
  Files lib/budget.tstests/ceiling.test.ts
3. Honesty in the README beats a half-built editor.
  Files README.md
done when · tick each as it passes
watch out
- Writing to the clipboard after an awaited conversion that started from a click can fall outside the user activation window, and Safari and Firefox refuse the write silently. Hand the pending conversion to the clipboard item as a promise inside the click handler, and show a failure message rather than assuming the paste will work.

what this build does not replace

A click-to-edit canvas.
Share links, accounts and hosting.
A chain of tuned model calls per screen.
Sketch recognition beyond passing the image to the model.
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

after v1, if you want it

A regeneration preview that shows what a new design system would change before it does
Component extraction, so a card used on four screens becomes one snippet pasted into each
Dark mode as a second design system applied to the same screens

Need the files? The project pack on the verdict page hands your agent the whole brief · more design.