flyu

本地デザインファイルクライアント:Sketch / Figma のデザインファイルを統一 DSL v3 に解析し、内蔵 MCP(HTTP、アプリ起動とともに起動)を Cursor / Claude に公開します。AI がデザイン稿を直接確認し、コードを作成し、修正し、書き出し画像(切図)を取得できるようにします。

デモ

https://github.com/user-attachments/assets/51cc93c6-8413-4c3b-8bfd-7fd135e26a3c

ライセンス:MIT。サードパーティの声明は NOTICE.md を参照。セキュリティ開示は SECURITY.md を参照。コントリビューションは CONTRIBUTING.md を参照。

Sketch / Figma のファイル形式と商標は、それぞれの権利者に帰属します。本プロジェクトはユーザーのローカル環境で、あなたがインポートした .sketch / .fig を解析するものであり、ベンダーライセンスは含まれません。また、Figma, Inc. や Sketch B.V. との関連を主張するものではありません。各社のサービス利用規約を遵守し、利用権のあるデザインファイルのみをインポートしてください。.fig のデコード実装は crates/fig-kiwi-rs にあります。

利用者向けドキュメントは docs/user-guide.md(インストール / 機能 / 対話例 / トラブルシューティング)を、MCP ツールの詳細は docs/write-tools-guide.md を参照してください。

Related MCP server: figma-opencode-mcp

開発

pnpm install        # 安装依赖(postinstall 会把 better-sqlite3 编到 Electron ABI)
pnpm dev            # 启动 Electron + HMR
pnpm typecheck      # 类型检查(main + renderer + mcp + tests)
pnpm lint           # ESLint
pnpm test           # 单元 + 契约测试(tsx --test)
pnpm test:visual    # 渲染像素回归(改 import/render 后必跑)
pnpm build          # 构建到 out/(含 main/preload/renderer/mcp)
pnpm dist           # 打本机未签名 mac 双架构(arm64 + x64).dmg → release/

パッケージング(macOS ローカルの未署名)

pnpm dist           # build + electron-builder → release/flyu-*-mac-arm64.dmg + flyu-*-mac-x64.dmg
pnpm dist:dir       # 只打 arm64 .app 到 release/mac-arm64/(便于调试)

デュアルアーキテクチャ:electron-builder はターゲットアーキテクチャごとに個別にパッケージします。better-sqlite3 はそれぞれのアーキテクチャ向けに再ビルドします(arm64 ホストでの x64 クロスビルドは検証済み)。

成果物は未署名パッケージ(identity: null)で、インストール後のアプリ名は「非鱼」です。ローカルで開く際に Gatekeeper にブロックされた場合は: 右クリック → 開く。実行中の pnpm dev とは同時に起動しないでください(シングルトンロックにより、2 番目のプロセスは即座に終了します)。

MCP Server

接続方法は 2 種類あり、同じ tools/prompts を共有します(29 個の Tool + 4 個の Prompt)。

• HTTP(推奨):クライアント内蔵の Streamable HTTP で、アプリ起動とともに起動します。設定 → MCP 使用設定 → コピー(URL + Bearer token)。ポートはデフォルト 32677 で永続化され、使用中間の場合のみ次のポートに繰り下げます。token は userData/mcp-token(0600)に永続化され、再生成できます。

• stdio(代替、ローカルに Node が必要):node out/mcp/server.js。DB が存在する必要があります(クライアントを少なくとも 1 回は起動していること)。

stdio エントリのビルド

pnpm mcp:build      # esbuild 打包到 out/mcp/server.js
pnpm mcp:dev        # tsx 直跑(调试用)

検証(JSON-RPC による手動テスト)

echo '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2024-11-05","capabilities":{},"clientInfo":{"name":"test","version":"1.0"}}}' | pnpm mcp:dev

serverInfo: { name: "flyu-design", version: "1.0.0" } が返されます。

macOS ローカル開発の落とし穴(デュアル ABI + コード署名)

