sleek-design-mobile-apps

Design mobile app screens and fetch rendered UI code via the Sleek REST API.

3|1|Updated Apr 29, 2026
One-click install
npx skills add https://github.com/firstsun-dev/skills --skill sleek-design-mobile-apps-firstsun-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sleek-design-mobile-apps
Source: https://github.com/firstsun-dev/skills/tree/main/plugins/frontend-product-design/skills/sleek-design-mobile-apps
Command: npx skills add https://github.com/firstsun-dev/skills --skill sleek-design-mobile-apps-firstsun-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing mobile app screens from scratch requires design tools and manual iteration. This Skill connects an AI agent to the Sleek design platform's REST API so you can create projects, describe screens in plain language, and receive rendered HTML designs and screenshots without leaving your workflow. ## Core Features & Use Cases - Project and screen generation: Create Sleek projects and send natural-language chat messages that produce or update app screens, with async run polling and idempotent retries. - Screenshots and code export: Render PNG/WebP screenshots of components and fetch complete HTML documents for each screen, including Iconify icons and Google Fonts references. - Native implementation guidance: Use the HTML code plus screenshots as references to implement designs in React Native, SwiftUI, or other frameworks, with support for pinned component and theme versions. - Use Case: Ask the agent to "design a running tracker app with a home dashboard and stats screen" — it creates a Sleek project, sends the prompt, polls the run, and delivers screenshots plus HTML files saved to your project directory. ## Quick Start Ask the agent to design a mobile app for your idea using Sleek, making sure the SLEEK_API_KEY environment variable is set first.

Frequently Asked Questions about sleek-design-mobile-apps

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a mobile app UI with an AI agent?▼

Create a Sleek project via POST /api/v1/projects, then send a natural-language description to the chat messages endpoint. Sleek's AI generates the screens; poll the run status and then fetch screenshots and HTML code for each screen.

How do I get the HTML code for a generated app screen?▼

Call GET /api/v1/projects/:id/components/:componentId using the componentId returned in the chat run's operations. The response contains a versions array; use the entry matching activeVersion, or a pinned version id if specified.

What API key and scopes does the Sleek API require?▼

You need a SLEEK_API_KEY created at sleek.design/dashboard/api-keys on a Pro plan or higher. Scopes include projects:read/write, components:read, chats:read/write, and screenshots; create keys with only the scopes your task needs.

Why did my Sleek chat message return a 409 conflict error?▼

A 409 CONFLICT means another chat run is still active for that project, since only one run is allowed at a time. Poll the current run until it reaches completed or failed before sending the next message.

Can I implement Sleek designs in React Native or SwiftUI?▼

Yes. Fetch the component HTML as the implementation reference for layout, colors, and content, and use screenshots as the visual target. Icons use Iconify sets like Solar and Material Symbols, which you can fetch as SVGs and render with react-native-svg.