A mobile app design skill for Claude Code, Cursor and Codex.

What the Sleek skill does

A skill is a folder of instructions your coding agent reads when a task calls for it. Sleek's skill, sleek-design-mobile-apps, teaches your agent Sleek's REST API: how to create a project, send a design brief, wait for the result, and fetch each screen's screenshots and HTML.

• Design new screens. Your agent sends the whole app as one brief. Sleek plans the screens and their layout together, and invents a visual style when you don't give one. When you point at apps or images you like, the skill has your agent write a style direction from them, or start from one of Sleek's curated design references.
• Edit what's there. Follow-up messages can target a specific screen, so a change lands on the screen you meant.
• Show you the result. After each run, your agent renders a screenshot of every screen it created or changed and saves them in your project folder. You can also watch the screens being designed live in the Sleek editor.
• Build from the design. When you ask for code, your agent fetches each screen's HTML and builds from it. It can use the HTML as a prototype as is, or rebuild the screens in your app's framework; the skill carries notes for React Native styling with StyleSheet, NativeWind, or Uniwind.

Sleek designs the screens and your coding agent writes the app code. From the Sleek project you can also export the screens to Figma as native layers, to HTML, or to React with Tailwind CSS.

How a design run works

This is the loop the skill gives your agent, from the skill's own instructions. You describe the app; your agent handles the calls.

1. Connect your account. If SLEEK_API_KEY isn't set, your agent shows you a link and a short code. You approve in your browser and the agent receives the key, so you never paste it into the chat. You can also create a key at agent setup.
2. Create a project. Your agent calls POST /api/v1/projects. Each project holds one theme and design system.
3. Send the brief as one message. Your agent sends your whole request, such as a plant shop app with onboarding, home, plant detail, cart and profile, to POST /api/v1/projects/:id/chat/messages. It doesn't split the app into separate screens: Sleek plans better with the full intent. Your agent also shares the editor link so you can watch.
4. Wait for the run. Your agent polls GET /api/v1/projects/:id/chat/runs/:runId until the run completes or fails.
5. Look at the screens. Your agent renders screenshots with POST /api/v1/screenshots and shows you every new or updated screen.
6. Implement the design. If you asked for code, your agent fetches each screen's HTML from GET /api/v1/projects/:id/components and builds the screens in your codebase. To build a Sleek project that already exists, it skips straight to this step, and reading designs costs no credits.

The full workflow and API reference live in the skill's SKILL.md and in Sleek's instructions for agents.

Install the skill

You need a Sleek account. The skill works in any coding agent that can run skills and make HTTP requests, including Claude Code, Cursor, Codex and OpenClaw.

1. Run this in your project:

   npx skills add sleekdotdesign/agent-skills -s sleek-design-mobile-apps

   It installs the skill to .agents/skills/ in your working directory. If your agent doesn't discover skills there, point it at the installed SKILL.md. To browse the repository's skills first, run npx skills add sleekdotdesign/agent-skills.

2. Ask your agent to design something, describing the whole app in one message. It walks you through connecting your Sleek account the first time.

Prefer not to run the command yourself? The design with AI agents page gives you one prompt to paste into your agent: it installs the skill and connects your account.

Agent skill or MCP server?

Both drive the same Sleek service with the same account and credits, so you only need one. Pick the one that fits how your agent connects.

• Agent skill: your agent calls Sleek's REST API with an API key. Use it with any agent that can run skills, and when you want the whole workflow, including how to implement the screens, in your agent's instructions.
• MCP server: hosted by Sleek, so there's nothing to install. You add one URL to your client and sign in with OAuth, with no API key to store. Use it when your client supports remote MCP servers, such as Claude Code, Cursor, Codex, Claude, or ChatGPT. The Sleek MCP server page has setup for each client.

Plans and credits

The skill is free to install. Design runs spend your workspace's AI credits: a new screen costs roughly 30 credits, and editing one costs 5 to 30, depending on how much changes.

• Free $0 (60 one-time credits, 1 project, 3 screens). You can try the skill with these trial credits: about one design run.
• Starter $29/mo or $240/yr ($20/mo billed yearly; 3,000 credits/mo, about 100 screens). Does not include the REST API or the agent skill.
• Pro $69/mo or $360/yr ($30/mo billed yearly; 20,000 credits/mo, about 650 screens, REST API and agent skill).
• Team $99 per seat/mo or $490 per seat/yr ($40.83 per seat/mo billed yearly; 30,000 credits per seat/mo, about 1000 screens, REST API and agent skill).

The API and agent skill require Pro or Team for sustained use; Free accounts can try the API with one-time trial credits. Agent setup handles sign-in, upgrade, and API key creation in one place. See pricing for plan details and billing questions.

Sleek's skill and Anthropic's frontend-design skill

They do different jobs. Anthropic's frontend-design skill is a set of instructions that guides the visual choices your agent makes while it writes frontend code, with web pages in mind. It doesn't create a separate design. Sleek's skill hands the design to Sleek, which designs native-feeling iOS and Android app screens in a project you can open, edit, and export before any code is written. Our comparison of Claude Code UI design skills covers both, plus UI UX Pro Max, and the guide to AI mobile app design explains where a design step fits before you build.