Claude Code+Kimi K2.5+figma前端页面开发

前言

月之暗面发布的Kimi K2.5在Visual Coding方面具有亮眼表现，本文章记录搭建Claude Code + Kimi K2.5 + figma mcp的开发环境。

Kimi K2.5注册

通过https://platform.moonshot.cn/console/account注册Kimi K2.5账号，并对账号进行充值。
在组织管理/API Key管理下新建一个API Key，并保留密钥后续步骤使用。

Claude Code 下载及配置

以下命令皆为Mac环境操作，window用户可自行搜索对应命令。
下载Claude Code
brew install --cask claude-code
配置Cluade Code用Kimi K2.5启动
vim ~/.zshrc
按i进行编辑，插入以下内容

# 定义一个快捷命令 ccms (Claude Code MoonShot)
ccms () {
  (
    # 1. 重定向 API 端点到 Moonshot 兼容层
    export ANTHROPIC_BASE_URL="https://api.moonshot.cn/anthropic"

    # 【修正这里】直接填入 sk- 开头的密钥，绝对不要加 Bearer 前缀
    export ANTHROPIC_AUTH_TOKEN="你的APi key"

    # 2. 映射核心模型与别名
    export ANTHROPIC_MODEL="kimi-k2.5"
    export ANTHROPIC_DEFAULT_OPUS_MODEL="kimi-k2.5-thinking" # 启用长考模式
    export ANTHROPIC_DEFAULT_SONNET_MODEL="kimi-k2.5"
    export ANTHROPIC_DEFAULT_HAIKU_MODEL="kimi-k2.5"
    export CLAUDE_CODE_SUBAGENT_MODEL="kimi-k2.5"

    # 3. 防御性配置：延长超时时间以适配 Kimi 长考，禁用可能冲突的缓存
    export API_TIMEOUT_MS="3000000"
    export DISABLE_PROMPT_CACHING="1"

    # 启动原版 claude 命令并透传所有参数
    claude "$@"
  )
}

按ESC，再按:wq结束编辑并保存
启动source ~/.zshrc让配置生效
我们输入ccms发现启动Claude Code默认是Kimi K2.5模型

Figma mcp配置

使用figma官方的mcp，功能强大，但需要授权且收费。我们可以使用开源 Figma-Context-MCP作为替代，功能少，但是具备figma核心的功能，获取figma图片和数据。
首先安装全局依赖
npm install -g figma-developer-mcp
然后配置Claude Code
vim ~/.claude.json
插入以下内容

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "figma-developer-mcp",
      "args": [
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "[YOUR_FIGMA_API_KEY]"
      }
    }
  }
}

按i进行编辑，按ESC，再按:wq结束编辑并保存
然后我们重启Claude Code，按两次Ctrl + c退出，再ccms重新启动即可。
再次进入后，我们输入claude mcp list，可以发现多了mcp工具

在使用时我们可以打开figma，选中设计稿右键选择Copy as，选择Copy link to selection，复制一个链接

然后我们在项目的终端，输入ccms，打开claude code。
我们输入提示词，便可以让claude code帮我们根据figma设计稿像素级还原页面。

运行项目可以发现设计稿得到了还原。