デザイナーのための Cursor。

Cursor とは実際に何か

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 サーバー — がエージェントの第一級のコンテキストになります。

• ベンダー: Anysphere
• 認証情報: Cursor アカウント / サブスクリプション（Hobby / Pro / Business）または独自のモデルキー（BYOK）
• 形態: エディタ内エージェントとプレビューを備えた AI ファーストのコードエディタ（VS Code フォーク）

なぜ Cursor はデザインが得意なのか

Cursor のデザイン上の強みは単一の機能ではありません — 作って見るループの緊密さです。3 つの要素が、ありきたりなコードジェネレーターではなくデザインツールのように感じさせます。

• 緊密な反復・観察ループ: プロンプトを出すと Cursor がファイルをまたいで編集し、エディタ内プレビューが結果を即座に描画します — そのため、別のターミナルとブラウザを往復するのではなく、数秒で余白、階層、モーションを調整できます。
• 直接的なビジュアル編集: チャットを超えて、Cursor はプレビュー内で要素を選択してスタイルを微調整させてくれるので、小さなビジュアル修正がコードの発掘ではなくデザイン編集のように感じられます。
• プロジェクトルールと MCP コンテキスト: `.cursor/rules`（または `AGENTS.md`）と Figma MCP サーバーを使えば、エージェントは推測ではなく、あなたの tokens、コンポーネント、実際のデザイン仕様に対して作業します。

教訓はどのエージェントが教えるのと同じです: Cursor はデフォルトではセンスを持っていません。制約 — デザインシステム、美的な skill、具体的なリファレンス — を与えたときに良いデザインを生み出します。Open Design はまさにそれらの入力をパッケージ化しており、だからこそ両者は噛み合うのです（詳細は後述）。

デザイン作業のために Cursor をゼロからセットアップする

まっさらなマシンから、デザインシステムに対して UI を構築・プレビュー・検証できる Cursor までの全行程はこちらです。

1. cursor.com から Cursor をインストールし、Cursor アカウントでサインインするか、設定で独自のモデルキー（BYOK）を構成します。
2. プロジェクトを開き、チャット / Agent パネルでモデルを選びます。
3. プロジェクトルールを追加します: 構造化されたグロブスコープの規約には `.cursor/rules/*.mdc` を、シンプルで読みやすい指示にはプレーンな `AGENTS.md` を作成します。
4. Figma MCP サーバーを接続して（任意）、エージェントがライブのデザインコンテキストを読めるようにします。
5. dev サーバーを動かし、エディタ内プレビューを使って反復しながら UI を見て検証します。

最小限のプロジェクトルールファイルがあれば、エージェントはありきたりな見た目に落ち着くのではなくブランドに沿ってデザインします。Cursor が毎回読む場所に置きましょう:

# .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.

• デザインルールを記述する: tokens、プリミティブ、規約を `.cursor/rules` または `AGENTS.md` に書き、Cursor にそれを参照させましょう。そうすれば出力がありきたりな見た目に落ち着かず、ブランドに沿ったものになります。
• プロンプトを小さく保つ: Cursor の緊密なループは焦点を絞った依頼に報いてくれます — 一度に 1 つのコンポーネントや状態を反復し、パスの合間にプレビューを見ましょう。

プレビューから UI へのワークフロー

Cursor で最も効果の高いデザインのループは、リファレンスを動作するレスポンシブな UI に変え、一致するまでエディタ内で反復することです — 推測する代わりに、ずっとライブプレビューを見ながら進めます。

1. 手元にある最も明確なビジュアルリファレンスから始めましょう — そして 1 枚のヒーローショットだけでなく、複数の状態（デスクトップとモバイル、ホバー、空、ローディング）を含めます。
2. プロンプトでは具体的に。曖昧なプロンプトはありきたりな UI を生みます。
3. デザインシステムを用意し、tokens と正規のプリミティブがどこにあるかを Cursor に伝えます。
4. エディタ内プレビューを開いたまま dev サーバーを動かし続け、各編集が、気にするブレークポイントで即座に描画されるようにします。
5. 描画された UI をリファレンスと照合し直して反復し — 小さなビジュアル修正にはプレビュー内の直接要素選択を使います。

チャットに画像を添付してリファレンスを与え、具体的な制約を添えてプロンプトを出します:

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 に伝える）ことで、各パスがクリーンなベースの上に積み上がるようにします — どのエージェントループも逸脱させないための同じ規律です。

Cursor + Figma: MCP 経由のデザイン ↔ コード

Cursor は公式の Figma MCP サーバーを通じて Figma に接続し、平坦なスクリーンショットではなくライブの Figma ファイルへの構造化されたアクセスをエージェントに与えます。これがハンドオフから当て推量を取り除きます。

• デザイン → コード: Figma でフレームのリンクをコピーし、それを Cursor に貼り付けて実装を依頼します。MCP サーバーは実際のデザインコンテキスト — コンポーネント、変数、レイアウトデータ、tokens — を公開するので、生成されるコードは近似ではなくソースと一致します。
• 整合を保つ: Figma 内でデザイン tokens、スタイル、コンポーネントを一貫して使い（可能なら Code Connect も使い）、Cursor の出力はプリミティブを再発明するのではなく、あなたの実際のデザインシステムへとマッピングされ続けます。

リモートの Figma MCP サーバーを一度セットアップすれば、Cursor に第一級のコンテキストとして利用できます。MCP はオープンな標準なので、同じサーバーは Cursor、Claude Code、Codex、VS Code をまたいで再利用できます — まさに Open Design が編成するために作られた、ポータブルでマルチエージェントな機能です。

デザインにおける Cursor vs Codex vs Claude Code

