参考リンク
Cursorに関するさらに詳しい情報
公開ガイドに記載されている、Cursorでデザインするためのチュートリアル、ドキュメント、解説記事です。
Cursor 
OpenDesign OpenDesign で
Cursor と
デザインする。
OpenDesignでCursorを使ってインターフェースをデザインする方法：実際のコード上でビジュアル編集を行うDesign Mode、入力元としてのFigma、ブリーフからレビュー済みファイルまでの価格ページタスク1件、そして始める前に知っておくべき制限事項。
ブリーフからインターフェースへ01 / Cursor
アイデアを持ち込むのはあなたです↗
「CSSではなくDesign Modeで
調整できる料金ページ。」
このCursorガイドへの3つの入口
Cursorでどこから始めるかを選ぶ
1件の完全なCursorデザインタスク
Cursorデザインタスク：ブリーフからインターフェースまで
1件のタスクを最初から最後まで示します：あなたが渡すブリーフと制約、返ってくる成果物、そして完了前に実行するチェック。以下のインターフェースはこのページ用に作成された例示であり、記録されたCursorの実行結果ではありません。
1設計ブリーフと制約条件
ブリーフ3つのプランと月額/年額切り替えを備えた、開発者向けツールの価格ページをデザインしてください。中央のプランを推奨プランとして維持し、比較を一目で把握できるようにしてください。デスクトップとスマートフォン対応。
- デザインシステム既存のアプリトークン、Albert Sans、グリーンアクセント1色
- ブレークポイント1440pxデスクトップと390pxモバイル、横スクロールなし
- インタラクション課金切り替え、プランCTAの状態、FAQリンク、切り替え時のキーボードフォーカス
- 出力安定した
data-od-idフックを持つ、自己完結型のHTMLファイル1つ
2作業の分担：あなた、Cursor、OpenDesign
- あなた
ブリーフを作成し、デザインシステムを選択し、受け入れ基準を定義します。
- Cursor
レイアウトを計画し、HTML、CSS、JavaScriptを書き、要求に応じて修正します。
- OpenDesign
デザインシステムとスキルを提供し、プレビューをレンダリングし、すべてのバージョンをプロジェクト内のファイルとして保存します。
- レビュー
ビジュアルの階層構造、8pxグリッドに基づく間隔、両方のブレークポイント、そしてすべてのインタラクションが、引き渡し前にチェックされます。
3Cursor 成果物：1440px と 390px での料金ページ
4ハンドオフ前のレビュー
レイアウト
グリッドとスペーシング
8pxグリッド上の3つの等幅カラム。推奨プランはサイズではなく枠線で強調されます。
階層
視覚的階層
価格、プラン名、機能の順に配置し、アクセントカラーは1つのバッジと1つのプライマリボタンにのみ使用します。
レスポンシブ
モバイルレイアウト
プランは推奨プランを先頭にして縦に並び、トグルは上部で常に操作できます。
インタラクション
インタラクションの確認
課金トグルを切り替え、各CTAへTabで移動し、FAQリンクを1つ開いてください。
適合性
Cursorがタスクに適している場合と適していない場合
Cursorが適しているケース
- デザインモード。 UIの変更をクリック、描画、または音声で説明すると、Cursorがソースを編集します — 実際のコードに基づくビジュアル編集です。
- Figma → コード。 Figma MCPサーバーが実際のレイアウトとトークンをCursorに提供するため、スクリーンショットではなくデザインから構築されます。
- 双方向のFigma連携。 一部のMCPは、Cursorが単にFigmaのデザインを取り込むだけでなく、プログラムで読み取りや変更を行うことを可能にします。
- デザインからコードへのループ。 よくあるパターンは、ビジュアルツールで下書きを作成し、Cursorに取り込んでから、エージェントで調整・拡張することです。
別のワークフローを選ぶべきケース
- 編集可能なベクターファイルが必要な場合。 成果物はHTMLであり、編集可能なデザインドキュメントではありません。必要なアセット形式については、別のベクターワークフローをご確認ください。
- 参照も制約もない場合。 デザインシステムや例がないと、出力は一般的な見た目になりがちです。まずブリーフを書いてください。
- このエージェントに必要な認証情報がありません。 必要なもの: Cursorアカウント（お客様自身のプロバイダーキーを使用します）。OpenDesignは認証情報を提供またはプロキシしません。
- チームがClaude CodeまたはAntigravityで作業しています。 これらのエージェントには専用のページがあります。ワークスペースは同じですが、セットアップが異なります。関連エージェントをご覧ください。
互換性
開始前に必要なCursorの要件
このガイドでは、OpenDesignデスクトップアプリを通じて接続したCursorについて説明します。公開情報は2026年9月6日時点で確認済みです。
ツールの範囲Cursor（Cursor製）
CursorはVS Codeを基盤としたAIファーストのコードエディタで、プロジェクト全体を編集できる内蔵エージェントを備えています。このページはCursor自体のインターフェースについてではなく、OpenDesignを通じてCursorでインターフェースをデザインすることについて説明します。利用可能なエージェントの一覧は、OpenDesignのセットアップノートに記載されています。
アカウントと認証Cursorアカウント（ご自身のプロバイダーキーを使用）
Cursorアカウント（ご自身のプロバイダーキーを使用）。Cursorはご自身のプロバイダーキーを使用し、OpenDesignを経由したプロキシは一切行われません。このページでは、クォータや価格について保証するものではありません。
システムとバージョンデスクトップアプリまたはソース
デスクトップビルドについてはダウンロードページをご確認ください。ソースのクイックスタートに記載されているNode.jsとpnpmの要件は、ソースから実行する場合に適用されるものであり、デスクトップパッケージのインストールには適用されません。対応する最小Cursorバージョンについては、ここでは確認していません。
接続確認成功の目安
インストールしたバージョンに表示される接続手順に従い、小さなタスクを実行してください。Cursorがそれを処理し、成果物が開くことを確認してください。ダウンロードだけでは、動作する接続は確立されません。
デスクトップアプリから始める
3ステップで行うCursorのセットアップ
まずダウンロードし、インストールしたバージョンに応じてCursorのセットアップを完了させ、小さな結果を確認してください。この手順を進めるために、OpenDesignをソースからビルドする必要はありません。
- 1
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セットアップノートより。最新のコマンドについてはベンダーのドキュメントをご確認ください。
チェックポイント想定しているエージェントとアカウントを確認してください。利用できない場合は、大きなタスクを試す前に互換性を確認してください。 - 3
小さなCursorタスクを1つ実行する
全体のループを判断できるよう、1回の修正を含む小さなブリーフを使用してください。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールを使用し、デスクトップとモバイルの幅で確認してください。
チェックポイント結果を開き、保存状態をテストして、具体的な変更を一つ依頼してください。生成されたファイルはレビューの始まりであり、終わりではありません。
ソースから OpenDesign を実行するには、代わりに技術クイックスタートをご覧ください。
Cursorデザインワークフロー
5ステップで見るCursorデザインワークフロー
同じ料金ページのタスクを、ブリーフから検証済みファイルまで追っていきます。各ステップでは、あなたが用意するもの、Cursorが行うこと、OpenDesignが提供するもの、そしてあなたが確認する内容を示します。
- 1
デザインブリーフ
平易な言葉で3〜6行。対象ユーザー、画面の役割、対象プラットフォームを明記します。
- あなたブリーフを書きます。参考となるスクリーンショットがあれば添付します。
- Cursorブリーフとプロジェクトの指示ファイルを読み込み、あいまいな点があれば質問します。
- OpenDesignプロジェクト、プロンプトサーフェス、成果物の種類に応じたスキルを提供します。
- 確認ブリーフに受け入れ基準が記載されていることを確認します。生成後よりも今のうちに追加する方がコストを抑えられます。
- 2
デザイン制約
デザインシステムと少数の厳格なルールです。これがブランドに沿った出力と、ありふれた見た目とを分ける要因になります。
- あなたデザインシステムを選び、ブレークポイントと必須のコンポーネントを指定します。
- Cursorコードを書き始める前に、DESIGN.mdのトークンと方針ルールをコンテキストに読み込みます。
- OpenDesignデザインシステムライブラリを提供し、選択したものをスキルテンプレートに紐付けます。
- 確認トークンがブランドに合っているかを確認します。アクセントカラーは1色、フォントと角丸の値が適切であることを確かめます。
- 3
インターフェースを生成する
Cursorは自己完結型のHTMLファイルを作成します。レイアウト、スタイル、インタラクション、安定したフックを含みます。
- あなた待つか、確認の質問に答えます。設定することは何もありません。
- Cursor各セクションを計画し、HTML、CSS、JavaScriptを記述し、ファイルを実行してエラーを修正します。
- OpenDesign成果物をプロジェクトフォルダに保存し、プレビュー用にインデックスを作成します。
- 確認ここではまだ何もありません。ファイルはソースではなく、レンダリングされた状態で評価します。
- 4
プレビュー
ファイルは、指定した幅で OpenDesign 内にレンダリングされます。ここでデザインが判断されます。
- あなた幅を切り替え、インタラクションをクリックして試し、要素にコメントを残します。
- Cursorプレビューへのあなたのコメントを読み取り、次の改訂を準備します。
- OpenDesignプレビューをレンダリングし、コメントや編集用に
data-od-idターゲットを公開します。 - チェック階層構造、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントカラーが控えめに使われているかを確認します。
- 5
修正と検証
プレビュー内の要素を指し示して変更を依頼します。修正はすべて新しいファイルとして作成され、既存のものが黙って上書きされることはありません。
- あなたコメントを依頼に変換し、タスクが完了したかどうかを判断します。
- Cursorその場で変更を適用し、ファイルを再実行します。
- OpenDesignバージョンを並べて保持し、完了時に画像または HTML をエクスポートします。
- チェック変更された部分のみを再確認した後、各ブレークポイントでページ全体を一度確認します。
リソース
Cursorデザインリソース
制限事項
Cursorの制限事項、手動確認、フォールバック
- 対象範囲このページでは、OpenDesignに接続されたエージェントとしてのCursorを扱います。Cursorのすべての機能を網羅するものではありません。
- 利用制限利用制限とコストは、使用する認証情報（Cursorアカウント（独自のプロバイダーキーを使用））に依存します。このページでは無料枠については言及していません。
- ネットワークローカルのプロジェクトファイルであっても、推論がオフラインで行われるとは限りません。機密性のある入力を共有する前に、エージェントのプロバイダー設定とデータポリシーを確認してください。
- 出力はHTML成果物はHTMLファイルであり、ベクター形式のデザインファイルではありません。Figmaとの相互連携は、Cursor独自のFigma連携機能を通じて行われます。
- 手動レビューアクセシビリティ、実際のコンテンツ、ブランドとの整合性、インタラクションの正しさは、プレビューであなたが確認します。エージェントによる自己チェックは、あくまで一次チェックとして扱ってください。
- フォールバックエージェントが利用できない場合やタスクが失敗した場合は、インストールされているバージョンの接続手順と認証を確認してください。設定を変更する前に、エラーと最後に成功した成果物を保存しておいてください。
よくある質問
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で最初のデザインタスクを始める
まずは小さなタスクから始めて往復のやり取りを確認し、その後に本番のブリーフを持ち込んでください。ご自身の環境に合ったオプションを選択してください。このページは環境を自動検出しません。