こんにちは。Claude Code、皆さんはもう使っていますか？
今回は、Claude Code の拡張機能である frontend-design@claude-code-plugin を使って、Flutter の定番である「カウンターアプリ」のデザインがどう変化するかを検証してみました。
結論から言うと、プラグインの有無で出力されるデザインのクオリティに雲泥の差が出ました。
検証方法
今回の検証では、以下の環境とステップで UI/UX の変化を検証します。
使用モデル
- Claude Sonnet 4.5
検証ステップ
-
初期状態:
flutter createした直後のシンプルなカウンター - プラグインなし: Claude Code に「UI/UX を向上させて」と指示
-
プラグインあり:
frontend-design@claude-code-pluginを有効にした状態で、同じく「UI/UX を向上させて」と指示
指示するプロンプトはシンプルに統一し、Claude Code がどのような意図を持ってコードを変更してくるかを見比べます。
1. 初期状態：シンプルなカウンターアプリ
まずはおなじみの、Flutter プロジェクト作成時に生成されるデフォルトのカウンターアプリです。
(動画：初期状態のカウンター)
機能は「Floating Action Button を押すと数字が増える」だけ。デザインも標準のマテリアルデザインが適用された、非常にシンプルなものです。
2. プラグイン「なし」で指示した場合
まずは、frontend-design@claude-code-plugin を使用せず、素の Claude Code に対して以下の指示を出しました。
「UI/UX を向上させて」
結果
(動画：プラグインなしでの改善結果)
特徴:
- マテリアルデザインの延長: 標準的なウィジェット（Card や ElevatedButton など）を組み合わせた、整ったデザインになりました。
- 機能の追加: 「リセットボタン」や「マイナスボタン」など、カウンターとしてあると便利な機能が追加されました。
- エンジニアライクな改善: 機能的で使いやすくはなりましたが、「よくある管理画面」や「サンプルアプリ」の域を出ない、平凡なデザインです。
プラグインなしの場合、Claude Code は 「機能性」や「標準的な使いやすさ」 に重点を置いて改善を行う傾向が見られました。
3. プラグイン「あり」で指示した場合
次に、今回の主役である frontend-design@claude-code-plugin を有効にします。
Claude Code 上でプラグインを有効化してから、全く同じプロンプトを投げかけました。
「UI/UX を向上させて」
結果
(動画：プラグインありでの改善結果)
特徴:
- 洗練されたデザイン: もはや別物です。GIF だとわかりにくいですが、背景等にもこだわりを感じるデザインになっています。
- アニメーションの強化: 数字が増える際のアニメーションや、エフェクトなど、触っていて気持ちの良いインタラクションが追加されました。
- ユーザー体験（UX）の大幅向上: 単なるツールではなく、「使いたくなるアプリ」としての演出が加わっています。
ただし……
動画を見て気づいた方もいるかもしれませんが、一部のレイアウトが崩れており、Overflow エラーが出ています（笑）。
このあたりはご愛嬌ですが、「デザインの方向性」としては、プラグインなしの時とは比べ物にならないほどクリエイティブな提案をしてくれました。
比較まとめ
| プラグインなし | プラグインあり (frontend-design@claude-code-plugin) |
|
|---|---|---|
| デザインの方向性 | 実用的・標準的 (Material Design 準拠) | モダン・装飾的 |
| 追加要素 | 機能重視 (リセットボタン等) | 体験重視 (アニメーション、グラデーション) |
| 印象 | 「使いやすいツール」 | 「洗練されたプロダクト」 |
| 安定性 | 高い | 一部レイアウト調整が必要な場合も |
さらなる改善に向けて：CLAUDE.md とプロンプトの活用
今回の検証では、あえて「UI/UX を向上させて」という抽象的な指示のみを行いましたが、実運用ではさらに精度を高めることが可能です。
frontend-design@claude-code-plugin プラグインは非常に強力なデザイン提案能力を持っていますが、以下の点を工夫することで、より自分好みの制御が可能になると感じました。
-
CLAUDE.md の活用:
プロジェクトルートにCLAUDE.mdを配置し、デザインシステムやガイドライン（例：「メインカラーは青」など）を事前に定義しておくことで、出力されるデザインのブレを防げそうです。 -
プロンプトの詳細化:
「ミニマルなデザインで」「アニメーションは控えめに」といった具体的な指示を組み合わせることで、今回のようなレイアウト崩れを防ぎつつ、意図した通りの UI/UX を実現できるでしょう。
結論：frontend-design@claude-code-plugin を使うと、平凡なデザインが劇的に改善される
今回の検証で、frontend-design@claude-code-plugin は単にコードを書くだけでなく、「美的センス」や「UX のトレンド」をコードに注入してくれることが分かりました。
私たちエンジニアが個人開発をしていると、どうしても UI が「Bootstrap っぽくなる」あるいは「Material Design そのままになる」という悩みが発生しがちです。しかし、このプラグインを有効にして指示を出すだけで、デザイナーが参画したかのような（あるいは少し攻めた）デザイン案を提示してくれます。
多少レイアウトが崩れることはありますが、デザインのインスピレーションを得るためのたたき台として使うには最強のツールではないでしょうか。
みなさんも Claude Code を使う際は、ぜひ frontend-design@claude-code-pluginを試してみてください！
参考