Back to Details

sleek-design-mobile-apps

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Designing with Sleek

使用Sleek进行设计

Design mobile apps in minutes
几分钟内完成移动应用设计

Overview

概述

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 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.
sleek.design是一款AI驱动的移动应用设计工具。你可以通过
/api/v1/*
路径下的REST API与其交互，创建项目、用自然语言描述你想要的设计，然后获取渲染好的界面。所有通信均采用标准HTTP协议，并使用Bearer令牌进行身份验证。
Base URL: 
https://sleek.design
Auth: 所有
/api/v1/*
请求均需携带
Authorization: Bearer $SLEEK_API_KEY
Content-Type: 
application/json
（请求和响应均使用） CORS: 所有
/api/v1/*
端点均已启用跨域支持 API文档: OpenAPI规范地址为
https://sleek.design/api/v1/spec.json
；可浏览的文档地址为
https://sleek.design/api/v1/docs
。若本文档未覆盖的合约细节，可获取该规范查看。

Prerequisites: API Key

前置条件：API密钥

If 
SLEEK_API_KEY
is not set, use the device flow so the user never handles the raw key:
  1. 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.
  2. Show the user the 
    verificationUrl
    and the 
    userCode
    , and tell them to confirm the code matches before approving.
  3. Poll 
    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.
如果未设置
SLEEK_API_KEY
，请使用设备授权流程，这样用户无需直接处理原始密钥：
  1. 发送
    POST https://sleek.design/api/v1/device/start
    （无需身份验证），请求体为
    {"source": "your-tool-slug"}
    。响应包含
    verificationUrl
    （验证链接）、供人工核对的
    userCode
    （用户码）、保密的
    deviceCode
    （设备码）以及轮询
    interval
    （间隔时间，单位为秒）。
  2. 向用户展示
    verificationUrl
    和
    userCode
    ，并告知他们在确认代码匹配后再进行授权。
  3. 每隔
    interval
    秒发送
    POST https://sleek.design/api/v1/device/poll
    ，请求体为
    {"deviceCode": "..."}
    进行轮询。当用户授权后，轮询会返回一次
    {"status": "approved", "key": "sk_..."}
    ：将其保存为
    SLEEK_API_KEY
    。代码15分钟后过期；若返回
    expired
    ，请重新开始流程。
备选方案：引导用户访问**https://sleek.design/agents/setup**，该页面可一站式处理登录、套餐升级和密钥创建，然后让用户将密钥粘贴回来。密钥也可在**https://sleek.design/dashboard/api-keys**进行管理。密钥完整值仅在创建时显示一次。
套餐说明：免费账户可使用一次性试用额度体验API（约可完成一次设计），新用户可在做出付费决策前查看首个设计。持续使用需升级至Pro套餐或更高版本（月付49.99美元，或年付360美元，折合每月30美元；包含每月20000个AI额度，约可生成650个界面）。当涉及费用问题时（用户询问、需要升级才能继续使用，或即将引导用户进入支付页面），请明确说明此定价，包括年付选项。切勿让支付环节成为意外。

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
渲染组件截图
创建密钥时仅赋予完成任务所需的权限范围。

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.
  • 单一主机：所有请求仅发送至
    https://sleek.design
    ，不会向第三方发送任何数据。
  • 仅HTTPS通信：所有通信均使用HTTPS协议。API密钥仅在Sleek端点的
    Authorization
    头中传输。
  • 最小权限原则：创建API密钥时仅赋予完成任务所需的权限范围，优先使用短期或可撤销的密钥。
  • 图片URL：当在聊天消息中使用
    imageUrls
    时，这些URL将由Sleek的服务器获取。请勿传递包含敏感内容的URL。

Designing

设计流程

The full request/response shapes for every endpoint used below are in the API reference.
以下使用的所有端点的完整请求/响应格式可查看API参考。

1. Create a project

1. 创建项目

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.
若项目尚未存在，使用
POST /api/v1/projects
创建项目。根据用户请求生成项目名称。
每个项目都有独立的主题、样式和设计系统。如果用户需要多种设计变体，请为每个变体创建单独的项目。

2. Send a chat message

2. 发送聊天消息

Send the request with 
POST /api/v1/projects/:id/chat/messages
. Sleek has its own AI that plans screen content, visual style, and layout: pass the user's request as-is and let it plan. Don't add details the user didn't ask for, and don't decompose the request into screens; send the full intent as a single message. If the user described specific screens and styling, include those. Sleek produces richer designs when given room to plan.
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. 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.
使用
POST /api/v1/projects/:id/chat/messages
发送请求。Sleek内置的AI会规划界面内容、视觉样式和布局：直接传递用户的原始请求即可，无需添加用户未提及的细节，也无需将请求拆分为多个界面；将完整需求作为单条消息发送。如果用户描述了特定界面和样式，请一并包含。给予AI足够的规划空间，Sleek会生成更丰富的设计。
参考样式初始化：Sleek整理了一系列设计参考模板。当用户想要特定风格或询问样式选项时，使用
GET /api/v1/references
列出所有模板（每个模板包含
name
和可展示的
previewImageUrls
），并将用户选择的模板ID作为
referenceId
传递给项目的第一条消息，这样其样式指南将为整个设计奠定基础。
标识你的工具：始终发送
source
参数，即发起请求的工具的slug。Sleek编辑器会用它向用户显示当前是谁在进行设计。已识别的值包括：
claude-code
、
claude
、
codex
、
chatgpt
、
cursor
、
openclaw
、
grok
。如果你的工具未在列表中，也请发送一个简短的短横线分隔式slug（最多64个字符）。未识别的值会被标记为通用标签。
实时查看设计过程：设计任务会在Sleek编辑器中实时渲染。向项目发送第一条消息后，告知用户他们可以在Sleek中实时查看界面设计过程，并分享编辑器链接：
https://sleek.design/project/:projectId
。除非用户要求，否则不要自行打开浏览器。
轮询机制：聊天消息默认是异步的：你会收到一个
runId
，然后通过
GET /api/v1/projects/:id/chat/runs/:runId
进行轮询。初始轮询间隔为2秒，10秒后调整为5秒，5分钟后放弃。你也可以使用
?wait=true
进行阻塞调用（最长300秒；如果超时返回
202
，则回退到轮询模式）。
编辑特定界面：使用
target.screenId
指定要修改的界面（使用操作返回的screen ID，而非组件ID）。
同一项目仅支持一个活跃任务：每个项目同一时间只能有一个活跃任务。如果收到
409 CONFLICT
错误，请等待当前任务完成后再发送下一条消息。如果用户改变主意或过时的任务阻塞了项目，请取消该任务（查看取消任务）。不同项目的消息可以并行处理；当同时运行多个项目时，请使用异步轮询（而非
?wait=true
）。
安全重试：添加
idempotency-key
请求头（最多255个字符），可安全重发请求。服务器会返回已存在的任务，而非创建重复任务。

3. Show the results

3. 展示结果

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.
  • New screens: one screenshot per screen + one combined screenshot of all screens in the project.
  • Updated screens: one screenshot per affected screen.
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.
每次聊天任务生成
screen_created
或
screen_updated
操作后，务必使用
POST /api/v1/screenshots
生成截图并展示给用户。只有当用户看到任务创建或更新的所有界面的截图后，才算完成该步骤；切勿静默完成任务。
  • 新界面：每个界面一张截图 + 项目中所有界面的组合截图。
  • 更新的界面：每个受影响的界面一张截图。
除非用户明确要求特定背景色，否则使用
background: "transparent"
。
将截图保存到项目目录（而非临时文件夹），方便用户查看。

Implementing Designs

设计实现

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).
当用户想要将设计通过代码实现（而非仅预览）时，务必获取组件的HTML代码，不要仅依赖截图。
使用
GET /api/v1/projects/:id/components/:componentId
获取每个界面的代码。
componentId
来自聊天任务的
result.operations
。
组件代码可能很大。保存到文件时，避免通过文本输出写入内容：这会很慢且浪费令牌。相反，使用shell命令直接获取API响应并写入磁盘（例如，将响应体管道输出到文件）。

Which version to use

版本选择

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).
每个组件都包含
versions[]
数组和
activeVersion: number
。默认使用
versions[i].version === activeVersion
的条目：这是Sleek中当前显示的代码。
如果用户的提示指定了特定版本，请遵循该版本（查看下方固定版本）。

Pinned versions

固定版本

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.
用户的提示可能包含一个固定块，要求你实现特定历史版本而非当前版本，示例如下：
... 请以此精确状态实现，而非项目当前版本：
- 组件 cmp_abc: 版本 ver_001
- 组件 cmp_def: 版本 ver_002
- 主题 thm_ghi: 版本 ver_003
当看到固定块时，请实现这些精确版本，而非
activeVersion
。固定块中未提及的组件继续使用其活跃版本。主题ID仅在固定块中出现；本技能未提供单独的端点来枚举主题。

Fetching the right code

获取正确代码

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.
对于每个固定组件，在
versions[]
中找到
versions[i].id
与指定版本ID（如
ver_001
）匹配的条目，并使用其
code
。固定组件不要回退到
activeVersion
。

Screenshots of pinned versions

固定版本的截图

Pass 
componentVersionOverrides
and 
themeVersionOverrides
to 
POST /api/v1/screenshots
:
json
{
  "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.
将
componentVersionOverrides
和
themeVersionOverrides
传递给
POST /api/v1/screenshots
：
json
{
  "componentIds": ["cmp_abc"],
  "projectId": "proj_xyz",
  "componentVersionOverrides": { "cmp_abc": "ver_001" },
  "themeVersionOverrides": { "thm_ghi": "ver_003" }
}
键为组件/主题的公开ID；值为对应的
versions[i].id
。映射中未提及的实体回退到其活跃版本。只要提示中指定了固定版本，就需要包含覆盖映射。

HTML prototypes

HTML原型

The component 
code
is a complete HTML document. Save it directly to a 
.html
file. No build step needed.
组件的
code
是完整的HTML文档。直接保存为
.html
文件即可，无需构建步骤。

Native frameworks (React Native, SwiftUI, etc.)

原生框架（React Native、SwiftUI等）

Use both the HTML code and the screenshots together:
  • HTML code is the implementation reference: it contains the exact structure, layout, styling, colors, spacing, content, image URLs, and icon names.
  • Screenshots are the visual target: use them to verify your implementation matches the intended look.
The HTML tells you how to build it; the screenshot tells you what it should look like.
需结合HTML代码和截图使用：
  • HTML代码是实现参考：包含精确的结构、布局、样式、颜色、间距、内容、图片URL和图标名称。
  • 截图是视觉目标：用于验证你的实现是否符合预期外观。
HTML告诉你如何构建；截图告诉你应该是什么样子。

Icons

图标

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:
  1. 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.
  2. 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
    Collect all icon names from the HTML, fetch their SVGs, and save them as static assets or string constants in the codebase. For React Native / Expo, render them with 
    react-native-svg
    's 
    SvgXml
    component, which works in Expo Go with no additional native dependencies.
Sleek使用Iconify图标，格式为
prefix:name
（例如
solar:heart-bold
、
material-symbols:search-rounded
、
lucide:settings
）。最常用的图标集包括Solar、Hugeicons、Material Symbols和MDI。
务必使用HTML代码中的精确图标，不要替换为其他图标集。匹配图标对设计保真度至关重要。
实现图标时：
  1. 检查项目是否已有支持Sleek所用图标集的图标系统（Solar、Hugeicons、Material Symbols、MDI）。如果有，请使用该系统。注意：
    @expo/vector-icons
    不支持这些图标集，请勿将其作为替代方案。
  2. 否则，从Iconify API获取SVG并嵌入代码中：
    GET https://api.iconify.design/{prefix}/{name}.svg
    示例：
    https://api.iconify.design/solar/heart-bold.svg
    收集HTML中的所有图标名称，获取其SVG，并保存为静态资源或代码中的字符串常量。对于React Native / Expo，使用
    react-native-svg
    的
    SvgXml
    组件渲染，无需额外原生依赖即可在Expo Go中运行。

Fonts

字体

The HTML includes Google Fonts via 
<link>
tags in the 
<head>
. Use the same fonts and weights when implementing in a native framework. Extract the font family names and weights from the 
<link>
tags.
HTML通过
<head>
中的
<link>
标签引入Google Fonts。在原生框架中实现时，请使用相同的字体和字重。从
<link>
标签中提取字体族名称和字重。

Navigation

导航

The designs may include navigation elements like tab bars and headers. Update the project's navigation styling and structure to match the designs. Don't just implement the screen content while leaving the default navigation untouched.
设计中可能包含标签栏、标题栏等导航元素。更新项目的导航样式和结构以匹配设计，不要仅实现界面内容而保留默认导航。

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
GET
/api/v1/projects/:id/components/:componentId
components:read
Get component
GET
/api/v1/references
any valid keyList references
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/v1/projects/:id/chat/runs/:runId/cancel
chats:write
Cancel run
POST
/api/v1/screenshots
screenshots
Render screenshot
MethodPathScope描述
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
列出组件
GET
/api/v1/projects/:id/components/:componentId
components:read
获取组件详情
GET
/api/v1/references
任意有效密钥列出设计参考模板
POST
/api/v1/projects/:id/chat/messages
chats:write
发送聊天消息
GET
/api/v1/projects/:id/chat/runs/:runId
chats:read
轮询任务状态
POST
/api/v1/projects/:id/chat/runs/:runId/cancel
chats:write
取消任务
POST
/api/v1/screenshots
screenshots
渲染截图

Endpoints

端点详情

Projects

项目

List projects

列出项目

http
GET /api/v1/projects?limit=50&offset=0
Authorization: Bearer $SLEEK_API_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 $SLEEK_API_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 $SLEEK_API_KEY
Content-Type: application/json

{ "name": "My New App" }
Response 
201
: same shape as a single project.
http
POST /api/v1/projects
Authorization: Bearer $SLEEK_API_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 $SLEEK_API_KEY
Both list and get accept an optional 
inlineIcons
query param (default 
false
). When omitted, icons render as 
<iconify-icon>
web components and the HTML pulls in the Iconify script, so leave it off by default. Pass 
?inlineIcons=true
only when the consumer needs self-contained SVGs in the HTML (for example, importing into tools that don't run scripts).
Response 
200
:
json
{
  "data": [
    {
      "id": "cmp_xyz",
      "name": "Hero Section",
      "activeVersion": 3,
      "versions": [
        {
          "id": "ver_001",
          "version": 1,
          "code": "<!DOCTYPE html>...</html>",
          "createdAt": "..."
        }
      ],
      "createdAt": "...",
      "updatedAt": "..."
    }
  ],
  "pagination": { "total": 5, "limit": 50, "offset": 0 }
}
http
GET /api/v1/projects/:projectId/components?limit=50&offset=0
Authorization: Bearer $SLEEK_API_KEY
列出和获取组件的接口均支持可选的
inlineIcons
查询参数（默认
false
）。省略时，图标会渲染为
<iconify-icon>
Web组件，HTML会引入Iconify脚本，因此默认保持省略状态。仅当使用者需要HTML中包含独立SVG时（例如导入到不运行脚本的工具中），才传递
?inlineIcons=true
。
响应
200
:
json
{
  "data": [
    {
      "id": "cmp_xyz",
      "name": "Hero Section",
      "activeVersion": 3,
      "versions": [
        {
          "id": "ver_001",
          "version": 1,
          "code": "<!DOCTYPE html>...</html>",
          "createdAt": "..."
        }
      ],
      "createdAt": "...",
      "updatedAt": "..."
    }
  ],
  "pagination": { "total": 5, "limit": 50, "offset": 0 }
}

Get component

获取组件详情

Fetches a single component by ID. Use this when you need the code for a specific screen (e.g., after a chat run returns a 
componentId
in its operations).
http
GET /api/v1/projects/:projectId/components/:componentId
Authorization: Bearer $SLEEK_API_KEY
Response 
200
: 
{ "data": ... }
with a single component in the same shape as a list item.
按ID获取单个组件。当你需要特定界面的代码时（例如聊天任务返回的
componentId
），使用此接口。
http
GET /api/v1/projects/:projectId/components/:componentId
Authorization: Bearer $SLEEK_API_KEY
响应
200
: 
{ "data": ... }
，单个组件格式与列表项相同。

References

设计参考模板

References are curated design styles from featured Sleek projects. They are world-readable: any valid API key can list them, no scope needed.
http
GET /api/v1/references?limit=50&offset=0
Authorization: Bearer $SLEEK_API_KEY
Response 
200
:
json
{
  "data": [
    {
      "id": "proj_ref1",
      "name": "Ember Fitness",
      "previewImageUrls": ["https://.../screenshot.png"]
    }
  ],
  "pagination": { "total": 44, "limit": 50, "offset": 0 }
}
To use one, pass its 
id
as 
referenceId
on Send Message.
参考模板是精选的Sleek项目设计风格，支持全局读取：任意有效API密钥均可列出，无需特定权限。
http
GET /api/v1/references?limit=50&offset=0
Authorization: Bearer $SLEEK_API_KEY
响应
200
:
json
{
  "data": [
    {
      "id": "proj_ref1",
      "name": "Ember Fitness",
      "previewImageUrls": ["https://.../screenshot.png"]
    }
  ],
  "pagination": { "total": 44, "limit": 50, "offset": 0 }
}
要使用模板，请在发送消息时将其
id
作为
referenceId
传递。

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 $SLEEK_API_KEY
Content-Type: application/json
idempotency-key: <optional, max 255 chars>

{
  "message": { "text": "Add a pricing section with three tiers" },
  "source": "claude-code",
  "imageUrls": ["https://example.com/ref.png"],
  "target": { "screenId": "scr_abc" },
  "referenceId": "proj_ref1"
}
FieldRequiredNotes
message.text
Yes1+ chars, trimmed
source
Treat as requiredSlug of the tool sending the request (see step 2 of Designing)
imageUrls
NoHTTPS URLs only; included as visual context
target.screenId
NoEdit a specific screen using its 
screenId
(not 
componentId
); omit to let AI decide
referenceId
NoSeed the design style from a reference (see References); invalid id → 
400
?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 $SLEEK_API_KEY
Content-Type: application/json
idempotency-key: <可选，最多255个字符>

{
  "message": { "text": "添加包含三个层级的定价板块" },
  "source": "claude-code",
  "imageUrls": ["https://example.com/ref.png"],
  "target": { "screenId": "scr_abc" },
  "referenceId": "proj_ref1"
}
字段是否必填说明
message.text
是至少1个字符，会自动去除首尾空格
source
视为必填发起请求的工具的slug（查看设计流程步骤2）
imageUrls
否仅支持HTTPS URL；作为视觉上下文传递
target.screenId
否使用
screenId
编辑特定界面（而非
componentId
）；省略则由AI决定修改哪个界面
referenceId
否使用参考模板初始化设计风格（查看设计参考模板）；无效ID会返回
400
错误
?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",
          "componentId": "cmp_xyz"
        },
        {
          "type": "screen_updated",
          "screenId": "scr_abc",
          "componentId": "cmp_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",
          "componentId": "cmp_xyz"
        },
        {
          "type": "screen_updated",
          "screenId": "scr_abc",
          "componentId": "cmp_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 $SLEEK_API_KEY
The response has the same 
data
shape as send message: 
result
is present when 
completed
, 
error
when 
failed
:
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 $SLEEK_API_KEY
响应格式与发送消息相同：任务
completed
时
result
字段存在，
failed
时
error
字段存在：
json
{
  "data": {
    "runId": "run_111",
    "status": "failed",
    "statusUrl": "...",
    "error": { "code": "execution_failed", "message": "..." }
  }
}
任务状态生命周期：
queued
→ 
running
→ 
completed | failed

Chat: Cancel Run

聊天：取消任务

http
POST /api/v1/projects/:projectId/chat/runs/:runId/cancel
Authorization: Bearer $SLEEK_API_KEY
Marks a 
queued
or 
running
run as 
failed
with error code 
cancelled
and returns the updated run; already-finished runs are returned unchanged. Use it when the user changes their mind mid-run or a stale run is blocking the project with 
409 CONFLICT
.
http
POST /api/v1/projects/:projectId/chat/runs/:runId/cancel
Authorization: Bearer $SLEEK_API_KEY
将
queued
或
running
状态的任务标记为
failed
，错误码为
cancelled
，并返回更新后的任务；已完成的任务返回原始状态。当用户在任务执行过程中改变主意，或过时的任务通过
409 CONFLICT
阻塞项目时，使用此接口。

Screenshots

截图

Takes a snapshot of one or more rendered components.
http
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"
}
FieldDefaultNotes
format
png
png
or 
webp
scale
2
1–3 (device pixel ratio)
gap
40
Pixels between components
padding
40
Uniform padding on all sides
paddingX
(optional)Horizontal padding; overrides 
padding
for left/right when provided
paddingY
(optional)Vertical padding; overrides 
padding
for top/bottom when provided
paddingTop
(optional)Top padding; overrides 
paddingY
when provided
paddingRight
(optional)Right padding; overrides 
paddingX
when provided
paddingBottom
(optional)Bottom padding; overrides 
paddingY
when provided
paddingLeft
(optional)Left padding; overrides 
paddingX
when provided
background
transparent
Any CSS color (hex, named, 
transparent
)
showDots
false
Overlay a subtle dot grid on the background
radius
48
Squircle corner radius per component in pixels (integer ≥ 0); pass 
0
for sharp corners
componentVersionOverrides
(optional)Map of 
componentId
→ 
versions[i].id
to render at a pinned version instead of 
activeVersion
(see Pinned versions)
themeVersionOverrides
(optional)Map of 
themeId
→ 
versions[i].id
to render with a pinned theme version (see Pinned versions)
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"
.
Response: raw binary 
image/png
or 
image/webp
with 
Content-Disposition: attachment
.
生成一个或多个渲染后组件的快照。
http
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"
}
字段默认值说明
format
png
支持
png
或
webp
scale
2
1–3（设备像素比）
gap
40
组件之间的像素间距
padding
40
所有边的统一内边距
paddingX
(可选)水平内边距；提供时会覆盖左右方向的
padding
值
paddingY
(可选)垂直内边距；提供时会覆盖上下方向的
padding
值
paddingTop
(可选)顶部内边距；提供时会覆盖
paddingY
值
paddingRight
(可选)右侧内边距；提供时会覆盖
paddingX
值
paddingBottom
(可选)底部内边距；提供时会覆盖
paddingY
值
paddingLeft
(可选)左侧内边距；提供时会覆盖
paddingX
值
background
transparent
支持任意CSS颜色（十六进制、命名色、
transparent
）
showDots
false
在背景上叠加细微的点阵图案
radius
48
每个组件的圆角半径（单位为像素，整数≥0）；传递
0
表示直角
componentVersionOverrides
(可选)
componentId
→ 
versions[i].id
的映射，用于渲染固定版本而非
activeVersion
（查看固定版本）
themeVersionOverrides
(可选)
themeId
→ 
versions[i].id
的映射，用于使用固定主题版本渲染（查看固定版本）
内边距优先级：单边 → 轴向 → 统一。例如
{ "padding": 20, "paddingX": 10, "paddingLeft": 5 }
表示上下内边距20px，右侧10px，左侧5px。
当
showDots
为
true
时，会在背景色上绘制点阵图案。点阵会自动适配背景：深色背景显示浅色点阵，浅色背景显示深色点阵。当
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
429
TOO_MANY_REQUESTS
Too many requests; back off and retry later
500
INTERNAL_SERVER_ERROR
Server error
401
, 
403
, and 
429
bodies may include 
data.url
: a page where the user can fix the condition (create a key, upgrade the plan). When present, share that URL with the user instead of improvising one.
Chat run-level errors (inside 
data.error
):
CodeMeaning
out_of_credits
Organization has no credits left
execution_failed
AI execution error
cancelled
Run cancelled via the cancel endpoint
An 
out_of_credits
error includes 
error.url
, the page where the user can top up credits. Relay it to the user; don't retry the run until they have.
json
{ "code": "UNAUTHORIZED", "message": "..." }
HTTP状态码错误代码触发场景
401
UNAUTHORIZED
API密钥缺失/无效/过期
403
FORBIDDEN
API密钥有效，但权限范围或套餐不符合要求
404
NOT_FOUND
资源不存在
400
BAD_REQUEST
验证失败
409
CONFLICT
项目已有活跃任务
429
TOO_MANY_REQUESTS
请求过于频繁；请稍后重试
500
INTERNAL_SERVER_ERROR
服务器错误
401
、
403
和
429
的响应体可能包含
data.url
：用户可修复问题的页面（创建密钥、升级套餐）。如果存在此字段，请将该URL分享给用户，而非自行提供其他链接。
聊天任务级错误（位于
data.error
内）：
错误代码含义
out_of_credits
组织的AI额度已用尽
execution_failed
AI执行错误
cancelled
任务已通过取消端点取消
out_of_credits
错误会包含
error.url
，即用户可充值额度的页面。请将该URL告知用户；在用户充值前不要重试任务。

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
Omitting 
source
on chat messages		Always send 
source
so the run is attributed in the Sleek editor
Using 
wait=true
on long generations		It blocks 300s max; have a fallback to polling for 
202
response
Assuming 
result
is present on 
202
result
is absent until status is 
completed
Using 
screenId
as 
componentIds
in screenshots
screenId
and 
componentId
are different; always use 
componentId
from operations for screenshots
Confusing 
versions[i].version
(number) with 
versions[i].id
(string)		When resolving pinned versions, match by 
id
(e.g. 
ver_001
); 
version
is the numeric index
错误行为修复方案
发送聊天消息时省略
source
参数		始终发送
source
参数，以便Sleek编辑器正确归属任务来源
长时间生成任务时使用
wait=true
该模式最长阻塞300秒；收到
202
响应时请回退到轮询模式
假设
202
响应中存在
result
字段
result
字段仅在任务状态为
completed
时存在
在截图中使用
screenId
作为
componentIds
screenId
和
componentId
是不同的；截图务必使用操作返回的
componentId
混淆
versions[i].version
（数字）和
versions[i].id
（字符串）		解析固定版本时，请匹配
id
（例如
ver_001
）；
version
是数字索引