---
title: "swiftui-preview"
url: "https://claudemods.dev/zh-tw/builds/swiftui-preview-bef626"
source: "https://github.com/degterev/swiftui-preview-mod"
source_type: "github"
repo: "https://github.com/degterev/swiftui-preview-mod"
author: "degterev"
author_handle: "degterev"
stars: 0
category: "工具與整合"
categories: ["tools"]
tags: ["hooks", "macos", "preview", "swiftui", "xcode"]
permission_level: 2
scan_complete: true
install: "claude plugin marketplace add degterev/swiftui-preview-mod\nclaude plugin install swiftui-preview@swiftui-preview"
added: "2026-10-11T14:22:52.126Z"
updated: "2026-10-11T14:00:07Z"
locale: "zh-tw"
content_locale: "zh-tw"
---

# swiftui-preview

一個 Claude Code 外掛模組，由 Xcode 本身算繪，直接在終端機中顯示 SwiftUI 預覽。

## Description

Claude 對 `#Preview` 呼叫 Xcode 的 `RenderPreview` MCP 工具；該模組會在 **SwiftUI Preview** 窗格中顯示快照，並支援深色模式、動態字體與方向等變體。需要 macOS 與 Xcode 27、啟用 MCP、在 Xcode 中開啟專案，以及支援圖片的終端機，例如 Ghostty 或 kitty。

## Install

```
claude plugin marketplace add degterev/swiftui-preview-mod
claude plugin install swiftui-preview@swiftui-preview
```

## Original README

# swiftui-preview

A Claude Code mod that shows SwiftUI previews right in the terminal, rendered by Xcode itself.

![SwiftUI Preview pane beside a Claude Code session](docs/screenshot.png)

Claude calls Xcode's `RenderPreview` MCP tool on a `#Preview`; the mod shows the snapshot in a
**SwiftUI Preview** pane — components 1:1 in points like Xcode's canvas at 100%, whole screens
fit to the pane. Variants (dark mode, Dynamic Type, orientation), localizations and
`#Preview(arguments:)` come from `RenderPreview` itself.

## Requirements

- macOS with Xcode 27, MCP on: Settings › Intelligence › Model Context Protocol ›
  "Allow External Agents to Use Xcode Tools" = Always (or `sudo xcrun mcp-server enable`)
- The project open in Xcode
- A terminal that draws images (Ghostty, kitty)

## Install

```
claude mcp add xcode -s user -- xcrun mcpbridge
```

then, at a Claude Code prompt:

```
/plugin install swiftui-preview --marketplace degterev/swiftui-preview-mod
```

Answer `y` to add the marketplace, then pick a scope.

## Use

Ask Claude in plain words; if the file has no `#Preview`, Claude adds one.

- "show SettingsView"
- "preview the badge in dark mode at AX 3"
- "show ProfileView in Ukrainian, landscape"

The pane opens with each render, labelled with the preview, device and variant
(`Settings · iPhone 18 Pro · Dark Appearance`). When the terminal is too narrow to place it,
a toast says so; `/swiftui-preview` reopens the pane with the last render.

### Zoom

`[ − ] [ 100% ] [ + ]` beside the label zoom from 50% to 400%; click the percentage to reset.
With the pane focused (click it), `i` zooms in, `o` out, `0` resets. Zoomed in, the picture can
outgrow the pane's height, which scrolls, but never its width. The terminal passes no pinch to
apps, so a trackpad scrolls the pane but does not zoom it.

## How it sizes the picture

- The terminal's cell size is measured, so a component takes its real size in points.
- Components are never enlarged; whole-device screens fit the pane's height.
- The snapshot is padded to the pane's cell grid, so it is never stretched.

## Limitations

- Assumes a Retina (2x) display: on a 1x monitor components show twice their size.
- Xcode caps a snapshot's long side at 1500 px, so a whole screen in a very tall pane is slightly soft.
- Only the last render is kept.
- No horizontal panning: a whole screen zoomed past the pane's width stays at that width.

## Development

```
claude plugin validate .
claude plugin test .
```

## License

MIT