Advanced AI Coding Workflow: Use Figma MCP to Read Designs and YApi MCP to Read APIs for Ready‑to‑Deploy Development

Key Principle

AI becomes useful in an engineering workflow when it can access real context – design files and API documentation – rather than merely generating code snippets.

Workflow Overview

The upgraded AI workflow reads a Figma Frame via the figma MCP, extracts UI structure and design tokens, then reads an API schema via the yapi MCP, generates TypeScript types, request wrappers, and page logic, and finally provides integration steps and edge‑case handling.

MCP Naming (must be consistent)

Figma MCP : figma YApi MCP : yapi (example implementation yapi-auto-mcp)

Common Figma tools: get_design_context, get_screenshot, get_variable_defs Common YApi tools: yapi_list_projects, yapi_get_categories, yapi_search_apis,

yapi_get_api_desc

1. Prepare Minimal Inputs

1.1 Figma side

File Key : identifier of the Figma file.

Node ID / Frame URL : points to the specific page or frame.

Practical tips:

Place the target page in a single Frame (e.g., Login / 登录页).

Use Auto Layout and componentized elements (Button, Input) for stable AI generation.

1.2 YApi side

Base URL : e.g., https://yapi.company.com Token : format projectId:token Store tokens in environment variables, not in the repository.

2. Using Cursor (full case study)

2.1 Configure MCP servers (project level)

Create or merge .cursor/mcp.json at the project root:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "headers": {"Authorization": "Bearer ${FIGMA_ACCESS_TOKEN}"}
    },
    "yapi": {
      "command": "npx",
      "args": ["-y", "yapi-auto-mcp", "--stdio", "--yapi-base-url=${YAPI_BASE_URL}", "--yapi-token=${YAPI_TOKEN}"],
      "env": {"YAPI_BASE_URL": "${YAPI_BASE_URL}", "YAPI_TOKEN": "${YAPI_TOKEN}"}
    }
  }
}

Set environment variables:

export FIGMA_ACCESS_TOKEN="xxx"
export YAPI_BASE_URL="https://yapi.company.com"
export YAPI_TOKEN="123:abcdefg"

Cursor may need a restart or window reload to pick up the MCP config; check MCP logs if the tool is unavailable.

2.2 Shortest Deployable Prompt (copy‑paste)

你现在进入“可联调交付”模式。

目标：实现登录页（React + Tailwind），并对接 YApi 的登录接口。

步骤要求（必须按顺序执行）：
1) 用 MCP server `figma` 读取该页面的 Frame（我会提供 Figma Frame URL / Node ID），调用：
   - get_screenshot（用于视觉校验）
   - get_design_context（用于结构化布局信息）
   - get_variable_defs（用于颜色/字体/间距 token）
2) 用 MCP server `yapi` 获取登录接口文档：
   - 先 yapi_search_apis 搜索 path 包含 /login 或 “登录”
   - 再 yapi_get_api_desc 拉取接口详情（请求/响应 schema、错误码、示例）
3) 在代码中落地：
   - 生成 LoginPage 组件（表单、校验、loading、错误提示、禁用按钮等）
   - 生成 apiClient + login 请求封装
   - 基于接口 schema 生成 TypeScript 类型（Request/Response）
   - 给出本地联调步骤与常见错误定位
输出约束：
- 所有字段命名以接口文档为准，不要猜
- 组件结构以设计稿为准，但允许抽取可复用组件（Input/Button）
- 每一步先给我一个小结，再进入下一步

这是 Figma Frame：<URL>
这是 YApi 项目关键词：<例如：user-center>

2.3 Cursor execution walk‑through

Read Design (figma) : reports layout hierarchy, spacing, colors, input states, button hover/disabled.

Read API (yapi) : reports request fields (e.g., email/password), response structure (e.g., token/user), and error codes (e.g., 10001).

Write Code : LoginPage.tsx – form validation, error messages, loading, success redirect. api/client.ts – baseURL, interceptors, unified error handling. api/auth.ts – login() wrapper. types/yapi.ts – TypeScript types derived from the schema.

