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

权限范围

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.

权限范围	解锁功能
`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":

Create a project if one doesn't exist yet (ask the user for a name, or derive one from the request)
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
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.

当用户提出类似“设计一款健身追踪应用”或“为我构建一个设置界面”的需求时：

创建项目（如果尚未存在）：可询问用户项目名称，或根据需求自动生成
发送对话消息：直接用用户的描述作为
```
message.text
```
；Sleek的AI会解析自然语言
遵循截图交付规则：展示处理结果

你无需先将需求拆解为多个界面。直接发送完整需求作为单条消息，由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:

One screenshot per newly created screen (individual
```
componentIds: [screenId]
```
)
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

操作），需交付：

每个新创建界面的单独截图（
```
componentIds: [screenId]
```
）
项目中所有界面的组合截图（
```
componentIds: [所有界面ID]
```
）

当仅更新现有界面时：为每个受影响的界面交付一张截图。

除非用户明确要求，否则所有截图均使用

background: "transparent"

。

Quick Reference — All Endpoints

快速参考——所有端点

Method	Path	Scope	Description
`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

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>

响应状态码

：

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

— same shape as a single project.

http

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

{ "name": "My New App" }

响应状态码

——返回单个项目的结构。

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

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>

响应状态码

：

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" }
}

Field	Required	Notes
`message.text`	Yes	1+ chars, trimmed
`imageUrls`	No	HTTPS URLs only; included as visual context
`target.screenId`	No	Edit a specific screen; omit to let AI decide
`?wait=true/false`	No	Sync wait mode (default: false)
`idempotency-key` header	No	Replay-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

when completed,

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秒。运行完成时返回

，超时则返回

。

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"
}

Field	Default	Notes
`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

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": "..." }

HTTP	Code	When
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

Code	Meaning
`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

常见错误

Mistake	Fix
Sending to `/api/v1` without `Authorization` header	Add `Authorization: Bearer <key>` to every request
Using wrong scope	Check key's scopes match the endpoint (e.g. `chats:write` for sending messages)
Sending next message before run completes	Poll 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` 时才会存在

sleek-design-mobile-apps

Original

Translation

Designing with Sleek

使用Sleek进行设计

Overview

概述

Prerequisites: API Key

前提条件：API密钥

Key scopes

权限范围

Handling high-level requests

处理高级需求

Screenshot delivery rule

截图交付规则

Quick Reference — All Endpoints

快速参考——所有端点

Endpoints

端点详情

Projects

项目管理

List projects

列出项目

Create project

创建项目

Get / Delete project

获取/删除项目

Components

组件管理

List components

列出组件

Chat — Send Message

对话——发送消息

Response — async (default, wait=false)

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

Response — sync (wait=true)

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

Chat — Poll Run Status

对话——查询运行状态

Screenshots

截图生成

Error Shapes

错误格式

Flows

操作流程

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

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

Flow 2: Sync mode (simple, blocking)

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

Flow 3: Edit a specific screen

流程3：编辑指定界面

Flow 4: Idempotent message (safe retries)

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

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

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

Pagination

分页

Common Mistakes

常见错误

Response — async (default,
`wait=false`
)

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

Response — sync (
`wait=true`
)

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