[Cursor-Guide]ウェブ開発
Cursorを使用してウェブ開発ワークフローを最適化する方法を学び、FigmaやLinearなどのツールを統合して迅速な反復処理と密接なフィードバックループを実現します。
[Cursor-Guide]ウェブ開発
オリジナルリンク: オリジナルリンク
ウェブ開発では、CursorとFigmaやブラウザなどの外部ツール間で迅速な反復処理と密接なフィードバックループが頻繁に行われます。Cursorでは、このループを強化するワークフローを見つけました。明確なタスク範囲の設定、コンポーネントの再利用、デザインシステムの活用により、作業を迅速かつ一貫性のあるものに保ちます。
このガイドでは、ウェブ開発をサポートし、フィードバックループを強化するためにCursorを設定する方法を説明します。
Cursorでオーケストレーションを開始
チャットは変更のブートストラップに最適です。主要な部分が整ったら、CMD KとTabに切り替えてフロー状態を維持します。
Cursorを設定すると、さまざまなツール間でワークフローをオーケストレーションできるようになります。以下はその可能性を示すデモンストレーションです：Linear、Figma、ブラウザツールを組み合わせて作成したスネークゲーム。実際のプロジェクトは通常より複雑ですが、この例は統合ワークフローの可能性を示しています。
プロジェクト管理ツールに接続
既存のプロジェクト管理ソフトウェアにCursorを統合できます。このガイドでは、LinearとそのMCPサーバーを統合する方法を見ていきます。
インストール
- Linear MCPサーバーを
mcp.jsonに追加します
{
"mcpServers": {
"linear": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"https://mcp.linear.app/sse"
]
}
}
}
- MCP設定からLinearを有効にします
- ウェブブラウザが開き、Linearで承認を求められます
現在のMCPの状態により、設定には複数回の試行が必要な場合があります。統合が機能しない場合は、Cursor設定から「リロード」を試してください。
CursorでLinearを使用
Linear MCPサーバーは、Cursorが問題を読み取り管理するために使用できるさまざまなツールを公開します。MCP設定に移動し、Linearサーバーを探してすべてのツールのリストを確認します。確認するには、チャットで次のプロンプトを試してください：
このプロジェクトに関連するすべての問題をリストする
統合が正しく設定されていれば、問題のリストが返されます。
Figmaデザインを取り込む
デザインとモックアップはウェブ開発の核心です。Figma用のコミュニティ構築MCPサーバーを使用すると、Cursorで直接デザインファイルにアクセスして作業できます。開始するには、https://www.framelink.ai/docs/quickstart の設定手順に従ってください。
インストール
{
"mcpServers": {
...,
"figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
]
}
},
}
使用方法
このMCPサーバーは、アクセスしたいFigmaのレイヤーまたはフレームへのリンクを渡す必要があります。詳細はドキュメントを参照してください。
コードの足場を一貫させる
既存のコード、デザインシステム、または再利用したい確立された規則があるでしょう。モデルと作業する際には、ドロップダウンメニューやその他の一般的なコンポーネントなど、コードベースに既にあるパターンを参照すると便利です。
大規模なウェブベースのコードベースで作業する中で、特にReactやJSXにおいて、宣言型のコードが特に効果的であることがわかりました。
デザインシステムがある場合、そのためのルールを提供することでエージェントがそれを発見しやすくできます。以下は、可能な限りコンポーネントの再利用を強制しようとするui-components.mdcファイルです：
components.mdc
---
description: デザインの実装とUIの構築
---
- `/src/components/ui`から既存のUIコンポーネントを再利用します。これらは構築可能なプリミティブです
- 問題を解決する既存のコンポーネントが見つからない場合は、UIコンポーネントをオーケストレーションして新しいコンポーネントを作成します
- コンポーネントやデザインが不足している場合、人間に進め方を尋ねます
コンポーネントライブラリが成長するにつれて、新しいルールを追加します。ルールが多くなりすぎた場合は、「ユーザー入力でのみ適用」など、より具体的なカテゴリに分割することを検討してください。
Cursorにブラウザへのアクセスを許可
Cursorの機能を拡張するために、ブラウザツールMCPサーバーを設定できます。これにより、コンソールログやネットワークリクエストにアクセスできます。設定が完了したら、コンソール出力とネットワークアクティビティを監視して変更を確認できます。この設定により、実装が意図と一致していることを確認できます。MCPサーバーの設定手順はこちら：https://browsertools.agentdesk.ai/installation
これをCursorにネイティブに統合しやすくするために作業中です。
要点
- Web開発において、迅速なフィードバックループは不可欠です。CursorをFigma、Linear、ブラウザなどのツールと併用することで、素早く作業を進め、フロー状態を維持できます。
- MCP（Model Control Protocol）サーバーを使用すると、外部システムを直接Cursorに統合でき、コンテキストスイッチングを減らしてタスク実行を効率化できます。
- コンポーネントやデザインシステムを再利用することで、モデルはよりクリーンで一貫性のあるコードと出力を生成できます。
- 明確で範囲が限定されたタスクは、より良い結果につながります。プロンプトの方法と要求内容を意図的に設計しましょう。
- 良い出力が得られない場合は、以下の調整を試してください：
- 指示方法： ルールやプロンプトを使用し、MCPサーバーなどでより多くのコンテキストにアクセスできるようにします。
- システム： パターン、抽象化、明確さを重視することで、モデルが理解しやすくなり、より自律的に作業できるよう支援できます。
- コンソールログ、ネットワークリクエスト、UI要素データなどのランタイム情報を含めることで、モデルのコンテキストを拡張できます。
- すべてを自動化する必要はありません。システムが複雑になりすぎた場合は、TabやCMD Kを使用してより精密な編集に戻りましょう。
- Cursorは自動操縦（autopilot）ではなく、副操縦士（co-pilot）として最も効果を発揮します。自身の意思決定を置き換えるのではなく、改善するために活用しましょう。