Integration Instructions : token acquisition, storage location, handling of 401/403/500, and files to update when design or API changes.

3. Using Claude Code (same MCP, different entry)

3.1 Add MCP servers via CLI

claude mcp add --transport http figma https://mcp.figma.com/mcp

claude mcp add --transport stdio yapi -- \
  npx -y yapi-auto-mcp --stdio \
  --yapi-base-url "${YAPI_BASE_URL}" \
  --yapi-token "${YAPI_TOKEN}"

Keep sensitive information in environment variables, not in config files.

3.2 Claude Code prompt (engineered task list)

实现一个登录页并可联调交付。

上下文获取：
- 用 MCP `figma` 读取 Frame：<URL>
- 用 MCP `yapi` 搜索并读取接口：关键词 /login

交付物：
1) React + Tailwind 页面
2) 基于 YApi schema 的 TS 类型
3) login 请求封装 + 错误处理策略
4) 运行说明：如何配置 baseURL、如何 mock、如何定位 400/401

约束：
- 不要自作主张添加字段；所有字段来自 YApi
- UI 尽量贴近设计稿，可抽公共组件

4. Using OpenCode (opencode.json example)

Place opencode.json at the project root and enable the two MCPs:

{
  "mcp": {
    "figma": {
      "enabled": true,
      "type": "remote",
      "url": "https://mcp.figma.com/mcp",
      "headers": {"Authorization": "Bearer ${FIGMA_ACCESS_TOKEN}"}
    },
    "yapi": {
      "enabled": true,
      "type": "local",
      "command": ["npx", "-y", "yapi-auto-mcp", "--stdio", "--yapi-base-url=${YAPI_BASE_URL}", "--yapi-token=${YAPI_TOKEN}"],
      "env": {"YAPI_BASE_URL": "${YAPI_BASE_URL}", "YAPI_TOKEN": "${YAPI_TOKEN}"}
    }
  }
}

OpenCode prompt (phase‑by‑phase)

按阶段交付一个可联调的登录功能。

阶段 A（设计理解）：用 mcp:figma 读取 Frame（截图 + 设计上下文 + token），输出 UI 结构与组件拆分建议。
阶段 B（接口理解）：用 mcp:yapi 搜索 /login 并读取接口 schema，输出请求/响应类型定义。
阶段 C（实现）：生成页面 + 请求层 + 错误处理 + loading/禁用态，保证字段完全匹配接口。
阶段 D（联调）：给出本地联调步骤、常见错误定位与回滚策略。

5. Full SOP Template (reuse for every page)

Step 0 – Project Info

Page: LoginPage Design: Figma Frame URL

API: YApi keyword or path

Step 1 – Design (figma)

Goal: obtain structured layout and design tokens. get_screenshot: visual verification. get_design_context: layout hierarchy. get_variable_defs: color, font, spacing tokens.

Step 2 – API (yapi)

Goal: obtain a schema that can generate types and validation. yapi_search_apis: locate the endpoint. yapi_get_api_desc: fetch schema, examples, error codes.

Step 3 – Code Generation (three mandatory artifacts)

Types: LoginRequest / LoginResponse Request layer: apiClient with unified error handling, timeout, retry.

Page layer: form validation, loading, error prompts, success flow.

Step 4 – Integration Delivery

How to configure baseURL and token storage.

User messages and instrumentation for 401/403/500.

Files to modify when design or API changes.

6. When This Workflow Adds Value

Best suited for UI‑heavy pages with many components and states, and for APIs with clear, complete schemas. It excels when the “read design + read API” process can be automated into a repeatable SOP.

Not recommended when design files lack componentization or have chaotic alignment, or when YApi documentation is stale, because AI will struggle with unreliable context.

AI Programming Maturity Levels

Can write code : generates snippets that may not run.

Understands the project : can modify the correct location in a repository but may lack design or API insight.

Integrated into workflow : reads design, reads API, generates types, integrates, and delivers – the value of MCP lies here.

If you already use Cursor, Claude Code, or OpenCode for AI coding, the next step is to feed critical context (Figma, YApi, GitHub, CI, monitoring) through MCP rather than switching to a larger model.