背景
私が関わっているプロジェクトでは、デザインチームと開発チームで協力してプロダクトの開発を行っています。
プロダクトの品質を保つためデザインシステムの導入が進められているのですが、デザインに関するルールがまだプロジェクト内に浸透し切っておらず、デザインチェックのフェーズでデザインと実装に齟齬が見つかることが結構あります。
開発チーム側で実装が完了した段階でデザインガイドライン通りの実装になっているのが理想ですが、開発メンバーが全てのルールを記憶するのはハードルが高く、コードレビューの段階でデザインの齟齬に気付きづらいのが現状です。
このような課題に対して、AIを活用してデザインチェックを自動化することで、課題が解決できないか検証してみました。
手法
今回の検証ではAIレビューツールである「CodeRabbit」を使用します。
CodeRabbitはGitHubのプルリクエストをAIが自動でレビューしてくれるサービスですが、プロンプトをカスタマイズすることで独自のルールでレビューさせることができます。
今回はこのプロンプトにデザインルールを記述することでプルリク作成時に自動でデザインチェックができないか検証してみます。
検証
Rails + Bootstrapで作成したシンプルな入力フォームを対象に、デザインチェックをさせてみます。
プロンプト未設定の場合
まずプロンプトを設定しない状態でCodeRabbitにレビューをさせてみると
このように機能追加の提案はしてくれますが、デザインに関する指摘は特にありませんでした。
シンプルなプロンプトを設定してみる
次に以下のようなシンプルなプロンプトを設定してみます。
- ボタンの横幅は最小80pxであること
このプロンプトを設定した状態でレビューさせてみると
おお、ちゃんと指摘してくれてる！
とはいえstyle直書きなのはいただけないので、プロンプトでクラスも指定してみましょう。
- ボタンの横幅は最小80pxであること
- 横幅の指定には min-w80 クラスを使用すること
いい感じですね！
プロンプトを拡充してみる
以下のようにプロンプトを拡充して検証してみます。
以下のデザインガイドラインに従ってレビューしてください
## 色のルール
### 基本パレット
- プライマリカラー: ボタン、リンク、アクティブな要素に使用
- セカンダリカラー: 補助的な要素や背景に使用
- サクセスカラー: 成功メッセージや確認アクションに使用
- エラーカラー: エラーメッセージや警告に使用
- ワーニングカラー: 注意を引く必要がある情報に使用
### 使用規則
- プライマリカラーはユーザーのアクションを促す主要な要素に限定して使用。
- エラーや警告カラーはユーザーの注意を必要とする場面でのみ使用し、多用を避ける。
## ボタンのルール
### スタイル
- プライマリボタン: 深い青色の背景に白文字。最も重要なアクションに使用。
- セカンダリボタン: グレーの背景に白文字。プライマリボタンと並んで使用する場合に。
- エラーボタン: 赤色の背景に白文字。危険や削除などの重要なアクションに使用。
### 使用規則
- ボタンのサイズは一貫性を持たせ、btn-lg, btn-md, btn-sm のクラスを適切に使用
- アクティブな状態やホバー時のスタイル変更を明確にする。
- ボタンには十分なマージンを持たせ、クリックしやすいようにすること
- ボタンの横幅は最小80pxであること。
- 横幅の指定には min-w80 クラスを使用すること
ついでに入力フォームにもちょっと手を入れて、タイトル文字にプライマリカラーを使ってみたり、戻るボタンを危険色にしてみました。
この状態でレビューをさせてみると
戻るボタンの色やマージンについては指摘してくれましたが、タイトルの文字色については特に指摘なしでした。
プライマリカラーの使い方についてプロンプトでは「主要な要素に限定して使用」と曖昧な表現をしているので、ここは判断が分かれるところなのかもしれません。
プロンプトにより詳細にルールを記載すれば、厳密にチェックしてくれそうですね。
まとめ
今回はシンプルな入力フォーム、シンプルなプロンプトによる検証でしたが、AIでデザインチェックの自動化できそうな兆しが見えました。同じ課題感を抱えている方の参考になれば幸いです。
今後はさらにプロンプトの調整を行い、実際のプロダクトで利用できないか調査を進めていこうと思います。