𝗙𝗿𝗼𝗺 𝗩𝟭.𝟬 𝘁𝗼 𝗩𝟮.𝟬: 𝗔 𝗥𝗲𝘁𝗵𝗶𝗻𝗸 𝗼𝗳 𝘁𝗵𝗲 𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗣𝗶𝗽𝗲𝗹𝗶𝗻𝗲
最近、自身のオープンソースプロジェクトである vibe-coding-universal の小さなタイポを修正しました。ラベルを v2.0 (old) から v1.0 (old) に変更したのです。
この小さな変更が、大きな問題を引き起こしました。自分自身でさえ、自分のバージョンの名前が分からなくなっていたのです。もし私が混乱するなら、ユーザーも迷ってしまうでしょう。
初期のバージョンはシンプルなものでした。AIが要件を理解しやすくするために7つの質問を行い、Claude CodeやCursorといったツール向けのガイドファイルを1つ生成する仕組みでした。動作はしていましたが、欠点もありました。
- AIが色、フォント、余白を推測しなければならなかった。
- デザインとタスクが1つのファイルに混在していた。
- AIが実際のデザインシステムではなく、自身のメモリ（記憶）に頼っていた。
バージョン2.0は、単なるアップデートではありません。新しいワークフローそのものです。
V1.0 vs V2.0:
V1.0:
- 要件に関する7回の質問。
- デザインルールなし。
- 単一のガイドファイル。
- 外部リファレンスなし。
V2.0:
- 要件に関する7回の質問 ＋ デザインの好みに基づく7回の質問。
- 色、フォント、レイアウトルールを含む完全な DESIGN_SPEC.md。
- 完全な Build Spec パッケージ (PRD、デザイン、アーキテクチャ、タスク)。
- Stripe、Linear、Appleなど、71のブランドデザインシステムへのアクセス。
- AIが使用するための正確なCSSトークン。
多くの人は、AIへのプロンプトをうまく書けていません。「どのようなデザインスタイルが好きですか？」といった質問は、範囲が広すぎます。
V2.0では、代わりに選択式を採用しています。各ラウンドで、4〜6個の選択肢から1つの質問を行います。
- ラウンド1：プロジェクトの種類 (SaaS、ダッシュボード、AIツールなど)。
- ラウンド2：ビジュアルリファレンス (Stripe、Apple、Vercelなど)。
- ラウンド3：カラームード (クール、ウォーム、ニュートラル)。
7ラウンド終了後、システムは71のブランドシステムからデザイントークンを抽出します。そしてCSS変数リストを出力します。これにより、AIに正確な指示を与えることが可能になります。
バージョンの誤記が起きたのは、V1.0とV2.0の差があまりにも大きかったからです。私は両方を「現在の」バージョンとして認識してしまっていました。
プロジェクトが劇的な変化を遂げる場合は、明確なバージョンラベルを使用してください。ユーザーはあなたの構造を理解するために5分もかけてはくれません。彼らが割いてくれるのは、わずか10秒です。
次のアップデートを行う前に、自問してみてください：
新しいユーザーはこの比較を3秒で理解できるか？
もし答えが「いいえ」なら、コードを修正する前にテキストを修正しましょう。
Optional learning community: https://t.me/GyaanSetuAi