Sleek Design Mobile Apps 技能：AI 驱动的移动应用设计

本文介绍 Sleek Design Mobile Apps 技能，这是一个由 sleekdotdesign 开发的 AI Agent 技能，专注于移动应用设计。该技能集成了 sleek.design 平台的完整 API，让 AI 代理能够通过自然语言描述来设计和创建移动应用界面，极大提升了移动应用开发效率。

项目简介

Sleek Design Mobile Apps 是 sleekdotdesign 在 skills.sh 平台上发布的 Agent 技能。sleek.design 是一个 AI 驱动的移动应用设计工具，通过 REST API 让用户能够用自然语言描述想要的应用，然后自动生成渲染的屏幕界面。

核心特性

AI 驱动设计：用自然语言描述应用需求
REST API 集成：完整的 API 接口支持
项目管理：创建、列出、删除项目
组件管理：管理项目中的组件
聊天生成：通过对话模式迭代设计
标准 HTTP 通信：Bearer Token 认证
CORS 支持：跨域访问友好

技术架构

Base URL：https://sleek.design
认证方式：Bearer Token (Authorization 头)
Content-Type：application/json
API 版本：v1 (/api/v1/*)
认证要求：Pro+ 计划（API 访问受限）

API 密钥

获取密钥

访问 https://sleek.design/dashboard/api-keys
创建 API 密钥
密钥值只在创建时显示一次，需保存到 SLEEK_API_KEY 环境变量

所需计划

Pro+ 计划：API 访问需要此计划或更高级别

密钥作用域

作用域	权限说明
`projects:read`	列出/获取项目信息
`projects:write`	创建/删除项目
`components:read`	列出项目中的组件
`chats:read`	获取聊天运行状态
`chats:write`	发送聊天消息

安装指南

使用 skills.sh CLI

bash

# 安装技能
npx skills add https://github.com/sleekdotdesign/agent-skills --skill sleek-design-mobile-apps

# 或使用简写
npx skills add sleekdotdesign/agent-skills --skill sleek-design-mobile-apps

Claude Code 安装

bash

# 添加 marketplace
/plugin marketplace add sleekdotdesign/agent-skills

# 安装技能
/plugin install sleek-design-mobile-apps@agent-skills

快速开始

配置 API 密钥

bash

# 设置环境变量
export SLEEK_API_KEY="your-api-key-here"

# 或在 .env 文件中
echo "SLEEK_API_KEY=your-api-key-here" >> .env

基本使用

python

# 在 AI Agent 中使用
import requests

headers = {
    "Authorization": f"Bearer {os.getenv('SLEEK_API_KEY')}",
    "Content-Type": "application/json"
}

# 列出项目
response = requests.get(
    "https://sleek.design/api/v1/projects",
    headers=headers
)

API 端点

项目管理

获取项目列表

http

GET /api/v1/projects
Authorization: Bearer $SLEEK_API_KEY

创建项目

http

POST /api/v1/projects
Authorization: Bearer $SLEEK_API_KEY
Content-Type: application/json

{
  "name": "My App",
  "description": "A todo app"
}

删除项目

http

DELETE /api/v1/projects/{projectId}
Authorization: Bearer $SLEEK_API_KEY

组件管理

获取组件列表

http

GET /api/v1/projects/{projectId}/components
Authorization: Bearer $SLEEK_API_KEY

聊天生成

发送聊天消息

http

POST /api/v1/projects/{projectId}/chats
Authorization: Bearer $SLEEK_API_KEY
Content-Type: application/json

{
  "message": "Create a login screen with email and password fields"
}

获取聊天状态

http

GET /api/v1/projects/{projectId}/chats/{chatId}
Authorization: Bearer $SLEEK_API_KEY

使用场景

场景 1：创建登录界面

python

# 通过 AI 调用
def create_login_screen():
    headers = {
        "Authorization": f"Bearer {os.getenv('SLEEK_API_KEY')}",
        "Content-Type": "application/json"
    }

    # 创建项目
    project = requests.post(
        "https://sleek.design/api/v1/projects",
        json={"name": "Login App"},
        headers=headers
    ).json()

    # 通过聊天生成界面
    chat = requests.post(
        f"https://sleek.design/api/v1/projects/{project['id']}/chats",
        json={"message": "Create a login screen with email and password fields, include a forgot password link"},
        headers=headers
    ).json()

    return chat

场景 2：设计主屏幕

python

# 设计主屏幕
chat = requests.post(
    f"https://sleek.design/api/v1/projects/{project_id}/chats",
    json={"message": "Design a home screen with a navigation bar, featured items section, and bottom tab bar"},
    headers=headers
).json()

场景 3：迭代优化

python

# 迭代设计
for message in [
    "Make the buttons larger",
    "Add a gradient background",
    "Update to use modern card style"
]:
    chat = requests.post(
        f"https://sleek.design/api/v1/projects/{project_id}/chats/{chat_id}",
        json={"message": message},
        headers=headers
    ).json()

AI Agent 集成

Claude Code 集成

python

# 在 Claude Code 中使用
# 安装技能后，可以直接对话

# 对话示例
"""
用户: 我需要一个电商应用的首页

Claude: [使用 sleek-design-mobile-apps 技能]
我来帮你设计。正在连接 sleek.design API...

[创建项目]
[生成首页设计]
界面包含：
- 顶部搜索栏
- 轮播图区域
- 商品列表
- 底部导航栏

是否需要调整？
"""

Cursor 集成

python

# 在 Cursor 中使用
# .cursorrules

# 当涉及移动应用设计时
Rule: Use sleek-design-mobile-apps skill
Context: The skill can generate mobile app UIs via sleek.design API

错误处理

常见错误

1. 认证失败

python

# 检查 API 密钥
if response.status_code == 401:
    print("API 密钥无效或已过期")
    print("请访问 https://sleek.design/dashboard/api-keys 重新创建")

2. 权限不足

python

# 检查计划类型
if response.status_code == 403:
    print("权限不足，请升级到 Pro+ 计划")
    print("API 访问需要 Pro+ 或更高级别")

3. 项目不存在

python

# 验证项目 ID
if response.status_code == 404:
    print("项目不存在，请检查项目 ID")

最佳实践

1. 安全考虑

密钥保护：不要将 API 密钥提交到代码仓库
环境变量：使用 .env 文件或环境变量
密钥轮换：定期轮换 API 密钥

2. 性能优化

缓存结果：缓存项目列表和组件列表
异步操作：使用异步 HTTP 客户端
批量操作：合并多个请求

3. 错误处理

重试机制：实现指数退避重试
日志记录：记录所有 API 调用
优雅降级：API 失败时的备选方案

代码示例

完整示例

python

import os
import requests

class SleekDesignClient:
    def __init__(self):
        self.api_key = os.getenv('SLEEK_API_KEY')
        self.base_url = "https://sleek.design/api/v1"
        self.headers = {
            "Authorization": f"Bearer {self.api_key}",
            "Content-Type": "application/json"
        }

    def create_project(self, name, description=""):
        """创建新项目"""
        response = requests.post(
            f"{self.base_url}/projects",
            json={"name": name, "description": description},
            headers=self.headers
        )
        response.raise_for_status()
        return response.json()

    def list_projects(self):
        """列出所有项目"""
        response = requests.get(
            f"{self.base_url}/projects",
            headers=self.headers
        )
        response.raise_for_status()
        return response.json()

    def generate_ui(self, project_id, message):
        """通过聊天生成 UI"""
        response = requests.post(
            f"{self.base_url}/projects/{project_id}/chats",
            json={"message": message},
            headers=self.headers
        )
        response.raise_for_status()
        return response.json()

# 使用示例
client = SleekDesignClient()

# 创建项目
project = client.create_project(
    name="Todo App",
    description="A simple todo application"
)

# 生成界面
result = client.generate_ui(
    project['id'],
    "Create a todo list app with add, delete, and complete functionality"
)

print(f"项目 ID: {project['id']}")
print(f"聊天 ID: {result['id']}")

限制和注意事项

API 限制

计划要求：需要 Pro+ 计划
速率限制：根据计划级别有不同限制
配额限制：每月 API 调用次数限制

使用建议

合理使用：避免频繁调用 API
缓存结果：缓存不常变化的数据
批量操作：合并相关请求
监控用量：关注 API 使用情况

计费说明

Pro+ 计划：提供 API 访问权限
价格：根据使用量计费
配额：每月有免费调用次数限制

项目链接

技能市场：https://skills.sh/sleekdotdesign/agent-skills/sleek-design-mobile-apps
官方平台：https://sleek.design
GitHub 仓库：https://github.com/sleekdotdesign/agent-skills
技能作者：sleekdotdesign
技能协议：Agent Skills 开放格式

字节笔记本

Sleek Design Mobile Apps 技能：AI 驱动的移动应用设计

项目简介

核心特性

技术架构

API 密钥

获取密钥

所需计划

密钥作用域

安装指南

使用 skills.sh CLI

Claude Code 安装

快速开始

配置 API 密钥

基本使用

API 端点

项目管理

获取项目列表

创建项目

删除项目

组件管理

获取组件列表

聊天生成

发送聊天消息

获取聊天状态

使用场景

场景 1：创建登录界面

场景 2：设计主屏幕

场景 3：迭代优化

AI Agent 集成

Claude Code 集成

Cursor 集成

错误处理

常见错误

1. 认证失败

2. 权限不足

3. 项目不存在

最佳实践

1. 安全考虑

2. 性能优化

3. 错误处理

代码示例

完整示例

相关资源

限制和注意事项

API 限制

使用建议

计费说明

项目链接