チュートリアル
Cursor でデザイン・プロトタイピングするためのステップバイステップガイドを、Web 全体から厳選しています。
Cursor を使用したブランドアセットとアイコンセットの生成
Cursor を活用して SVG アイコンシステム、ファビコン、統一されたビジュアルアイデンティティをコードで制作 — パレットとストロークルールを一度定義し、マッチングアイコンを生成してビルド対応アセットをエクスポート。
Cursor、shadcn/ui、Tailwindでランディングページを構築する
空のNext.jsアプリから本番リリースまで: shadcn/uiでのスキャフォルディング、Cursorでセクション単位のレイアウトをプロンプト、デザイントークンでヒーロー・料金・フッターの視覚的一貫性を維持。
Cursor ルールで Design System を強制する
spacing scale、color tokens、radius、typography を固定する design-system.mdc ルール ファイルを作成し、Cursor が生成するすべてのコンポーネントがブランドに統一されるようにします。スコープ付きルールと glob ターゲティングの例を含みます。
デザイン一貫性のためのプロジェクトルール (.cursor/rules)
Cursorの公式ルールシステムを使用すると、再利用可能でスコープ付きの指示をピン留めできます。デザインシステムルールでトークン、スペーシング、コンポーネント規則をエンコードすることで、すべての生成が ブランド に準拠します。MDC形式、グロブ、自動アタッチルールと常時オンルールをカバーします。
Cursor のスクリーンショットから UI をデザイン — Figma 不要
実践的な Design Mode ワークフロー: Dribbble、Mobbin、Pinterest から参考資料を直接 Agent チャットに貼り付け、デザインシステムのルールファイルをピンして、Figma を開かずにポリッシュされたコンポーネントまで反復作成する。
デザインエンジニアの日々のワークフロー in Cursor
コード記述するデザイナーがCursorをセットアップする方法 — トークンとアクセシビリティのルール、ビジュアルチェック用Playwright MCP、プロンプト、diffレビュー、ピクセル調整の密なサイクル。
Cursor で Figma to Code を実現する Dev Mode MCP サーバー
Figma の Dev Mode MCP サーバーを Cursor に統合し、エージェントがフレーム、変数、Auto Layout を直接読み込む方法 — 選択したデザインをクリーンでトークン対応の React と Tailwind コンポーネントに変換します。
Cursor で Figma MCP サーバーをセットアップする
Figma の Dev Mode MCP サーバーを Cursor に接続し、エージェントが選択したフレーム、変数、Auto Layout を直接読み取るための公式セットアップ。設計トークンを反映したコード生成が可能。Cursor MCP インストールフローとプロンプティングのヒントを含みます。
Cursorでジェネリックに見えないデータダッシュボードをプロンプティングする
Cursorでダッシュボードレイアウトをプロンプティングするパターン — 情報階層、チャート密度、空状態を先に説明し、参照画像で洗練させて、テンプレートではなくデザインされた結果を得る方法。
Cursor 2.0 — マルチエージェントインターフェースとネイティブブラウザ
Cursor 2.0はIDEをファイル中心からエージェント中心に再構成し、UIのテストと反復作業をエージェントが制御できるネイティブブラウザツールを搭載しています。Visual Editorの設計ワークフローの基盤となり、低レイテンシーコーディングモデルであるComposerと組み合わせて動作します。
Cursor ビジュアルエディタ: ポイント、プロンプト、アプライ
Cursor のブラウザ内ビジュアルエディタの解説 — ドラッグ&ドロップレイアウト編集、スペーシングとタイポグラフィー用の Figma スタイルインスペクタ、ビジュアル調整を実際の JSX と Tailwind に変換する Apply ステップ。
Cursor 2.2 — ビジュアルエディタ、デバッグモード、マルチエージェントジャッジング
Cursor 2.2の公式チェンジログ。ブラウザビジュアルエディタ（デザインモード）、デバッグモード、マルチエージェントジャッジング、Plan Modeのマーマイド図、ピン留めチャットを搭載。エージェントループにビジュアルデザインを統合した大型アップデート。
Cursor ブラウザビジュアルエディタ — ライブアプリ向けデザインモード
Cursor の公式ビジュアルエディタは、ブラウザ内プレビューをデザインサーフェスに変換します。DOM全体のドラッグ&ドロップレイアウト編集、スペーシング・色・タイポグラフィ・デザイントークン対応の Figma スタイルインスペクタ、React 状態トグル、そしてエージェントが実コードにコミットするポイント・アンド・プロンプトフローを備えています。
Cursor の Design Mode（ビジュアル編集）解説
Builder.io による Cursor の Design Mode の深掘り解析 — ライブ React アプリ編集に向けた Figma スタイルサイドバーの優位性と、真のデザインツール比較における正直な制限（マルチセレクト非対応、簡単なアンドゥなし、LLM ゲート制御された編集）の説明。
Cursorがデザインハンドオフを終わらせた
Cursorのビジュアルエディタがデザイナーから開発者へのハンドオフをいかに廃止するかについての詳細な分析 — ライブアプリを視覚的に編集し、実際のレビュー可能なコードを永続化するため、翻訳する別個の仕様書は不要になります。