Mobile-first designmønstre til iOS og Android: gestures, safe areas og native fornemmelse.
@sleekdotdesign
skills.sh bidragyder
sleekdotdesign/agent-skills
Open source repository
Nedenstående er skillens egen dokumentation, hentet fra kildekoderepoet. Ophavsret tilhører forfatteren.
sleek.design is an AI-powered mobile app design tool. You interact with it via a REST API at /api/v1/* to create projects, describe what you want built in plain language, and get back rendered screens. All communication is standard HTTP with bearer token auth.
Base URL: https://sleek.design
Auth: Authorization: Bearer $SLEEK_API_KEY on every /api/v1/* request
Content-Type: application/json (requests and responses)
CORS: Enabled on all /api/v1/* endpoints
Parsing responses: write the body to a file (curl -o run.json) and parse the file. Don't pipe JSON through echo: in zsh it expands the escaped \n inside string values into real newlines, which makes the body invalid JSON.
API docs: OpenAPI spec at https://sleek.design/api/v1/spec.json; browsable docs at https://sleek.design/api/v1/docs. Fetch the spec for any contract detail not covered here.
If SLEEK_API_KEY is not set, use the device flow so the user never handles the raw key:
POST https://sleek.design/api/v1/device/start (no auth) with body {"source": "your-tool-slug"}. The response contains a verificationUrl, a human-checkable userCode, a secret deviceCode, and a poll interval in seconds.verificationUrl and the userCode, and tell them to confirm the code matches before approving.POST https://sleek.design/api/v1/device/poll with {"deviceCode": "..."} every interval seconds. When the user approves, the poll returns {"status": "approved", "key": "sk_..."} exactly once: store it as SLEEK_API_KEY. Codes expire after 15 minutes; on expired, start over.Fallback: send the user to https://sleek.design/agents/setup, which handles sign-in, plan upgrade, and key creation in one place, and ask them to paste the key back to you. Keys can also be managed at https://sleek.design/dashboard/api-keys. The full key value is shown only once at creation.
Plans: free accounts can try the API with their one-time trial credits (about one design run), so a new user can see their first design before any payment decision. Sustained use requires the Pro plan or higher ($49.99/month, or $30/month billed yearly at $360/year; includes 20,000 monthly AI credits, roughly 650 screens). When cost becomes relevant (the user asks, an upgrade is needed to continue, or you're about to send them to a payment page), state this pricing plainly, including the yearly option. Never let a payment step come as a surprise.
| Scope | What it unlocks |
|---|---|
projects:read |
List / get projects |
projects:write |
Create / delete projects |
components:read |
List components in a project |
chats:read |
Get chat run status |
chats:write |
Send chat messages |
screenshots |
Render component screenshots |
Create a key with only the scopes needed for the task.
https://sleek.design. No data is sent to third parties.Authorization header to Sleek endpoints.imageUrls in chat messages, those URLs are fetched by Sleek's servers. Avoid passing URLs that contain sensitive content.The full request/response shapes for every endpoint used below are in the API reference.
Create a project with POST /api/v1/projects if one doesn't exist yet. Derive a name from the request.
Each project has its own theme, style, and design system. If the user wants multiple design variations, create a separate project for each variation.
Send the request with POST /api/v1/projects/:id/chat/messages. Sleek plans screen content and layout from your message, and will invent a visual style if you don't give it one. Don't decompose the request into screens and don't add product details the user didn't ask for; send the full intent as a single message. If the user described specific screens, include those. Sleek produces richer designs when given room to plan.
Author a style direction: write one whenever the user has given you anything to ground it in — reference images, apps they like, vibe adjectives, things to avoid — or whenever you're producing variations, one direction per variation. Pass the request through unchanged only when it's bare. A style direction is a single comprehensive paragraph, included in the message, covering mood (2–3 adjectives), color strategy (the logic, not hex codes), typography feel, layout philosophy, component style (radii, borders vs shadows, nav treatment), imagery and illustration style, and one or two distinctive details. Commit to a palette, a type direction, and an overall feel — anything that only sets a mood reads as a hint, not a direction. Be opinionated; don't hedge. Put the personality in color, type, and imagery rather than in unusual layout or navigation.
Extend what the user gave you and never contradict it. When they point at reference images or apps they like, study each one and carry what you take into the direction — Sleek only sees images passed as imageUrls, so for anything local the direction is how those references reach it. Borrow patterns, never the source's branding, content, or name.
Use a style direction or a referenceId, not both — a reference already carries a full style guide of its own.
Seed a style with a reference: Sleek curates a catalog of design references. When the user wants a specific look or asks for style options, list them with GET /api/v1/references (each has a name and previewImageUrls you can show) and pass the chosen id as referenceId on the first message to a project, so its style guide seeds the whole design.
Identify your tool: always send source, the slug of the tool making the request. The Sleek editor uses it to show the user who is designing while the run streams. Recognized values: claude-code, claude, codex, chatgpt, cursor, openclaw, grok. If your tool isn't listed, send a short kebab-case slug for it anyway (max 64 chars). Unrecognized values are fine and get a generic label.
Watch it live: runs render in the Sleek editor in real time. After sending the first message to a project, tell the user they can watch their screens being designed live in Sleek, and share the editor link: https://sleek.design/project/:projectId. Don't open a browser yourself unless the user asks.
Polling: chat messages are async by default: you get a runId and poll GET /api/v1/projects/:id/chat/runs/:runId. Start at 2s interval, back off to 5s after 10s, give up after 5 minutes. Exit on completed or failed; if you can't read the status, stop and report it rather than counting it as "not done yet". You can also use ?wait=true for a blocking call (up to 300s; falls back to polling if it times out with 202).
Editing a specific screen: use target.screenId to direct changes to the right screen (uses the screen ID from operations, not the component ID).
One run at a time: only one active run is allowed per project. If you get 409 CONFLICT, wait for the current run to complete before sending the next message. If the user changed their mind or a stale run is blocking the project, cancel it (see Cancel Run). Messages to different projects can run in parallel; use async polling (not ?wait=true) when running multiple projects concurrently.
Safe retries: add an idempotency-key header (≤255 chars) to replay-safe re-sends. The server returns the existing run rather than creating a duplicate.
After every chat run that produces screen_created or screen_updated operations, take screenshots and show them to the user using POST /api/v1/screenshots. The step is done only when the user has seen a screenshot of every screen the run created or updated; never complete a run silently.
Use background: "transparent" unless the user explicitly requests a specific background color.
Save screenshots in the project directory (not a temporary folder) so the user can easily view them.
Showing vs reviewing: the defaults capture only the viewport, which is the right framing for the user — screens look like phone screens. They are the wrong framing for judging your own work, because everything below the fold is cropped away. When you're reviewing what a run produced, re-shoot the screen with fullHeight: true (one screen per request) to see the whole scrollable page.
Never call a screen incomplete from a viewport screenshot. Content that looks missing is almost always just below the fold. Before telling the user something is absent, or sending a follow-up message asking Sleek to add it, confirm it against the whole screen: a fullHeight: true screenshot, or the component HTML from GET /api/v1/projects/:id/components/:componentId, which is the ground truth for what's on the screen. The screenshot is the default and answers most review questions on its own — don't go to the code to double-check something it already shows. Reach for the code only when you're about to claim something is missing: a render can omit what's really there (past the height cap, in a collapsed section, on a later carousel slide), so a negative conclusion is the one worth a second source. Note the reverse too — an element present in the HTML may still not be visible to the user.
When the user wants to implement the designs in code (not just preview them), always fetch the component HTML code. Do not rely on screenshots alone.
Use GET /api/v1/projects/:id/components/:componentId to fetch each screen's code. The componentId comes from the chat run's result.operations.
Component code can be large. When saving it to files, avoid writing the content through your text output: it's slow and wastes tokens. Instead, use shell commands to fetch the API response and write it directly to disk (e.g., pipe the response body into a file).
Each component carries a versions[] array and an activeVersion: number. By default, use the entry where versions[i].version === activeVersion: that's the code currently shown in Sleek.
If the user's prompt pins specific versions, follow those instead (see Pinned versions below).
The user's prompt may include a pin block telling you to implement specific historical versions instead of the current ones, like this:
... at this exact state instead of the project's current version:
- component cmp_abc: version ver_001
- component cmp_def: version ver_002
- theme thm_ghi: version ver_003
When you see a pin block, implement those exact versions instead of activeVersion. Components not named in the pin block continue to use their active version. Theme IDs surface only inside pin blocks; this skill exposes no separate endpoint to enumerate them.
For each pinned component, find the entry in versions[] where versions[i].id matches the given version id (e.g. ver_001) and use its code. Do not fall back to activeVersion for pinned components.
Pass componentVersionOverrides and themeVersionOverrides to POST /api/v1/screenshots:
{
"componentIds": ["cmp_abc"],
"projectId": "proj_xyz",
"componentVersionOverrides": { "cmp_abc": "ver_001" },
"themeVersionOverrides": { "thm_ghi": "ver_003" }
}
Keys are component / theme public ids; values are the corresponding versions[i].id. Entities missing from a map fall back to their active version. Include the override maps whenever the prompt specified pinned versions.
The component code is a complete HTML document. Save it directly to a .html file. No build step needed.
Use both the HTML code and the screenshots together:
The HTML tells you how to build it; the screenshot tells you what it should look like.
Sleek uses Iconify icons in the format prefix:name (e.g., solar:heart-bold, material-symbols:search-rounded, lucide:settings). The most common sets are Solar, Hugeicons, Material Symbols and MDI.
Use the exact icons from the HTML code. Do not substitute with a different icon set. Matching icons is important for design fidelity.
When implementing icons:
Check if the project already has an icon system that supports the same sets Sleek uses (Solar, Hugeicons, Material Symbols, MDI). If so, use it. Note: @expo/vector-icons does not support these sets, so do not use it as a substitute.
Otherwise, fetch the SVGs from the Iconify API and embed them in the code:
GET https://api.iconify.design/{prefix}/{name}.svg
Example: https://api.iconify.design/solar/heart-bold.svg
Dokumentationen er forkortet. Læs den fulde version på GitHub.