SuperAPI AI 工具集

sleek-design-mobile-apps

设计与创作

查看项目

更新于 10-16 04:39

技能介绍

用途

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,可使用设备流程,让用户无需接触原始密钥:

  1. POST https://sleek.design/api/v1/device/start(无需鉴权),请求体 {"source": "your-tool-slug"}。响应包含 verificationUrl、可供人工核对的 userCode、秘密的 deviceCode,以及以秒为单位的轮询间隔。
  2. 向用户展示 verificationUrl 与 userCode,并告知其在批准前确认代码匹配。
  3. 每隔 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,本资料未展开其内容。