参考リンク
Cursorに関するさらに詳しい情報
公開ガイドからの Cursor デザイン読書リスト：Cursor を使ったデザインのためのチュートリアル、ドキュメント、ウォークスルー。
Cursor 
OpenDesign OpenDesign で
Cursor と
デザインする。
OpenDesignでCursorを使ってインターフェースをデザインする方法：実際のコード上でビジュアル編集を行うDesign Mode、入力元としてのFigma、ブリーフからレビュー済みファイルまでの価格ページタスク1件、そして始める前に知っておくべき制限事項。
CURSORのための3つの出発点
Cursorの開始点を選ぶ
このガイド・UIデザイン
Cursorでプロダクトインターフェースを構築する
このガイドでは、ブリーフ、リファレンス、デザインルール、およびレビュー済みのHTMLアーティファクトについて説明します。
このガイドを読む セットアップCursorをゼロからセットアップする
クリーンインストールから、UIを構築、プレビュー、デザインシステムに照らしてチェックするCursorまでの完全なルート。
セットアップに進む 比較Cursorを他のエージェントと比較する
デザイン作業においてCursorがCodexやClaude Codeとどう比較されるか、そして別のワークフローを選ぶべきタイミング。
比較を見る1件の完全なCursorデザインタスク
あるCursorのデザインタスク：ブリーフからインターフェースまで
この例では、あなたが渡すブリーフと制約から、Cursorが返すアーティファクトを経て、完了とする前に実行するチェックまで、1つのタスクを追跡します。以下のインターフェースはこのページ用に作られた説明用の例であり、記録されたCursorの実行ではありません。
1設計ブリーフと制約条件
ブリーフ開発者ツール向けの価格ページを、3つのプランと月額/年額のトグルでデザインしてください。中央のプランを推奨にし、比較を読みやすく保ってください。デスクトップとスマートフォン。
- デザインシステム既存のアプリトークン、Albert Sans、単一の緑のアクセント
- ブレークポイント1440pxデスクトップと390pxモバイル、横スクロールなし
- インタラクション請求トグル、プランCTAの状態、FAQリンク、トグルへのキーボードフォーカス
- 出力安定した
data-od-idフックを備えた単一の自己完結型HTMLファイル
2誰が何をするか：あなた、Cursor、そしてOpenDesign
- あなた
ブリーフを書き、デザインシステムを選び、受け入れ基準を定義します。
- Cursor
レイアウトを計画し、HTML、CSS、JavaScriptを書き、要求に応じて修正します。
- OpenDesign
デザインシステムとスキルを提供し、プレビューをレンダリングし、各バージョンをプロジェクト内のファイルとして保存します。
- レビュー
引き渡し前に、視覚的階層、8pxグリッド上のスペーシング、両方のブレークポイント、およびすべてのインタラクションをチェックします。
3Cursorアーティファクト：1440pxと390pxでの価格ページ
4ハンドオフ前のレビュー
レイアウト
グリッドとスペーシング
8pxグリッド上の3つの等しい列。推奨プランはサイズではなく境界線で強調されます。
階層
視覚的階層
最初に価格、次にプラン名、次に機能。アクセントは1つのバッジと1つのプライマリボタンに現れます。
レスポンシブ
モバイルレイアウト
モバイルでは、プランが推奨プランを先頭に積み重なります。トグルは上部で引き続き到達可能です。
インタラクション
インタラクションの確認
請求スイッチを切り替え、各CTAをタブで移動し、1つのFAQリンクを開きます。
適合性
Cursorが適合する場所 — そして適合しない場所
Cursorが適しているケース
- デザインモード。 クリック、描画、または音声でUIの変更を記述すると、Cursorがソースを編集します — 実際のコードに基づく視覚的編集。Cursorを置き換えるべきか、デザインワークスペースと組み合わせるべきかを判断する場合は、OpenDesign対Cursorの比較をお読みください。
- Figma → コード。 Figma MCPサーバーが実際のレイアウトとトークンをCursorに提供するため、スクリーンショットではなくデザインから構築します。OpenDesign対Figmaの比較で、キャンバスからリポジトリへの所有権の境界について説明しています。
- 双方向Figma。 一部のMCPサーバーでは、CursorがFigmaデザインをプログラムで読み取り、変更することもできます。単に消費するだけではありません。
- デザインからコードへのループ。 一般的なパターン：ビジュアルツールで下書きし、Cursorに取り込み、エージェントで洗練および拡張します。
別のワークフローを選ぶべきケース
- 編集可能なベクターファイルが必要です。 アーティファクトはHTMLであり、編集可能なデザインドキュメントではありません。ベクターを必要とするアセット形式については、別のベクターワークフローを参照してください。
- 参照も制約もありません。 デザインシステムや例がないと、出力は一般的な外観に流れます。開始前にブリーフを書いてください。
- このエージェントが必要とする資格情報がありません。 必須：Cursorアカウント（独自のプロバイダーキーを使用）。OpenDesignは資格情報を提供もプロキシもしません。
- チームがClaude CodeまたはAntigravityで作業しています。 これらのエージェントには独自のページがあります。ワークスペースは共有されていますが、セットアップは異なります。関連エージェントを参照してください。
互換性
開始前に必要なCursorの要件
このページでは、CursorをOpenDesignデスクトップアプリに接続されたエージェントとして扱います。Cursorのすべての機能を網羅するものではありません。公開された参考文献は2026年9月6日に確認済みです。
ツールの範囲Cursor（Cursor製）
CursorはVS CodeベースのAIファーストのコードエディタであり、プロジェクト全体を編集する組み込みエージェントを備えています。ここでの主題は、OpenDesignを通じたそのCursorエージェントによるインターフェースデザインであり、Cursor自体のUIではありません。OpenDesignのセットアップノートに利用可能なエージェントがリストされています。
アカウントと認証Cursorアカウント（ご自身のプロバイダーキーを使用）
資格情報：Cursorアカウント（独自のプロバイダーキーを使用）。これらのキーはCursorによって直接使用されます — OpenDesignはそれらをプロキシしません。ここでは割り当てや価格は約束されていません。
システムとバージョンデスクトップアプリまたはソース
デスクトップビルドはダウンロードページに掲載されています。Node.jsとpnpmの要件は、OpenDesignをソースから実行する場合に属し、デスクトップパッケージのインストールには関係しません。最小Cursorバージョンはこのページでは確認されていません。
接続確認成功の目安
インストールされているバージョンに表示される接続手順を使用し、Cursorを通じて1つの小さなタスクを送信します。Cursorがそれを処理し、結果のファイルが開くことを確認してください。ダウンロードだけでは、接続が機能していることを証明しません。
デスクトップアプリから始める
3ステップで行うCursorのセットアップ
デスクトップアプリをインストールし、お使いのバージョンのCursor接続手順を完了し、1つの小さな結果で確認します。このパスに従う場合、OpenDesignをソースからビルドする必要はありません。
- 1
OpenDesignデスクトップアプリをダウンロードする
お使いのマシンに合ったデスクトップパッケージを選び、インストールして、OpenDesignを起動します。
OpenDesignをダウンロードチェックポイントOpenDesignが起動します。すでにインストールされている場合は、次のステップに進んでください — 再度ダウンロードしないでください。 - 2
Cursor接続を準備する
インストールされているバージョンに表示されるCursorセットアップを実行します。Cursorはプロバイダーキーを直接使用します。OpenDesignはそれらをプロキシしません。
# .cursor/rules/design.mdc --- description: Project design conventions alwaysApply: true --- - Reuse existing design-system tokens and components; never hardcode hex or spacing. - At most two typefaces and one accent color. - Brand-first hierarchy; restrained motion. No hero cards, no oversized rounded corners. - Build responsive by default; verify desktop and mobile in the preview before finishing.公開ガイドのCursorセットアップノートから引用。現在のコマンドはベンダーのドキュメントと照合する必要があります。
チェックポイント選択したエージェントがCursorであり、アカウントが意図したものであることを確認してください。Cursorが利用できない場合は、より大きなタスクを試みる前に互換性を確認してください。 - 3
小さなCursorタスクを1つ実行する
最初のリクエストは、1回の修正を含む完全なループを通して判断できる、コンパクトなものを選びます。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を構築してください。私のデザインルールに従ってください。デスクトップとモバイルの幅で確認してください。
チェックポイントレンダリングされたファイルを開き、保存状態を試し、1つの具体的な変更を求めます。生成されたアーティファクトはレビューを開始するものであり、終了するものではありません。
ソースベースのOpenDesignインストールの場合、代わりにテクニカルクイックスタートを使用してください。
Cursorデザインワークフロー
Cursorのデザインループ：ブリーフからレビュー済みファイルまでの5ステップ
短いブリーフからCursorのエージェントモードとエディタ内プレビューを経て、レビュー済みファイルに至るまでの価格ページを追います。各ステップでは、あなたの入力、Cursorの役割、OpenDesignの貢献、および実行するチェックを明示します。
- 1
デザインブリーフ
簡潔かつ短く—約3〜6行に保ちます。画面が誰に役立つか、何を達成する必要があるか、どのプラットフォームを対象とするかを述べます。
- あなたブリーフを下書きし、参照スクリーンショットがある場合は含めます。
- Cursorブリーフとプロジェクトの指示ファイルを読み込み、あいまいな点があれば質問します。
- OpenDesignプロジェクト、プロンプト用のチャットサーフェス、およびアーティファクトタイプに一致するスキルを提供します。
- 確認ブリーフに受け入れ基準が含まれていることを確認します。生成前にそれらを確定する方が、後で修正するよりもコストが低くなります。
- 2
デザイン制約
デザインシステムといくつかの固い制約を持ち込みます。そのコンテキストが、出力が一般的な外観に流れるのを防ぎます。
- あなたデザインシステムを選択し、ブレークポイントと再利用する必要があるコンポーネントを指定します。
- Cursorマークアップを書く前に、CursorはDESIGN.mdトークンと姿勢ルールをコンテキストに読み込みます。
- OpenDesignOpenDesignはデザインシステムライブラリを保持し、あなたの選択をスキルテンプレートにバインドします。
- 確認トークンをブランドに照らして確認します：単一のアクセント、正しいフォント、正しい角丸。
- 3
インターフェースを生成する
Cursorは、レイアウト、スタイル、インタラクション、および安定したフックを含む、単一の自己完結型HTMLファイルを生成します。
- あなた待機するか、Cursorが明確化の質問をした場合は返信します。ここで設定するものはありません。
- CursorCursorはセクションを計画し、HTML、CSS、JavaScriptを書き、ファイルを実行し、失敗した箇所を修正します。
- OpenDesignOpenDesignはアーティファクトをプロジェクトフォルダに保存し、プレビューが開けるようにインデックスを作成します。
- 確認まだです。ファイルがレンダリングされるまで待ってから、ソースではなく結果を判断します。
- 4
プレビュー
OpenDesign は指定した幅でファイルをレンダリングします。デザインはここ、プレビューで評価されます。
- あなたビューポート幅を変更し、各インタラクションを実行し、要素に直接コメントします。
- CursorCursor はプレビューに残したコメントを読み取り、次の改訂を準備します。
- OpenDesignOpenDesign はプレビューをレンダリングし、コメントと編集の対象となる
data-od-idを公開します。 - チェック階層、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントが控えめに保たれているかを確認します。
- 5
修正と検証
プレビュー内の要素を指して変更をリクエストします。各改訂は新しいファイルとして保存され、無言の上書きは行われません。
- あなたコメントをリクエストに変換し、タスクがいつ完了したかを判断します。
- CursorCursor は変更をその場で適用し、ファイルを再度実行します。
- OpenDesignOpenDesign はバージョンを並べて保持し、完了時に画像または HTML をエクスポートします。
- チェックまず変更された領域のみをレビューし、その後、各ブレークポイントで一度ずつページ全体を確認します。
リソース
Cursorデザインリソース
制限事項
Cursor の制限、手動チェック、フォールバック
- 対象範囲このページでは、Cursor を OpenDesign を通じて接続されたエージェントとして扱います。Cursor のすべての機能を網羅するものではありません。
- 利用制限コストと使用量の制限は、使用中の認証情報（Cursor アカウント（独自のプロバイダーキーを使用））に従います。ここでは無料枠の主張は行いません。
- ネットワークプロジェクトファイルをローカルに保つことは、推論がオフラインになることを意味しません。機密性の高い入力を送信する前に、エージェントのプロバイダー設定とデータポリシーを確認してください。
- 出力はHTMLCursor は編集可能なベクターデザインファイルではなく、HTML 成果物を返します。Figma との往復はすべて Cursor 独自の Figma 統合を通じて行われます。
- 手動レビューアクセシビリティ、実際のコンテンツ、ブランド適合性、インタラクションの正確さについて、プレビューでレビューするのはあなたです。エージェントのセルフチェックは一次チェックに過ぎません。
- フォールバックCursor が利用できない場合やタスクが失敗した場合は、インストールしたバージョンの接続手順と認証を参照してください。設定を変更する前に、エラーと最後に動作した成果物を保持してください。
よくある質問
CursorとOpenDesignに関するよくある質問
Cursor は本当のデザイン作業を提供できるか？
はい。デザインスキル、デザインシステム、実際の参照画像をコンテキストに含めることで、Cursorは本番品質のレスポンシブなUIを生成できます。エディタ内プレビューを使えば、視覚的に確認・調整することも可能です。こうしたコンテキストがない場合、Cursorは一般的な見た目になりがちですが、その差をOpenDesignが埋めます。
これはCursorの公式プロダクトですか？
いいえ。OpenDesignはCursorをエージェントとして統合する、独立したオープンソースプロジェクトです。ローカルファーストでオープンなスキルとデザインシステムライブラリによってCursorを補完します。
Cursorでデザインするには、Cursorのサブスクリプションが必要ですか？
Cursorのアカウント／サブスクリプションを使用することも、独自のモデルキー（BYOK）を持ち込むこともできます。いずれの場合も、OpenDesignが認証情報を代理で扱うことはなく、エージェントによって直接使用されます。
フロントエンドデザインにおける Cursor 対 Claude Code？
どちらも優れています。Claude Codeはコードベースを踏まえた具体的なデザイン判断で知られ、Cursorの強みはエディタ内でのライブプレビューによる緊密なビルド＆確認のループです。多くのチームが両方を使用していますが、OpenDesignを使えばデザインワークフローを変えずにエージェントを切り替えられます。
Cursor はどのように Figma に接続するのか？
Cursorに公式のFigma MCPサーバーを追加し、チャットにFigmaのフレームリンクを貼り付けて、Cursorに実装を依頼します。このサーバーは実際のコンポーネント、変数、レイアウトデータを公開するため、生成されるコードは元のデザインと一致します。
Cursor の基盤：AI ファーストの VS Code フォーク
Cursor は Anysphere が開発した AI ファーストのコードエディタです。VS Code のフォークであるため、使い慣れたエディタ、拡張機能、キーバインドをそのまま保ちつつ、プロジェクト全体を読み取り、複数ファイルを編集し、コマンドを実行し、あなたとループを回しながら反復できる AI エージェントを中心にワークフローを作り直しています。
デザイン作業で重要なサーフェスは、Agent モード（成果を説明すると Cursor が計画を立ててファイル横断で編集します）、素早い微調整のためのインライン編集と Tab 補完、ウィンドウを離れずに実行中の UI を確認できるエディタ内プレビュー／ブラウザ、そしてライブの Figma ファイルのような外部コンテキストを取り込める MCP サポートです。
プロジェクトルール：Cursor はプロジェクトの指示ファイルを読み取ります — `.cursor/rules` 配下のバージョン管理された `.mdc` ルールと、素の `AGENTS.md` です — これにより、エージェントが毎回の実行で読む場所にあなたのデザイン規約を記述できます。
モデル：Cursor はモデルに柔軟で、サブスクリプション経由でフロンティアモデルを提供するほか、自分のモデルキーを持ち込むこともできます。つまり同じエディタワークフローの背後にあるエンジンを選べます。
MCP：Model Context Protocol に対応しているため、外部サーバー — 最も関連が深いのは Figma MCP サーバー — がエージェントにとって第一級のコンテキストになります。
認証情報：Cursor アカウント／サブスクリプション（Hobby / Pro / Business）または自分のモデルキー（BYOK）
形態：エディタ内エージェントとプレビューを備えた AI ファーストのコードエディタ（VS Code フォーク）
ベンダー：Anysphere
デザイン作業で重要なサーフェスは、Agent モード（成果を説明すると Cursor が計画を立ててファイル横断で編集します）、素早い微調整のためのインライン編集と Tab 補完、ウィンドウを離れずに実行中の UI を確認できるエディタ内プレビュー／ブラウザ、そしてライブの Figma ファイルのような外部コンテキストを取り込める MCP サポートです。
プロジェクトルール：Cursor はプロジェクトの指示ファイルを読み取ります — `.cursor/rules` 配下のバージョン管理された `.mdc` ルールと、素の `AGENTS.md` です — これにより、エージェントが毎回の実行で読む場所にあなたのデザイン規約を記述できます。
モデル：Cursor はモデルに柔軟で、サブスクリプション経由でフロンティアモデルを提供するほか、自分のモデルキーを持ち込むこともできます。つまり同じエディタワークフローの背後にあるエンジンを選べます。
MCP：Model Context Protocol に対応しているため、外部サーバー — 最も関連が深いのは Figma MCP サーバー — がエージェントにとって第一級のコンテキストになります。
認証情報：Cursor アカウント／サブスクリプション（Hobby / Pro / Business）または自分のモデルキー（BYOK）
形態：エディタ内エージェントとプレビューを備えた AI ファーストのコードエディタ（VS Code フォーク）
ベンダー：Anysphere
Cursor のデザイン上の強み：タイトなビルド＆シーループ
Cursor のデザインにおける強みは単一の機能ではありません — 「作って見る」ループの緊密さです。3 つの点が、それを汎用のコード生成器ではなくデザインツールのように感じさせます。
緊密な反復と観察のループ：あなたがプロンプトを出すと Cursor がファイル横断で編集し、エディタ内プレビューが結果を即座にレンダリングします — そのため、別のターミナルとブラウザを往復することなく、秒単位で余白、階層、モーションを調整できます。
直接的なビジュアル編集：チャットだけでなく、Cursor ではプレビュー内の要素を選択してスタイルを微調整できるので、小さな視覚的修正がコードの考古学ではなくデザイン編集のように感じられます。
プロジェクトルールと MCP コンテキスト：`.cursor/rules`（または `AGENTS.md`）と Figma MCP サーバーがあれば、エージェントは推測するのではなく、あなたのトークン、コンポーネント、実際のデザイン仕様に沿って作業します。
センスは、あなたが与える 3 つの入力から生まれます：デザインシステム、スキル、そして実際の参照画像です。
教訓はどのエージェントも教えるのと同じです：Cursor はデフォルトでセンスを持ちません。制約 — デザインシステム、美的スキル、具体的な参照 — を与えたときに良いデザインを生み出します。OpenDesign はまさにそうした入力をパッケージ化しており、だからこそ両者は組み合わせが良いのです（詳細は後述）。
緊密な反復と観察のループ：あなたがプロンプトを出すと Cursor がファイル横断で編集し、エディタ内プレビューが結果を即座にレンダリングします — そのため、別のターミナルとブラウザを往復することなく、秒単位で余白、階層、モーションを調整できます。
直接的なビジュアル編集：チャットだけでなく、Cursor ではプレビュー内の要素を選択してスタイルを微調整できるので、小さな視覚的修正がコードの考古学ではなくデザイン編集のように感じられます。
プロジェクトルールと MCP コンテキスト：`.cursor/rules`（または `AGENTS.md`）と Figma MCP サーバーがあれば、エージェントは推測するのではなく、あなたのトークン、コンポーネント、実際のデザイン仕様に沿って作業します。
センスは、あなたが与える 3 つの入力から生まれます：デザインシステム、スキル、そして実際の参照画像です。
教訓はどのエージェントも教えるのと同じです：Cursor はデフォルトでセンスを持ちません。制約 — デザインシステム、美的スキル、具体的な参照 — を与えたときに良いデザインを生み出します。OpenDesign はまさにそうした入力をパッケージ化しており、だからこそ両者は組み合わせが良いのです（詳細は後述）。
ゼロからデザイン用に Cursor をセットアップする
cursor.com から Cursor をインストールし、Cursor アカウントでサインインするか、設定で自分のモデルキー（BYOK）を構成します。
プロジェクトを開き、チャット／Agent パネルでモデルを選びます。
プロジェクトルールを追加します：構造化された glob スコープの規約には `.cursor/rules/*.mdc` を作成し、シンプルで読みやすい指示には素の `AGENTS.md` を使います。
Figma MCP サーバーを接続します（任意）。エージェントがライブのデザインコンテキストを読めるようになります。
開発サーバーを起動し、エディタ内プレビューを使って、反復しながら UI を確認・検証します。
セットアップの順序：インストール → 認証 → プロジェクトルールの構成 → スキルの追加 → プレビュー検証の有効化。
最小限のプロジェクトルールファイルがあると、エージェントは汎用的な見た目に流れず、ブランドに沿ってデザインします。Cursor が毎回の実行で読む場所に置きます：
デザインルールを記述します：トークン、プリミティブ、規約を `.cursor/rules` または `AGENTS.md` に置き、Cursor をそこに向けることで、出力は汎用的な見た目に流れずブランドに一致します。
プロンプトは小さく保ちます：Cursor の緊密なループは焦点を絞った依頼に報います — 一度に 1 つのコンポーネントや状態を反復し、各パスの間にプレビューを確認します。
コマンドやバージョン固有の詳細については現在のセットアップセクションを使用してください。これらは変わる可能性があります。
前のガイドにあった歴史的なコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
プロジェクトを開き、チャット／Agent パネルでモデルを選びます。
プロジェクトルールを追加します：構造化された glob スコープの規約には `.cursor/rules/*.mdc` を作成し、シンプルで読みやすい指示には素の `AGENTS.md` を使います。
Figma MCP サーバーを接続します（任意）。エージェントがライブのデザインコンテキストを読めるようになります。
開発サーバーを起動し、エディタ内プレビューを使って、反復しながら UI を確認・検証します。
セットアップの順序：インストール → 認証 → プロジェクトルールの構成 → スキルの追加 → プレビュー検証の有効化。
最小限のプロジェクトルールファイルがあると、エージェントは汎用的な見た目に流れず、ブランドに沿ってデザインします。Cursor が毎回の実行で読む場所に置きます：
デザインルールを記述します：トークン、プリミティブ、規約を `.cursor/rules` または `AGENTS.md` に置き、Cursor をそこに向けることで、出力は汎用的な見た目に流れずブランドに一致します。
プロンプトは小さく保ちます：Cursor の緊密なループは焦点を絞った依頼に報います — 一度に 1 つのコンポーネントや状態を反復し、各パスの間にプレビューを確認します。
コマンドやバージョン固有の詳細については現在のセットアップセクションを使用してください。これらは変わる可能性があります。
# .cursor/rules/design.mdc
---
description: Project design conventions
alwaysApply: true
---
- Reuse existing design-system tokens and components; never hardcode hex or spacing.
- At most two typefaces and one accent color.
- Brand-first hierarchy; restrained motion. No hero cards, no oversized rounded corners.
- Build responsive by default; verify desktop and mobile in the preview before finishing.前のガイドにあった歴史的なコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
プレビューから UI へのワークフロー
Cursor で最もレバレッジの高いデザインループは、参照を実際に動くレスポンシブ UI に変換し、一致するまでエディタ内で反復することです — 推測するのではなく、常にライブプレビューを見ながら。
手持ちの中で最も明確なビジュアル参照から始めましょう — そして 1 枚のヒーローショットだけでなく、複数の状態（デスクトップとモバイル、ホバー、空、ローディング）を含めます。
プロンプトでは具体的に。曖昧なプロンプトは汎用的な UI を生みます。
デザインシステムを用意し、トークンと正規のプリミティブがどこにあるかを Cursor に伝えます。
エディタ内プレビューを開いたまま開発サーバーを動かし、各編集が気になるブレークポイントで即座にレンダリングされるようにします。
レンダリングされた UI を参照と比較して反復します — 小さな視覚的修正にはプレビュー内での直接の要素選択を使います。
参照はチャットに画像を添付して渡し、具体的な制約を添えてプロンプトします：
良い反復はコミットし、悪いものは元に戻します（戻すときは Cursor に伝えます）。そうすれば各パスがクリーンな基盤の上に積み上がります — これはどのエージェントループもドリフトしないようにするのと同じ規律です。
前のガイドにあった歴史的なコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
手持ちの中で最も明確なビジュアル参照から始めましょう — そして 1 枚のヒーローショットだけでなく、複数の状態（デスクトップとモバイル、ホバー、空、ローディング）を含めます。
プロンプトでは具体的に。曖昧なプロンプトは汎用的な UI を生みます。
デザインシステムを用意し、トークンと正規のプリミティブがどこにあるかを Cursor に伝えます。
エディタ内プレビューを開いたまま開発サーバーを動かし、各編集が気になるブレークポイントで即座にレンダリングされるようにします。
レンダリングされた UI を参照と比較して反復します — 小さな視覚的修正にはプレビュー内での直接の要素選択を使います。
参照はチャットに画像を添付して渡し、具体的な制約を添えてプロンプトします：
良い反復はコミットし、悪いものは元に戻します（戻すときは Cursor に伝えます）。そうすれば各パスがクリーンな基盤の上に積み上がります — これはどのエージェントループもドリフトしないようにするのと同じ規律です。
Implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens.
Match spacing, layout, and hierarchy; make it responsive.
Keep the preview open — verify desktop and mobile match the
references and iterate until they do.前のガイドにあった歴史的なコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
Cursor + Figma：MCP を介したデザイン ↔ コード
Cursor は公式の Figma MCP サーバーを通じて Figma に接続し、エージェントにフラットなスクリーンショットではなく、ライブの Figma ファイルへの構造化されたアクセスを与えます。これによりハンドオフから推測が消えます。
デザイン → コード：Figma でフレームのリンクをコピーし、Cursor に貼り付けて、そのデザインを実装するよう依頼します。MCP サーバーは実際のデザインコンテキスト — コンポーネント、変数、レイアウトデータ、トークン — を公開するので、生成されたコードは近似ではなくソースに一致します。
揃えておく：デザイントークン、スタイル、コンポーネントを Figma で一貫して使う（可能なら Code Connect も）ことで、Cursor の出力はプリミティブを再発明するのではなく、あなたの実際のデザインシステムに対応したままになります。
リモートの Figma MCP サーバーを一度セットアップすれば、Cursor にとって第一級のコンテキストとして利用できます。MCP はオープン標準なので、同じサーバーは Cursor、Claude Code、Codex、VS Code をまたいで再利用できます — まさに OpenDesign がオーケストレーションするために作られた、ポータブルでマルチエージェントな能力です。
デザイン → コード：Figma でフレームのリンクをコピーし、Cursor に貼り付けて、そのデザインを実装するよう依頼します。MCP サーバーは実際のデザインコンテキスト — コンポーネント、変数、レイアウトデータ、トークン — を公開するので、生成されたコードは近似ではなくソースに一致します。
揃えておく：デザイントークン、スタイル、コンポーネントを Figma で一貫して使う（可能なら Code Connect も）ことで、Cursor の出力はプリミティブを再発明するのではなく、あなたの実際のデザインシステムに対応したままになります。
リモートの Figma MCP サーバーを一度セットアップすれば、Cursor にとって第一級のコンテキストとして利用できます。MCP はオープン標準なので、同じサーバーは Cursor、Claude Code、Codex、VS Code をまたいで再利用できます — まさに OpenDesign がオーケストレーションするために作られた、ポータブルでマルチエージェントな能力です。
デザインにおける Cursor vs Codex vs Claude Code
デザイン作業に唯一の勝者はいません — 各エージェントは強みが異なり、経験を積んだチームはそれらを重ねて使います。公平な要約：
Cursor — エディタ内ライブプレビューと直接の要素編集による視覚的な「作って見る」ループ — IDE 内での緊密な反復と観察の UI 作業
Codex — フロントエンドスキルによる強い視覚的洗練。画像理解とサンドボックス化された実行 — 委譲された非同期ビルドとポータブルな AGENTS.md ルール
Claude Code — 具体的なデザイン判断（hex、余白、タイポグラフィ）とコードベースを意識した UX — フロントエンドの推論と大規模コンテキストのリファクタリング
繰り返し語られるコミュニティの評決は、センスは人間から来るというものです。3 つとも、スキル、参照、制約がなければ汎用的な美学に流れます。それこそが解くべき本当の問題であり、それはモデルの形ではなくデザインツールの形をしています。
エージェント — デザインの強み — 最適な用途
Cursor — エディタ内ライブプレビューと直接の要素編集による視覚的な「作って見る」ループ — IDE 内での緊密な反復と観察の UI 作業
Codex — フロントエンドスキルによる強い視覚的洗練。画像理解とサンドボックス化された実行 — 委譲された非同期ビルドとポータブルな AGENTS.md ルール
Claude Code — 具体的なデザイン判断（hex、余白、タイポグラフィ）とコードベースを意識した UX — フロントエンドの推論と大規模コンテキストのリファクタリング
繰り返し語られるコミュニティの評決は、センスは人間から来るというものです。3 つとも、スキル、参照、制約がなければ汎用的な美学に流れます。それこそが解くべき本当の問題であり、それはモデルの形ではなくデザインツールの形をしています。
エージェント — デザインの強み — 最適な用途
「AI スロップ」風の見た目を避ける：落とし穴と修正
Cursor が生成したデザインについて最もよくある不満は、汎用的に見えることです — 柔らかなグラデーション、浮いたパネル、大きすぎる角丸、劇的な影、そして「これは AI が作った」と叫んでいるような Inter フォント＋紫の雰囲気。他に報告されている問題には、モバイルで崩れるレイアウトや、指示が UI のコピーに漏れ出すことなどがあります。
デザインスキルを追加する：厳選された美的スキルは、Cursor にデフォルトの見た目ではなく本物の方向性へコミットさせます。
プレビューで検証する：エディタ内プレビューでブレークポイントごとにレンダリングして自己チェックし、モバイルでレイアウトが黙って崩れないようにします。
トークンと参照を渡す：実際のデザイントークンと参照スクリーンショットは、出力品質に対する最大のレバーです。
ルールを `.cursor/rules` に記述する：「ヒーローカードなし、書体は最大 2 つ、ブランド優先の階層」といったルールを、エージェントが毎回の実行で読む場所に置きます。
どの緩和策も、エージェントに厳選されたデザインコンテキストを与えることだということに注目してください。そのコンテキストをプロジェクトごとに手作業で維持することが、OpenDesign が取り除く負担です。
デザインスキルを追加する：厳選された美的スキルは、Cursor にデフォルトの見た目ではなく本物の方向性へコミットさせます。
プレビューで検証する：エディタ内プレビューでブレークポイントごとにレンダリングして自己チェックし、モバイルでレイアウトが黙って崩れないようにします。
トークンと参照を渡す：実際のデザイントークンと参照スクリーンショットは、出力品質に対する最大のレバーです。
ルールを `.cursor/rules` に記述する：「ヒーローカードなし、書体は最大 2 つ、ブランド優先の階層」といったルールを、エージェントが毎回の実行で読む場所に置きます。
どの緩和策も、エージェントに厳選されたデザインコンテキストを与えることだということに注目してください。そのコンテキストをプロジェクトごとに手作業で維持することが、OpenDesign が取り除く負担です。
OpenDesign 内の Cursor：デザインレイヤー
OpenDesign は、上のワークフローが繰り返し求めてきたオープンソースのデザインレイヤーです。Cursor をファーストパーティのアダプターとして扱い、厳選されたスキルとデザインシステムのライブラリ、構造化されたレンダーパイプライン、ローカルのデスクトップ UI で包みます — そのため、Cursor を良くするデザインコンテキストが初回実行時からそこにあり、毎回手作業で組み立てる必要はありません。
Cursor アカウントまたは自分のモデルキー（BYOK）で認証します — 認証情報はあなたのマシン上に留まり、当社を通じてプロキシされることは一切ありません。
デザインシステムとスキルを選び、一貫したセンスでデッキ、プロトタイプ、ランディングページを生成します。
すべての成果物と DESIGN.md ファイルは、ホストされたクラウドではなくあなた自身のリポジトリに置かれます。
同じ Cursor エージェント、同じキー — それに加えて、本物でポータブルなオープンソースのデザインワークフローがその周囲にあります。ローカルファーストで Apache-2.0 なので、あなたの作業や認証情報がマシンから出ることはありません。
OpenDesign をインストールし、エージェントとして Cursor を選択します。
Cursor アカウントまたは自分のモデルキー（BYOK）で認証します — 認証情報はあなたのマシン上に留まり、当社を通じてプロキシされることは一切ありません。
デザインシステムとスキルを選び、一貫したセンスでデッキ、プロトタイプ、ランディングページを生成します。
すべての成果物と DESIGN.md ファイルは、ホストされたクラウドではなくあなた自身のリポジトリに置かれます。
同じ Cursor エージェント、同じキー — それに加えて、本物でポータブルなオープンソースのデザインワークフローがその周囲にあります。ローカルファーストで Apache-2.0 なので、あなたの作業や認証情報がマシンから出ることはありません。
OpenDesign をインストールし、エージェントとして Cursor を選択します。
OpenDesign は Cursor と提携していますか？
いいえ。Cursor は Anysphere の製品であり、OpenDesign はそれをファーストパーティのアダプターとして統合する独立したオープンソースプロジェクトです。