What is the design-mobile-apps skill?
The design-mobile-apps skill is a SKILL.md that connects an AI coding agent to Sleek, an AI mobile app design tool. The agent creates projects, sends plain-language design requests, shows screenshots of each screen, and fetches the HTML to implement. It needs a Sleek account and an API key.
The design-mobile-apps skill is a connector, not a rulebook. Its SKILL.md teaches an AI coding agent to call the Sleek REST API, so the agent can create a project, describe the screens you want, and get back rendered mobile designs.
Sleek does the designing. The skill supplies the procedure: authenticate, send one full-intent message, poll the run, take screenshots, and fetch the component HTML when you want it implemented in React Native, SwiftUI or plain HTML.
What changes in your agent's output
- The agent sends your full request to Sleek as one message and does not split it into screens or add product details you did not ask for.
- When you give it references or a mood, it writes a single-paragraph style direction covering color logic, type feel, component style and imagery.
- After every run it takes screenshots of each new or updated screen and shows them to you.
- For code, it fetches each screen's HTML instead of working from screenshots alone, and reuses the exact icons and fonts in the markup.
Account, key and pricing
You need a Sleek account and an API key in the SLEEK_API_KEY variable. If the key is missing, the skill starts a device flow so you approve in the browser and never handle the raw key. Free accounts get trial credits for about one design run.
Sustained use needs the Pro plan or higher, listed at $69 per month or $30 per month billed yearly at $360. It includes 20,000 monthly AI credits, roughly 650 screens. The skill tells the agent to state this plainly before any payment step.
Who the design-mobile-apps skill is for
Best for
- Founders and developers who want mobile screen designs from a prompt, then HTML to build from.
- Teams exploring variations, since each Sleek project has its own theme and design system.
- Agents that implement designs in React Native or SwiftUI and need exact markup, icons and fonts.
Not for
- Offline or free unlimited use. Every call goes to sleek.design and sustained use is paid.
- Reading an existing Figma file. For that, see figma-mcp.
- General interface guidelines. ui-ux-pro-max and web-design-guidelines are rule-based skills.
Use it with UiChemy
Sleek designs mobile app screens. UiChemy Composer writes real HTML, CSS and JS inside Elementor or Gutenberg for websites, and figma-mcp covers reading Figma designs. Click Get Started on uichemy.com for the WordPress side.
How to install Design Mobile Apps Skill: Sleek Screens From Your Agent
git clone https://github.com/designed-by-ai/skills.gitClone the repository
Run
git clone https://github.com/designed-by-ai/skills.git. The skill is the skills/design-mobile-apps folder.Copy the skill folder
Copy skills/design-mobile-apps into the folder where your AI coding agent loads skills. The skill's own notes say to point your agent at the SKILL.md explicitly if it does not discover the folder.
Provide a Sleek API key
Set SLEEK_API_KEY, or let the skill start its device flow. The skill limits network access to https://sleek.design only.
Check that it loaded
Ask the agent to design a simple mobile app screen. It should create a Sleek project, send one chat message, poll the run, then show you a screenshot of each screen and the editor link.
Key features
- Device-flow sign-inWith no key set, the agent starts a device flow. You confirm a short code in the browser and approve, so the key never passes through chat.
- Scoped API keysKeys carry scopes such as projects:read, projects:write, components:read, chats:read, chats:write and screenshots. The skill advises creating keys with only the scopes the task needs.
- Single-message design requestsThe agent sends the whole intent in one chat message and lets Sleek plan the screens. It is told not to break the request into screens itself.
- Style direction writingWhen you supply references, adjectives or things to avoid, the agent writes one paragraph covering mood, color logic, type, layout, components and imagery.
- Reference catalogSleek curates design references. The agent can list them with names and previews, and seed a project's style from one chosen id.
- Async runs and pollingRuns return an id and the agent polls, starting at 2 seconds and backing off to 5, giving up after 5 minutes. A blocking wait option exists.
- Screenshots after every runEach created or updated screen gets a screenshot. The skill says a run is not done until you have seen one for every affected screen.
- Full-height review shotsFor its own checking, the agent re-renders screens at full height, so it does not call a screen incomplete because content sat below the fold.
- HTML to native codeComponent HTML is the implementation reference for React Native or SwiftUI, with screenshots as the visual target and icons fetched from Iconify.
- Pinned versionsIf your prompt pins component or theme versions, the agent implements those exact versions and passes override maps when taking screenshots.
Frequently asked questions
What is the design-mobile-apps skill?
It is a SKILL.md that connects an AI coding agent to the Sleek design API. The agent creates projects, sends design requests in plain language, shows screenshots of the screens and can fetch their HTML to implement in code.
How do I install the design-mobile-apps skill?
Clone the repository with git and copy the skills/design-mobile-apps folder into your agent's skills folder. Then set SLEEK_API_KEY, or let the skill's device flow create a key after you approve it in the browser.
Is the design-mobile-apps skill free?
The skill is MIT licensed, but it calls a paid service. Free Sleek accounts get one-time trial credits for about one design run. Sustained use needs the Pro plan, listed at $69 per month or $30 per month billed yearly.
What does the agent send to Sleek?
Requests go only to the Sleek host, and the key travels in the Authorization header. Image URLs you pass are fetched by Sleek's servers, so the skill warns against URLs that contain sensitive content.
Can it generate React Native or SwiftUI code?
It fetches each screen's HTML, which holds the structure, styling, colors, spacing, icon names and image URLs. The agent uses that markup and the screenshots as references when it implements the screen in React Native or SwiftUI.
Which AI agents can use it?
The skill is a plain SKILL.md with an environment variable requirement. The README does not list supported agents, so any agent that loads skill folders and can make HTTPS calls can follow it. Claude Code is the one named in its examples.
How is it different from the Figma route?
Sleek generates new designs from a prompt, while figma-mcp reads designs that already exist in Figma. For rule-based advice with no outside service, try ui-ux-pro-max, which needs no account or API key.