Calude Code + Stitch + Figma MCP跑通全链路

风流少年

82人浏览 · 2026-03-27 18:49:45

风流少年 · 2026-03-27 18:49:45 发布

一：简介

Google Stitch 是由Google Labs 推出的一款原生AI 设计工具。它通过将自然语言提示、手绘线框图或界面截图，自动转化为可编辑的用户界面，并生成可用于生产环境的前端代码，从而打通设计与开发之间的流程断层。具有以下能力：

文字生成 UI — 描述页面结构，自动生成
设计系统 — 自动生成配色、字体、圆角等完整 Design System
编辑现有页面 — 选中一个屏幕，用文字描述修改内容
生成变体 — 对现有设计生成多种风格版本
导出代码 — 每个设计稿都是 HTML + CSS，可以直接用

在这里插入图片描述

二：小试牛刀

2.1 生成页面

选择应用，输入提示词。

设计一个短视频App，包含登录页面，首页，我的等页面

在这里插入图片描述

2.2 设置MCP

导出-设置MCP。
在这里插入图片描述
选择对应的客户端如Calude Code 生成密钥，然后复制密钥即可。

复制出来的命令不能直接执行，这里是直接配置的~/.claude.json。

"mcpServers": {
    "stitch": {
      "type": "http",
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "<你的密钥>"
      }
    }
  }

在这里插入图片描述
配置后重启Claude Code

create_project 创建新项目
get_project 查看项目详情（含完整设计系统）
list_projects 列出所有项目
list_screens 列出项目中的所有屏幕
get_screen 查看某个屏幕的详情
generate_screen_from_text 文字生成新屏幕
edit_screens 编辑现有屏幕
generate_variants 生成设计变体
create_design_system 创建设计
update_design_system 更新设计
list_design_systems 列举设计
apply_design_system 申请设计

2.3 使用Claude Code修改Stitch页面

使用stitch mcp修改所有页面的风格为“咸鱼App”对应的风格

在这里插入图片描述
刷新页面

2.4 导出Figma

选中需要导出的页面，导出成Figma，直接复制，然后在Figma上新建个Design，然后直接粘贴即可。
在这里插入图片描述

在这里插入图片描述

三：生成代码

通过Figma MCP直接生成代码。打开开发模式，

在这里插入图片描述
设置MCP Server，选择对应的客户端Claude Code

# 安装插件
claude mcp add --transport http figma https://mcp.figma.com/mcp

在这里插入图片描述
figma需要认证，输入/mcp找到figma回车，然后选择Authentication就会打开页面点击同意Agree即可，认证完成后状态为connected。

在这里插入图片描述
认证成功这里会显示

使用vue + typescripe + npm 创建一个vue项目，
并使用Figma mcp 实现所有页面 https://www.figma.com/design/IKwlzKuWBsBdS9vKW9oAP0/Untitled?node-id=0-1&p=f&m=dev,
实现完成后运行该项目

在这里插入图片描述

四：UI工具比较

维度	Figma	Pencil	Stitch
类型	专业 UI 设计工具（云端）	`.pen` 文件编辑器（本地）	AI 驱动的 UI 生成平台（云端）
文件格式	`.fig`（Figma 专有）	`.pen`（加密格式，仅通过 MCP 工具读写）	云端项目，无本地文件
核心能力	矢量设计、原型交互、组件库、变量/主题系统、多人协作	节点级精细操控（插入/复制/更新/替换/移动/删除）、设计系统组件、布局检查	文本生成 UI、AI 编辑页面、设计系统管理、主题批量应用、变体生成
设计方式	手动拖拽 + 手动调整属性	通过代码式操作（batch_design）精确控制节点	自然语言 prompt 驱动 AI 自动生成/编辑
设计系统	Variables、组件变体、样式库	可复用组件（reusable nodes）、变量与主题	内置 Design System（颜色、字体、圆角、明暗模式一键配置）
AI 能力	需借助插件（如 Figma AI）	通过 MCP 工具 + 风格指南（style guide）辅助设计	原生 AI 核心：文本生成页面、AI 编辑、AI 变体生成
批量操作	需手动或插件	`replace_all_matching_properties` 批量替换属性	`apply_design_system` 一键将主题应用到所有页面
代码生成	开发模式（Dev Mode）查看 CSS/代码	支持通过 guidelines 获取代码规范（code topic）	每个 screen 自动生成 HTML 代码，可直接下载
协作方式	多人实时协作、评论、版本历史	单文件本地操作	项目级管理，支持 owned/shared 项目
适用场景	完整 UI/UX 设计流程、团队协作、交付开发	精细节点控制、程序化设计、自动化批量修改	快速原型、AI 驱动快速迭代、主题/风格批量切换
上手难度	中等（需学习工具操作）	较高（需理解节点结构和操作语法）	最低（用自然语言描述即可）
灵活度	最高（像素级控制）	高（节点级精确操控）	中等（AI 生成，精细调整能力有限）
典型操作	手动绘制界面、创建组件、设置交互	`batch_design` 插入/更新节点、`get_screenshot` 验证	`generate_screen_from_text` 生成页面、`edit_screens` 编辑