所需套餐 : Pro+ (API 访问受套餐限制)

密钥作用域

请仅为任务所需的作用域创建密钥。

安全与隐私

• 单一主机 : 所有请求都只发送到 https://sleek.design。不会向第三方发送任何数据。
• 仅限 HTTPS : 所有通信都使用 HTTPS。API 密钥仅通过 Authorization 请求头发送到 Sleek 的端点。
• 最小作用域 : 仅创建任务所需的作用域的 API 密钥。优先使用短期或可撤销的密钥。
• 图片 URL : 在聊天消息中使用 imageUrls 时，这些 URL 将由 Sleek 的服务器获取。请避免传递包含敏感内容的 URL。

处理高级别请求

当用户说类似"设计一个健身追踪应用"或"为我构建一个设置屏幕"时：

1. 创建一个项目，如果尚不存在（向用户询问名称，或从请求中推导一个）
2. 发送一条聊天消息描述要构建的内容——您可以直接使用用户的原话作为 message.text；Sleek 的 AI 能理解自然语言
3. 遵循下面的截图交付规则来展示结果

您不需要先将请求分解成多个屏幕。将完整的意图作为单条消息发送，让 Sleek 决定创建哪些屏幕。

截图交付规则

在每次产生 screen_created 或 screen_updated 操作的聊天运行之后，务必截取截图并将其展示给用户。 切勿在未交付视觉效果的情况下静默完成聊天运行。

当在项目中首次创建屏幕时（即运行包含 screen_created 操作），交付：

1. 每个新创建的屏幕一张截图（单独的 componentIds: [screenId]）
2. 项目中所有屏幕的一张组合截图（componentIds: [all screen ids]）

当仅更新现有屏幕时，为每个受影响的屏幕交付一张截图。

除非用户明确要求，否则所有截图都使用 background: "transparent"。

快速参考 —— 所有端点

所有 ID 都是稳定的字符串标识符。

端点

项目

列出项目

GET /api/v1/projects?limit=50&offset=0
Authorization: Bearer $SLEEK_API_KEY

响应 200:

{
  "data": [
    {
      "id": "proj_abc",
      "name": "My App",
      "slug": "my-app",
      "createdAt": "2026-01-01T00:00:00Z",
      "updatedAt": "..."
    }
  ],
  "pagination": { "total": 12, "limit": 50, "offset": 0 }
}

创建项目

POST /api/v1/projects
Authorization: Bearer $SLEEK_API_KEY
Content-Type: application/json

{ "name": "My New App" }

响应 201 —— 与单个项目结构相同。

获取 / 删除项目

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

组件

列出组件

GET /api/v1/projects/:projectId/components?limit=50&offset=0
Authorization: Bearer $SLEEK_API_KEY

响应 200:

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

聊天 —— 发送消息

这是核心操作：在 message.text 中描述您想要的内容，AI 将创建或修改屏幕。

POST /api/v1/projects/:projectId/chat/messages?wait=false
Authorization: Bearer $SLEEK_API_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" }
}

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

状态 202 Accepted。在运行达到终止状态之前，result 和 error 不存在。

{
  "data": {
    "runId": "run_111",
    "status": "queued",
    "statusUrl": "/api/v1/projects/proj_abc/chat/runs/run_111"
  }
}

响应 —— 同步（wait=true）

阻塞最多 300 秒。完成时返回 200，超时则返回 202。

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

聊天 —— 轮询运行状态

在异步发送后使用此端点检查进度。

GET /api/v1/projects/:projectId/chat/runs/:runId
Authorization: Bearer $SLEEK_API_KEY

响应 —— 与发送消息的 data 对象结构相同：

{
  "data": {
    "runId": "run_111",
    "status": "queued",
    "statusUrl": "..."
  }
}

当成功完成时，result 存在：

{
  "data": {
    "runId": "run_111",
    "status": "completed",
    "statusUrl": "...",
    "result": {
      "assistantText": "...",
      "operations": [...]
    }
  }
}

