🎴

Day18｜「そっくりUI」を本気で再現するために、AIにプロンプトを考えさせてみた/日本・予測市場サイト(個人開発)

に公開
個人開発
Vibe Coding
予測市場
polymarket
idea

今日は17日目。
今日はいつもより一段踏み込んで、「ユーザー周りのUIを、どこまで“そっくり”再現できるか」に挑戦してみた。

今日は「そのままお願い」じゃなく、一回立ち止まった

これまでの流れだと、

  • 参考画像を貼る
  • 「これとそっくり作って」とお願いする

という、かなり直球なやり方をしていた。

もちろんこれでも十分うまくいくんだけど、
今日はあえて一回立ち止まることにした。

Claudeに「Cursorに投げるプロンプト」を考えさせる

今日やったのは、ちょっと変わったやり方。

  1. まずClaudeに相談
  2. 「このUIと同じものを作りたい。Cursorに投げるプロンプトを考えてほしい」と依頼
  3. できあがった“プロンプト用プロンプト”を、Cursorに投げる

つまり、
AIに、AI向けの説明文を書かせるというやり方。

画像 → 構造 → 実装、という流れが見えた

このやり方が面白かったのは、
Claudeがいきなりコードを書こうとしなかった点。

  • まず画像を分析
  • どんなUI構造かを分解
  • どんなコンポーネントが必要かを整理
  • その上で「こう実装すべき」というプロンプトを生成

結果、Cursor側のワークフローを見ると、
構成がめちゃくちゃ丁寧だった。

「あ、こうやって伝えれば、AIにもちゃんと意図が通るんだな」
と素直に思った。

■Claude生成プロンプト

XXXXXのプロフィールページを画像と完全に同一に再現してください。
【ステップ1:詳細分析】
以下を正確に測定・分析してください:

  1. レイアウト構造

    • ヘッダー部分の高さ
    • プロフィール画像の配置と各要素の位置関係
    • タブメニューの配置
    • 画像グリッドのレイアウト

  2. 各要素のサイズ(px単位)

    • プロフィール画像の直径
    • グラデーションボーダーの太さ
    • 統計数値のフォントサイズ
    • ラベルテキストのフォントサイズ
    • ボタンの高さと幅
    • アイコンのサイズ
    • グリッド画像のサイズと間隔

  3. カラーコード

    • プロフィール画像のグラデーションボーダー(開始色、終了色、角度)
    • 背景色
    • テキストカラー(ユーザー名、統計数値、ラベル、バイオ)
    • ボタンの背景色とボーダー色
    • タブアイコンの色(選択時・非選択時)

  4. フォント情報

    • ユーザー名のサイズと太さ
    • 統計数値のサイズと太さ
    • ラベルのサイズと太さ
    • バイオテキストのサイズと太さ

  5. 余白・間隔

    • 要素間の垂直・水平マージン
    • パディング値
    • グリッド画像間のgap

【ステップ2:実装】
分析に基づいて以下の仕様で実装:

【技術スタック】

  • React + TypeScript
  • Tailwind CSS(任意値でピクセル指定。例: w-[280px], h-[44px])
  • Lucide Reactでアイコン使用
  • まずはモバイル版(画像の幅に合わせる)

【実装する要素】

  1. ユーザー名: XXXXXX
  2. プロフィール画像: グラデーションボーダー付き円形
  3. 統計情報:
    • 54 投稿
    • 852 フォロワー
    • 756 フォロー中
  4. ポイント情報:
    • 6000 所持ポイント
    • 4000 獲得ポイント
    • 0% 勝率(ターゲットアイコン付き)
  5. 名前: AXXXXXXX
  6. バイオ: XXXXXXX
  7. 「プロフィールを編集」ボタン
  8. タブメニュー(グリッド/円グラフ/棒グラフアイコン)
  9. 画像グリッド(3列、gap付き)

【制約条件】

  • 画像内のすべての数値、テキストをそのまま使用
  • グラデーションはlinear-gradientで正確に再現
  • プロフィール画像は円形で、グラデーションボーダーを実装
  • すべてのサイズをpx単位で明示
  • カラーは16進数で指定
  • 日本語フォントも考慮
  • 画像グリッドはダミー画像でOK(同じアスペクト比で)

【出力形式】
コンポーネント名: XXXProfile
ファイル名: XXXProfile.tsx

まず詳細な分析結果を表形式で出力し、その後完全なコードを生成してください。

■プロンプト入力後のCursor出力

プロフィール編集画面 詳細分析結果

##レイアウト構造分析

エリア 位置・配置 詳細
ヘッダー 最上部固定 左：閉じるボタン、中央：タイトル、右：完了ボタン
プロフィール画像エリア ヘッダー直下 円形アバター + 変更リンク（中央揃え）
入力フォームセクション 画像エリア下 名前、ユーザーネーム、自己紹介、リンク追加
ビジネス情報セクション フォーム下 セクションタイトル + リスト項目2つ

📏 サイズ測定（px単位）

要素 サイズ 詳細
ヘッダー高さ 56px 上下パディング含む
プロフィール画像 直径: 100px 円形、グレー背景
プロフィール画像エリア 高さ: 160px 画像 + リンク + 余白
入力フィールド高さ 48px ラベル + 入力欄 + 下線
リスト項目高さ 44px 左テキスト + 右テキスト + 矢印
セクションタイトル高さ 32px 上下マージン含む
閉じるボタン(X) 24px × 24px アイコンサイズ
完了ボタン(✓) 24px × 24px アイコンサイズ
矢印アイコン(>) 20px × 20px アイコンサイズ

などなど。　すごい......

マイページを“有名メディアそっくり”に作り直した

今回はマイページを一度作り直して、

  • とある有名メディアのユーザーページ風UI
  • プロフィール編集ボタンを押すと
  • さらに別の有名サービスそっくりな編集画面に遷移

という構成にしてみた。

ボタン → ページ遷移、という流れがシンプルだったこともあって、
エラーもほとんど出ず、実装はかなりスムーズだった。

「AIにちゃんと考えさせる」と、再現度が跳ねる

正直、今日はかなり驚いた。

  • 見た目の再現度が高い
  • 意図とズレが少ない
  • 修正指示が激減する

「そっくり作って」だけじゃなく、
どう解釈して、どう作るかまでAIに考えさせると、
一気にクオリティが上がる感じがした。

裏でやってたこと：リファクタリング

実は今日はUIだけじゃなくて、

  • コードの整理
  • 重複処理の削減
  • ぐちゃぐちゃになってた部分のリファクタリング

も結構やっていた。

正直、だいぶ荒れてきてたので、
ここで一回整理できたのは大きい。

次はランキング周りをもう一度きれいにしたい

他にも色々作ったけど、
ランキングページはもう一段きれいにしたい気持ちがある。

この「AIにプロンプトを考えさせる」やり方、
他のページでも試してみようかなと思っている。

今日はこんな感じ。
また明日も、ノリと実験で続けていく。

Discussion