Home / All Skills / Design & Motion / design-mobile-apps
English (EN)简体中文 (ZH)日本語 (JA)
Design & Motion · designed-by-ai/skills

design-mobile-apps

Use when the user wants to design a mobile app or UI screens, when they mention their Sleek (sleek.design) projects, or when implementing Sleek designs in code (HTML, React Native, SwiftUI).

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Author designed-by-aiGitHub designed-by-ai/skills ↗Stars 6License MIT（仓库 LICENSE 文件，Copyright (c) 2026 Sleek）Commit 2aaa24df05
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Functionality is realized by calling a third-party SaaS (Sleek) REST API: The agent acts as Sleek's API client, sending user intent to the Sleek server via `POST /api/v1/projects/:id/chat/messages`. Sleek's AI generates the screens, while the agent retrieves results and presents screenshots—the skill itself contains no design or rendering code.

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 serves as a complete API manual: Endpoints, authentication, polling, error codes, and screenshot parameters are fully embedded in a single 564-line file, allowing the model to drive the Sleek service directly by following the documentation.

Authentication uses an environment variable Bearer token: Every request includes `Authorization: Bearer $SLEEK_API_KEY`, and frontmatter declares requires-env.

skills/design-mobile-apps/SKILL.md
**Auth**: `Authorization: Bearer $SLEEK_API_KEY` on every `/api/v1/*` request
The compatibility field specifies 'Requires SLEEK_API_KEY environment variable. Network access limited to https://sleek.design only.'—credentials are supplied by the host environment.

When no key is available, an OAuth-like device flow is used: Calls POST /device/start to obtain verificationUrl + userCode + deviceCode; after the user confirms in the browser, it polls /device/poll to retrieve the key and writes it to 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`.
What happens here: Key acquisition changes from 'user manually copies and pastes a key' to a user-verifiable browser confirmation flow; the model writes the returned sk_ key into environment variables for subsequent requests.

Design workflow = project → chat message → polling run → screenshot closed loop: The entire user intent is sent via chat in a single payload, Sleek plans screens and layout automatically, and the agent polls runId until completed before capturing and displaying screenshots to the user.

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.
Explicitly prohibits the agent from splitting screens or over-interpreting intent: Transmit the intent as a whole to let Sleek plan—the boundary of responsibility is 'agent relays requirements, Sleek generates designs'.

Asynchronous discipline: Chat defaults to async (202 + runId), polling uses a 2s → 5s backoff with a 5-minute cap; `?wait=true` blocks up to 300s; single project single run constraint (409 conflict handling), and idempotency-key for idempotent retries.

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.
The polling protocol is defined with executable parameters (intervals, backoff, limits, timeout semantics) along with anti-patterns ('if you can't read the status, stop and report it') to prevent infinite model spinning.

Result verification closed loop: When a run produces screen_created/updated, it must call POST /api/v1/screenshots to present screenshots to the user; silent completion is prohibited. During self-checks, fullHeight is used to reshoot the entire page.

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' is a strict acceptance rule; viewport screenshots are shown to the user, while model self-inspection requires fullHeight reshooting to prevent falsely identifying missing content.

Code implementation path: Fetch component HTML (activeVersion or pinned version) → save as .html; for React Native/SwiftUI, use both HTML and screenshots as references, retrieve icons via Iconify API, and extract fonts from HTML link tags.

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.
The implementation step directs the agent to write Sleek-generated HTML straight to local files; native frameworks feature pinned versions (componentVersionOverrides/themeVersionOverrides) and fidelity rules for Iconify and fonts.

Built-in security policy: Single host, HTTPS only, keys passed exclusively via Authorization header, and minimum scope keys.

skills/design-mobile-apps/SKILL.md
**Single host**: All requests go exclusively to `https://sleek.design`. No data is sent to third parties.
The Security & Privacy section establishes clear boundary declarations; it also warns that imageUrls will be fetched by the Sleek server, advising against passing sensitive URLs—explicitly noting that 'the server fetches external images'.

