figma

类似国产蓝湖，mastergo等UI设计，团队协作UI应用，但是它的性能比国产好太多了，界面上页面再多也不卡，国内访问不了哈，需要梯子

下载figma客户端

Figma Downloads | Web Design App for Desktops & Mobile

不要用网页版，因为客户端有MCP可以用，AI可以才可以没限制地访问。

如果你不能用，你也可以采用粘贴图，让AI帮你实现。我是windows电脑

安装好，运行，你可以用谷歌账号登录，也可以自己注册其他的

打开一个figma项目，找到一个AI需要写的页面，切换为代码模式

当然figma装完插件能帮你转换为代码，我们这次不用这个，因为没有xaml的插件

Figma准备工作到此

ClaudeCode

Claude

你理解为一个人，更擅长写代码的人，它的大脑你用它官方自带的就要付费，免费的只能用网页，如果让它修改你的代码文件，帮你用git提交合并代码，你得付费。你也可以选择opencode

一个默认就可以聊天，类似豆包一样了，我们需要选择模型（LLM），也就是AI的大脑，不同的大脑擅长的事情也不一样，默认提供

当然你也可以指定其他的大脑，这个需要付费，待会我们用一个免费的，默认送2000w个token，那么token是啥，就是回复你的文字量，基本够你学习用了。我们虽然不用它大脑，但是它也可以读https连接，分析图，认识代码文件等

安装

前提安装：

安装最新版本的 Node.js ，我安装vs时候就安装了nodejs，地址： https://nodejs.org/en/download/

 Git for Windows，地址： https://git-scm.com/install/windows

然后：

打开vs2026，打开上节课Ch1_1项目，网络必须是非大陆，台湾和香港的

新建个窗口

打开开发者 PowerShell

输入后回车：winget install Anthropic.ClaudeCode

注意上方的目录，是我项目当前的

稍等会

接着输入claude，有反应就行。

配置Model

注册

我选择了智谱BigModel,它的GLM 4.7 先用下，更聪明的还有付费的，

不同的模型干的事不一样，有的更擅长画画，有的擅长写作等等

通过我的链接注册下

https://www.bigmodel.cn/invite?icode=Qb3ybRT18jRm2wtvrxZaZf2gad6AKpjZefIo3dVEQyA%3D

注册完成后，注册个添加个API Key

继续打开刚刚vs的那个开发者powershell

安装

输入npx @z_ai/coding-helper

中文，选择中国版，Claude Code，ApiKey就是你刚刚在智谱注册新增的API Key，那个一步一步配置，配置完成后，还可以再输入npx @z_ai/coding-helper，就可以看到这个界面，方便下次修改

到此已经完成，后面升级大脑，也就是换个key，选择API Key,可以换。

编写代码

打开Ch1_1项目，打开开发者powershell,输入claude回车

按照步骤来，选择1，信任当前文件夹

注意上方的文件夹路径，如果不是，自己用cd命令切换进去，要是你项目的代码的根文件夹

项目生成代码解说

我让他当前项目生成代码解说，然后按下回车

它的回答，刚刚看到消耗了4000多个token了

把WindowAIDemo.xaml设置为启动页

按下回车，文件被修改了

GIT提交下

我们通过SourceTree看下它写的提交备注

他也给我了一个我下一步可能要操作的步骤，推送到云端

当然这些简单的事，我们就不要浪费token了，自己操作就行了哈。

MCP与Claude一起写代码

我们说了一个自己软件能被大模型访问，就要自己写MCP服务器，比如figma写了个mcp服务，我们打开figma，我们这边Figma使用是，产品经理用Google AI Studio画产品原型图，然后交互师出交互图，UI同学出静态图，而我用claude画界面，然后微调..

figma客户端启动mcp服务

 

Prompt

这玩意就是提示语，在大模型（LLM）会转换为向量，去向量数据库查询，然后给你回复

在Claude配置figma的mcp

经过谷歌下

我操作下：

我自己临时做个笔记，不用操作

MCP 基础管理命令
在开始配置之前，先了解 Claude Code 中 MCP 的基本管理命令：

# 列出所有已配置的服务器
claude mcp list

# 查看特定服务器的详细信息
claude mcp get github

# 删除服务器
claude mcp remove github

# 在 Claude Code 中检查服务器状态
/mcp

添加远程 HTTP 服务
对于远程 HTTP MCP 服务，可以使用以下命令：

# 基础添加命令
claude mcp add --transport http <name> <url>

# 示例：连接到本地 HTTP MCP 服务器
claude mcp add --transport http my-server http://localhost:8080/mcp

# 需要认证时使用 --header 参数
claude mcp add --transport http secure-api https://api.example.com/mcp \
  --header "Authorization: Bearer your-token"

添加figma的MCP

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

经过1分钟，我选择了第二个，以后这个目录添加mcp不要再询问

你的项目文件夹根目录有个文件

这里可以配置mcp

在VS中写代码

 单击Copy example prompt

打开vs的开发者powershell

我选择第3个，它想访问web方式，这种肯定要登录账号的，不行，而且还有限制。

经过一顿问，他需要我重启powershell

重启后，输入mcp查看，需要授权

按下回车，选择1，继续回车，会打开浏览器登录figma

点击Agree

开始AI写代码之旅

HelloWorld

接着问它

我选择第二个，让他不要再提醒我，如果想局部写代码，你可以告诉它在某某文件，第多少行开始写代码，或者你写注释，让他把那个注释实现成代码，当然这不仅仅写前端的哈

你也可以新建个安卓项目，ios项目，同样的方式帮你写app，写小程序等，这要看你的模型强度厉不厉害。

看着这个token的消耗，都是money啊，当然我这里是免费尝试学习用的。

由于交互图是静态的，它不知道鼠标移入，按下是什么样子的，你需要继续告诉它，它会帮你完成的

在你现有项目上写代码

首先在你源码上，你要教它，有哪些样式，是干什么的，而且你也可以让他参考哪些文件，然后去写效果，在哪里写，这样ai的风格就和你一样了，最后越来越聪明。你也可以把效果图截图放入某个文件夹，你指定文件路径，让claude帮你去实现UI都是可以的，指定编写计划的文档，你可以用md去写文档，然后它去帮你实现，不然在终端问有点太慢了。

---

下节课，我们利用AI帮我们搭建多目标库输出，建立自己的UI库项目，开始写控件，使用控件