> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Flowstep MCP 服务器

> 使用 Flowstep 作为 MCP 服务器，直接从 Cursor、Claude Code 或任何兼容 MCP 的客户端生成、检查和管理 UI 设计。

Flowstep 通过 [Model Context Protocol](https://modelcontextprotocol.io/) 公开其设计工具，让你的 AI 助手无需离开编辑器即可创建和迭代 UI 屏幕。

服务器托管在 `https://api.flowstep.ai/mcp`（可流 HTTP 传输）。无需运行本地进程。

## 你能做什么

该服务器公开 20 个工具，分布在七个类别中：

| 类别        | 工具                                                                                        |
| --------- | ----------------------------------------------------------------------------------------- |
| **文件**    | `create-file`、`list-files`、`get-file`、`update-file`、`delete-file`                         |
| **屏幕**    | `list-screens`、`get-screen`、`get-screen-image`、`add-screen`                               |
| **AI 生成** | `create-new-design`、`regenerate-design`、`expand-design`、`edit-design`、`upload-attachment` |
| **聊天**    | `get-chat-history`                                                                        |
| **设计**    | `get-design-guidelines`、`update-design-guidelines`、`delete-design-guidelines`             |
| **Figma** | `import-figma`                                                                            |
| **计费**    | `get-plan-details`                                                                        |

## 常见用途

**从提示词生成屏幕** —— 使用描述调用 `create-new-design`。Flowstep 一步创建文件和屏幕。使用返回的 `screenIds` 调用 `get-screen-image` 来查看结果。

**可视化 React 组件** —— 通过 `upload-attachment` 上传你的 `.jsx` 或 `.tsx` 文件（使用 `mimeType: text/javascript`），然后将返回的附件传递到 `create-new-design`，并附带描述该组件的消息。Flowstep 读取源代码并生成匹配的设计屏幕。

**迭代设计** —— 使用修改说明调用 `edit-design` 并指定目标 `screenId`，或调用 `regenerate-design` 从头重做屏幕。

**维护设计准则** —— 调用 `get-design-guidelines` 来检索你当前的样式规则（颜色、排版、间距、语气），然后使用 `update-design-guidelines` 在你的设计演变时保持同步。将一致的准则传递到 `create-new-design` 或 `edit-design` 确保每个生成的屏幕都符合品牌。使用 `delete-design-guidelines` 完全重置它们。

**从 Figma 导入** —— 使用 Figma 框架链接和 `fileId` 调用 `import-figma`，将框架作为可编辑元素引入 Flowstep 文件。文件的组织必须首先已连接 Figma。

**审计配额** —— 在启动一批生成之前调用 `get-plan-details` 来查看剩余的每日和每月使用情况。

## 端点

```
https://api.flowstep.ai/mcp
```

传输：可流 HTTP。会话模型：无状态（每个请求独立，无会话 ID）。

## 后续步骤

<CardGroup cols={2}>
  <Card title="快速开始" icon="bolt" href="/zh/mcp/quickstart">
    在 5 分钟内使用 Cursor 完成第一个工具调用。
  </Card>

  <Card title="身份验证" icon="lock" href="/zh/mcp/authentication">
    OAuth 2.1 PKCE 如何工作以及令牌如何颁发。
  </Card>

  <Card title="工具" icon="wrench" href="/zh/mcp/tools">
    全部 20 个工具的完整输入/输出参考。
  </Card>

  <Card title="示例" icon="code" href="/zh/mcp/examples">
    常见任务的端到端工作流。
  </Card>
</CardGroup>