1. ABI の切り替え: better-sqlite3 は、同時に 1 つの runtime 用にしかビルドできません。

   • Electron で使う:pnpm rebuild(electron-rebuild を使用)

   • Node で直接実行する場合(MCP デバッグ / tsx テスト):cd node_modules/.pnpm/better-sqlite3@*/node_modules/better-sqlite3 && ./node_modules/.bin/prebuild-install -r node

   • 症状:誤った runtime でビルドすると、NODE_MODULE_VERSION 137 vs 137 のようなエラーが報告されます。

2. コード署名:npm から取得した prebuilt .node は macOS 26+ では AMFI により Invalid Page で強制終了されます(SIGKILL、exit 137、stderr は空)。対処法:

codesign --remove-signature node_modules/.pnpm/better-sqlite3@*/node_modules/better-sqlite3/build/Release/better_sqlite3.node
codesign --force --sign -       node_modules/.pnpm/better-sqlite3@*/node_modules/better-sqlite3/build/Release/better_sqlite3.node

prebuild-install を実行するたびにやり直す必要があります。今後のパッケージングでは electron-builder の afterSign フックで自動化します。

ディレクトリ構成

src/
├── main/           Electron 主进程(DB / IPC / 渲染 / 导入导出)
│   ├── import/     双通道导入:sketch-*(.sketch)/ fig-*(.fig 本地,@open-pencil/core)
│   │               + html-to-dsl(HTML 生成)、collect-tokens(共享令牌统计)
│   ├── render/     渲染调度(fig 走 Skia 直渲;sketch 走 DSL→HTML→Chromium)
│   ├── export/     dsl-to-jsx / dsl-to-fig / vector-to-svg / code-snippets / cut-cache
│   ├── tokens/     设计令牌(L1 命名令牌 / L3 组件令牌 / tokenize)
│   ├── db/         SQLite(writers / write-ops / write-docs / restyle / migrations)
│   └── ipc/        渲染进程桥(files / folders / explorer / mcp-config / library)
├── preload/        contextBridge 桥
├── renderer/       React + AntD UI
├── mcp/            MCP Server:server.ts(stdio)+ tools.ts(聚合器)+ tools-*.ts(8 个域模块)
├── shared/         三端共享(DSL v3 类型 / IPC 通道 / 错误码 / 路径)
└── native/         fig-kiwi WASM(由 crates/ 编译)

crates/             Rust 原生(.fig Kiwi 解码)
resources/          打包图标 icon.png / icon.icns
docs/               用户教程 / 写能力设计与工具文档
scripts/            正式脚本(icons / wasm / 视觉回归)
tests/              单元与契约测试

ローカル実行時データはユーザーディレクトリ(~/Library/Application Support/flyu)と任意の .tokensave/(gitignore 済み)に置かれ、ビルド成果物は out/ に置かれます。

現在の状態

• デュアルチャネルでのインポート:.sketch / .fig をローカルで処理(@open-pencil/core)

• 統一 DSL v3 + SQLite への保存 + バージョングループ

• レンダリング:fig は Skia で直接描画。sketch/ai は Figma DSL → HTML → Chromium。degraded は明示的に報告

• MCP 29 Tool + 4 Prompt(ナビゲーション / データ / ビジュアル / コード / スライス書き出し / 書き込み操作 / セマンティック編集)

• 書き込み機能:トランザクション化された apply_operations / restyle_*(dryRun) / create_from_html / fork_document / claim rollback

• エクスポート:get_html(単一の自己完結型ファイル)/ get_code(JSX+Tailwind、vw/rem/tokenize)/ export_fig(.fig の非公式相互運用)/ download_assets(SVG/PNG/元図)

• デザイントークン:L1 命名トークン(fig variables / sketch ルール、CSS/DTCG 書き出し)+ L3 コンポーネントトークンのカバレッジ確認

• Windows / Linux のインストーラ(設定は済み、未発表)