Ios Preview MCP

iOS预览版MCP服务器

人工智能驱动的iOS UI开发工具，允许Claude Code构建SwiftUI视图并捕获屏幕截图以进行迭代审查。

这有什么作用

为Claude Code提供以下工具：

• 📸 构建并截图独立的SwiftUI视图
• 🔍 直观地查看UI布局
• 🔄 快速迭代设计更改
• 📱 不同设备尺寸的测试视图

快速开始

1.安装先决条件（5分钟）

# Install uv (modern Python package manager)
curl -LsSf https://astral.sh/uv/install.sh | sh

# Install FastMCP
uv pip install fastmcp

# Verify Xcode is installed
xcode-select --install  # Run only if needed

2.设置您的iOS项目（10分钟）

添加swift快照测试包

在Xcode中：

1. File → 添加包依赖关系
2. 输入： https://github.com/pointfreeco/swift-snapshot-testing
3. 添加到您的测试目标

添加快照测试文件

1. 复制 ViewSnapshotTests.swift 从这个仓库到你的测试目标
2. 更新 @testable import MyApp 匹配应用程序的模块名称
3. 构建项目以验证其是否可编译

查找您的项目详细信息

MCP工具需要这些值：

# From your Xcode project directory:

# 1. Workspace/Project path (use ONE of these):
ls *.xcworkspace  # If you have a workspace
ls *.xcodeproj    # If you only have a project

# 2. Scheme name:
xcodebuild -list  # Look under "Schemes:"

# 3. Test target name:
xcodebuild -list  # Look under "Targets:" for your test target

输出示例：

Workspace: MyApp.xcworkspace
Scheme: MyApp
Test Target: MyAppTests

3.配置克劳德代码

在iOS项目根目录中，创建 .mcp.json:

{
  "mcpServers": {
    "ios-preview": {
      "command": "uv",
      "args": [
        "run",
        "--with",
        "fastmcp",
        "/Users/Noah/Documents/GitHub/ios-preview-mcp/server.py"
      ]
    }
  }
}

注： 这 .mcp.json 文件应该放在项目目录的根目录下（ .xcodeproj 文件已定位）。

4.重新启动克劳德代码

添加配置后，重新启动Claude Code以使更改生效。

用法

工作流示例

构建新视图：

User: Build me a profile screen with a circular avatar, name, and bio
Claude: [Creates ProfileView.swift]
Claude: [Adds testProfileView() to ViewSnapshotTests.swift]
Claude: Let me see how this looks...
Claude: [Calls build_and_screenshot tool]
Claude: [Views the screenshot]
Claude: The avatar is looking good, but the spacing between name and bio is too tight.
        Let me adjust that...
Claude: [Fixes padding]
Claude: [Screenshots again to verify]
Claude: Perfect! Here's your ProfileView.

可用工具

build_and_screenshot

构建一个特定的视图并捕获其屏幕截图。

参数：

• view_name （必填）：视图名称，例如“ProfileView”
• workspace_path （必需）：指向.xcworkspace或.xcodeproj的路径
• scheme （必填）：Xcode方案名称
• test_target （必填）：测试目标名称
• device （可选）：模拟器设备，默认“iPhone 15 Pro”
• snapshots_dir （可选）：快照目录，默认“/__快照__"

例子：

build_and_screenshot(
    view_name="ProfileView",
    workspace_path="/Users/Noah/MyApp/MyApp.xcworkspace",
    scheme="MyApp",
    test_target="MyAppTests"
)

list_simulators

列出所有可用的iOS模拟器设备。

例子：

list_simulators()

quick_screenshot

快速截图当前运行的模拟器（无重建）。

参数：

• device （可选）：模拟器设备名称，默认“iPhone 15 Pro”

例子：

quick_screenshot(device="iPhone 15 Pro")

添加新视图

当Claude构建一个新的SwiftUI视图时，它需要添加一个相应的测试方法：

// In ViewSnapshotTests.swift
func testMyNewView() {
    let view = MyNewView()
    let controller = UIHostingController(rootView: view)
    controller.view.frame = standardFrame

    assertSnapshot(of: controller, as: .image)
}

重要提示： 测试方法名称必须为 test{ViewName} （例如。， testProfileView 为了 ProfileView).

故障排除

“构建失败”错误

检查构建日志：

cd /path/to/your/ios/project
xcodebuild test \
  -workspace MyApp.xcworkspace \
  -scheme MyApp \
  -destination 'platform=iOS Simulator,name=iPhone 15 Pro' \
  -only-testing 'MyAppTests/ViewSnapshotTests/testContentView'

常见问题：

• ViewSnapshotTests.swift中缺少导入语句
• 视图初始化器需要参数
• 模块名称不正确 @testable import

“未找到截图”错误

测试通过了，但截图不符合预期。这通常意味着：

• 首次运行-快速快照测试创建快照
• 快照目录已移动
• 工作目录与预期不同

手动查找快照：

find /path/to/project -name "testMyView.1.png"

模拟器无法启动

重置模拟器：

xcrun simctl shutdown all
xcrun simctl erase "iPhone 15 Pro"
xcrun simctl boot "iPhone 15 Pro"

MCP服务器未加载

检查克劳德代码日志：

1. 打开克劳德代码
2. 检查控制台中的MCP连接错误
3. 验证路径 server.py 配置正确

直接测试服务器：

cd /Users/Noah/Documents/GitHub/ios-preview-mcp
uv run --with fastmcp python server.py
# Should start without errors

运作原理

1. Claude创建SwiftUI视图 在您的项目中
2. Claude添加了快照测试 对于这种观点
3. 克劳德打电话来 build_and_screenshot 包含您的项目详细信息
4. MCP服务器运行 xcodebuild test 在那个特定的测试中
5. 快速快照测试 捕获PNG屏幕截图
6. MCP服务器返回路径 到屏幕截图
7. Claude使用读取工具 查看PNG
8. 克劳德检查布局 并在需要时迭代

业绩说明

• 首次构建： 30-90秒（完整编译）
• 后续版本： 15-30秒（递增）
• 无代码更改： 5-10秒（仅测试）

这对于迭代式审查是可以接受的，但不是严格的反馈循环。为了快速迭代，请使用 quick_screenshot 在运行中的应用程序上。

文件结构

ios-preview-mcp/
├── server.py                              # MCP server implementation
├── ViewSnapshotTests.swift                # iOS test template
├── README.md                              # This file
└── .mcp.json.example                      # Config example

鸣谢

专为Claude Code构建，可实现具有视觉反馈的自主iOS UI开发。

使用：

• FastMCP -Python MCP框架
• 快速快照测试 -快照测试库