🌟
バイブコーディング UI/UX 日本語指示 10 選
はじめに
こんにちは！株式会社OCT-PATHでCEOをしている多田 雄策です。
「とりあえずいい感じにUI作っといて」を AI に伝えるのは意外とむずかしい——。
そこで本記事では、CursorEditor から Claude 4 Sonnet に渡すだけで、デザインガイドラインに沿った UI をサクッと生み出せる 実践的な日本語プロンプトの10選 を紹介します。
ベースとなるデザインシステムが既に存在する前提なので、エンジニア・デザイナー問わず「色ズレ」「余白迷子」「情報過多」の三重苦から解放されるはずです。
対象読者
- CursorEditor & Claude 4 Sonnet を日常使いしている人
- 自社／クライアントのデザインシステムがある人
- 「UI は AI に丸投げしたいけどクオリティは妥協したくない」人
今回自社サービスのWorkchainのUIUX改善をバイブコーディングのみで実施を行いました。
下記は実際の画面になります。
これられは、バイブコーディングのみでUIUX改善を行いました。
ベースカラーのトンマナを守りながら、0からのレスポンシブ対応
0からのライトモード・ダークモードの対応含め全面的に改修を行いました。
 |
 |
クイックスタート
/ask
洗練されたUIにしてください
ベースカラーは#00C4CCでお願いします
上記 2 行を貼るだけで、既存のデザインシステムを踏襲しつつ “肩肘張らないおしゃれ感” を自動生成。
以降はセクションごとの微調整を、今回紹介するプロンプトで行います。
指示 10 連発
| # | コマンド例 | 何が嬉しい？ | うまく効かせるコツ |
|---|---|---|---|
| 1 | 洗練されたUIにしてください | 余計な装飾を抑えて品よくまとめる | 基本のトーン & マナーを維持したいときに最初に入れる |
| 2 | ベースカラーは #00C4CC でお願いします |
カラーバリエーションの暴走を防止 | アクセントカラーはトークン指定で別途渡すと◎ |
| 3 | モダンなUIにしてください | “シンプル過ぎ” と “盛り過ぎ” の中間を狙う | モバイルアプリなら「タブが主役」の構成に誘導されやすい |
| 4 | リッチor美しいUIにしてください | 要素間の階層感を強調して存在感アップ | 飾り枠・グラデ・ドロップシャドウを許可する時のスイッチ |
| 5 | 視認性が悪いので WCAG AAA ランクのカラーリングをしてください | コントラスト調整の一撃 | テキスト/背景の比率を厳密にチェックしたい時に |
| 6 | マージンを 10px、パディングを 10px にそろえてください | ガタつく余白を一網打尽 | 数値は “8 の倍数” にするのが吉 |
| 7 | 【PC】トップページ > ヒーローセクション > CTA ボタンを中央寄せに | 親要素から順にたどれるので認識ミスなし | PC/SP の頭出しを忘れずに |
| 8 | ヒーローセクション: CTA ボタンの左右マージン +8px | 影響範囲を最小化 | 「:」で範囲 → 指示の型にすると読み取り精度アップ |
| 9 | キャプチャ画像 https://example.com/ss.png 内のカードだけ角丸 12px | 画像解析でピンポイント修正 | URL 貼るだけ、説明いらず |
| 10 | 以下の Markdown 設計書を参照 | 毎度同じ指示を書かなくて済む | デザインシステムを md で共有→AI に読ませるのが最強 |
トラブルシューティング
| 症状 | 処方箋 |
|---|---|
| レスポンスが “真っ白” | デザインシステムの読み込み漏れ → Markdown を再読込 |
| 急にド派手な配色 | ターン制御を忘れている → ベースカラー指定を再送 |
| 余白指示が無視される | 親要素の特定ミス → 7. の形式でフルパス指定 |
まとめ
エンジニアでもUIにこだわりたい、プロトタイプだとしても美しいデザインにしたい
そんな悩みをサクッと解消する言葉の表現を加速していければ！
CursorEditor で履歴をテンプレ化 → チーム共有すれば、誰が触ってもデザインのブレが消えます。
「こんな指示も効くよ！」というアイデアがあれば、ぜひコメントで教えてください。
Zenn のリアクション（LGTM👍）が次回アップデートの活力になります！
Happy Vibe Coding!
Discussion