ui-design

[スキル名] ui-design ユーザーからページの UI スタイル（レイアウト、間隔、色、コンポーネントの組み合わせなど、視覚的な調整）の変更を求められました。構造化された共同作業プロセスを通じて変更を完了し、各ステップが目標と一致していることを確認し、無駄な推測を排除します。

核となる原則

• 推測しない、先走らない — 目標と一致するまで、決してコードに触れません。
• スクリーンショットが第一言語 — ユーザーにスクリーンショットの提供を積極的に求め、スクリーンショットで問題を特定します。
• ASCII アートで提案 — レイアウトの提案は ASCII アートで描き、テキストでの説明は曖昧さを生じやすいため避けます。
• 一度に1点のみ変更 — 一度に複数の場所を変更せず、段階的に目標に近づけます。

作業フロー

ステップ1：問題の特定

ユーザーが特定の場所の変更を希望する場合、まず2つのことを行います。

1. コードを読む — 関連ファイルを読み込み、現在の実装を理解します。
2. 現状を説明する — 現在のレイアウトを ASCII アートで描き、「私が理解しているのはこの通りですが、合っていますか？」とユーザーに確認します。

例：
┌─────────────────────────────────────────────┐
│ 📈 タイトル                                [🔄] │
│ サブタイトルの説明文                           │
│ 🔍 [検索ボックス...                         ] │
├─────────────────────────────────────────────┤

禁止事項：このステップを飛ばして「どのように変更したいですか？」と直接尋ねること。まずユーザーに現状の理解を確認してもらう必要があります。

ステップ2：提案の提示

2〜3つの提案を提供し、各提案には以下を含めます。

• ASCII レイアウト図 — 変更後の状態を描きます。
• 一文の説明 — その提案の核となる考え方は何かを説明します。

例：
提案 A：検索と更新を同じ行に配置
┌──────────────────────────────────────────┐
│ 🔍 [検索ボックス...                ]    [🔄]  │
└──────────────────────────────────────────┘

提案 B：更新をタイトル行に移動
┌──────────────────────────────────────────┐
│ 📈 タイトル                           [🔄]  │
│ 🔍 [検索ボックス...                         ] │
└──────────────────────────────────────────┘

禁止事項：

• 1つの提案しか提示しない（ユーザーに選択肢がないため）
• 3つ以上の提案を提示する（選択が困難になるため）
• 提案がテキストのみで ASCII 図がない

ステップ3：ユーザーの選択を待つ

ユーザーが提案を選択した後、初めてコードを書き始めます。

禁止事項：ユーザーが選択する前にコードの変更を開始すること。

ステップ4：コードの変更

最小限の変更を実行し、ユーザーが選択した提案に関連する部分のみを変更します。

禁止事項：ついでに他の場所を変更したり、コード構造を最適化したり、コメントを追加したりすること。

ステップ5：微調整

変更後、ユーザーに効果を確認してもらいます。ユーザーは微調整を提案するかもしれません。

• 「枠線を追加してください」
• 「色が濃すぎます」
• 「間隔をもう少し広げてください」

微調整は具体的で小さな変更であり、直接実行します。再度提案選択プロセスを経る必要はありません。

ユーザーのフィードバックが具体的でない場合（例：「何か違う」）、積極的に問い詰めます。

• 「サイズの問題ですか、色の問題ですか、それとも位置の問題ですか？」
• 「隣のどの要素との組み合わせが不調和ですか？」

コミュニケーション規範

ユーザーが提供すべき情報

AI が行うべきこと

AI が決して行うべきではないこと

• ユーザーが「レイアウトを変更してほしい」と言っただけで、直接アイデアを推測してコードを変更すること
• 一度に大量のコードリファクタリングを提示すること
• 微調整の段階で複数の提案を提示し、ユーザーに選択させること
• ユーザーが言及していない場所を勝手に変更すること