Sleek

Sleek MCP 服务

用日常语言描述一款移动应用，即可获得真实、可编辑的屏幕，并在聊天中直接以图片形式呈现。随后，编码 Agent 可以根据这些屏幕构建可运行的应用。

Sleek 是一款 AI 移动应用设计工具。这是它的远程 MCP 服务，可让 Claude、ChatGPT、Codex、Cursor 以及其他任何 MCP 客户端为你进行设计：你只需说“设计一款植物商店应用，包含引导页、首页、商品详情页和购物车”，助手就会创建项目、运行设计 Agent、向你展示屏幕，并提供一个链接，让你打开、编辑屏幕，或将其导出到 Figma 或代码。

无需安装任何东西。服务运行在 Sleek 的基础设施上；你只需让客户端连接一个 URL，然后登录即可。

https://sleek.design/api/mcp

• 初次接触 MCP？ MCP 是一种开放标准，可让 AI 客户端连接外部工具。“远程”表示工具托管在云端，因此你只需要上面的 URL。
• 需要账号？ 在 sleek.design 免费创建账号。
• 想使用技能而非 MCP 连接？ 请参阅 sleekdotdesign/agent-skills。

此仓库仅包含指向该服务的清单和文档：没有服务端代码、脚本、钩子或遥测功能。

快速开始

1. 按照下方对应的客户端说明进行连接，并在提示时登录 Sleek。
2. 用一句话提出完整的应用设计需求：“在 Sleek 中设计一款植物商店应用：包含引导页、展示精选植物的首页、植物详情页、购物车和个人资料页。风格温暖、简约。”
3. 助手会向你展示渲染好的屏幕，并提供项目链接。打开链接即可编辑，或导出到 Figma、HTML 或 React。

请在一条请求中描述完整的应用。Sleek 的设计 Agent 会统筹规划整组屏幕，因此，一条消息提出五个屏幕会生成协调统一的应用；分五条消息提出，则会生成五个互不相关的屏幕，并向你收费五次。

连接客户端

所有客户端都使用同一个 URL。

使用 OAuth 登录。 这是连接 Sleek 的方式。添加 URL 后，客户端会打开浏览器；你批准访问权限即可完成连接。无需复制或保存任何内容，而且你可以从任意一端撤销授权。本页列出的所有客户端都支持此方式，因此只需按照对应的步骤操作即可。

不要一开始就使用 API 密钥。 只有完全不支持 OAuth 的客户端才需要密钥。密钥是长期有效的机密，对工作区拥有与完整 OAuth 授权相同的权限，不会自行过期；配置密钥后，客户端也将不再提供浏览器登录方式。如果 OAuth 失败，应修复问题，而不是绕过它；故障排除部分介绍了常见原因。下方的 API 密钥步骤特意折叠起来了。

Claude.ai、Claude Desktop、Cowork 和移动端

自定义连接器支持 Free（一个连接器）、Pro、Max、Team 和 Enterprise 套餐。Claude 从 Anthropic 的云端连接 Sleek，而不是从你的设备连接。

Pro 或 Max 套餐：

1. 打开 Customize → Connectors。
2. 点击 +，然后选择 Add custom connector。
3. 将 https://sleek.design/api/mcp 输入为远程 MCP 服务 URL。
4. Advanced settings 留空。Claude 会自动向 Sleek 注册。
5. 点击 Add，登录 Sleek 并批准访问权限。

对于 Team 或 Enterprise 套餐，Owner 只需在 Organization settings → Connectors → Add 下添加一次（将鼠标悬停在 Custom 上，选择 Web，并使用相同的 URL）。之后，成员打开 Customize → Connectors，找到 Owner 添加的连接器，然后点击 Connect。

如需断开连接，请打开 Customize → Connectors 并选择 Remove。

7ef50bea-9fe8-47bb-8163-68a0e21395ab

claude mcp add --transport http sleek https://sleek.design/api/mcp
claude mcp login sleek

你也可以在 Claude Code 中通过 /mcp 登录。

或者从此仓库的市场中将其安装为插件：

/plugin marketplace add sleekdotdesign/mcp
/plugin install sleek@sleek

然后用同样的方式登录。该插件的服务显示为 plugin:sleek:sleek。它在 .mcp.json 中只包含服务定义：没有钩子、技能、Agent 或命令。

export SLEEK_API_KEY=sk_...   # in ~/.zshrc or ~/.bashrc
claude mcp add --transport http sleek https://sleek.design/api/mcp \
  --header 'Authorization: Bearer ${SLEEK_API_KEY}'

Codex CLI 和 ChatGPT 桌面应用