2Core Capabilities

01Full lifecycle management of Sleek projects (list/create/get/delete)
02Natural language generation/modification of mobile screens (direct transfer of full-intent chat messages)
03Style direction drafting and reference style seeds (either referenceId or style direction)
04Async run polling/cancellation/idempotent retries/concurrency constraints (2s→5s→5min, 409, idempotency-key)
05Screenshot verification closed loop (user-visible screenshots + fullHeight self-inspection + parallel requests + transparent backgrounds)
06Fetching component HTML for implementation (including precise restoration via pinned versions)
07High-fidelity icon/font migration (retrieving SVGs via Iconify API, extracting Google Fonts, rendering with react-native-svg)
08Seamless key acquisition via device flow + error code to user action guidance (URLs to fix pages for 401/403/429, top-up page referral for out_of_credits)

3External Dependencies

KindDependency / Endpoint
apiSleek REST API (sleek.design)
apiSleek OpenAPI spec
apiIconify API（仅实现原生图标时）
clicurl
packagereact-native-svg（SvgXml，仅 RN 实现路径）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
  • scripts/: Executes local scripts or commands: curl (executed by the host: `curl -o run.json` and 'use shell commands to fetch the API respon
  • 网络端点: Declares external network access: https://sleek.design/api/v1/* (all endpoints for projects/chat/run/screenshots/references, Bearer auth)
  • 本地工作目录: File read/write and artifact output: Screenshots saved to the project directory ('Save screenshots in the project directory')
Audit Notes: Actual exposure surface: Reads credential-level environment variable SLEEK_API_KEY and transmits it as a Bearer token to a third-party SaaS (sleek.design), with an additional device flow to exchange keys and set environment variables; external network targets are predictable (official API + Iconify for implementation), the key is only transmitted via Authorization headers with explicit minimum scope guidelines and HTTPS-only declarations, with no hidden exfiltration; writes server-generated HTML to local project files. Standard classification: Accessing credentials warrants Orange tier (regardless of external transmission). Reason recorded: SLEEK_API_KEY access + third-party API dependency + server artifact persistence to disk. Recommended for use only in trusted host environments with minimum-scope keys.

5Second-Pass Verification

  • [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`'）+ 并行截图建议原文均在。

6Verdict & Scenarios

  • Documentation as implementation: A single 564-line file covers all endpoints, parameters, error codes, and edge cases, allowing the model to drive Sleek reliably without runtime ambiguity.
  • Foolproof workflow discipline: No screen splitting on intent transfer, async polling with backoff and timeout caps, 409/idempotency handling, and no silent completions.
  • Well-designed acceptance loop: Every screen must be visually presented to the user via screenshot for completion, with fullHeight self-checks preventing false positives.
  • Rigorous security boundaries: Single host, HTTPS-only, minimum scope, Bearer-only, and explicit warnings that imageUrls are fetched by the server.
  • Complete native implementation path: Comprehensive fidelity guidelines for pinned versions, Iconify SVGs, Google Fonts, and react-native-svg migration.
    • Best for: Ideal for designers and developers with a Sleek account/API key who want to use AI agents to generate and iterate mobile UI screens in bulk; suitable for engineering scenarios requiring Sleek designs to be implemented in code (HTML prototypes, React Native, SwiftUI) with high-fidelity icons and fonts; perfect for users who accept an architecture where design capabilities reside in a cloud SaaS.
    Not for: Not suitable for users without a Sleek account or those unwilling to delegate design tasks to a cloud-based paid SaaS; not suitable for environments requiring design data to remain strictly local with zero external transmissions and zero credentials; not suitable for purely static presentation scenarios where icon/font fidelity is irrelevant (plain screenshots suffice); not suitable for restricted network environments where requests outside an explicit whitelist are blocked—note that frontmatter allowed-hosts only lists sleek.design, but icon implementation requires access to api.iconify.design.
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload design-mobile-apps.tar.gz
    sha256: 215af338726abdb5…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 2aaa24df05.