Web開発では、Cursor と Figma やブラウザなどの外部ツールとの間で、高速な反復と密なフィードバックループが欠かせない。Cursor では、このループをさらに短くするワークフローを確立してきた。タスクの明確なスコープ設定、コンポーネントの再利用、デザインシステムの活用が、スピードと一貫性の維持に効く。
このガイドでは、Web 開発を支援し、フィードバックループをさらに短縮するための 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"
]
}
}
}
- MCP settings で Linear を有効化する
- Web ブラウザが開き、Linear への認可を求められる
現在の MCP の状況により、セットアップに複数回の試行が必要になる場合がある。
連携がうまくいかない場合は、Cursor の settings から「Reload」server を試してみて。
Linear MCP servers は、Cursor が課題を読み取り・管理するために使える各種ツールを公開している。すべてのツール一覧を見るには MCP settings に進み、Linear server を見つけて。確認するには、Chat で次のプロンプトを試してみて:
統合が正しく設定されていれば、課題の一覧が返ってくるはずだよ。
デザインやモックアップは Web 開発の核。公式の Figma 向け MCP サーバーを使えば、Cursor でデザインファイルに直接アクセスして作業できる。始めるには、Figma Dev Mode MCP Server のセットアップ手順に従ってね。
下のボタンをクリックして MCP サーバーをインストールしよう。
または mcp.json に手動で追加する:
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/sse"
}
}
}
ui-components.mdc ファイルはこんな感じ:
---
description: デザインの実装と UI 構築
---
- `/src/components/ui` にある既存の UI コンポーネントを再利用する。これは組み立ての基盤となるプリミティブ
- 既存のもので解決できない場合は、UI コンポーネントを組み合わせて新しいコンポーネントを作成する
- コンポーネントやデザインが不足している場合は、どう進めるか人に確認する
Cursor へのネイティブ統合をより簡単にできるよう改善に取り組んでるよ。
- Web開発では素早いフィードバックループが不可欠。CursorをFigma、Linear、ブラウザと併用して、速く動きつつフローを保とう。
- MCPサーバーで外部システムをCursorに直接統合でき、コンテキスト切り替えが減ってタスク遂行が向上する。
- コンポーネントやデザインシステムの再利用は、モデルによりクリーンで一貫したコードや出力を出させやすくする。
- 明確でスコープが定まったタスクは結果が良くなる。プロンプトの設計と依頼内容は意図的に決めよう。
- 良い出力が得られない場合は、次を調整してみて:
- Instructions: ルールやプロンプトを整え、例えばMCPサーバーでより多くのコンテキストにアクセスさせる。
- Systems: パターン化、抽象化、明確化によって、モデルが理解しやすくなり、支援と自律的な作業が進む。
- コンソールログ、ネットワークリクエスト、UI要素データなどのランタイム情報を含めて、モデルのコンテキストを拡張できる。
- すべてを自動化する必要はない。システムが複雑になりすぎたら、TabやInline Editでピンポイントに編集しよう。
- Cursorはオートパイロットではなくコパイロットとして最も強力。意思決定を置き換えるのではなく、磨くために使おう。
