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 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.
sleek.design 是一款AI驱动的移动应用设计工具。你可以通过 
/api/v1/*
路径的REST API与之交互，创建项目、用自然语言描述你想要构建的内容，并获取渲染好的界面。所有通信均采用标准HTTP协议，使用Bearer令牌进行身份验证。
基础URL：
https://sleek.design
身份验证：所有 
/api/v1/*
请求需携带 
Authorization: Bearer $SLEEK_API_KEY
内容类型：
application/json
（请求和响应均使用） 跨域资源共享（CORS）：所有 
/api/v1/*
端点均已启用CORS 响应解析：将响应体写入文件（如 
curl -o run.json
）后再解析。不要通过 
echo
管道传输JSON：在zsh中，它会将字符串值中转义的 
\n
展开为实际换行符，导致响应体成为无效JSON。 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美元；包含每月20,000个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 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.
使用 
POST /api/v1/projects/:id/chat/messages
发送请求。Sleek会根据你的消息规划界面内容和布局，若未指定视觉风格，它会自动生成。无需将请求拆分为多个界面，也无需添加用户未提及的产品细节；将完整需求作为单条消息发送。若用户描述了特定界面，需将其包含在内。给予Sleek足够的规划空间，它会生成更丰富的设计。
制定风格方向：只要用户提供了任何可作为依据的内容——参考图片、他们喜欢的应用、氛围形容词、需要避免的元素——或者在生成变体时，每个变体对应一个风格方向，就需要撰写风格方向。仅当用户请求非常简洁时，才直接传递原始请求。风格方向是一段综合性的段落，包含在消息中，涵盖氛围（2-3个形容词）、色彩策略（逻辑而非十六进制代码）、排版风格、布局理念、组件样式（圆角、边框与阴影、导航处理）、图像和插画风格，以及一两个独特细节。要明确调色板、排版方向和整体风格——仅设定氛围的内容会被视为提示，而非明确方向。要有主见，不要含糊。将个性体现在色彩、排版和图像中，而非不寻常的布局或导航。
拓展用户提供的内容，切勿与之矛盾。当用户指向参考图片或他们喜欢的应用时，仔细研究每个参考，并将其中可取之处融入风格方向——Sleek仅能识别通过 
imageUrls
传递的图片，因此对于本地参考，风格方向是让Sleek了解这些参考的方式。借鉴模式，但不要抄袭来源的品牌、内容或名称。
使用风格方向或 
referenceId
，不可同时使用——参考本身已包含完整的样式指南。
使用参考种子风格：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分钟后停止轮询。当状态为 
completed
或 
failed
时停止；若无法读取状态，应停止并报告，而非视为"尚未完成"。你也可以使用 
?wait=true
进行阻塞调用（最长300秒；若超时返回 
202
，则 fallback 到轮询方式）。
编辑特定界面：使用 
target.screenId
将更改定向到正确的界面（使用操作返回的屏幕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.
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.
Screenshot requests are independent, so issue them in parallel — the user-facing shot and your 
fullHeight
review shot go out together, as do the shots for different screens. "One screen per request" governs what goes into each image, not how fast you send them; it is not a reason to wait for one response before starting the next. Back off only if you actually get a 
429
.
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.
每次聊天任务生成 
screen_created
或 
screen_updated
操作后，务必使用 
POST /api/v1/screenshots
截取截图并展示给用户。只有当用户看到任务创建或更新的所有界面的截图后，该步骤才算完成；切勿静默完成任务。
  • 新界面：每个界面一张截图 + 项目中所有界面的组合截图。
  • 更新的界面：每个受影响的界面一张截图。
除非用户明确要求特定背景色，否则使用 
background: "transparent"
。
将截图保存到项目目录（而非临时文件夹），方便用户查看。
展示与审核的区别：默认截图仅捕获视口，这对用户来说是合适的——界面看起来像手机屏幕。但这对你审核工作来说并不合适，因为折叠下方的内容会被裁剪。当你审核任务生成的内容时，需使用 
fullHeight: true
重新截取屏幕截图（每个请求对应一个界面），以查看整个可滚动页面。
截图请求是独立的，因此可并行发送——面向用户的截图和你的 
fullHeight
审核截图可同时发送，不同界面的截图也可同时发送。"每个请求对应一个界面"指的是每张图片包含的内容，而非发送请求的速度；这不是等待一个响应后再发送下一个请求的理由。仅当收到 
429
响应时才需要退避。
切勿根据视口截图判断界面不完整。看起来缺失的内容几乎总是在折叠下方。在告知用户某些内容缺失，或发送后续消息要求Sleek添加内容之前，需通过完整界面确认：使用 
fullHeight: true
截图，或通过 
GET /api/v1/projects/:id/components/:componentId
获取组件HTML，这是界面内容的真实依据。默认截图即可回答大多数审核问题——无需通过代码再次检查截图已展示的内容。仅当你要断言某些内容缺失时才需要查看代码：渲染结果可能会遗漏实际存在的内容（超过高度限制、在折叠区域、在轮播图的后续幻灯片中），因此负面结论需要第二个来源验证。同时注意反向情况——HTML中存在的元素可能对用户不可见。

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
方法路径权限范围描述
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项目的 curated 设计风格。它们是全局可读的：任何有效的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: <optional, max 255 chars>

{
  "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
响应结构与发送消息的 
data
部分相同：任务完成时包含 
result
，失败时包含 
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
fullHeight
false
Capture the entire scrollable screen instead of just the viewport (see below)
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.
By default a component is captured at frame height, so anything the user would reach by scrolling is cut off. 
fullHeight: true
expands each frame to the height of its own content before capturing. Use it when you're reviewing your own work; leave it off for the screenshots you show the user, where the phone-shaped framing is the point.
Frames are capped at 4× the default frame height, so a screen longer than that is still cut off at the bottom even with 
fullHeight: true
. On a very long screen, treat the component HTML as the authority for what's below the cap. Expanded frames make for tall images; prefer one component per request so each screen keeps its detail — and send those requests in parallel rather than one after another.
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
在背景上覆盖一层细微的点阵图案
fullHeight
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。
默认情况下，组件会按框架高度捕获，因此用户需要滚动才能看到的内容会被裁剪。
fullHeight: true
会在捕获前将每个框架扩展到其内容的完整高度。审核自己的工作时使用该选项；向用户展示截图时关闭该选项，此时手机形状的框架是重点。
框架高度上限为默认框架高度的4倍，因此即使设置了 
fullHeight: true
，过长的屏幕仍会在底部被裁剪。对于非常长的屏幕，以组件HTML作为下方内容的权威依据。扩展后的框架会生成高分辨率图片；每个请求优先对应一个组件，这样每个屏幕都能保持细节——并且并行发送这些请求，而非依次发送。
当 
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
密钥有效，但权限范围或套餐不符合要求
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
Piping a JSON response through 
echo
to parse it		zsh expands the 
\n
in 
assistantText
and breaks the JSON; parse from a file instead
Treating an unreadable run status as "not done yet"The loop then spins to its cap long after the run finished; stop and report instead
Calling a screen incomplete based on a viewport screenshotThe content is usually below the fold; re-shoot with 
fullHeight: true
or check the component HTML before reporting anything missing
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
响应设置轮询的fallback方案
假设 
202
响应中包含 
result
result
仅在状态为 
completed
时存在
通过 
echo
管道传输JSON响应进行解析		zsh会展开 
assistantText
中的 
\n
并破坏JSON；改为从文件解析
将无法读取的任务状态视为"尚未完成"此时任务可能早已完成，循环会一直运行到上限；应停止并报告
根据视口截图判断界面不完整内容通常在折叠下方；使用 
fullHeight: true
重新截图或检查组件HTML后，再报告任何缺失内容
在截图请求中使用 
screenId
作为 
componentIds
screenId
和 
componentId
是不同的；截图始终使用操作返回的 
componentId
混淆 
versions[i].version
（数字）和 
versions[i].id
（字符串）		解析固定版本时，按 
id
（例如 
ver_001
）匹配；
version
是数字索引