# AI エージェントを通じてコードとキャンバスを接続するデザインツール Paper を試してみた [Paper](https://paper.design/) は Web 標準に基づいて構築されたデザインツールです。AI エージェントを通じてキャンバスからコードに変換し、そしてまたコードからキャンバスに同期するという双方向のワークフローを提供しています。デザインにおける典型的なタスクを AI エージェントに任せることで、より創造的な作業に集中できるようにすることが Paper の目的の 1 つです。 この記事では実際に Paper を試してどのようにコードとキャンバスを接続するワークフローが実現されているのかを紹介します。 ## Paper を始める Paper にはブラウザ版とデスクトップ版があります。Paper と AI エージェントを接続するための MCP サーバーはデスクトップ版でのみ利用できるので、今回はデスクトップ版を使用しています。https://paper.design/downloads から OS に合ったバージョンをダウンロードしてインストールしてください。 ![](https://images.ctfassets.net/in6v9lxmm5c8/7COYYSwpIIFyt6JZywSSJP/3a071809ada4ae8c3bb196aac1b4ff86/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2026-02-26_19.53.40.png) Paper を起動したら Sign in 画面が表示されるので、アカウントを作成してサインインしてください。 ![](https://images.ctfassets.net/in6v9lxmm5c8/1CrNzCX750ARuYOUB9DOLu/0661f97c7c2d126360033b39b209ff29/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2026-02-26_19.57.22.png) サインインが完了すると、サンプルのキャンバスが表示されます。左側のサイドバーにはレイヤーの構造が表示され、右側のサイドバーにはプロパティパネルが表示されていて、一般的なデザインツールと同様の UI になっています。 ![](https://images.ctfassets.net/in6v9lxmm5c8/78CAXynSSryn6A5ApPEMU0/9edd97966746fae4437d60251eb5d52b/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2026-02-26_19.59.24.png) ## Claude Code と接続してデザインを作成する AI エージェントを使用したワークフローを試すために、Paper を Claude Code と接続してみましょう。以下のコマンドをターミナルで実行して、Paper の MCP サーバーを Claude Code に登録します。 ```bash claude mcp add paper --transport http http://127.0.0.1:29979/mcp --scope user ``` Claude Code を起動して `/mcp` コマンドを実行すると、Paper の MCP サーバーがリストに表示されているのがわかります。 ![](https://images.ctfassets.net/in6v9lxmm5c8/3kRe1VZ6fdXutOoc81LGMx/89fbee9c23fb5ba68371db0dd94c08d4/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2026-02-26_20.05.55.png) Paper の MCP サーバーでは以下のツールが提供されています。 - get_basic_info — ファイル名、ページ名、アートボード一覧、使用フォントなどの基本情報を取得 - get_selection — 現在選択中のノードの詳細情報を取得 - get_node_info — 指定 ID のノードの詳細情報（サイズ、表示状態、親子関係、テキスト内容など）を取得 - get_children — 指定ノードの直接の子ノード一覧を取得 - get_tree_summary — ノードのサブツリー階層をコンパクトなテキストで表示 - get_screenshot — 指定ノードのスクリーンショットを撮影 - get_jsx — ノードの JSX コード表現を取得（Tailwind / inline-styles） - get_computed_styles — ノードの算出済み CSS スタイルを取得（バッチ対応） - get_fill_image — 画像フィルを持つノードから画像データを抽出 - get_font_family_info — フォントファミリーの利用可否・ウェイト・スタイル情報を確認 - get_guide — 特定トピックの詳細ガイドを取得（例: Figma インポート手順） - create_artboard — 新しいアートボード（トップレベルフレーム）を作成 - write_html — HTML を解析してデザインノードとして挿入（insert-children / replace モード） - update_styles — ノードのスタイルを更新（バッチ対応） - set_text_content — テキストノードの内容を変更（バッチ対応） - rename_nodes — レイヤー名を変更（バッチ対応） - duplicate_nodes — ノードを複製（子孫含むディープクローン） - delete_nodes — ノードを削除（子孫も含む） - finish_working_on_nodes — 編集中インジケーターを解除（作業完了時に呼ぶ） 実際に Claude Code を使用して新しいデザインを作成してもらいましょう。Paper デスクトップ上で新しいキャンバスを作成して、Claude Code で以下のプロンプトを送信してみてください。 ```txt Paper MCP サーバーでミニマル・モダンなシングルページのポートフォリオを作成して。アースカラーの温かみあるパレットを使い、青・紫・ネオンは一切使わないこと。 カラー設計：背景はオフホワイト(#F5F0EB)、メイン文字はダークチャコール(#2C2825)、サブ文字はウォームグレー(#8A7F76)、アクセントはテラコッタ(#C07050)、カード背景はソフトベージュ(#EDE6DD)、ボーダーはカーキ(#C4B9A8)。 セクション構成：ヒーロー（名前を大きなセリフ体で、名前の下にテラコッタの細い下線、キャッチコピーをサンセリフで）→ About（左に丸型写真＋カーキのボーダー、右に自己紹介文）→ Works（ベージュ背景の角丸カード2列グリッド、ホバーでテラコッタのボーダー）→ Skills（カーキ背景のピル型タグ横並び）→ Contact（中央揃え、「Say Hello」をセリフ体で、メールリンクをテラコッタ色に）。 グラデーション・光彩・重い影は使わない。余白をたっぷり取ること。 ``` 初めに `get_basic_info()` ツールと `get_font_family_info()` ツールでキャンバスの基本情報と使用可能なフォントを確認します。ここで取得されるのは現在デスクトップアプリ上で開いているキャンバスの情報です。基本的な情報を取得した後、`create_artboard()` ツールで新しいアートボードを作成してから `write_html()` ツールで HTML を使用してデザインを挿入します。 ![](https://images.ctfassets.net/in6v9lxmm5c8/OqV3CExK3aYSExSba3rmV/204b95a3f67cefaa9c5a9622c12d1d2e/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2026-02-26_20.18.52.png) `write_html()` ツールを使用することで AI の学習データが豊富な HTML/CSS の知識を活用して、複雑なレイアウトやスタイルのデザインを生成したうえでノードとしてキャンバスに挿入できるという点が Paper のワークフローの大きな特徴の 1 つです。 ```sh ⏺ paper - write_html (MCP)(html: "
\n YK.\n
\n About\n Works\n Contact\n
\n
", targetNodeId: "1-0", mode: "insert-children") ``` MCP サーバーの実行中は Paper のキャンバス上で AI が編集中であることを示すインジケーターが表示されています。 ![](https://images.ctfassets.net/in6v9lxmm5c8/6JdpakYsini2oKBYsB3lbW/fc08e845a3d7ec3d57d32c4c27eff175/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2026-02-26_20.20.00.png) 個別にノードを編集するような場合には `node_id` を指定して `update_styles()` ツールや `set_text_content()` ツールを使用してスタイルやテキストの内容を更新できます。 ``` ⏺ paper - update_styles (MCP)(updates: [{"nodeIds":["K-0"],"styles":{"paddingBottom":"80px"}}]) ``` デザインが完了したら `get_screenshot()` ツールでスクリーンショットを撮影し、作成したデザインを AI 自身がレビューします。 ![](https://images.ctfassets.net/in6v9lxmm5c8/1BDt7cEnVAZU1lIY7eeJVS/04279a3c072d97937caf4d03d87160ef/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2026-02-26_20.31.26.png) 最後に `finish_working_on_nodes()` ツールを呼び出して、AI が編集中であることを示すインジケーターを解除します。 ![](https://images.ctfassets.net/in6v9lxmm5c8/3ln0u8A1Au5L2mxSecmZaT/57e71c23397f31a5d5374449f26bb22b/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2026-02-26_20.32.56.png) 最終的に以下のようなデザインが完成しました。 ![](https://images.ctfassets.net/in6v9lxmm5c8/mAuS9jvjhGDFtHdbaVTLD/f6f4bf4fef3561cac07f36f37f6517aa/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2026-02-26_20.34.08.png) ## デザインからコードへ変換する 続いて先程作成したデザインをコードに変換してみましょう。あらかじめ Next.js + Tailwind CSS のプロジェクトを用意しておきます。 ```bash npx create-next-app@latest ``` 以下のようなプロンプトを Claude Code に送信して、先程作成したデザインをコードに変換するように指示します。 ```txt Paper で作成したポートフォリオのデザインを Next.js と Tailwind CSS を使用したコードに変換して。 ``` まずは `get_basic_info()`,　`get_tree_summary()`, `get_screenshot()`, `get_computed_styles()` といったツールを使用してキャンバス上のノードの構造やデザインのスクリーンショットを取得します。`get_computed_styles()` では CSS のスタイルとして取得できていることがわかります。 ```sh ⏺ paper - get_computed_styles (MCP)(nodeIds: ["1H-0","1I-0","1J-0","I-0","J-0","22-0","21-0"]) ⎿  { "1H-0": { "display": "flex", "flexWrap": "wrap", "gap": "12px" }, "1I-0": { "display": "inline-block", "borderRadius": "calc(infinity * 1px)", "paddingBlock": "10px", "paddingInline": "24px", "backgroundColor": "#C4B9A8" }, ``` 以下のように React と Tailwind CSS を使用したコードが生成されました。`px-[120px]` のように arbitrary value を多用しているところが少し気になりますが、全体的に非常に正確にデザインがコードに変換されていることがわかります。今回は `get_jsx()` ツールを使用してくれなかったのですが、AI が選択するツールによって、コードの表現方法が変わる可能性があります。 ```tsx:app/page.tsx const works = [ ... ]; const skills = [ ... ]; export default function Portfolio() { return (
{/* Nav */} {/* Hero */}

