目次

  1. はじめに
  2. GitHub Copilot Chat（Agent Mode）について
  3. Storybookについて
  4. GitHub Copilot Chat（Agent Mode）の使用方法
  5. 試してみた1 – 初期環境構築 –
  6. 試してみた2 – コンポーネント（チャットボット）作成依頼 –
  7. 試してみた3 – 要件に従ったコンポーネント（ローディング）作成と修正依頼 –
  8. 試してみた4 – イメージ画像から画面UIの作成依頼 –
  9. 試してみた5 – 参考サイトから画面UIの作成依頼（Open Simple Browserを併用) –
  10. まとめ

1. はじめに

普段はReactを使ったフロントエンド開発に携わる機会が多く、画面デザインにも興味があります。より効率的に画面の見た目を開発できる方法を模索していたところ、AIエージェントとStorybookを組み合わせることで、画面デザインを素早く効率的に確認できそうだと感じ、さっそく導入してみました。

 

今回は、先日リリースされたばかりのAIエージェント「GitHub Copilot Chat Agent」を使用し、人に依頼するときのように、大きなタスクの単位で指示を出してみました。どの程度のデザインが仕上がるのかを確かめるため、実際に試してみた例を交えながら、その結果をご紹介します。

2. GitHub Copilot Chat（Agent Mode）について

「GitHub Copilot」はコーディングに特化したAIサービスの一種で、このサービスの中にVS Codeの拡張機能として使用できる「GitHub Copilot Chat」が存在し、さらにこの機能の中にAIエージェントとして利用できる機能が準備されています。

 

With the Copilot coding agent, GitHub Copilot works independently in the background and can complete tasks just like a human developer.

公式ドキュメント：What is GitHub Copilot?

 

Copilot Chat
A chat interface that lets you ask coding-related questions. GitHub Copilot Chat is available on the GitHub website, in GitHub Mobile, in supported IDEs (Visual Studio Code, Visual Studio, JetBrains IDEs, Eclipse IDE, and Xcode), and in Windows Terminal. Users can also use skills with Copilot Chat. See Asking GitHub Copilot questions in GitHub and Asking GitHub Copilot questions in your IDE.

公式ドキュメント：GitHub Copilot features

 

With Copilot coding agent, GitHub Copilot can work independently in the background to complete tasks, just like a human developer.

公式ドキュメント：About assigning tasks to Copilot

 

AIエージェントとは、ある目的に対して自律的または半自律的に思考し、意思決定を下し、アクションを行うAI技術の一種で、抽象的な依頼事項に対しても自律的に動作し、結果を返してくれます。

3. Storybookについて

Storybookはフロントエンド開発において、UIコンポーネントやページの見た目を開発し、手軽に動作確認やドキュメント管理を行うことができます。カタログのような使い勝手で、自分が開発したコンポーネントを一つの本としてまとめておき、後からデザインを見返したり流用したりすることが可能で、さらに他の方とデザインを共有することもできるライブラリです。
今回使用するReact以外にも、Next.jsやVue、Angular等の言語でも開発できます。
 

Storybook is a frontend workshop for building UI components and pages in isolation. It helps you develop and share hard-to-reach states and edge cases without needing to run your whole app. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

公式ドキュメント：Get started with Storybook

4. GitHub Copilot Chat（Agent Mode）の使用方法

【前提条件】
下記ツールを使用します。
・VS Code
・GitHub Copilot Chat
 

VS Codeの設定方法は、下記のドキュメントを参考にしてください。
Getting started with Copilot Chat in VS Code

 

設定完了後、下記に示すサイドバーから「GitHub Copilot Chat」のアイコンをクリックし、右下の「送信」ボタンの左のモード設定を「Agent」に切り替えることでAIエージェントを使用できます。
（タイトルバーの「GitHub Copilot」のアイコンをクリックする操作でも可能です。）

5. 試してみた1 – 初期環境構築 –

▼指示プロンプト　※使用したAIモデル：Claude 3.7 Sonnet

React初心者です。Storybookでアプリケーションのデザイン開発を簡単に行いたいので、環境構築も含めて実施してください。

 

10分程度でReactの環境構築とStorybookのパッケージインストール&起動を行い、サンプルの部品としてボタン、カード、フォームコンポーネントが作成されました。


【ボタン】

【カード】

【フォーム】

6. 試してみた2 – コンポーネント（チャットボット）作成依頼 –

▼指示プロンプト　※使用したAIモデル：Claude 3.7 Sonnet

コンポーネントの部品として、チャットボットのUIを作成してください。


6種類のチャットボットUIが作成されました。
アバターの画像が適用されていないこと以外は正常に動いています。

 【Basic】

 【With Conversation】

【With Avatars】  

【Auto Open】

【Green Theme】

【Black Theme】

7. 試してみた3 – 要件に従ったコンポーネント（ローディング）作成と修正依頼 –

▼指示プロンプト　※使用したAIモデル：Claude 3.7 Sonnet

ローディング画面のデザインで、下記要件にしたがってコンポーネントを追加してください。
 

【要件】
・色：オレンジ（#ff643c）を基調としたカラーパレット
・表示する文字：「Now Loading」
・カスタマイズ機能：ローディングの時間を「％」表記で、進行状況を可視化する機能を搭載

 

「Now Loading」の文字の配置を再度依頼しただけで、イメージ通りのコンポーネントを追加できました。

8. 試してみた4 – イメージ画像から画面UIの作成依頼 –

▼指示プロンプト　※使用したAIモデル：Claude 3.7 Sonnet

sample-1.pngの画面イメージを参考に新しいコンポーネントに画面デザインを作ってください。


依頼した参考画像通りではないですが、UIをブラッシュアップして生成してくれました。

 

【参考イメージのsample-1.png】

【生成されたコンポーネント】

9. 試してみた5 – 参考サイトから画面UIの作成依頼（Open Simple Browserを併用） –

▼指示プロンプト　※使用したAIモデル：Claude 3.7 Sonnet

下記サイトのデザインに沿ってコンポーネントを作ってください。
https://plugin-value-scrum.figma.site/

※GitHub Copilot Chatの「Add Context... > Tools > openSimpleBrowser」を選択し、web検索可能になります。

 

大半は参考サイトに沿ってページが作成されていますが、フォントの種類や文字サイズ、ボタンの色、文字や部品の配置が参考サイトと異なる形で生成されました。

 

【参考サイト】
https://plugin-value-scrum.figma.site/

【生成されたページ】

10. まとめ

今回はAIエージェントを使うことで、2～3時間ほどで、Reactの初期環境構築からそれぞれの試してみたの例に従ったUIデザインの作成を行えました。


大まかな指示で依頼してもAIエージェント自身で考え、ユーザが意図したコンポーネントやページに類似した作品を作ってくれます。
また、細かい指摘やUI変更もチャットでやり取りを進めていけば、簡単に意図通りのUIデザインを開発することができるようになるかと思います。

 

今回使用したGitHub Copilot は、Cline や Roo Code と比較し、月額固定料金で利用できるため、大量にトークンを消費する方でもコスト面を気にせず、利用できるサービスとなっています。


皆さんもAIエージェントを使用して開発効率を上げてみてはいかがでしょうか？