Sleek MCP Server已验证已精选

什么是 Sleek MCP Server？

Sleek MCP Server 是 AI 移动应用设计工具 Sleek 官方托管的 MCP 服务器。你用自然语言描述一个应用，它就会在聊天中以图片形式返回真实、可编辑的移动应用界面，你的编程代理可以再依据这些界面构建出真正的应用。

服务器运行在 Sleek 的基础设施上，地址为 https://sleek.design/api/mcp，无需安装任何东西，登录通过浏览器中的 OAuth 完成。sleekdotdesign/mcp 仓库只包含清单和文档，没有服务器代码。

如何使用 Sleek MCP Server？

先在 sleek.design 免费注册账户，然后把下面的 URL 添加到客户端，浏览器打开后登录即可。

https://sleek.design/api/mcp

Sleek 建议所有客户端都使用 OAuth。sleek.design/agents/setup 提供的 API 密钥只是无法使用 OAuth 的客户端的最后手段；配置密钥后，客户端也不会再提供浏览器登录。

Claude Code

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

也可以在 /mcp 中登录，或者先运行 /plugin marketplace add sleekdotdesign/mcp，再运行 /plugin install sleek@sleek 安装插件。如果必须使用 API 密钥，请把它放在环境变量里，并使用单引号，这样 Claude Code 保存的是变量引用而不是密钥本身：

claude mcp add --transport http sleek https://sleek.design/api/mcp \
  --header 'Authorization: Bearer ${SLEEK_API_KEY}'

Claude Desktop 和 claude.ai

打开 Customize → Connectors，点击 +，选择 Add custom connector，输入 https://sleek.design/api/mcp。Advanced settings 保持为空，点击 Add，然后登录 Sleek 并授权。在 Team 或 Enterprise 方案中，由 Owner 在 Organization settings → Connectors 中添加一次，成员再点击 Connect 即可。

Cursor

在 ~/.cursor/mcp.json 或 .cursor/mcp.json 中添加以下配置。启用服务器时，Cursor 会自动发起 OAuth 登录。

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

VS Code

在 .vscode/mcp.json 中用 url 添加远程服务器，按提示登录：

{ "servers": { "sleek": { "type": "http", "url": "https://sleek.design/api/mcp" } } }

Codex

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

Sleek MCP Server 的主要功能

• 一次请求就能设计整个应用：设计代理会统筹规划所有界面，让它们共用一套设计系统。
• 界面以图片形式直接显示在聊天中，无需切换应用就能查看。
• 可以就地修改单个界面，例如：“把 Add to cart 按钮移到固定的底部栏。”
• get_component 返回界面生成的 HTML，方便交给编程代理继续开发。
• 通过项目链接可以导出到 Figma（原生可编辑图层），也可以导出为 HTML 或使用 Tailwind CSS 的 React，所有方案都支持。
• 可以通过 list_references 选用精选风格参考。
• 列出、读取和渲染都免费，只有设计运行会消耗积分。

Sleek MCP Server 工具

服务器提供 11 个工具：

• 项目：list_projects、create_project、get_project；delete_project 会永久删除项目，需要传入 confirm: true，并且应在用户明确说出项目名称后才执行。
• 界面：list_components 列出项目中的界面，get_component 获取某个界面的 HTML，screenshot 把最多四个界面渲染成一张图片。
• 设计运行：design 把完整需求作为一条消息接收，可选参数有 screenId、referenceId、imageUrls、idempotencyKey 和 wait；get_design_run 用于轮询运行状态，cancel_design_run 用于停止运行。
• 风格：list_references 返回可供模仿的精选应用风格。

Sleek MCP Server 的使用场景

• 一次设计出新应用：“在 Sleek 中设计一个植物商店应用：引导页、带精选植物的首页、植物详情、购物车和个人资料。温暖、简约的风格。”
• 免费浏览已有作品：“给我看看植物商店项目里的购物车和个人资料界面。”
• 有针对性地修改：“在植物详情界面上把价格放大。”
• 选用 dark fintech、brutalist 等参考，套用指定风格。
• 交给代码实现：让编程代理用 get_component 拉取每个界面的 HTML，构建真正的应用。

Sleek MCP Server 常见问题排查

• 还没登录，Claude Code 就显示 sleek 已连接：这是正常现象。工具发现不需要登录，认证会在工具运行时检查。
• API 密钥无效，也没有出现 OAuth 提示：被拒绝的密钥会被当作连接失败处理。请修正密钥，或者删除请求头改用 OAuth。
• 在浏览器中打开 URL 返回 405：这是设计如此，该端点只接受 POST 请求。
• design 调用与正在进行的运行冲突：每个项目同时只能有一个运行。请轮询 get_design_run 或调用 cancel_design_run，然后重试。