AI UI デザイナー：統一感のある UI を、あなたのコードの中で

AI UI デザイナーの仕事

成果物はコードなので、あなたが承認すればそのままリリースできます。

• ページの文字組み、余白、色の不統一を洗い出し、デザイントークンで修正します。
• その場限りのマークアップを共通コンポーネントにまとめます。
• ダークモードを追加し、確認します。
• アクセシビリティの問題を直します：コントラスト、フォーカス状態、ラベル、キーボード操作。
• レビュー用に、デスクトップとスマートフォンの幅でビフォーアフターのスクリーンショットを撮ります。

与える目標

新しく採用した人と同じように、AI 社員にも動かすべき数字を 1 つ渡し、毎週振り返りましょう。まずは次の中から 1 つ選んでください。

毎日のルーティン

• ボードか監査リストから次の画面を選ぶ。
• デスクトップとスマートフォンの幅、ライトとダークでスクリーンショットを撮る。
• デザインシステムのトークンとコンポーネントで修正し、パターンが繰り返されていればコンポーネントを追加する。
• ブラウザでもう一度確認し、アクセシビリティのチェックを実行する。
• ビフォーアフターのスクリーンショット付きでプルリクエストを作成する。

Claude Code または Codex でAI UI デザイナーをセットアップする方法

1. 役割ブリーフを書く

   社員が作業するリポジトリに CLAUDE.md（Claude Code）または AGENTS.md（Codex）として保存します。そうすれば、どのセッションも仕事・目標・ルールを把握した状態で始まります。詳しくは CLAUDE.md ガイド をご覧ください。

   # 役割：UI デザイナー
   目標：仕上げた画面を週に 3 つ。
   
   ## 画面ごとに
   1. スクリーンショットを撮る：デスクトップとスマホ、ライトとダーク。
   2. 文字組み、余白、色を自社のトークンだけで修正する。
   3. コンポーネントを再利用し、パターンが繰り返されていれば切り出す。
   4. コントラスト、フォーカス状態、ラベルを確認する。
   5. ビフォーアフターのスクリーンショット付きで PR を作成する。
   
   ## ルール
   - トークン以外の新しい色、フォント、余白の値を使わない。
   - 文言、主要フローのレイアウト、ブランドを変える前には確認する。

2. 必要なツールを渡す

   フロントエンドのリポジトリとローカル開発サーバー、スクリーンショットのために操作できるブラウザ、デザイントークンとコンポーネントライブラリ、そしてアクセシビリティチェッカー。

3. あなたの承認が必要な操作を決める

   ブランド（ロゴ、色、フォント）、文言、登録や決済フローのレイアウト、コンバージョンに関わるページで顧客が気づく変更の前には、確認を取らせましょう。

4. スケジュールに乗せる

   職種に必要なのは単発のプロンプトではなく、決まったリズムです。繰り返すプロンプトが 1 つだけなら /loop やスケジュールタスクを使い、そうでなければ勤務時間、ハートビート、タスクのボードを与えます。詳しくは Claude Code を自発的に動かす方法 をご覧ください。

関連ガイド

デザイナーをエンジニアと並べて動かす方法は 複数の Claude Code エージェント をご覧ください。自分から仕事を取るようにするには Claude Code を自発的に動かす方法 が参考になります。

AI UI デザイナーをスクリプトで作らずに採用する

Crewmark には、すぐに採用できるAI UI デザイナーがいます。あなたの Claude Code、Codex、DeepSeek Harness、OpenCode のセッション上で、すでに契約しているサブスクリプションのまま動きます。勤務時間中はハートビートで起動し、共有ボードから次のタスクを取り、判断が必要なときはあなたにメッセージを送ります。

1. 職種を選ぶ

   スキル、目標、スケジュールはあらかじめ設定済みです。目標をあなた自身の数字に変更してください。

2. プロジェクトを接続する

   社員が作業するリポジトリまたはフォルダでセットアップコマンドを実行します。社員には専用のセッションとチェックアウトが用意されます。

3. 付きっきりではなく、レビューする

   社員は作業しながらタスクにコメントを残し、承認リストにある操作の前には必ず確認を取ります。詳しくは AI 社員とは をご覧ください。

AI UI デザイナーについてよくある質問