Back to Details

sleek-design-mobile-apps

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Designing with Sleek

使用Sleek进行设计

Overview

概述

Sleek 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 <API_KEY>
on every 
/api/v1/*
request Content-Type: 
application/json
(requests and responses) CORS: Enabled on all 
/api/v1/*
endpoints
Sleek是一款AI驱动的移动应用设计工具。你可以通过
/api/v1/*
路径下的REST API与其交互，创建项目、用自然语言描述你想要构建的内容，然后获取渲染好的界面。所有通信都采用标准HTTP协议，并使用Bearer令牌进行身份验证。
基础URL：
https://sleek.design
身份验证：所有
/api/v1/*
请求都需携带
Authorization: Bearer <API_KEY>
内容类型：
application/json
（请求和响应均使用） 跨域资源共享（CORS）：所有
/api/v1/*
端点均已启用CORS

Prerequisites: API Key

前提条件：API密钥

Create API keys at https://sleek.design/dashboard/api-keys. The full key value is shown only once at creation — store it securely.
Required plan: Pro+ (API access is gated)
在**https://sleek.design/dashboard/api-keys**创建API密钥。完整的密钥值仅在创建时显示一次——请安全存储。
所需套餐：Pro+（API访问权限仅对该套餐开放）

Key scopes

权限范围

ScopeWhat 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.
权限范围解锁功能
projects:read
列出/获取项目
projects:write
创建/删除项目
components:read
列出项目中的组件
chats:read
获取对话运行状态
chats:write
发送对话消息
screenshots
渲染组件截图
请创建仅包含任务所需权限的密钥。

Handling high-level requests

处理高级需求

When the user says something like "design a fitness tracking app" or "build me a settings screen":
  1. Create a project if one doesn't exist yet (ask the user for a name, or derive one from the request)
  2. Send a chat message describing what to build — you can use the user's words directly as 
    message.text
    ; Sleek's AI interprets natural language
  3. Follow the screenshot delivery rule below to show the result
You do not need to decompose the request into screens first. Send the full intent as a single message and let Sleek decide what screens to create.
当用户提出类似“设计一款健身追踪应用”或“为我构建一个设置界面”的需求时：
  1. 创建项目（如果尚未存在）：可询问用户项目名称，或根据需求自动生成
  2. 发送对话消息：直接用用户的描述作为
    message.text
    ；Sleek的AI会解析自然语言
  3. 遵循截图交付规则：展示处理结果
你无需先将需求拆解为多个界面。直接发送完整需求作为单条消息，由Sleek决定需要创建哪些界面。

Screenshot delivery rule

截图交付规则

After every chat run that produces 
screen_created
or 
screen_updated
operations, always take screenshots and show them to the user. Never silently complete a chat run without delivering the visuals.
When screens are created for the first time on a project (i.e. the run includes 
screen_created
operations), deliver:
  1. One screenshot per newly created screen (individual 
    componentIds: [screenId]
    )
  2. One combined screenshot of all screens in the project (
    componentIds: [all screen ids]
    )
When only existing screens are updated, deliver one screenshot per affected screen.
Use 
background: "transparent"
for all screenshots unless the user explicitly requests otherwise.
**每次对话运行产生
screen_created
或
screen_updated
操作后，必须截取截图并展示给用户。**绝不能在完成对话运行后不交付视觉结果。
当项目首次创建界面时（即运行包含
screen_created
操作），需交付：
  1. 每个新创建界面的单独截图（
    componentIds: [screenId]
    ）
  2. 项目中所有界面的组合截图（
    componentIds: [所有界面ID]
    ）
当仅更新现有界面时：为每个受影响的界面交付一张截图。
除非用户明确要求，否则所有截图均使用
background: "transparent"
。

Quick Reference — All Endpoints

快速参考——所有端点

MethodPathScopeDescription
GET
/api/v1/projects
projects:read
List projects
POST
/api/v1/projects
projects:write
Create project
GET
/api/v1/projects/:id
projects:read
Get project
DELETE
/api/v1/projects/:id
projects:write
Delete project
GET
/api/v1/projects/:id/components
components:read
List components
POST
/api/v1/projects/:id/chat/messages
chats:write
Send chat message
GET
/api/v1/projects/:id/chat/runs/:runId
chats:read
Poll run status
POST
/api/screenshots
screenshots
Render screenshot
All IDs are stable string identifiers.
请求方法路径权限范围功能描述
GET
/api/v1/projects
projects:read
列出项目
POST
/api/v1/projects
projects:write
创建项目
GET
/api/v1/projects/:id
projects:read
获取项目详情
DELETE
/api/v1/projects/:id
projects:write
删除项目
GET
/api/v1/projects/:id/components
components:read
列出组件
POST
/api/v1/projects/:id/chat/messages
chats:write
发送对话消息
GET
/api/v1/projects/:id/chat/runs/:runId
chats:read
查询运行状态
POST
/api/screenshots
screenshots
渲染截图
所有ID均为稳定的字符串标识符。

Endpoints

端点详情

Projects

项目管理

List projects

列出项目

http
GET /api/v1/projects?limit=50&offset=0
Authorization: Bearer <key>
Response 
200
:
json
{
  "data": [
    {
      "id": "proj_abc",
      "name": "My App",
      "slug": "my-app",
      "createdAt": "2026-01-01T00:00:00Z",
      "updatedAt": "..."
    }
  ],
  "pagination": { "total": 12, "limit": 50, "offset": 0 }
}
http
GET /api/v1/projects?limit=50&offset=0
Authorization: Bearer <key>
响应状态码
200
：
json
{
  "data": [
    {
      "id": "proj_abc",
      "name": "My App",
      "slug": "my-app",
      "createdAt": "2026-01-01T00:00:00Z",
      "updatedAt": "..."
    }
  ],
  "pagination": { "total": 12, "limit": 50, "offset": 0 }
}

Create project

创建项目

http
POST /api/v1/projects
Authorization: Bearer <key>
Content-Type: application/json

{ "name": "My New App" }
Response 
201
— same shape as a single project.
http
POST /api/v1/projects
Authorization: Bearer <key>
Content-Type: application/json

{ "name": "My New App" }
响应状态码
201
——返回单个项目的结构。

Get / Delete project

获取/删除项目

http
GET    /api/v1/projects/:projectId
DELETE /api/v1/projects/:projectId   → 204 No Content
http
GET    /api/v1/projects/:projectId
DELETE /api/v1/projects/:projectId   → 204 No Content

Components

组件管理

List components

列出组件

http
GET /api/v1/projects/:projectId/components?limit=50&offset=0
Authorization: Bearer <key>
Response 
200
:
json
{
  "data": [
    {
      "id": "cmp_xyz",
      "name": "Hero Section",
      "activeVersion": 3,
      "versions": [{ "id": "ver_001", "version": 1, "createdAt": "..." }],
      "createdAt": "...",
      "updatedAt": "..."
    }
  ],
  "pagination": { "total": 5, "limit": 50, "offset": 0 }
}
http
GET /api/v1/projects/:projectId/components?limit=50&offset=0
Authorization: Bearer <key>
响应状态码
200
：
json
{
  "data": [
    {
      "id": "cmp_xyz",
      "name": "Hero Section",
      "activeVersion": 3,
      "versions": [{ "id": "ver_001", "version": 1, "createdAt": "..." }],
      "createdAt": "...",
      "updatedAt": "..."
    }
  ],
  "pagination": { "total": 5, "limit": 50, "offset": 0 }
}

Chat — Send Message

对话——发送消息

This is the core action: describe what you want in 
message.text
and the AI creates or modifies screens.
http
POST /api/v1/projects/:projectId/chat/messages?wait=false
Authorization: Bearer <key>
Content-Type: application/json
idempotency-key: <optional, max 255 chars>

{
  "message": { "text": "Add a pricing section with three tiers" },
  "imageUrls": ["https://example.com/ref.png"],
  "target": { "screenId": "scr_abc" }
}
FieldRequiredNotes
message.text
Yes1+ chars, trimmed
imageUrls
NoHTTPS URLs only; included as visual context
target.screenId
NoEdit a specific screen; omit to let AI decide
?wait=true/false
NoSync wait mode (default: false)
idempotency-key
header		NoReplay-safe re-sends
这是核心操作：在
message.text
中描述你的需求，AI会创建或修改界面。
http
POST /api/v1/projects/:projectId/chat/messages?wait=false
Authorization: Bearer <key>
Content-Type: application/json
idempotency-key: <可选，最多255个字符>

{
  "message": { "text": "添加包含三个套餐的定价板块" },
  "imageUrls": ["https://example.com/ref.png"],
  "target": { "screenId": "scr_abc" }
}
字段是否必填说明
message.text
是至少1个字符，自动去除首尾空格
imageUrls
否仅支持HTTPS URL；作为视觉参考上下文
target.screenId
否编辑指定界面；留空则由AI决定编辑哪个界面
?wait=true/false
否同步等待模式（默认：false）
idempotency-key
头		否可安全重发请求，避免重复操作

Response — async (default, 
wait=false
)

响应——异步模式（默认，
wait=false
）

Status 
202 Accepted
. 
result
and 
error
are absent until the run reaches a terminal state.
json
{
  "data": {
    "runId": "run_111",
    "status": "queued",
    "statusUrl": "/api/v1/projects/proj_abc/chat/runs/run_111"
  }
}
状态码
202 Accepted
。在运行进入终态前，
result
和
error
字段不存在。
json
{
  "data": {
    "runId": "run_111",
    "status": "queued",
    "statusUrl": "/api/v1/projects/proj_abc/chat/runs/run_111"
  }
}

Response — sync (
wait=true
)

响应——同步模式（
wait=true
）

Blocks up to 300 seconds. Returns 
200
when completed, 
202
if timed out.
json
{
  "data": {
    "runId": "run_111",
    "status": "completed",
    "statusUrl": "...",
    "result": {
      "assistantText": "I added a pricing section with...",
      "operations": [
        { "type": "screen_created", "screenId": "scr_xyz", "screenName": "Pricing" },
        { "type": "screen_updated", "screenId": "scr_abc" },
        { "type": "theme_updated" }
      ]
    }
  }
}
最多阻塞300秒。运行完成时返回
200
，超时则返回
202
。
json
{
  "data": {
    "runId": "run_111",
    "status": "completed",
    "statusUrl": "...",
    "result": {
      "assistantText": "我添加了一个包含...的定价板块",
      "operations": [
        { "type": "screen_created", "screenId": "scr_xyz", "screenName": "Pricing" },
        { "type": "screen_updated", "screenId": "scr_abc" },
        { "type": "theme_updated" }
      ]
    }
  }
}

Chat — Poll Run Status

对话——查询运行状态

Use this after async send to check progress.
http
GET /api/v1/projects/:projectId/chat/runs/:runId
Authorization: Bearer <key>
Response — same shape as send message 
data
object:
json
{
  "data": {
    "runId": "run_111",
    "status": "queued",
    "statusUrl": "..."
  }
}
When completed successfully, 
result
is present:
json
{
  "data": {
    "runId": "run_111",
    "status": "completed",
    "statusUrl": "...",
    "result": {
      "assistantText": "...",
      "operations": [...]
    }
  }
}
When failed, 
error
is present:
json
{
  "data": {
    "runId": "run_111",
    "status": "failed",
    "statusUrl": "...",
    "error": { "code": "execution_failed", "message": "..." }
  }
}
Run status lifecycle: 
queued
→ 
running
→ 
completed | failed
异步发送消息后，可使用此端点检查进度。
http
GET /api/v1/projects/:projectId/chat/runs/:runId
Authorization: Bearer <key>
响应结构与发送消息的
data
对象一致：
json
{
  "data": {
    "runId": "run_111",
    "status": "queued",
    "statusUrl": "..."
  }
}
运行成功完成后，
result
字段会出现：
json
{
  "data": {
    "runId": "run_111",
    "status": "completed",
    "statusUrl": "...",
    "result": {
      "assistantText": "...",
      "operations": [...]
    }
  }
}
运行失败后，
error
字段会出现：
json
{
  "data": {
    "runId": "run_111",
    "status": "failed",
    "statusUrl": "...",
    "error": { "code": "execution_failed", "message": "..." }
  }
}
运行状态生命周期：
queued
→ 
running
→ 
completed | failed

Screenshots

截图生成

Takes a snapshot of one or more rendered components.
http
POST /api/screenshots
Authorization: Bearer <key>
Content-Type: application/json

{
  "componentIds": ["cmp_xyz", "cmp_abc"],
  "projectId": "proj_abc",
  "format": "png",
  "scale": 2,
  "gap": 40,
  "padding": 40,
  "background": "transparent"
}
FieldDefaultNotes
format
png
png
or 
webp
scale
2
1–3 (device pixel ratio)
gap
40
Pixels between components
padding
40
Canvas padding
background
transparent
Any CSS color
Always use 
"background": "transparent"
unless the user explicitly requests a specific background color.
Response: raw binary 
image/png
or 
image/webp
with 
Content-Disposition: attachment
.
为一个或多个渲染后的组件生成快照。
http
POST /api/screenshots
Authorization: Bearer <key>
Content-Type: application/json

{
  "componentIds": ["cmp_xyz", "cmp_abc"],
  "projectId": "proj_abc",
  "format": "png",
  "scale": 2,
  "gap": 40,
  "padding": 40,
  "background": "transparent"
}
字段默认值说明
format
png
支持
png
或
webp
scale
2
1–3（设备像素比）
gap
40
组件之间的间距（像素）
padding
40
画布内边距（像素）
background
transparent
支持任意CSS颜色值
除非用户明确要求特定背景色，否则始终使用
"background": "transparent"
。
响应：原始二进制
image/png
或
image/webp
格式，带有
Content-Disposition: attachment
头。

Error Shapes

错误格式

json
{ "code": "UNAUTHORIZED", "message": "..." }
HTTPCodeWhen
401
UNAUTHORIZED
Missing/invalid/expired API key
403
FORBIDDEN
Valid key, wrong scope or plan
404
NOT_FOUND
Resource doesn't exist
400
BAD_REQUEST
Validation failure
409
CONFLICT
Another run is active for this project
500
INTERNAL_SERVER_ERROR
Server error
Chat run-level errors (inside 
data.error
):
CodeMeaning
out_of_credits
Organization has no credits left
execution_failed
AI execution error
json
{ "code": "UNAUTHORIZED", "message": "..." }
HTTP状态码错误代码触发场景
401
UNAUTHORIZED
API密钥缺失/无效/过期
403
FORBIDDEN
密钥有效，但权限范围或套餐不满足要求
404
NOT_FOUND
请求的资源不存在
400
BAD_REQUEST
请求参数验证失败
409
CONFLICT
该项目已有一个正在运行的对话
500
INTERNAL_SERVER_ERROR
服务器内部错误
对话运行级错误（位于
data.error
内）：
错误代码含义
out_of_credits
组织的可用额度已耗尽
execution_failed
AI执行过程中发生错误

Flows

操作流程

Flow 1: Create project and generate a UI (async + polling)

流程1：创建项目并生成UI（异步+轮询）

1. POST /api/v1/projects                              → get projectId
2. POST /api/v1/projects/:id/chat/messages            → get runId (202)
3. Poll GET /api/v1/projects/:id/chat/runs/:runId
   until status == "completed" or "failed"
4. Collect screenIds from result.operations
   (screen_created and screen_updated entries)
5. Screenshot each affected screen individually
6. If any screen_created: also screenshot all project screens combined
7. Show all screenshots to the user
Polling recommendation: start at 2s interval, back off to 5s after 10s, give up after 5 minutes.
1. POST /api/v1/projects                              → 获取projectId
2. POST /api/v1/projects/:id/chat/messages            → 获取runId（状态码202）
3. 轮询GET /api/v1/projects/:id/chat/runs/:runId
   直到状态变为"completed"或"failed"
4. 从result.operations中收集screenIds
   （包含screen_created和screen_updated的条目）
5. 为每个受影响的界面单独生成截图
6. 如果有新界面创建：同时生成项目所有界面的组合截图
7. 向用户展示所有截图
轮询建议：初始间隔2秒，10秒后调整为5秒，5分钟后停止轮询。

Flow 2: Sync mode (simple, blocking)

流程2：同步模式（简单、阻塞）

Best for short tasks or when latency is acceptable.
1. POST /api/v1/projects/:id/chat/messages?wait=true
   → blocks up to 300s
   → 200 if completed, 202 if timed out
2. If 202, fall back to Flow 1 polling with the returned runId
3. On completion, screenshot and show affected screens (see screenshot delivery rule)
适合短任务或可接受延迟的场景。
1. POST /api/v1/projects/:id/chat/messages?wait=true
   → 最多阻塞300秒
   → 运行完成返回200，超时返回202
2. 如果返回202，使用返回的runId切换到流程1进行轮询
3. 运行完成后，按照截图交付规则生成并展示受影响界面的截图

Flow 3: Edit a specific screen

流程3：编辑指定界面

1. GET /api/v1/projects/:id/components         → find screenId
2. POST /api/v1/projects/:id/chat/messages
   body: { message: { text: "..." }, target: { screenId: "scr_xyz" } }
3. Poll or wait as above
4. Screenshot the updated screen and show it to the user
1. GET /api/v1/projects/:id/components         → 找到screenId
2. POST /api/v1/projects/:id/chat/messages
   请求体：{ message: { text: "..." }, target: { screenId: "scr_xyz" } }
3. 按照上述方式轮询或等待
4. 为更新后的界面生成截图并展示给用户

Flow 4: Idempotent message (safe retries)

流程4：幂等消息（安全重发）

Add 
idempotency-key
header on the send request. If the network drops and you retry with the same key, the server returns the existing run rather than creating a duplicate. The key must be ≤255 chars.
POST /api/v1/projects/:id/chat/messages
idempotency-key: my-unique-request-id-abc123
在发送请求时添加
idempotency-key
头。如果网络中断后使用相同密钥重发请求，服务器会返回已有的运行结果，而不会创建重复运行。密钥长度不能超过255个字符。
POST /api/v1/projects/:id/chat/messages
idempotency-key: my-unique-request-id-abc123

Flow 5: One run at a time (conflict handling)

流程5：单次运行（冲突处理）

Only one active run is allowed per project. If you send a message while one is running, you get 
409 CONFLICT
. Wait for the active run to complete before sending the next message.
409 response → poll existing run → completed → send next message
每个项目同时只能有一个运行中的对话。如果在对话运行时发送新消息，会返回
409 CONFLICT
。需等待当前对话运行完成后再发送下一条消息。
收到409响应 → 轮询现有运行 → 运行完成 → 发送下一条消息

Pagination

分页

All list endpoints accept 
limit
(1–100, default 50) and 
offset
(≥0). The response always includes 
pagination.total
so you can page through all results.
http
GET /api/v1/projects?limit=10&offset=20
所有列表类端点均支持
limit
（1–100，默认50）和
offset
（≥0）参数。响应中始终包含
pagination.total
，方便你遍历所有结果。
http
GET /api/v1/projects?limit=10&offset=20

Common Mistakes

常见错误

MistakeFix
Sending to 
/api/v1
without 
Authorization
header		Add 
Authorization: Bearer <key>
to every request
Using wrong scopeCheck key's scopes match the endpoint (e.g. 
chats:write
for sending messages)
Sending next message before run completesPoll until 
completed
/
failed
before next send
Using 
wait=true
on long generations		It blocks 300s max; have a fallback to polling for 
202
response
HTTP URLs in 
imageUrls
Only HTTPS URLs are accepted
Assuming 
result
is present on 
202
result
is absent until status is 
completed
错误操作修复方案
发送请求到
/api/v1
时未携带
Authorization
头		为每个请求添加
Authorization: Bearer <key>
使用了错误的权限范围检查密钥的权限范围是否与端点匹配（例如：发送消息需要
chats:write
权限）
上一个对话运行完成前发送新消息轮询直到状态变为
completed
/
failed
后再发送下一条消息
长时间生成任务使用
wait=true
最多阻塞300秒；需为返回202的情况准备轮询降级方案
imageUrls
中使用HTTP URL		仅支持HTTPS URL
假设
202
响应中存在
result
字段
result
字段仅在状态为
completed
时才会存在