用途
sleek-design-mobile-apps 是一个面向智能体的技能,用于借助 Sleek(sleek.design)设计移动应用界面、编辑 Sleek 项目,并把设计实现为 React Native 或 HTML。它通过 sleek.design 提供的 REST API 完成项目创建、按需求描述生成界面设计,以及获取设计的 HTML 与渲染图。
主要能力
API 基址为 https://sleek.design,路径前缀 /api/v1/。鉴权使用 Authorization: Bearer $SLEEK_API_KEY,公开的设备启动/轮询端点除外。JSON 请求体需发送 Content-Type: application/json。所有 /api/v1/ 端点均启用 CORS。
响应采用信封结构:先检查 HTTP 状态码;成功的 JSON 将负载包在 data 中,列表还带有同级的 pagination;错误使用顶层 code、status 和 message,并可选带 data.url。成功的截图与分享卡片返回图片字节;204 无响应体。
ID 为不透明的 11 字符令牌(如 V1StGXR8Z5j),无类型前缀,无法从 ID 本身判断其指向项目、界面、组件、版本还是主题,需按响应字段追踪。
解析响应时建议将响应体写入文件(如 curl -o run.json)再解析;用 echo 管道传递 JSON 会破坏它:zsh 会把字符串值中转义的 \n 展开为真实换行,导致响应体不再是合法 JSON。
API 文档:OpenAPI 规范位于 https://sleek.design/api/v1/spec.json,可浏览文档位于 https://sleek.design/api/v1/docs。未覆盖的契约细节可查阅该规范。
使用方式
一次运行可以同时包含两个方向——例如“设计一个健身应用并用 Expo 构建它”就是先设计后实现。应根据当前手头的产物来判断指针,而非一次性解读请求:
- 设计:即将向 Sleek 发送聊天消息时,先阅读 designing.md,其中包含 create → chat → screenshot 循环、如何撰写风格方向,以及何时从参考图播种风格。
- 实现:在根据 Sleek 设计编写代码前,阅读 implementing.md,了解版本选择、原生转换、可用功能与验收检查。
截图有两种取景,各文件会按名称请求其一:
- 用户截图(user shot):默认渲染,视口高度、手机形状,用于展示给用户。
- 评审截图(review shot):添加
fullHeight: true,每次请求一个组件,用于对照评判自己的工作。
前置条件:API Key
若未设置 SLEEK_API_KEY,可使用设备流程,让用户无需接触原始密钥:
- POST https://sleek.design/api/v1/device/start(无需鉴权),请求体
{"source": "your-tool-slug"}。响应包含 verificationUrl、可供人工核对的 userCode、秘密的 deviceCode,以及以秒为单位的轮询间隔。 - 向用户展示 verificationUrl 与 userCode,并告知其在批准前确认代码匹配。
- 每隔 interval 秒轮询 POST https://sleek.design/api/v1/device/poll,请求体
{"deviceCode": "..."}。pending 时继续等待;approved 时在首次读取时把 data.key 私密存储为 SLEEK_API_KEY(密钥仅交付一次);expired 或 404 NOT_FOUND 时重新开始流程。
备选方案:将用户引导至 https://sleek.design/agents/setup,该页面可一站式处理登录、方案升级与密钥创建,并请用户把密钥粘贴回来。密钥也可在 https://sleek.design/dashboard/api-keys 管理。完整密钥值仅在创建时显示一次,免费账户同时只能持有一个有效密钥。
方案:免费账户可用一次性试用额度尝试 API(约一次设计运行),让新用户在任何付费决定前看到首个设计。持续使用需要 Pro 或更高方案。价格、计费周期与额度以 https://sleek.design/agents.md 为准(该文件由 Sleek 实时定价生成)。当成本变得相关时(用户询问、需要升级才能继续,或即将引导用户前往支付页面),应如实说明定价,包括年度选项,让用户提前知晓付费步骤。
端点速查
| 方法 | 路径 | 作用域 |
|---|---|---|
| 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 |
| POST | /api/v1/share-cards | screenshots |
| POST | /api/v1/device/start | 公开,无需鉴权 |
| POST | /api/v1/device/poll | 公开,无需鉴权 |
创建密钥时应只授予任务所需的作用域。每个端点的完整规格(请求体、响应结构、字段默认值、状态码)见 endpoints.md。
错误结构
{
"defined": true,
"code": "FORBIDDEN",
"status": 403,
"message": "...",
"data": { "url": "https://sleek.design/..." }
}
| HTTP | 代码 | 何时出现 |
|---|---|---|
| 401 | UNAUTHORIZED | API 密钥缺失/无效/过期 |
| 403 | FORBIDDEN | 密钥有效但作用域或方案不符 |
| 404 | NOT_FOUND | 资源不存在 |
| 400 | BAD_REQUEST | 校验失败 |
| 409 | CONFLICT | 该项目已有另一个运行处于活动状态 |
| 429 | TOO_MANY_REQUESTS | 渲染上限:每组织每小时 1000 次截图 + 分享卡片,仅统计 API 密钥请求 |
| 500 | INTERNAL_SERVER_ERROR | 服务器错误 |
401、403 和 429 的响应体可能包含 data.url:一个用户可修复该状况的页面(创建密钥、升级方案),应原样分享。
聊天运行级错误(位于 data.error 内):
| 代码 | 含义 |
|---|---|
| out_of_credits | 组织已无剩余额度 |
| execution_failed | AI 执行错误 |
| cancelled | 运行已通过取消端点取消 |
| request_message_persist_failed | 运行在到达 AI 前失败;消息从未被存储 |
对于 out_of_credits,应转达 error.url 并等待用户解决。在任一可恢复失败后,按安全重试原则决定是重放还是发起新尝试。
适用场景
- 需要为移动应用快速生成界面设计稿,并获取 HTML 与渲染图。
- 需要编辑已有的 Sleek 项目。
- 需要把 Sleek 设计落地为 React Native 或 HTML 实现。
- 需要以用户截图展示成果、以评审截图自查质量。
限制
- 免费账户仅提供一次性试用额度(约一次设计运行),持续使用需 Pro 或更高方案。
- 渲染上限为每组织每小时 1000 次截图 + 分享卡片,且仅统计 API 密钥请求。
- 同一项目同时只能有一个活动运行(否则返回 409)。
- 完整 API 密钥值仅在创建时显示一次,免费账户同时只能持有一个有效密钥。
- 具体价格、计费周期与额度未在本资料中给出,需查阅 https://sleek.design/agents.md。
- 关于设计流程与实现细节的完整说明分别见 designing.md 与 implementing.md,本资料未展开其内容。