デザイン作業に唯一の勝者は存在しません — 各エージェントには異なる強みがあり、経験豊富なチームはそれらを重ねて使います。公平にまとめると:

コミュニティで繰り返される結論は、センスは人間から生まれるということです: 3 つとも、skills・リファレンス・制約がなければありきたりな美意識へと落ち着きます。それこそが解くべき本当の問題であり — それはモデルの形ではなく、デザインツールの形をしています。

落とし穴、そして「AI スロップ」っぽい見た目を避ける方法

Cursor 生成デザインへの最もよくある不満は、ありきたりに見えるというものです — 柔らかいグラデーション、浮いたパネル、過大な角丸、ドラマチックな影、「いかにも AI が作りました」と叫ぶような Inter と紫の雰囲気。ほかにも、モバイルで崩れるレイアウトや、指示が UI のコピーに漏れ出す問題が報告されています。

• デザイン skill を追加する: 厳選された美的な skill は、Cursor にデフォルトの見た目ではなく本物の方向性へコミットさせます。
• プレビューを使って検証する: エディタ内プレビューでブレークポイントをまたいで描画と自己チェックをし、レイアウトがモバイルで黙って崩れないようにします。
• tokens とリファレンスを供給する: 本物のデザイン tokens とリファレンスのスクリーンショットは、出力品質に対する最大の単一のレバーです。
• ルールを `.cursor/rules` に記述する: 「ヒーローカードなし、書体は最大 2 つ、ブランド優先の階層」といったスタイルルールを、エージェントが毎回読む場所に置きます。

どの対策も、エージェントに厳選されたデザインコンテキストを与えることが要だと気づくでしょう。そのコンテキストをプロジェクトごとに手作業で維持する手間こそ、Open Design が取り除くものです。

Open Design の中で Cursor を使ってデザインする

Open Design は、上記のワークフローが繰り返し求めてくるオープンソースのデザインレイヤーです。Cursor を第一級のアダプターとして扱い、厳選された skill とデザインシステムのライブラリ、構造化されたレンダーパイプライン、ローカルなデスクトップ UI でそれを包みます — そのため、Cursor を優れたものにするデザインコンテキストが、毎回手作業で組み立てるのではなく、最初の実行から揃っています。

1. Open Design をインストールし、エージェントとして Cursor を選びます。
2. Cursor アカウントまたは独自のモデルキー（BYOK）で認証します — 認証情報はあなたのマシンに留まり、私たちを経由してプロキシされることは決してありません。
3. デザインシステムと skill を選び、一貫したセンスでデッキ、プロトタイプ、ランディングページを生成します。
4. あらゆる成果物と DESIGN.md ファイルは、ホスト型クラウドではなくあなた自身のリポジトリに置かれます。

同じ Cursor エージェント、同じキー — それに加えて、それを取り巻く本物でポータブルなオープンソースのデザインワークフロー。ローカルファーストで Apache-2.0 なので、あなたの作業も認証情報も、マシンの外へ出ることはありません。

よくある質問

1. 01 Cursor は本当にデザイン作業ができますか？ +

   はい — デザイン skill、デザインシステム、本物のリファレンス画像をコンテキストに与えれば、Cursor は本番品質でレスポンシブな UI を生み出し、エディタ内プレビューでビジュアルに検証・洗練できます。そのコンテキストがなければありきたりな見た目に落ち着きがちで、それこそ Open Design が埋めるギャップです。

2. 02 これは公式の Cursor 製品ですか？ +

   いいえ。Open Design は Cursor をエージェントとして統合する、独立したオープンソースプロジェクトです。Cursor を、ローカルファーストでオープンな skill とデザインシステムのライブラリで補完します。

3. 03 Cursor でデザインするには Cursor サブスクリプションが必要ですか？ +

   Cursor アカウント / サブスクリプションを使うか、独自のモデルキー（BYOK）を持ち込めます。いずれの場合も Open Design があなたの認証情報をプロキシすることはありません — それらはあなたのエージェントが直接使います。

4. 04 フロントエンドデザインには Cursor と Claude Code のどちらがよいですか？ +

   どちらも強力です。Claude Code は具体的でコードベースを踏まえたデザイン判断で知られ、Cursor の強みはエディタ内のライブプレビューを備えた緊密な作って見るループです。多くのチームが両方を使います — Open Design ならデザインワークフローを変えずにエージェントを切り替えられます。

5. 05 Cursor を Figma に接続するには？ +

   Cursor に公式の Figma MCP サーバーを追加し、Figma フレームのリンクをチャットに貼り付けて、Cursor に実装を依頼します。サーバーは実際のコンポーネント、変数、レイアウトデータを公開するので、生成されるコードはソースのデザインと一致します。

6. 06 ありきたりな「AI スロップ」の美意識を避けるには？ +

   デザイン skill を追加し、本物のデザイン tokens とリファレンスのスクリーンショットを供給し、ブランドルールを `.cursor/rules` または `AGENTS.md` に記述し、プレビューでブレークポイントをまたいで検証します。Open Design はこれらを厳選されたライブラリとして提供するので、プロジェクトごとのセットアップを省けます。

7. 07 Open Design は Cursor または Anysphere と提携していますか？ +

   いいえ。Cursor は Anysphere の製品であり、Open Design はそれを第一級のアダプターとしてサポートする、独立したオープンソースプロジェクトです。Cursor と Anysphere は Anysphere, Inc. の商標です。

8. 08 私のファイルと認証情報は安全ですか？ +

   はい — Open Design はローカルファーストです。あなたのファイル、成果物、DESIGN.md はあなた自身のリポジトリに留まり、Cursor またはモデルの認証情報はあなたのエージェントが直接使い、Open Design のサーバーを経由してルーティングされることは決してありません。