---
title: "swiftui-preview"
url: "https://claudemods.dev/ko/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: "ko"
content_locale: "ko"
---

# swiftui-preview

Xcode 자체가 렌더링하여 터미널에서 바로 SwiftUI 미리보기를 보여주는 Claude Code 모드입니다.

## Description

Claude는 `#Preview`에 대해 Xcode의 `RenderPreview` MCP 도구를 호출합니다. 이 모드는 스냅샷을 **SwiftUI Preview** 창에 표시하며, 다크 모드, Dynamic Type, 방향 같은 변형을 지원합니다. 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