design-mobile-apps

1实现原理 · 为什么它能做到

功能靠调用第三方 SaaS（Sleek）REST API 实现：agent 作为 Sleek 的 API 客户端，用 `POST /api/v1/projects/:id/chat/messages` 把用户意图发给 Sleek 服务端，由 Sleek 的 AI 生成屏幕，agent 负责取回结果与截图展示——技能本体不含任何设计/渲染代码。

skills/design-mobile-apps/SKILL.md

[sleek.design](https://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.

注：SKILL.md 是完整的 API 使用手册：端点、鉴权、轮询、错误码、截图参数全量内嵌（564 行单文件），模型照手册驱动 Sleek 服务。

鉴权=环境变量 Bearer token：每个请求带 `Authorization: Bearer $SLEEK_API_KEY`；frontmatter 声明 requires-env。

skills/design-mobile-apps/SKILL.md

**Auth**: `Authorization: Bearer $SLEEK_API_KEY` on every `/api/v1/*` request

注：compatibility 字段写明 'Requires SLEEK_API_KEY environment variable. Network access limited to https://sleek.design only.'——凭证由宿主环境提供。

无 key 时走 OAuth 式 device flow：POST /device/start 拿 verificationUrl+userCode+deviceCode，用户到浏览器确认后轮询 /device/poll 换取 key 并写入 SLEEK_API_KEY。

skills/design-mobile-apps/SKILL.md

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`.

注：这里在做什么：把密钥获取从『用户复制粘贴 key』改成用户可核对的浏览器确认流；返回的 sk_ 密钥要模型写进环境变量，供后续请求使用。

设计工作流=项目→聊天消息→轮询 run→截图闭环：单条完整意图发 chat，Sleek 自行规划屏幕与版式，agent 轮询 runId 直到 completed 再截图给用户看。

skills/design-mobile-apps/SKILL.md

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.

注：明确禁止 agent 自行拆屏/加戏：意图整段直传，让 Sleek 端规划——职责边界是『agent 传递需求、Sleek 生成设计』。

异步纪律：chat 默认异步（202 + runId），轮询 2s→5s 退避、5 分钟上限；`?wait=true` 阻塞至 300s；单项目单 run（409 冲突处理）、idempotency-key 幂等重试。

skills/design-mobile-apps/SKILL.md

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.

注：轮询协议被写成可执行参数（间隔/退避/上限/超时语义），还给出反模式（'if you can't read the status, stop and report it'），防模型空转。

结果验证闭环：run 产生 screen_created/updated 必须 POST /api/v1/screenshots 截图给用户，且不允许静默完成；自查时用 fullHeight 重拍整页。

skills/design-mobile-apps/SKILL.md

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.

注：'never complete a run silently' 是验收硬规则；viewport 截图只给用户看，模型自查须 fullHeight 重拍，防误判内容缺失。

落地实现路径：取 component HTML（activeVersion 或 pin 版本）→ 存 .html；React Native/SwiftUI 则 HTML+截图双源参照，图标经 Iconify API、字体取 HTML link 标签。

skills/design-mobile-apps/SKILL.md

The component `code` is a complete HTML document. Save it directly to a `.html` file. No build step needed.

注：实现部分让 agent 把 Sleek 生成的 HTML 直接写成本地文件；原生框架另有 pinned versions（componentVersionOverrides/themeVersionOverrides）与 Iconify/字体保真细则。

自有安全章程：单主机、仅 HTTPS、密钥只走 Authorization 头、最小 scope key。

skills/design-mobile-apps/SKILL.md

**Single host**: All requests go exclusively to `https://sleek.design`. No data is sent to third parties.

注：Security & Privacy 一节给出边界声明；另提示 imageUrls 会被 Sleek 服务器抓取，避免传敏感 URL——把『服务端会 fetch 外部图』写清楚。

2核心能力

01Sleek 项目全生命周期管理（list/create/get/delete）

02自然语言生成/修改移动端屏幕（chat messages 全意图直传）

03风格方向撰写与参考样式种子（referenceId / style direction 二选一）

04异步 run 轮询/取消/幂等重试/并发约束（2s→5s→5min、409、idempotency-key）

05截图验证闭环（用户可见截图 + fullHeight 自查 + 并行请求 + 透明底）

06取 component HTML 落地实现（含 pinned versions 精确还原）

07图标/字体保真迁移（Iconify API 取 SVG、Google Fonts 字体提取、react-native-svg 渲染）

08device flow 无感取 key + 错误码→用户行动指引（401/403/429 给修复页 URL、out_of_credits 转达充值页）

3外部依赖

类型	依赖
api	Sleek REST API (sleek.design)
api	Sleek OpenAPI spec
api	Iconify API（仅实现原生图标时）
cli	curl
package	react-native-svg（SvgXml，仅 RN 实现路径）

4风险提醒风险提醒：橙色 · 评估后使用

风险提醒：橙色 · 评估后使用

需读取用户凭证级环境变量并外发第三方 SaaS — SLEEK_API_KEY 每请求作为 Bearer 发送到 sleek.design；device flow 会把换到的 key 写回环境变量。密钥泄露面在宿主环境与 Sleek 服务端两处，建议最小 scope + 可吊销 key（skill 自己也这样建议）。
服务端生成产物直接落盘 — Sleek 返回的 component HTML 被指示直接写为本地 .html 文件——若 Sleek 输出含恶意内容（服务端被攻破/注入），产物进入用户工程。无消毒环节，依赖对服务端的信任。
实现路径存在第二外发点 — 取图标时请求 api.iconify.design（按 HTML 中的图标名拼接 URL）；虽然 host 白名单 frontmatter 只写 sleek.design，实际 iconify 调用为文档明示，属预期但需知情。
依赖商业 SaaS 的可用性与定价 — 功能完全由 sleek.design 提供：免费额度约一次设计、持续使用需 Pro（$49.99/月或 $30/月年付）；服务端故障/停服/限流直接使 skill 失效，且有升级/充值引导交互面。
文档与仓库现状滞后 — 安装命令与 hero 图指向已不存在的旧仓库名 sleekdotdesign/agent-skills，用户按 README 操作可能装到旧版/失败。

风险提醒：橙色，评估后使用。实际接触面：读取凭证级环境变量 SLEEK_API_KEY 并作为 Bearer 外发到第三方 SaaS（sleek.design），另有 device flow 换 key 写环境变量；对外网络调用对象可预期（官方 API + 实现路径的 Iconify），密钥只走 Authorization 头且自带最小 scope 指引与 HTTPS-only 声明，无隐蔽外发；会把服务端生成的 HTML 落到本地工程文件。按统一分档：接触凭证即橙色（无论是否外发），理由写入：SLEEK_API_KEY 读取 + 第三方 API 依赖 + 服务端产物落盘，建议仅在受信宿主/最小 scope key 下使用。

5第二遍独立确认

[ok] 鉴权与凭证读取 — '**Auth**: `Authorization: Bearer $SLEEK_API_KEY` on every `/api/v1/*` request' 原文在；frontmatter requires-env: SLEEK_API_KEY。无其他凭证访问。
[ok] device flow 换 key — device/start（无鉴权拿 verificationUrl/userCode/deviceCode）+ device/poll 轮询换 sk_ key 并 'store it as SLEEK_API_KEY' 的原文完整存在。
[ok] 网络外发 host 清单 — 正则扫描全部 URL host 仅 sleek.design（功能主体）与 api.iconify.design（图标实现）；example.com 是 imageUrls 文档占位；'Single host… No data is sent to third parties' 与实现路径的 iconify 调用并存——严格说 iconify 为第二外发点，但系文档明示的实现步骤，非隐蔽行为。
[ok] 本地文件写入 — 'Save screenshots in the project directory'、'Save it directly to a `.html` file'、'curl -o run.json'、SVG 存静态资源四处写入指令均有原文。
[ok] 无脚本内置 — skill 目录仅 SKILL.md 一个文件，仓库无 scripts/；curl/写文件全部由宿主按指示执行，无自带可执行代码。
[ok] 端点表与正文一致性 — Quick Reference 11 个端点（projects/components/references/chat runs/cancel/screenshots）与正文 HTTP 示例逐一对应，参数表含 required/默认值/级联（padding）语义。
[ok] 异步轮询纪律 — 'Start at 2s interval, back off to 5s after 10s, give up after 5 minutes' 与 '?wait=true'（300s 上限、202 超时转轮询）原文在，非编造。
[ok] 截图验收闭环 — 'never complete a run silently' + fullHeight 自查（'re-shoot the screen with `fullHeight: true`'）+ 并行截图建议原文均在。

6结论

文档即实现：564 行单文件覆盖全部端点/参数/错误码/边界情况，模型照抄即可稳定驱动 Sleek，无运行时歧义。

工作流纪律防呆：不拆屏直传、异步轮询带退避与上限、409/idempotency 处理、不静默完成。

验收闭环设计好：必须给用户看到每屏截图才算完成，自查用 fullHeight 防误判。

安全边界自觉：单主机/HTTPS-only/最小 scope/Bearer-only，并提示 imageUrls 会被服务端抓取。

原生实现路径完整：pinned versions、Iconify SVG、Google Fonts、react-native-svg 迁移细则齐全。

适合：适合拥有 Sleek 账号/API key、想用 AI agent 批量生成与迭代移动端 UI 屏幕的设计师与开发者；适合需要在代码中实现 Sleek 设计（HTML 原型、React Native、SwiftUI）并保真图标字体的工程场景；适合愿意接受『设计能力在云端 SaaS』这一架构的用户。

不适合：不适合无 Sleek 账号/不愿把设计工作交给云端付费 SaaS 的用户；不适合要求设计数据完全本地、零外发、零凭证的环境；不适合图标/字体保真无要求的纯静态展示场景（可用截图即可）；不适合网络受限（仅允许白名单之外的请求被禁）的宿主环境——注意 frontmatter allowed-hosts 只列 sleek.design，但实现图标时需访问 api.iconify.design。

安装 agent 直装可复制

① 本站镜像更新 2026-09-09

方式 A · 人下载镜像包下载 design-mobile-apps.tar.gz

sha256: 215af338726abdb5…

方式 B · JSON 格式安装指南，复制给 agent

安装指南

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② 上游 GitHub · 原始来源

能访问 GitHub？直接去上游安装（实时版，可能已更新）GitHub 原始 ↗

本页镜像锁定 commit 2aaa24df05；上游为实时仓库。

来源信息 GitHub 原始

作者 / 仓库designed-by-ai / designed-by-ai/skills

原始 GitHubdesigned-by-ai/skills ↗

Stars6

最近推送2026-09-09

本 skill commit2aaa24df05

本站信息

收录日期2026-09-06

分类设计

侦查报告2026-09-06 · 2 遍

本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。

1实现原理 · 为什么它能做到

2核心能力

3外部依赖

4风险提醒 风险提醒：橙色 · 评估后使用

5第二遍独立确认

6结论

4风险提醒风险提醒：橙色 · 评估后使用