【VibeCodingChallenge#8】画面UIの認識合わせ

はじめに

VibeCodingChallengeでは、「AIとプロンプトだけでコードを作る挑戦をして、AIにどこまでできるのか？を調査する企画」 です。
突然ですが、UIの認識合わせって、大変ですよね。
実際に動くものがないと、ここにボタンがない、ここにこれが欲しかったと後から困ることになるので、画面設計などを必死でやりますよね。しかしながら、最初から軽く動くものがあったなら？それがあっという間にできたなら？
ということで、画面UIを認識合わせできる程度の粒度ができるまで、どのくらいかかるか？というチャレンジをしてみます。

最終成果物

今回は、タイミーのようなスポットバイトをする場合に、自分の稼げる金額やバイトスケジュールを管理できるようなWebUIを作ってみます。（特に意図はなく、思いつきです）
機能としては、
1.バイト代で稼いた総額と、バイトに割く時間がみえるダッシュボード
2.バイトを検索する検索画面
3.実施するバイトの予定を見るためのスケジュール確認機能
を実装することとし、実際に破綻のないUIができるまで作ってみました。
それが以下です。
https://youtu.be/h7cZLI4S0RI

今回の学び　破綻のないUIを作るくらいなら20分で事足りる

今回のように、簡単な3画面を破綻なく作る程度なら、たったの20分でできました。（しかも、テレビ見てたので、実働はもっと少ないです。）
　要件の簡単なダッシュボードは最初の指示の時点で、すでに構築されておりました。
その最初の指示は以下です。

Please create a responsive desktop web UI for a part-time shift management dashboard.
The target user is a registered part-time worker who can view their current work stats and access shift tools.

Design Goals:
  •	Layout should be inspired by a typical dashboard panel (see image for reference).
  •	Components should be clean, modern, and aligned using Tailwind CSS.

Include the following UI sections:
  1.	Greeting section:
  •	“Hello, [UserName]” or similar welcome message
  •	Weekly hours worked (e.g., “32h this week”)
  •	Earnings summary (e.g., “¥48,500 this week”)
  •	Current rating (e.g., “4.9 ★”)
  2.	Two main buttons:
  •	“Search Shifts” → leads to a list of available jobs
  •	“My Schedule” → shows upcoming confirmed shifts
  3.	Today’s schedule preview:
  •	Job location (e.g., “Café Shibuya”)
  •	Time slot and expected earnings (e.g., “¥2,400”)

Technical Instructions:
  •	Use React with Tailwind CSS.
  •	No backend connection needed — just dummy data.
  •	Do not include the app name in the header (leave blank or use a placeholder).
  •	The interface should fit a desktop browser view first, but responsiveness is a plus.

これ自体は結構ちゃんと書いていますが、この文章自体生成AIとブラッシュアップしたもので、それ含めても20分程度です。
一方、このプロンプトでは、週でも月でもUIが変わらない仕様になっていたので、それについては細かく修正依頼を出しました。

その結果が先ほどに繋がっています。
こう考えるとUIは生成AIに作らせしまって、そこからどう変えていくのか議論していくという手法の開発の認識合わせが、今後はどんどんできていくように思います。

終わりに

これまで、画面設計などUIで頑張っていた箇所は今後生成AIベースで、認識合わせして、どんどん変えていく。エンジニアはUIよりも、機能の部分で価値を出す世界観にどんどんなっていくことが見えてきてますね。
今後も、AIだけを使ってどんどん開発してツールと学びを紹介していきますので、よろしくお願いします。