codex mcp add sleek --url https://sleek.design/api/mcp
codex mcp login sleek

ChatGPT 桌面应用、Codex CLI 和 IDE 扩展共用此配置。

codex mcp add sleek --url https://sleek.design/api/mcp --bearer-token-env-var SLEEK_API_KEY

[mcp_servers.sleek]
url = "https://sleek.design/api/mcp"
bearer_token_env_var = "SLEEK_API_KEY"

ChatGPT

1. 打开 设置 → 安全与登录，并启用 开发者模式。是否可用取决于你的账户和工作区策略。
2. 前往 ChatGPT 插件页面，然后点击加号按钮。
3. 为其设置名称（Sleek）和描述。
4. 在 连接 下，输入 https://sleek.design/api/mcp。
5. 创建连接并登录 Sleek。

如果系统询问身份验证方式，请选择 OAuth，并将客户端 ID 和密钥留空。

Cursor

将以下内容粘贴到浏览器地址栏，Cursor 会提示安装该服务：

cursor://anysphere.cursor-deeplink/mcp/install?name=sleek&config=eyJ1cmwiOiJodHRwczovL3NsZWVrLmRlc2lnbi9hcGkvbWNwIn0=

或者手动将其添加到 ~/.cursor/mcp.json（所有项目）或 .cursor/mcp.json（单个项目）：

{ "mcpServers": { "sleek": { "url": "https://sleek.design/api/mcp" } } }

启用服务时，Cursor 会执行 OAuth 登录，这样就够了。只有在无法使用此方式时，才添加请求头；Cursor 会解析 ${env:NAME}：

{ "mcpServers": { "sleek": { "url": "https://sleek.design/api/mcp", "headers": { "Authorization": "Bearer ${env:SLEEK_API_KEY}" } } } }

其他 MCP 客户端

添加一个使用 Streamable HTTP 传输的远程服务。确切的 type 值因客户端而异（http、streamable-http 或省略）：

{ "mcpServers": { "sleek": { "type": "streamable-http", "url": "https://sleek.design/api/mcp" } } }

实现了 MCP 授权的客户端会从受保护资源元数据中发现所需的一切信息，并动态注册自身，因此通常只需这一份配置。只有完全不支持 OAuth 的客户端才需要添加 "headers": { "Authorization": "Bearer sk_..." }。

你可以提出的请求

一条消息设计完整应用。

在 Sleek 中设计一款植物商店应用：包含引导页、带精选植物的首页、植物详情页、购物车和个人资料页。风格温暖、简约。

你的助手会创建一个项目，将完整需求作为一次设计运行发送，渲染新页面并合并成一张图片，然后分享项目链接。一次运行，只收费一次。

免费查看你已有的内容。

显示我的植物商店项目中的购物车和个人资料页面。

列出和渲染都不收费，因此浏览项目不会消耗额度。

编辑一个页面。

在植物详情页中，将“加入购物车”按钮移到固定的底部栏中，并放大价格。

Agent 会直接编辑该页面，而不是创建新页面。这属于一次设计运行，因此会消耗额度。

导出

这些页面是真正的设计文件，不是应用截图。打开助手提供的项目链接，然后从那里导出：

• Figma。 点击 Figma 按钮，然后粘贴到任意 Figma 文件中。页面会以原生、完全可编辑的 Figma 图层形式导入。无需插件。
• 代码。 将页面导出为 HTML，或使用 Tailwind CSS 的 React 代码。

所有方案（包括 Free）均支持这两种导出方式。你拥有自己创建的所有内容，包括设计和代码，也可以将其用于商业用途。

你的助手还可以通过 get_component 将页面生成的 HTML 直接提取到对话中，这样它就能将页面改造成适用于你自己代码库的内容，无需离开聊天。

定价

设计运行会消耗 Sleek 工作区的 AI 积分。列出、读取和渲染均免费。

创建一个新屏幕约需 30 积分；编辑屏幕需 5 到 30 积分，具体取决于改动幅度。

免费账户会获得一次性试用积分，足够进行约一次设计运行。持续使用需要 Pro 套餐或更高版本：每月 69 美元，或按年计费时每月 30 美元（每年 360 美元），包含每月 20,000 个 AI 积分，约可创建 650 个屏幕。请访问 sleek.design/pricing 查看当前套餐。

工具

此服务提供十一种工具。助手会为你选择工具；此表仅供参考。

如果你要直接调用这些工具，以下细节值得注意：