Yuki Kobayashi

Product Designer & Visual Storyteller

{/* About */}

About

東京を拠点に活動するプロダクトデザイナー。ミニマルで温かみのあるデザインを信条に、ブランドアイデンティティからUI/UXまで幅広く手がけています。余白と素材感を大切にしたデザインで、使う人の日常にそっと寄り添うプロダクトを目指しています。

前職では大手テクノロジー企業のデザインチームに所属し、数百万人が使うアプリケーションのリデザインを主導しました。現在はフリーランスとして、スタートアップから伝統企業まで多様なクライアントと協業しています。

{/* Works */}

Works

{works.map((work) => (
{work.category}

{work.title}

{work.description}

))}
{/* Skills */}

Skills

{skills.map((skill) => ( {skill} ))}
{/* Contact */}

Say Hello

お仕事のご依頼やご相談など、お気軽にお問い合わせください。

hello@yukikobayashi.design
{/* Footer */}
); } ``` 実際にブラウザでコードを確認してみると、Paper 上のデザインと非常に近い見た目で表示されていることがわかります。 ![](https://images.ctfassets.net/in6v9lxmm5c8/6zpAlCJhYgjJRDZwNCvQFV/37be37f716a4ad9662a219ca8ea0e980/%C3%A3__%C3%A3__%C3%A3_%C2%AA%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3__%C3%A3___2026-02-26_21.03.19.png) ## コードからデザインへ変換する 最後にコードを変更してから、Paper 上のデザインに変更を反映してみましょう。双方向にコードとデザインを変換することで、できる限り本番のコードに近い状態でデザインを維持できるというメリットがあります。試しに先程のコードの Nav コンポーネントの背景を半透明の白に変更してみましょう。 ```diff:app/page.tsx -