ui-ux-polish

UI/UX の洗練 — 反復的な改善ワークフロー

使用するタイミング： サイトやアプリがすでに動作していて、見た目もまずまずで、さらに改善したい場合に使います。見た目が悪く、全面的な刷新が必要な場合は、別のアプローチを使います。

重要なポイント： モデルに同意を求める（「そう思いませんか？」）ことで、なぜかモデルがより意欲的に磨き上げてくれます。また、デスクトップとモバイルを分けて検討するよう指示すると、はるかに良い結果が得られます。

---

ワークフロー

概要

1. アプリがすでに動作していて、見た目もまずまずである
2. 磨き上げるためのプロンプトを実行する
3. エージェントが段階的に改善する
4. 何度も繰り返す（10 回以上）
5. 各回で小さな改善を積み重ねる

複数回の反復が効果的な理由

• 毎回、たとえ小さな改善でも、何らかの段階的な改善を試みます
• 10 回繰り返すと、その効果は大きく積み重なります！
• 複数のエージェントで同時に作業できます
• 累積効果は劇的です

---

正確なプロンプト — UI/UX の洗練

このプロンプトは非常によく使うため、Stream Deck のボタンに登録する価値があります。

I still think there are strong opportunities to enhance the UI/UX look and feel and to make everything work better and be more intuitive, user-friendly, visually appealing, polished, slick, and world class in terms of following UI/UX best practices like those used by Stripe, don't you agree? And I want you to carefully consider desktop UI/UX and mobile UI/UX separately while doing this and hyper-optimize for both separately to play to the specifics of each modality. I'm looking for true world-class visual appeal, polish, slickness, etc. that makes people gasp at how stunning and perfect it is in every way.  Use ultrathink.

---

このプロンプトが効果的な理由

1. 同意を求める

「そう思いませんか？」という表現によって、単に指示を実行するのではなく、改善が可能かどうかについてモデルに推論させます。

2. デスクトップとモバイルを分ける

"carefully consider desktop UI/UX and mobile UI/UX separately...
hyper-optimize for both separately to play to the specifics of each modality"

これにより、どちらにも「まあまあ」だが、どちらにも優れていない妥協案をモデルが作るのを防げます。

3. 高い基準を設定する

参照する表現：

• 「世界水準」
• 「Stripe が採用しているようなベストプラクティス」
• 「その見事さと完成度に人々が息をのむ」

こうした基準によって、一般的な「もっと良くして」という指示よりも、モデルを高品質な仕上がりへと導きます。

4. Ultrathink を使う

思考を深めることで、モデルは次のことができるようになります。

• 現状を徹底的に分析する
• 複数の改善案を検討する
• 最も効果の高い変更を選ぶ
• エッジケースを検討する

---

このタスクに適したモデル

モデル	効果
Claude Code + Opus 4.5	非常に優れている
Codex + GPT 5.2（高／非常に高い推論）	非常に優れている
Gemini CLI	良好

---

技術スタックとの互換性

このプロンプトは次のものに対応します。

• Next.js 16 + React 19 + Tailwind 4
• あらゆるモダンな Web フレームワーク
• Framer Motion などのアニメーションライブラリを使うアプリケーション
• ほぼあらゆるものに対応します。汎用性が高く、十分に応用できます

---

反復プロトコル

単一エージェント

# First pass
[Run the UI/UX polish prompt]

# Review changes
[Agent makes improvements]

# Second pass
[Run the same prompt again]

# Repeat 10+ times until changes become minimal

複数エージェント

複数のエージェントで、UI/UX の洗練作業を同時に進めることができます。

• それぞれが異なる領域に集中します
• ファイル予約を使って競合を避けます
• 改善をより速く積み重ねられます

---

使用する場合と使用しない場合

このプロンプトを使う場合：

• アプリが正しく動作している
• 基本的なスタイルが整っている
• 「まずまず」から「世界水準」へと引き上げたい
• 反復的な改善に取り組む準備ができている
• デスクトップとモバイルの両方を最適化したい

このプロンプトを使わない場合：

• アプリが壊れている、またはバグがある（まずバグを修正してください）
• スタイルの根本が間違っている（全面的な刷新が必要）
• 基本的なデザインシステムが整っていない
• ゼロから作り始める

全面的な刷新には、まずデザインシステムとコンポーネントライブラリの確立に重点を置いた、別のアプローチを使ってください。

---

モデルが通常改善する項目

見た目の洗練

• 余白とパディングの一貫性
• タイポグラフィの階層
• 色のコントラストとアクセシビリティ
• 影と奥行きの効果
• 角丸の一貫性
• ホバー／フォーカス状態

インタラクションデザイン

• ボタンのフィードバック
• 読み込み状態
• トランジションとアニメーション
• エラー状態の処理
• 空の状態のデザイン

モバイルの最適化

• タッチ対象のサイズ
• レスポンシブのブレークポイント
• モバイル専用のナビゲーション
• ジェスチャーへの対応
• モバイル端末でのパフォーマンス

デスクトップの最適化

• キーボードナビゲーション
• ホバー状態
• 複数カラムのレイアウト
• サイドバーのナビゲーション
• パワーユーザー向けショートカット

---

進捗の追跡

各イテレーションの後、次のような改善に気づくかもしれません。

• 影がさりげなく改善される
• 余白のリズムが整う
• タイポグラフィの一貫性が高まる
• アニメーションがより滑らかになる
• レスポンシブ動作が改善される

こうした小さな変更が積み重なります。10回見直したアプリは、1回だけ見直した場合と比べて、見違えるほど良くなります。

---

Beads との統合

体系的に UI/UX に取り組むには、beads を作成します。

br create "Polish homepage UI/UX for desktop" -t enhancement -p 2
br create "Polish homepage UI/UX for mobile" -t enhancement -p 2
br create "Polish dashboard UI/UX for desktop" -t enhancement -p 2
br create "Polish dashboard UI/UX for mobile" -t enhancement -p 2

これにより、通常の bead ワークフローの一環として、エージェントが UI/UX の仕上げに取り組めます。

---

プロンプトの完全なリファレンス

メインの仕上げ用プロンプト

I still think there are strong opportunities to enhance the UI/UX look and feel and to make everything work better and be more intuitive, user-friendly, visually appealing, polished, slick, and world class in terms of following UI/UX best practices like those used by Stripe, don't you agree? And I want you to carefully consider desktop UI/UX and mobile UI/UX separately while doing this and hyper-optimize for both separately to play to the specifics of each modality. I'm looking for true world-class visual appeal, polish, slickness, etc. that makes people gasp at how stunning and perfect it is in every way.  Use ultrathink.

代替案：一般的な精査（agent-swarm-workflow より）

Great, now I want you to super carefully scrutinize every aspect of the application workflow and implementation and look for things that just seem sub-optimal or even wrong/mistaken to you, things that could very obviously be improved from a user-friendliness and intuitiveness standpoint, places where our UI/UX could be improved and polished to be slicker, more visually appealing, and more premium feeling and just ultra high quality, like Stripe-level apps.

---

ヒント

1. イテレーションを飛ばさない — 変更が小さく見えても、続けてください
2. 変更をレビューする — モデルが問題を起こしていないことを確認してください
3. 実機でテストする — デスクトップブラウザーとモバイルの使い勝手は異なります
4. アクセシビリティを考慮する — WCAG 準拠は重要です
5. パフォーマンスを意識する — 見た目が良くても遅ければ、優れた UX とは言えません