Webコーディング分野でのAI活用 - Beans College 4周年記念イベント「実務に使える！ AI入門」

Webコーディング分野でのAI活用 Beans College 4周年記念イベント「実務に使える！ AI入門」

AIコードエディタ生成AIを使ったコーディングに適したエディタと機能を知ろう

AIコードエディタを知る AIコードエディタとは、AI機能を搭載したエディタのこと。代表的なエディタとして、「Cursor」「Windsurf」がある。これらはVS Code をベースに開発されていて、VS Codeの資産を引き継ぐことができる。 Cursor Windsurf Visual Studio
Codeも、GitHub Copilotを有効化することで「AIコードエディタ化」させることができる。

Figma MCPを知る Figmaデザインのデータを、MCP経由で別の生成AIサービスに渡すことができる仕組み。 Figma MCPを利用したい場合、Dev Modeを利用する必要があり、これには Figmaの有料プランの契約が必要。

AIの料金について AIコードエディタではGPTやClaudeなどのLLMが選べるが、エディタ側に課金することで、別途LLMに支払う必要はない。 GitHub Copilot Pricing Windsurf Pricing Cursor Pricing

AIコーディング実践！エディタでAI機能を試してみましょう

Figma MCPを有効化 Figma Dev Modeに切り替え右サイドバーの「MCP」欄の「デスクトップMCPサーバーを有効にする」をクリック VS Code チャット欄内の「⚙️」をクリック左下の欄の「MCPサーバー
マーケットプレイスを有効にする」をクリック数ある中から「Figma MCP Server」を探してインストール Cursor 画面右上の「⚙️」をクリック左やや中央の「Plugins」から「Figma」を選択右上の「Add to Cursor」をクリック Windsurf 画面右上の「⚙️」から「Windsurf Settings」を選択「Cascade」を選択し「Open MCP Marketplace」をクリック右上の「Install」をクリック

Webコーディング分野でのAI活用 - Beans College 4周年記念イベント「実務に...

Webコーディング分野でのAI活用 - Beans College 4周年記念イベント「実務に使える！ AI入門」

Aihara Noriyoshi

More Decks by Aihara Noriyoshi

Featured

Transcript