当失败时，error 存在：

{
  "data": {
    "runId": "run_111",
    "status": "failed",
    "statusUrl": "...",
    "error": { "code": "execution_failed", "message": "..." }
  }
}

运行状态生命周期 : queued → running → completed | failed

截图

获取一个或多个渲染组件的快照。

POST /api/v1/screenshots
Authorization: Bearer $SLEEK_API_KEY
Content-Type: application/json

{
  "componentIds": ["cmp_xyz", "cmp_abc"],
  "projectId": "proj_abc",
  "format": "png",
  "scale": 2,
  "gap": 40,
  "padding": 40,
  "background": "transparent"
}

内边距解析遵循级联规则：单边 → 轴向 → 统一。例如，paddingTop 回退到 paddingY，再回退到 padding。因此 { "padding": 20, "paddingX": 10, "paddingLeft": 5 } 会得到上/下 20px，右 10px，左 5px。

当 showDots 为 true 时，会在背景颜色上绘制点阵图案。点阵会自动适应背景：深色背景显示浅色点，浅色背景显示深色点。当 background 为 "transparent" 时，此设置无效。

除非用户明确请求特定的背景颜色，否则始终使用 "background": "transparent"。

响应：原始的二进制 image/png 或 image/webp，附带 Content-Disposition: attachment。

错误格式

{ "code": "UNAUTHORIZED", "message": "..." }

聊天运行级别的错误（在 data.error 中）：

流程

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

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
   直到 status == "completed" 或 "failed"
4. 从 result.operations 收集 screenIds
   (screen_created 和 screen_updated 条目)
5. 单独截取每个受影响屏幕的截图
6. 如果有任何 screen_created：同时截取所有项目屏幕的组合截图
7. 向用户展示所有截图

轮询建议 : 从 2 秒间隔开始，10 秒后回退到 5 秒，5 分钟后放弃。

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

最适合短任务或可以接受延迟的情况。

1. POST /api/v1/projects/:id/chat/messages?wait=true
   → 阻塞最多 300 秒
   → 完成则返回 200，超时则返回 202
2. 如果返回 202，则回退到流程 1 的轮询，使用返回的 runId
3. 完成后，截取并展示受影响的屏幕截图（参见截图交付规则）

流程 3：编辑特定屏幕

1. GET /api/v1/projects/:id/components         → 查找 screenId
2. POST /api/v1/projects/:id/chat/messages
   body: { message: { text: "..." }, target: { screenId: "scr_xyz" } }
3. 如上所述进行轮询或等待
4. 截取更新后的屏幕截图并展示给用户

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

在发送请求时添加 idempotency-key 请求头。如果网络中断，您使用相同的密钥重试，服务器将返回现有的运行，而不是创建重复项。密钥必须 ≤255 个字符。

POST /api/v1/projects/:id/chat/messages
idempotency-key: my-unique-request-id-abc123

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

每个项目只允许一个活动运行。如果您在运行时发送消息，您将收到 409 CONFLICT。等待活动运行完成后再发送下一条消息。

409 响应 → 轮询现有运行 → 完成 → 发送下一条消息

分页

所有列表端点都接受 limit (1–100，默认 50) 和 offset (≥0)。响应始终包含 pagination.total，以便您可以分页浏览所有结果。

GET /api/v1/projects?limit=10&offset=20

常见错误

每周安装量

84.9K

仓库

sleekdotdesign/…t-skills

GitHub 星标数

8

首次出现

12 天前

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

安装于

claude-code60.6K

codex45.7K

opencode32.8K

openclaw29.8K

cursor6.4K

amp3.2K

Prerequisites: API Key

Create API keys at https://sleek.design/dashboard/api-keys. The full key value is shown only once at creation — store it in the SLEEK_API_KEY environment variable.

Required plan : Pro+ (API access is gated)

Key scopes

Create a key with only the scopes needed for the task.

Security & Privacy

