Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Render SwiftUI #Preview as PNG images, so an AI agent sees the views it changes
使っているAIアプリを選んで、設定をコピーしてください。
チェック 3/3 合格 · あなたのパソコンで動きます
まず:どの AI を使っていますか?
使っているアプリを選ぶと、下に手順が表示されます。
Claude につなげますが、先に準備が必要です
キー不要、インストール不要 · パソコン版 Claude アプリ(Windows または Mac)のみ。Web やスマホでは使えません
Prefire を使って、私に何ができるか教えて、1 つやってみせて✓ Claude が Prefire を使っていると言うか、回答に Prefire のツール名が出れば接続成功です
メニュー名は 2026年11月11日 に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります
ChatGPT はまだ Prefire につなげません
Prefire はパソコンに入れて使うものですが、ChatGPT は Web 上で動くサーバーにしかつなげません
A · Prefire につなげるアプリを使う
B · デザイン・画像・音声 の中で ChatGPT につなげる別のサーバー
同じカテゴリでよく使われているものから、キーなしでアドレスだけでつなげるものを選びました
Claude Code はまだ Prefire につなげません
提供元はパソコン版 Claude アプリ用のインストールファイルしか用意していません
A · Prefire につなげるアプリを使う
Cursor はまだ Prefire につなげません
提供元はパソコン版 Claude アプリ用のインストールファイルしか用意していません
A · Prefire につなげるアプリを使う
VS Code はまだ Prefire につなげません
提供元はパソコン版 Claude アプリ用のインストールファイルしか用意していません
A · Prefire につなげるアプリを使う
mcpb: …/prefire-mcp-6.6.1.mcpbこのサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。
パソコン上で動かせるアプリ
ClaudeGooseLM StudioMsty StudioCherry StudioVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月15日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント BarredEwe で確認済みです
コードの最終更新:一昨日
Apache-2.0を使用
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。
まだレビューはありません
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック3項目のうち3項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は一昨日、最新バージョン(6.6.1)がレジストリに届いたのは一昨日です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにMCPBも必要です。
同じカテゴリには:Figma Context MCP, AutoClip, Next AI Draw.io
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:↓ 週あたりのダウンロードi★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
Quick Start · Installation · Usage · AI agents · Configuration · Docs · Website
Your previews are already tests. Prefire turns the #Preview blocks you write anyway into snapshot tests, a Playbook catalog and images your AI agent can see. You don't write a line of test code.
📸 Snapshot tests Every preview becomes a snapshot test on the devices you pick. A changed padding fails the build, not the release.
How it works →
📚 Playbook A catalog of every component and user story inside your app, with their states and render times.
See Playbook →
🤖 Renders for AI agents Claude Code, Cursor and Codex render your previews through an MCP server and see the UI they just changed.
Set up →
🤖 Using an AI agent?
brew install barredewe/prefire/prefire, thenclaude mcp add prefire -- prefire mcpin your project. The agent renders SwiftUI previews on any iPhone or iPad, light or dark, without Xcode Previews. Setup →
#Preview, @Previewableprefire render and an MCP serverUIView/UIViewController and NSView/NSViewController📦 Example project available at: Prefire Example
// Package.swift
dependencies: [ .package(url: "https://github.com/BarredEwe/Prefire.git", from: "6.3.0"), .package(url: "https://github.com/pointfreeco/swift-snapshot-testing", from: "1.18.0"), ], .testTarget( dependencies: [ .product(name: "Prefire", package: "Prefire"), .product(name: "SnapshotTesting", package: "swift-snapshot-testing"), ], plugins: [ .plugin(name: "PrefireTestsPlugin", package: "Prefire") ] )
#Preview#Preview {
Button("Submit") }
Just run the test target 🚀 — Prefire will auto-generate snapshots based on your previews.
💡 If your test target is empty, Prefire will still generate files and snapshot code during build.
| Method | How |
|---|---|
| SPM Plugin | PrefireTestsPlugin / PrefirePlaybookPlugin in Package.swift |
| Xcode Build Tool Plugin | Add PrefireTestsPlugin to the test target's build phases |
| CLI | brew install barredewe/prefire/prefire |
| Mint (*Beta*) | mint install BarredEwe/Prefire |
| GitHub Actions / CI | Any of the above, see Troubleshooting |
Step-by-step setup is in the Installation guide.
Prefire finds every `#Preview` automatically. For PreviewProvider, add the PrefireProvider protocol:
struct Text_Previews: PreviewProvider, PrefireProvider {
static var previews: some View { ... } }
Exclude a preview with .prefireIgnored():
#Preview {
Text("") .prefireIgnored() }
To opt in instead of opting out, set preview_default_enabled: false in .prefire.yml and mark the previews you want with .prefireEnabled():
#Preview {
Text("") .prefireEnabled() }
PrefireTestsPlugin generates the tests into the DerivedData folder when the test target builds. Run the test target as usual.
Tune the timing and precision of a single snapshot:
#Preview {
TestView() .snapshot(delay: 0.3, precision: 0.95, perceptualPrecision: 0.98) }
For previews that load or animate, wait instead of guessing a delay:
.snapshot(waitForIdle: true) // until nothing changes on screen
.snapshot(waitUntil: { viewModel.isLoaded }) // until a condition is true
How waiting works, its limits and how the modifiers combine: Snapshot timing and precision.
Snapshots are compared with swift-snapshot-testing.
Show all previews as an interactive catalog with PlaybookView:
isComponent: true lists all the ViewsisComponent: false groups them by UserStoryimport Prefire
struct ContentView: View { var body: some View { PlaybookView(isComponent: true, previewModels: PreviewModels.models) } }
To keep previews and PreviewModels out of release builds, see Excluding previews from release builds.
Connect previews into one Flow with .previewUserStory. Playbook shows them together, in order:
static var previews: some View {
PrefireView() .previewUserStory(.auth) }
static var previews: some View { AuthView() .previewUserStory(.auth) }
If a preview contains more than one View, mark the State of each:
static var previews: some View {
TestView("Default")
TestView("Loading") .previewState(.loading) }
Prefire expands each argument of a native SwiftUI parameterized preview into its own snapshot and Playbook preview:
#Preview("TextView", traits: .sizeThatFitsLayout, arguments: ["- A", "- B", "- C"]) { suffix in
Text("1 \(suffix)") }
| Feature | Modifier |
|---|---|
| Include in snapshot | .prefireEnabled() |
| Exclude from snapshot | .prefireIgnored() |
| Group in a flow | .previewUserStory(.auth) |
| Mark a UI state | .previewState(.error) |
| Customize snapshot | .snapshot(delay: 0.3, precision: 0.95) |
| Wait until the preview settles | .snapshot(waitForIdle: true, timeout: 2.0) |
| Wait for a condition | .snapshot(waitUntil: { viewModel.isLoaded }) |
| Parameterized preview | #Preview(..., arguments: values) |
# Generate snapshot tests
prefire tests
prefire playbook
Run prefire tests --help or prefire playbook --help for more options.
Prefire renders previews in its snapshot tests, built anew and on the devices you choose, so it can show them to an AI agent as images, which Xcode Previews can't do reliably outside Xcode.
# Render previews to PNG + JSON
prefire render "Sign in" --device "iPhone 16 Pro" --color-scheme dark
prefire board
Add the MCP server to your agent, from the folder with .prefire.yml:
| Agent | Install |
|---|---|
| Claude Code | claude mcp add prefire -- prefire mcp, or the plugin with a skill: /plugin marketplace add BarredEwe/Prefire then /plugin install prefire@prefire |
| Cursor | |
| Codex | codex mcp add prefire -- prefire mcp |
| VS Code | code --add-mcp '{"name":"prefire","command":"prefire","args":["mcp"]}' |
An agent then calls list_previews, render_previews and build_board. Set the scheme to build in render_configuration of .prefire.yml; see the AI guide. Why not Xcode's own RenderPreview? Prefire needs no running Xcode, renders many previews in one build, on the devices, color scheme and Dynamic Type you ask for, and works in CI.
.prefire.ymltest_configuration:
target: MyApp
playbook_configuration: preview_default_enabled: true
All options are in the Configuration guide. To change the generated code, see Templates.
#Preview and PreviewProvider blocks and the .prefireEnabled() / .prefireIgnored() modifiersStencil templates, respecting .prefire.ymlUserStory and State into PreviewModels.generated.swift