LOG67R2R2R2026/2/15

Clineを「AIエンジニア」として雇用する。デザイナーがClaude × Clineでチームを作る最初の30分

導入

UI/UXデザイナーとしてさまざまな体験を追求してきましたが、これまではその具現化を「誰か（エンジニア）」に委ねるしかありませんでした。自分のビジョンを即座にコードへと変換してくれる「右腕」がいない。この実装までの距離というノイズを解消するためにAIエンジニアを雇うことに決めました。

※注釈：デジタルツイン学習（R2R2R）の検証プロセス本プロジェクトは、AIの判断を物理的動作へ変換する設計を検証するものです。現実空間をデジタルツイン化し、仮想空間での大量試行（Real-to-Render）から得た最適解を、実世界のモーター駆動（to-Real）へ還元する「R2R2Rパイプライン」の実装過程を記録・考察します。

開発環境のセットアップ

脳と作業机の確保

AIに高度な推論を行わせるための契約をし、彼らが実際にコードを書き殴るための「作業机」をM用意します。

実装のステップ: ブラウザで Claude.ai にアクセスして Claude Pro のサブスクリプションを有効化します。次に、Anthropic Console から API Key を発行し、メモ帳などに控えておきます。さらに、コードエディタである「Visual Studio Code」を公式サイトからダウンロードしてインストールし、アプリケーションを起動します。

設計の意図: 無料版の制限を排除し、AIが最大限のパフォーマンスを発揮できる環境を整えるためです。また、汎用的なチャット画面ではなく、実際の開発環境（VS Code）とAIを直結させることで、デザインと実装の境界線をなくす準備をします。

自律型エージェントの導入

専属エンジニア Cline の雇用

ただのチャットAIではなく、自らファイルを操作し、ターミナルを叩く「自律型エージェント」をVS Code内に組み込みます。

実装のステップ: Visual Studio Code の左側にある Extensions アイコンをクリックし、検索窓に Cline と入力してインストールを実行します。インストール完了後、画面に現れた Cline の設定アイコンを開き、 API Provider に Anthropic を選択します。そこに先ほど取得した API Key を入力し、 Model で claude-3-5-sonnet を指定して設定を保存します。

設計の意図: デザイナーの指示を「言葉」で終わらせず、「動作するコードやファイル」という実体に変えるための「手足」を持たせるためです。これにより、指示を出すだけでディレクトリ作成や環境調査を代行してくれる、パートナーが誕生します。

プロジェクトの始動

最初の対話と現状把握

AIエンジニアに、プロジェクトのビジョンを伝え、現在のMacの環境を調査させます。

実装のステップ: Cline のチャット欄に向かって、自分がUXデザイナーであること、そしてロボティクスUX事業を始めることを伝えます。続けて「プロジェクト用のフォルダを作成し、このMacの macOS のバージョンや開発環境を調査してレポートしてください」と入力を完了します。

設計の意図: AIにコンテキスト（文脈）を与えることで、単なるツールから「プロジェクトメンバー」へと意識を昇華させます。また、最初のタスクとして環境調査を依頼することで、AIが正しくシステムを操作できているかという「信頼性」を互いに確認して機能させます。

Visual Studio CodeとClineについて

Visual Studio Code (VS Code)

世界中のエンジニアが最も愛用している「テキストエディタ（高機能な書きもの机）」です。

デザイナーにとっての例え: テキストを打つだけの「メモ帳」が、プロ用機材に進化した姿です。Figmaが「デザインを描く場所」であるように、VS Codeは「プログラムのコードを書く場所」です。

なぜこれを使うのか: 非常に動作が軽く、自分の好みに合わせて「拡張機能（プラグイン）」をどんどん追加できるからです。今回は、このVS Codeを土台にしてAIを住まわせます。

Cline (クライン)

VS Codeの中に住み着く、自律型のAIエンジニアという拡張機能です。

デザイナーにとっての例え: 単にチャットで相談に乗ってくれるだけのAI（ChatGPTなど）とは違い、Clineは「実際にあなたのMacのファイルを操作し、フォルダを作り、プログラムを実行までしてくれる実務担当者」です。

なぜこれを使うのか: 「こういう機能が欲しい」と日本語で指示を出すだけで、ClineがVS Codeの中でカタカタとコードを書き始め、必要なら勝手にエラーを直して、完成まで持っていってくれます。

実装のステップ: VS Codeのサイドバーにある Cline のアイコンをクリックしてチャット欄を開きます。そこに日本語で「ロボットシミュレーション用の Robot_Project というフォルダを作成し、その中に config.json という設定ファイルを作ってください」と入力して送信します。
設計の意図: デザイナーは「何をしたいか」という上流の設計に集中し、フォルダ作成やファイル命名といった「細かな事務作業と実装」をAIに丸投げすることで、クリエイティブな思考を止めないためです。

まとめ

これまで「設定」や「インストール」という作業は、Clineが「承知しました。ではフォルダを作成し、システムをチェックします」と動き出した瞬間に消えます。エンジニアを一人雇ったのと同等の、あるいはそれ以上の万能感が、画面から溢れ出してきます。ここからはデザインち手（とAIの手）で直接形になっていきます。