• design 会将完整的设计简报作为一个 message 接收。可选参数：screenId，用于编辑现有屏幕；referenceId，取自 list_references，用于仿照某种风格；imageUrls，用于提供视觉输入；idempotencyKey，用于确保重试时返回原始运行，而不是再次扣费；以及 wait（默认为 true）。等待时间上限为 270 秒；之后调用会返回 running，你需要轮询 get_design_run。如果客户端超时更短，可将 wait 设为 false，从一开始就通过轮询获取状态。
• 每个屏幕都有两个 ID。screenId 是画布上的画框，也是 design 编辑屏幕时所需的参数。list_components 返回的组件 ID（字段名为 id）则是 screenshot 和 get_component 所需的参数。设计运行会为其涉及的每个屏幕返回这两个 ID；list_components 和 get_component 也会在组件 id 旁返回 screenId（如果组件不在画布上，则为 null）。切勿将组件 ID 作为 screenId 传入。
• 每个项目只能有一个正在运行的设计任务。如发生冲突，请轮询 get_design_run，直到当前运行结束；或者调用 cancel_design_run，然后重试。
• 失败的运行可能包含 error.url。你可以在该地址解决问题，通常是充值积分或升级套餐。客户端应将此地址传递给用户。
• delete_project 需要 confirm: true，且只能在你说出要删除的项目名称后调用。
• 每次调用 screenshot 最多可渲染四个屏幕。需要渲染更多屏幕时，请分批处理。

故障排除

Claude Code 在我登录前就显示 sleek 已连接。 这是预期行为。Sleek 允许任何客户端在无需登录的情况下读取服务名称和工具列表，因此连接会成功，而身份验证只会在运行工具时检查。如果你跳过登录，第一次工具调用会被拒绝，随后 Claude Code 会将 sleek 标记为需要身份验证。先登录可以避免这一来回过程。

我的 API 密钥无法使用，而且从未出现 OAuth 提示。 配置 Authorization 标头后，Claude Code 会将被拒绝的密钥视为连接失败，而不是登录的理由，因此不会回退到 OAuth。请检查密钥，或移除标头并使用 OAuth。

在浏览器中打开 URL 会返回 405。 这是设计如此。端点仅接受 POST；服务是无状态的，不会在调用之间保持连接打开。

我已经在 claude.ai 和 Claude Code 中连接了 Sleek。 Claude Code 会对指向同一 URL 的条目去重，并在 /mcp 中保留一个处于活动状态的条目。

无需使用任何客户端即可检查密钥：

curl -s -X POST https://sleek.design/api/mcp \
  -H "Authorization: Bearer $SLEEK_API_KEY" \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json, text/event-stream' \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"list_projects","arguments":{}}}'

身份验证与隐私

该服务使用 OAuth 2.1 实现标准 MCP 授权：使用 PKCE（S256）的授权码流程、动态客户端注册，以及 openid email profile offline_access 这些作用域。访问令牌有效期为一小时，客户端会自动刷新令牌。Sleek 的授权服务器是其 Supabase Auth 实例，名称列于受保护资源元数据中。

你授予的权限。 批准同意屏幕后，客户端即可在你的 Sleek 工作区中代表你操作：列出、创建和删除项目，设计和编辑屏幕，以及使用工作区额度运行设计任务。它无法执行你自己的账号无法执行的操作。

如何撤销。 在客户端一侧，移除连接器（claude.ai：Customize → Connectors → Remove；Claude Code：在 /mcp 中选择 Clear authentication，或运行 claude mcp logout sleek，或运行 claude mcp remove sleek，后者还会删除已存储的令牌）。在 Sleek 一侧，可在 sleek.design 的账号中撤销授权或 API 密钥，也可以发送邮件至 [email protected]。

API 密钥是备用方案，而非默认方案。 从 sleek.design/agents/setup 获取的密钥是一个秘密凭证，拥有与 OAuth 授权相同的访问权限，却没有 OAuth 的任何保护措施：它不会过期，不与设备绑定，而且任何读取它的人都能访问你的工作区，直到你将其撤销。仅在无法使用 OAuth 的情况下使用密钥。请将其保存在环境变量中，切勿存放在你会提交的文件里，并在密钥泄露时立即撤销。

网络。 唯一的目标地址是 sleek.design 及其授权服务器。本仓库不包含代码、钩子或遥测，插件清单也未添加服务定义以外的任何内容。关于 Sleek 会存储哪些信息以及存储时长，请参阅隐私政策。

支持

请发送邮件至 [email protected]，或阅读面向 Agent 的文档。如需提交安全问题报告，请参阅 SECURITY.md。维护者请参阅 docs/publishing.md。

本项目基于 MIT 许可证授权。请参阅 LICENSE。