UIの仕様書やモックアップ作成、まだFigmaやスプレッドシートで消耗していませんか？

Claude CodeやCodex、v0といったAIコーディングアシスタントが台頭した現在、フロントエンド開発のベストプラクティスは根本から変わりました。特に、すでに稼働している既存サイトがある場合、わざわざ静的なモックアップをゼロから作り直すのは無駄なコストです。

今回は、「既存のコード」を正とし、AIを使って爆速で「動くモック（＝仕様書）」を生成・実装するモダンなアプローチを紹介します。

1. 静的ドキュメントから「動くコード」へ

かつてのUI仕様書は、人間が読んで理解するためのものでした。しかし、今はAIが直接コンテキストを読み込み、コードに変換する時代です。

既存のサイト（例えばAstroやReactで構築された環境）があるなら、「既存コードのコンテキスト」と「追加したい要件のプロンプト」を掛け合わせて、直接UIコンポーネントを吐き出させるのが最も理にかなっています。

「こんな画面を作りたい」という要件をドキュメントにまとめる暇があるなら、さっさとブラウザで動くコードを生成してしまった方が、認識齟齬も起きず圧倒的にスピーディーです。

2. 既存サイトをハックする爆速モックアップ手順

具体的なワークフローは以下の通りです。ローカルのエディタと、Claudeやv0などのAIエージェントを並行稼働させて進めます。

Step 1: 既存の画面とコードをAIに渡す

ゼロからプロンプトを書く必要はありません。現在の「正解」である既存画面をAIにインプットします。

  • 該当ページのスクリーンショットを撮る
  • 対象となる**既存のコンポーネントコード（HTML/Astroファイルなど）**をコピーする

Step 2: 「差分」だけをプロンプトで指示する

画像とコードをAIに投げ、追加・改修したい要件を伝えます。

「これが現在のUIとコードです。このヘッダーの下に、〇〇の機能を持つ検索フィルターを追加したUIコンポーネントを生成してください。既存のコーディングルールとトーン＆マナーに合わせること。」

Step 3: 生成されたUIをブラウザで確認・調整

AIが出力したコード（またはv0やClaude Artifacts上のプレビュー）をそのまま確認します。これが実質的な**「触れる仕様書」**です。微調整が必要な場合も、チャットで指示を出すだけで瞬時に修正されます。

3. テストコードが「生きた仕様書」になる

動くモックができあがったら、品質担保と仕様の明文化を行います。ここでもAIを活用します。

  • Storybookへの切り出し: AIに「このコンポーネントのStorybookファイルを作成し、通常時・エラー時・ローディング時の状態を網羅して」と指示します。これでUIのカタログが完成します。
  • PlaywrightによるE2Eテスト: Storybookで定義した各状態に対して、Playwrightでビジュアルリグレッションテストを回します。

この**「AIが生成したStorybook ＋ Playwrightのテストコード」こそが、AI時代における真のUI仕様書**として機能します。コードと仕様が乖離する「ドキュメントが腐る問題」もこれで解決です。

まとめ：思考を直接コードに変換する

既存のサイトがあるなら、「仕様書を作る時間」を「モックを実装する時間」に直接変換できます。

  1. 既存コードとスクショをAIに渡す
  2. 差分となるコンポーネントを生成させる
  3. StorybookとPlaywrightでテストコード（仕様書）化する

重い推論やコーディングはAIに委ね、人間はターミナルやブラウザを起点にコンテキストを束ねることに集中する。物理的・視覚的なノイズを徹底的に排除し、開発スピードを最大化していきましょう。