• Single host : All requests go exclusively to https://sleek.design. No data is sent to third parties.
• HTTPS only : All communication uses HTTPS. The API key is transmitted only in the Authorization header to Sleek endpoints.
• Minimal scopes : Create API keys with only the scopes required for the task. Prefer short-lived or revocable keys.
• Image URLs : When using imageUrls in chat messages, those URLs are fetched by Sleek's servers. Avoid passing URLs that contain sensitive content.

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.

Screenshot delivery rule

After every chat run that producesscreen_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.

Quick Reference — All Endpoints

All IDs are stable string identifiers.

Endpoints

Projects

List projects

GET /api/v1/projects?limit=50&offset=0
Authorization: Bearer $SLEEK_API_KEY

Response 200:

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

POST /api/v1/projects
Authorization: Bearer $SLEEK_API_KEY
Content-Type: application/json

{ "name": "My New App" }

Response 201 — same shape as a single project.

Get / Delete project

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

Components

List components

GET /api/v1/projects/:projectId/components?limit=50&offset=0
Authorization: Bearer $SLEEK_API_KEY

Response 200:

{
  "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.

POST /api/v1/projects/:projectId/chat/messages?wait=false
Authorization: Bearer $SLEEK_API_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" }
}

Response — async (default, wait=false)

Status 202 Accepted. result and error are absent until the run reaches a terminal state.

{
  "data": {
    "runId": "run_111",
    "status": "queued",
    "statusUrl": "/api/v1/projects/proj_abc/chat/runs/run_111"
  }
}

Response — sync (wait=true)

Blocks up to 300 seconds. Returns 200 when completed, 202 if timed out.

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

Chat — Poll Run Status

Use this after async send to check progress.

GET /api/v1/projects/:projectId/chat/runs/:runId
Authorization: Bearer $SLEEK_API_KEY

Response — same shape as send message data object:

{
  "data": {
    "runId": "run_111",
    "status": "queued",
    "statusUrl": "..."
  }
}

When completed successfully, result is present:

{
  "data": {
    "runId": "run_111",
    "status": "completed",
    "statusUrl": "...",
    "result": {
      "assistantText": "...",
      "operations": [...]
    }
  }
}

When failed, error is present:

{
  "data": {
    "runId": "run_111",
    "status": "failed",
    "statusUrl": "...",
    "error": { "code": "execution_failed", "message": "..." }
  }
}

Run status lifecycle : queued → running → completed | failed

Screenshots

Takes a snapshot of one or more rendered components.

POST /api/v1/screenshots
Authorization: Bearer $SLEEK_API_KEY
Content-Type: application/json

{
  "componentIds": ["cmp_xyz", "cmp_abc"],
  "projectId": "proj_abc",
  "format": "png",
  "scale": 2,
  "gap": 40,
  "padding": 40,
  "background": "transparent"
}

Padding resolves with a cascade: per-side → axis → uniform. For example, paddingTop falls back to paddingY, which falls back to padding. So { "padding": 20, "paddingX": 10, "paddingLeft": 5 } gives top/bottom 20px, right 10px, left 5px.

When showDots is true, a dot pattern is drawn over the background color. The dots automatically adapt to the background: dark backgrounds get light dots, light backgrounds get dark dots. This has no effect when background is "transparent".

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.

Error Shapes

{ "code": "UNAUTHORIZED", "message": "..." }

Chat run-level errors (inside data.error):

Flows

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

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.

Flow 2: Sync mode (simple, blocking)

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)

Flow 3: Edit a specific screen

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

Flow 4: Idempotent message (safe retries)

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

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

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

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.

GET /api/v1/projects?limit=10&offset=20

Common Mistakes

Weekly Installs

84.9K

Repository

sleekdotdesign/…t-skills

GitHub Stars

8

First Seen

12 days ago

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

claude-code60.6K

codex45.7K

opencode32.8K

openclaw29.8K

cursor6.4K

amp3.2K