Web開発では、CursorとFigmaやブラウザなどの外部ツールのあいだで、素早い反復と密なフィードバックループが求められる。Cursorでは、このループをさらに短くするワークフローを見つけてきた。タスクの明確化、コンポーネントの再利用、デザインシステムの活用が、スピードと一貫性の維持に効く。 このガイドでは、Web開発を支えるためにCursorをセットアップし、フィードバックループを短縮する方法を紹介する。

​
Cursorでオーケストレーションを始めよう

Chat は変更の立ち上げに最適。主要なパーツが揃ったら、Inline Edit と Tab に切り替えるとフローを保ちやすいよ。 Cursor をセットアップすれば、複数のツールをまたいでワークフローをオーケストレーションできる。以下はそのデモで、Linear、Figma、そしてブラウザのツールを組み合わせて作ったスネークゲーム。実際のプロジェクトはふつうもっと複雑だけど、この例で統合ワークフローのポテンシャルが分かるはず。

​
プロジェクト管理ツールに接続する

既存のプロジェクト管理ソフトに、いろんなツール経由で Cursor を統合できるよ。このガイドでは、Linear を MCP サーバーで統合する方法を紹介するね。

​
インストール

または mcp.json に Linear の MCP サーバーを手動で追加してね: 
{
  "mcpServers": {
    "Linear": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.linear.app/sse"
      ]
    }
  }
}
その後:
  1. MCP の設定で Linear を有効化しよう
  2. ブラウザが開いて、Linear への認可が求められるよ
    現在の MCP の仕様上、セットアップは複数回試す必要がある場合があるよ。 連携がうまくいかないときは、Cursor の設定からサーバーを「Reload」してみて。

​
Cursor で Linear を使う

Linear の MCP サーバーは、Cursor が課題を読み書き・管理できるように複数のツールを公開しているよ。すべてのツール一覧を見るには、MCP の設定で Linear サーバーを探してね。確認用に、Chat でこのプロンプトを試してみよう: 
list all issues related to this project
linear.png
連携が正しくセットアップされていれば、課題の一覧が返ってくるはずだよ。

​
Figma のデザインを取り込む

デザインやモックアップはウェブ開発の要だよ。公式の Figma 向け MCP サーバーを使えば、Cursor からデザインファイルに直接アクセスして作業できる。始めるには、Figma Dev Mode MCP Server のセットアップ手順に従ってね。

​
インストール

下のボタンをクリックして MCP サーバーをインストールしてね。 または mcp.json に手動で追加してね: 
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

​
使い方

サーバーはいくつかのツールを公開していて、プロンプトから使えるよ。たとえば Figma で現在選択中のデザインを取得するようお願いしてみて。詳しくはドキュメントをチェックしてね。
figma.png

​
コードのスキャフォールディングを一貫させよう

既存のコードやデザインシステム、再利用したい既定の規約があるはず。モデルと一緒に作業するときは、ドロップダウンメニューや他の共通コンポーネントみたいに、コードベースにすでにあるパターンを参照すると効果的だよ。 大規模な Web ベースのコードベースで自分たちも作業してきて、宣言的なコードがとりわけうまく機能することがわかった。特に React と JSX でね。 デザインシステムがあるなら、エージェントが見つけやすいようにルールを用意しよう。これは、可能な限りコンポーネントの再利用を促すためのルールを書いた ui-components.mdc ファイルの例だよ:
components.mdc
---
description: Implementing designs and building UI
---
- reuse existing UI components from `/src/components/ui`. these are the primitives we can build with
- create new components by orchestrating ui components if you can't find any existing that solves the problem
- ask the human how they want to proceed when there are missing components and designs
コンポーネントライブラリが成長してきたら、新しいルールを適宜追加しよう。ルールが多くなりすぎたら、「ユーザー入力を扱うときにのみ適用」みたいに、より具体的なカテゴリに分割することも検討してね。
ui-components.png

​
Cursor にブラウザアクセスを付与する

Cursor の機能を拡張するには、コンソールログやネットワークリクエストにアクセスできる browser tools MCP サーバーをセットアップしよう。設定が済んだら、コンソール出力とネットワークアクティビティを監視して変更を検証できるよ。これにより、実装が意図どおりになっているかを確実にチェックできる。MCP サーバーのセットアップ手順はここを見てね: https://browsertools.agentdesk.ai/installation
browser.png
Cursor にネイティブ統合しやすくする作業を進めてるよ。

​
まとめ

  • Web開発では短いフィードバックループが不可欠。CursorをFigma、Linear、ブラウザと併用して、素早く回しつつフローを保とう。
  • MCPサーバーで外部システムをCursorに直接統合でき、コンテキストスイッチを減らしてタスク実行を改善できる。
  • コンポーネントやデザインシステムを再利用すると、モデルがよりクリーンで一貫したコードや出力を出しやすくなる。
  • スコープが明確なタスクは結果が良くなる。プロンプトの出し方と依頼内容は意図的に設計しよう。
  • いい出力が出ないときは、次を調整してみて:
    • Instructions: ルールやプロンプトを使い、たとえばMCPサーバーでより多くのコンテキストにアクセスさせる。
    • Systems: パターンや抽象化、明確さがあると、モデルが理解しやすくなり、支援もしやすく、より自律的に動ける
  • コンソールログ、ネットワークリクエスト、UI要素データなどのランタイム情報を含めて、モデルのコンテキストを拡張できる。
  • すべてを自動化する必要はない。システムが複雑になりすぎたら、TabやInline Editで外科的にピンポイントな編集に切り替えよう。
  • Cursorはオートパイロットではなく相棒（コパイロット）として使うと最も強力。意思決定を置き換えるのではなく、磨くために使おう。