参考リンク
Devin の関連記事
公開されているガイドに記載されているとおり、Devin を利用するための、デザイン中心のチュートリアル、ドキュメント、ウォークスルー。
Devin 
OpenDesign OpenDesign で
Devin と
デザインする。
OpenDesignでDevinを使ってインターフェースをデザインする方法: 委任して戻ってくる複数ステップのビルド、ブリーフからレビュー済みファイルまでの1つのドキュメントセクションタスク、そして始める前に知っておくべき限界。
Devin を始める3つの出発点
Devin をどこから始めるか
このガイド・UIデザイン
Devin を使ってプロダクトのインターフェースを構築する
このガイドでは、ブリーフ、参照資料、デザインルール、そしてレビュー済みの HTML 成果物について解説します。
このガイドを読む セットアップDevinをゼロからセットアップする
まっさらなマシンから、UI を構築・検証できる Devin for Terminal に至るまでの全工程。
セットアップに進む 比較Devinを他のエージェントと比較する
デザインタスクにおいて Devin が Codex、Claude Code、Cursor と比べてどう位置づけられるか、そして別のワークフローが適するのはどんなときか。
比較を見るDevinによる1件の完全なデザインタスク
Devinのデザインタスク：ブリーフからインターフェースまで
1つのタスクを最初から最後まで追跡します。あなたが提示するブリーフと制約、Devin が返す成果物、そして完了と見なす前にあなたが実施するチェックです。以下のインターフェースはこのページ用に作成された例示であり、記録された Devin の実行ではありません。
1設計ブリーフと制約条件
ブリーフ開発者向けドキュメントサイトの「はじめに」セクションをデザインしてください。ナビゲーション、注記とコードを含む記事、そして「このページ内」レールです。セクション全体をレビュー可能な1つのファイルとして返してください。デスクトップとスマートフォン。
- デザインシステムOpenDesign のペーパーキャンバス：Albert Sans、単一のグリーンアクセント
- ブレークポイント1440px のデスクトップと 390px のモバイル、横スクロールなし
- インタラクションサイドバーナビゲーション、コードコピーアクション、「このページ内」ハイライト
- 出力安定した
data-od-idフックを備えた、単一の自己完結型 HTML ファイル
2作業の分担：あなた、Devin、そして OpenDesign
- あなた
ブリーフを作成し、デザインシステムを選び、受け入れ基準を定義します。
- Devin
Devin がレイアウトを計画し、HTML、CSS、JavaScript を書き、要求に応じて修正します。
- OpenDesign
OpenDesign がデザインシステムとスキルを提供し、プレビューをレンダリングし、すべてのバージョンをあなたのプロジェクト内のファイルとして保存します。
- レビュー
引き渡し前に、視覚的階層、8px グリッド上のスペーシング、両方のブレークポイント、そしてすべてのインタラクションを確認します。
3Devin の成果物：1440px と 390px のドキュメントページ
4ハンドオフ前のレビュー
レイアウト
グリッドとスペーシング
8px グリッド上の3カラム。記事の行幅は 72 文字未満に保たれています。
階層
視覚的階層
タイトル、注記、その後に手順。アクセントはアクティブなナビゲーション項目のみを示します。
レスポンシブ
モバイルレイアウト
ナビゲーションはシートに変わります。「このページ内」レールはジャンプメニューに折りたたまれます。
インタラクション
インタラクションの確認
コードをコピーし、見出しにジャンプし、ナビゲーションシートを開きます。
適合性
Devin が適している場合と、そうでない場合
Devinが適している場合
- 自律的なマルチステップビルド。 Devin はスニペットで止まるのではなく、フロントエンドタスク全体（スキャフォールディング、コンポーネントの接続、テストの実行）を計画して実行します。
- サンドボックス化されたクラウドへの引き継ぎ。 より長いビルドは、独自のコンピューターを持つクラウドエージェントに引き継ぐことができ、あなたが離れた後も続行されます。
- プロジェクトルール + ブラウザ検証。 プロジェクトコンテキストがあなたの規約を引き継ぎ、実ブラウザでのレンダリングが各ブレークポイントで出力をあなたの参照資料と照合します。
- アカウントベース、モデル選択。 サインインには Devin アカウントを使用します。Devin は Cognition 独自の SWE-1.6 を含む最先端モデルで動作します。
別のワークフローを選ぶべきケース
- 編集可能なベクターファイルが必要。 出力は HTML であり、編集可能なデザインドキュメントではありません。必要なアセット形式には、別途ベクターワークフローを探してください。
- 参照資料も制約もない。 デザインシステムや例がないと、出力は一般的な見た目になりがちです。まずブリーフを作成してください。
- このエージェントに必要な認証情報がありません。必要な認証情報: Devin（Cognition）アカウント — アカウントベースのサインインであり、BYOK ではありません。OpenDesign は認証情報を提供または代理管理しません。
- チームが Codex または Claude Code で作業している。 これらのエージェントにはそれぞれのページがあり、セットアップも異なります。関連エージェント を参照してください。
互換性
Devinを始める前に必要なもの
このガイドは、OpenDesign デスクトップアプリを通じて接続された Devin に焦点を当てています。公開参照資料は 2026年9月6日に確認しました。
ツールの範囲Devin, by Cognition
Devin for Terminal は、Cognition の自律型 AI ソフトウェアエンジニアである Devin のコマンドライン版です。コードベース、ツール、環境にアクセスできるローカルコーディングエージェントとして動作し、マルチステップタスクを独立して計画・実行します。このページは OpenDesign を通じて Devin でインターフェースを設計することに関するものであり、Devin 自体のインターフェースではありません。OpenDesign の セットアップノート に利用可能なエージェントが記載されています。
アカウントと認証Devin (Cognition) アカウント — アカウントベース
Devin（Cognition）アカウント。BYOK ではなくアカウントベースのサインインです。Devin（Cognition）アカウントで認証します。認証情報はお使いのマシン上のエージェントに留まります。このページはクォータや価格を約束するものではありません。
システムとバージョンデスクトップアプリまたはソース
デスクトップビルドについてはダウンロードページを参照してください。ソースのクイックスタートにある Node.js と pnpm の要件は、ソースからの実行に適用されるものであり、デスクトップパッケージのインストールには適用されません。互換性のある最低 Devin バージョン：ここでは未確認です。
接続確認成功の目安
インストールしたバージョンの接続手順に従い、小さなタスクを実行します。Devin がそれを処理したこと、成果物が開くことを確認します。ダウンロードだけでは、動作する接続は確立されません。
デスクトップアプリから始める
3ステップで行うDevinのセットアップ
まずダウンロードし、インストールしたバージョンの Devin セットアップを完了してから、小さな結果を検証します。この手順に従うために OpenDesign をソースからビルドする必要はありません。
- 1
OpenDesignデスクトップアプリをダウンロードする
お使いのコンピューター用のパッケージを選択し、インストールしてアプリを開きます。
OpenDesignをダウンロードチェックポイントデスクトップアプリが開きます。すでにインストール済みですか？ 次のステップに進んでください。再度ダウンロードする必要はありません。 - 2
Devinの接続を準備する
インストール済みのバージョンにあるDevinの手順に従ってください。Devin (Cognition) アカウントで認証してください — 認証情報はお使いのマシン上のエージェントに保持されます。
Devin ドキュメント# 1. Install Devin for Terminal curl -fsSL https://cli.devin.ai/install.sh | bash # 2. Start it in your project and sign in on first run cd your-project devin # sign in with your Devin (Cognition) account公開ガイドの Devin セットアップノートから引用。最新のコマンドについてはベンダーのドキュメントを確認してください。
チェックポイント意図したエージェントとアカウントを確認します。利用できない場合は、より大きなタスクを試す前に互換性を確認してください。 - 3
小さなDevinタスクを1つ実行する
小さなブリーフから始めて、1回の修正を含むループ全体を判断できるようにします。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を構築してください。私のデザインルールを適用してください。デスクトップとモバイルの幅で確認してください。
チェックポイント結果を開き、保存状態をテストし、具体的な変更を1つ依頼します。生成されたファイルはレビューの開始を示すものであり、終了ではありません。
OpenDesign をソースから実行する場合は、代わりに テクニカルクイックスタート に従ってください。
Devinのデザインワークフロー
Devin と共にブリーフからレビュー済みファイルへ至る5つのステップ
このウォークスルーでは、1つのドキュメントセクションのタスクを最初のブリーフから検証済みの成果物まで追跡します。各ステップで、あなたの入力、Devin の自律的な実行、OpenDesign の貢献、そしてあなたが実施するチェックを確認できます。
- 1
デザインブリーフ
ブリーフは簡潔かつ短く、3〜6行に保ちます。その画面が誰のためにあるのか、何を達成する必要があるのか、どのプラットフォームが重要かを明記します。
- あなたあなたがブリーフを作成し、すでに持っている参照スクリーンショットを添付します。
- DevinDevin はプロジェクトの指示ファイルと併せてブリーフを読み、ブリーフが曖昧な場合は明確化を求めます。
- OpenDesignOpenDesign がプロジェクト、プロンプトの入力面、および成果物タイプに合ったスキルを提供します。
- 確認あなたはブリーフに受け入れ基準が明記されていることを確認します。Devin が構築する前にそれを行うほうが、後から出力を修正するよりもコストが低く済みます。
- 2
デザイン制約
デザインシステムと、いくつかの固いルール。この組み合わせにより、Devin の出力は既定の一般的な見た目にならず、ブランドに沿ったものになります。
- あなたあなたがデザインシステムを選択し、ブレークポイントと、再利用が必要なコンポーネントを指定します。
- Devinコードを書く前に、Devin は DESIGN.md のトークンと姿勢ルールをコンテキストに読み込みます。
- OpenDesignOpenDesign がデザインシステムライブラリを提供し、あなたの選択をスキルテンプレートに組み込みます。
- 確認あなたはトークンがブランドに一致することを確認します。アクセントは1つ、正しいフォント、正しい角丸です。
- 3
インターフェースを生成する
Devin は、レイアウト、スタイル、インタラクション、安定したフックを網羅した自己完結型 HTML ファイルを生成します。
- あなたあなたの役割は、待つか、明確化の質問に答えることです。設定すべきことはありません。
- DevinDevin がセクションを計画し、HTML、CSS、JavaScript を書き、ファイルを実行し、失敗を修正します。
- OpenDesignOpenDesign が成果物をプロジェクトフォルダに保存し、プレビュー用にインデックス化します。
- 確認まだレビューはしません。ファイルはレンダリングされてから判断し、ソースから判断しないでください。
- 4
プレビュー
OpenDesign が指定した幅でファイルをレンダリングします。ここでデザインの品質が判断されます。
- あなた幅を切り替えてインタラクションを実際に試し、特定の要素にコメントを残します。
- DevinDevin はプレビューに残したコメントを読み取り、次のリビジョンを準備します。
- OpenDesignOpenDesign はプレビューをレンダリングし、コメントと編集のための
data-od-idターゲットを公開します。 - チェック階層、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントが控えめに使われ続けているかを確認します。
- 5
修正と検証
プレビュー内の要素を指して変更を依頼します。各リビジョンは新しいファイルになり、無言の上書きは行われません。
- あなたあなたはコメントをリクエストに変換し、タスクが完了した時点を判断します。
- DevinDevin は変更をその場で適用し、ファイルを再実行します。
- OpenDesignOpenDesign はバージョンを並べて保持し、完了時に画像または HTML をエクスポートします。
- チェック変更した領域だけを再確認し、その後、各ブレークポイントで一度ずつページ全体を確認します。
リソース
Devinデザインリソース
制限事項
Devin の制限、人による確認、フォールバック
- 範囲Devin はセッションをサンドボックス化されたクラウドエージェントに引き継ぎ、非同期で作業を続行できるため、長めのビルドはノート PC を閉じた後でも完了できます。このページは OpenDesign に接続された Devin を扱うものであり、Devin のすべての機能を扱うものではありません。
- 利用制限利用制限とコストは、使用する資格情報に連動します — BYOK ではなく、アカウントベースのサインインを行う Devin（Cognition）アカウントです。このページは無料クォータを主張するものではありません。
- ネットワークローカルプロジェクトファイルは、オフライン推論を意味するものではありません。機密性の高い入力を共有する前に、エージェントのプロバイダー設定とデータポリシーを確認してください。
- 出力は HTML ですアーティファクトは HTML ファイルとして返されます — ベクターデザインファイルではありません。
- 手動レビューあなたはプレビューでアクセシビリティ、実際のコンテンツ、ブランド適合性、インタラクションの正確さを確認します。Devin が行う自己チェックは、いずれも最初のパスにすぎません。
- フォールバックDevin が利用できない、またはタスクが失敗した場合は、インストールされているバージョンの接続手順と認証を確認してください。構成を変更する前に、エラーと最後に正常動作したアーティファクトを保存してください。
よくある質問
Devin と OpenDesign に関するよくある質問
Devin for Terminal は本当にデザイン作業ができますか？
はい ― 美的スキル、デザインシステム、そしてコンテキスト内の実際の参照画像があれば、Devin は本番品質のレスポンシブ UI を生成し、自律的なエージェントとしてビルド、実行、そして参照画像との照合による検証まで行えます。そのコンテキストがない場合は汎用的な見た目になりがちで、これが OpenDesign が埋めるギャップです。
Devin にサインインするにはどうすればよいですか？
Devin はアカウントベースです。独自のモデルキーを持ち込むのではなく、Devin（Cognition）アカウントでサインインします。Devin for Terminal をインストールし、プロジェクト内で実行して、初回起動時に認証してください。OpenDesign は認証情報を中継することはありません ― エージェントが直接それらを使用します。
Devin がデザインに適している理由とは？
Devin は完全に自律的なソフトウェアエンジニアです。複数ステップのフロントエンドビルドをエンドツーエンドで計画・実行し、セッションをサンドボックス化されたクラウドエージェントに引き渡して、離席中も作業を継続できます。センスは依然として、提供するデザインシステム、スキル、参照画像から生まれます。
フロントエンドデザインには Devin と Claude Code のどちら？
どちらも優れています。Claude Code はコードベースを意識した具体的なデザイン判断で知られており、Devin の強みは、サンドボックス化されたクラウドへの引き渡しを伴う完全自律的なエンドツーエンドの実行力です。多くのチームは両方を使用しています ― OpenDesign を使えば、デザインのワークフローを変えずにエージェントを切り替えられます。
Devin はサンドボックスで実行されますか？
Devin for Terminal はローカルで実行され、コードベースと環境にアクセスします。また、セッションを独自のサンドボックス環境で動作するクラウドエージェントに引き渡すこともでき、非同期で継続する長時間のビルド、テスト、PR 作成に役立ちます。
Devin for Terminalとは実際には何なのか
Devin for Terminalは、Cognitionの自律型AIソフトウェアエンジニアであるDevinのコマンドライン版です。ローカルコーディングエージェントとして動作し、コードベース、ツール、環境にアクセスできます — リポジトリを読み、ファイルを編集し、シェルコマンドを実行し、単に行を補完するだけでなく自然言語のタスクから作業を計画・検証します。Cognitionはインターフェースを高速かつ応答性良く保つため、Rustでカスタムのターミナルレンダリングライブラリを構築しました。
デザイン作業では、2つの特性が際立ちます。真に自律的であるため、成果を記述すれば、そこに至る多段階の道筋を実行します。また、ビルドがラップトップの容量を超えたときには、セッションを独自のサンドボックス環境で動作し非同期に作業を続けるクラウドエージェントに引き継げます — そのため、完成したプルリクエストに戻ってくることができます。
自律的でエージェント的な実行：Devinは明確な完了基準を備えた明快なプロンプトに導かれ、機能の実装、UIの構築、実行とテストなど、多段階のタスクを自力で計画・実行します。
ローカルエージェント、クラウドへの引き継ぎ：ターミナル上でローカルに動作し、セッションを独自のコンピュータを持つサンドボックス化されたクラウドエージェントにエスカレーションして、あなたが離れた後も作業を続けさせられます。
アカウントベース、モデル選択：Devin（Cognition）アカウントでサインインします。Devinはフロンティアモデルで動作し、Cognition自身のSWE-1.6やその他のフロンティアモデルなどの選択肢から選べます。
資格情報：Devin（Cognition）アカウント — サブスクリプション/アカウントベースのサインインで、独自キーの持ち込み（BYOK）ではありません
形態：ローカルターミナルエージェント、オプションでサンドボックス化されたクラウドへの引き継ぎ
ベンダー：Cognition
デザイン作業では、2つの特性が際立ちます。真に自律的であるため、成果を記述すれば、そこに至る多段階の道筋を実行します。また、ビルドがラップトップの容量を超えたときには、セッションを独自のサンドボックス環境で動作し非同期に作業を続けるクラウドエージェントに引き継げます — そのため、完成したプルリクエストに戻ってくることができます。
自律的でエージェント的な実行：Devinは明確な完了基準を備えた明快なプロンプトに導かれ、機能の実装、UIの構築、実行とテストなど、多段階のタスクを自力で計画・実行します。
ローカルエージェント、クラウドへの引き継ぎ：ターミナル上でローカルに動作し、セッションを独自のコンピュータを持つサンドボックス化されたクラウドエージェントにエスカレーションして、あなたが離れた後も作業を続けさせられます。
アカウントベース、モデル選択：Devin（Cognition）アカウントでサインインします。Devinはフロンティアモデルで動作し、Cognition自身のSWE-1.6やその他のフロンティアモデルなどの選択肢から選べます。
資格情報：Devin（Cognition）アカウント — サブスクリプション/アカウントベースのサインインで、独自キーの持ち込み（BYOK）ではありません
形態：ローカルターミナルエージェント、オプションでサンドボックス化されたクラウドへの引き継ぎ
ベンダー：Cognition
自律型ソフトウェアエンジニアがデザインに適する理由
Devinのデザイン上の強みは、その動作方法 — 自律的なエンドツーエンド実行 — から来ていますが、どのエージェントと同様、センスは依然として与えられる必要があります。
エンドツーエンドのマルチステップビルド：Devinはタスク全体を計画・実行するため、スニペットで止まることなく、ページの足場を組み、コンポーネントを接続し、開発サーバーを実行し、結果をテストすることを一度にできます。
サンドボックス化されたクラウド実行：より長いフロントエンド作業 — 完全なランディングページ、複数画面のフロー — はサンドボックス化されたクラウドエージェントに引き継いでビルドを続行できるため、反復がラップトップに妨げられません。
プロジェクトルールにおける規約：プロジェクトのルールとドキュメントを通じて、エージェントをあなたのトークン、コンポーネント、実際の仕様に向けます。そうすることで、デフォルトの見た目ではなくブランドに沿って動作します。
センスは、あなたが提供する3つの入力から生まれます：デザインシステム、スキル、実際の参照画像です。
教訓はどのエージェントも教えるのと同じです：Devinはデフォルトではセンスを持ちません。制約 — デザインシステム、美的スキル、具体的な参照 — を与えると、良いデザインを生み出します。OpenDesignはまさにそれらの入力をパッケージ化しており、だからこそ両者は組み合わさるのです（詳細は後述）。
エンドツーエンドのマルチステップビルド：Devinはタスク全体を計画・実行するため、スニペットで止まることなく、ページの足場を組み、コンポーネントを接続し、開発サーバーを実行し、結果をテストすることを一度にできます。
サンドボックス化されたクラウド実行：より長いフロントエンド作業 — 完全なランディングページ、複数画面のフロー — はサンドボックス化されたクラウドエージェントに引き継いでビルドを続行できるため、反復がラップトップに妨げられません。
プロジェクトルールにおける規約：プロジェクトのルールとドキュメントを通じて、エージェントをあなたのトークン、コンポーネント、実際の仕様に向けます。そうすることで、デフォルトの見た目ではなくブランドに沿って動作します。
センスは、あなたが提供する3つの入力から生まれます：デザインシステム、スキル、実際の参照画像です。
教訓はどのエージェントも教えるのと同じです：Devinはデフォルトではセンスを持ちません。制約 — デザインシステム、美的スキル、具体的な参照 — を与えると、良いデザインを生み出します。OpenDesignはまさにそれらの入力をパッケージ化しており、だからこそ両者は組み合わさるのです（詳細は後述）。
ゼロからデザイン用に Devin をセットアップする
セットアップ手順は、インストール → サインイン → デザインルールのエンコード → リファレンスの提供 → 実ブラウザでの検証です。
デザインルールをエンコードする：トークン、プリミティブ、規約を、エージェントが読む場所 — プロジェクトのルールとドキュメント内 — に置き、出力が汎用的な見た目にデフォルトするのではなく、ブランドに一致するようにします。
ブラウザ検証を追加する：Devin に実ブラウザでレンダリングさせ、ブレークポイント全体で出力を確認させます。これにより、ビルドが通ったことを確認するだけでなく、デザインに対して検証します。
コマンドとバージョン固有の詳細については、変更される可能性があるため、現在のセットアップセクションを使用してください。
以前のガイドの歴史的なコマンド例。現在の構文はリンク先のベンダードキュメントで確認してください。
デザインルールをエンコードする：トークン、プリミティブ、規約を、エージェントが読む場所 — プロジェクトのルールとドキュメント内 — に置き、出力が汎用的な見た目にデフォルトするのではなく、ブランドに一致するようにします。
ブラウザ検証を追加する：Devin に実ブラウザでレンダリングさせ、ブレークポイント全体で出力を確認させます。これにより、ビルドが通ったことを確認するだけでなく、デザインに対して検証します。
コマンドとバージョン固有の詳細については、変更される可能性があるため、現在のセットアップセクションを使用してください。
# 1. Devin for Terminal をインストール
curl -fsSL https://cli.devin.ai/install.sh | bash
# 2. プロジェクト内で起動し、初回実行時にサインイン
cd your-project
devin # Devin (Cognition) アカウントでサインイン
# 3. タスクを自然言語で説明し、明確な完了基準を伝えて、Devin に計画と実行を任せる。
# 4. ビルドがラップトップの容量を超えたら、セッションをサンドボックス化されたクラウドエージェントに引き継ぎ、作業を続けさせる。以前のガイドの歴史的なコマンド例。現在の構文はリンク先のベンダードキュメントで確認してください。
スクリーンショットを UI に変換する
Devin を使った最も効果的なデザインループは、参照画像を動作するレスポンシブ UI に変換し、一致するまで反復することです — 自律エージェントにビルド、実行、出力と参照の比較を行わせます。
最も明確なビジュアルリファレンスから始め、1 枚のヒーローショットだけでなく、複数の状態（デスクトップとモバイル、ホバー、空、読み込み中）を含めます。
プロンプトでは具体的にし、明示的な完了基準を与えます。曖昧なプロンプトでは、強力なエージェントでも汎用的な UI しか生成されません。
デザインシステムと規約をプロジェクトルールに保ち、トークンと正規のプリミティブがどこにあるかを Devin に伝えます。
開発サーバーを実行し、Devin に実ブラウザでレンダリングさせ、ブレークポイントにリサイズして結果を確認させます。
Devin に実装を参照と比較させて反復します — ビルドが通ることを確認するだけではなく — そして、より長いパスではクラウドに引き継ぎます。
Devin に参照と具体的な制約を与え、完了の定義を明確にします：
プロンプトは焦点を絞り、良い反復はコミットし、悪いものは元に戻します（元に戻すときは Devin に伝えます）。そうすることで、各パスがクリーンなベースの上に積み重なります。
以前のガイドの歴史的なコマンド例。現在の構文はリンク先のベンダードキュメントで確認してください。
最も明確なビジュアルリファレンスから始め、1 枚のヒーローショットだけでなく、複数の状態（デスクトップとモバイル、ホバー、空、読み込み中）を含めます。
プロンプトでは具体的にし、明示的な完了基準を与えます。曖昧なプロンプトでは、強力なエージェントでも汎用的な UI しか生成されません。
デザインシステムと規約をプロジェクトルールに保ち、トークンと正規のプリミティブがどこにあるかを Devin に伝えます。
開発サーバーを実行し、Devin に実ブラウザでレンダリングさせ、ブレークポイントにリサイズして結果を確認させます。
Devin に実装を参照と比較させて反復します — ビルドが通ることを確認するだけではなく — そして、より長いパスではクラウドに引き継ぎます。
Devin に参照と具体的な制約を与え、完了の定義を明確にします：
プロンプトは焦点を絞り、良い反復はコミットし、悪いものは元に戻します（元に戻すときは Devin に伝えます）。そうすることで、各パスがクリーンなベースの上に積み重なります。
devin
# in the prompt:
> 添付の参照（デスクトップ + モバイル）を
React + Vite + Tailwind + TypeScript で実装する。
既存のデザインシステムコンポーネントとトークンを再利用する。
間隔、レイアウト、階層を一致させる；レスポンシブにする。
ブラウザでレンダリングし、ブレークポイント全体で参照に一致するまで
反復する。完了 = デスクトップとモバイルの両方でピクセル単位に近く、
コンソールエラーがないこと。以前のガイドの歴史的なコマンド例。現在の構文はリンク先のベンダードキュメントで確認してください。
プロジェクトルール、ツール、クラウドハンドオフ
3つの拡張ポイントにより、Devin for Terminalは持続的な設計作業に実用的になり、3つすべてがオープンな設計ワークフローにきれいにマッピングされます。
プロジェクトのルールとコンテキスト：設計の慣習、トークン、レビューチェックリストをプロジェクトのルールとドキュメントに保持することで、エージェントは実行するたびにそれらを読み取り、あなたのブランドに沿って作業します。
コードベース、ツール、環境：Devinはローカルエージェントとして実行され、コードベース、ツール、環境にアクセスできます — ターミナルを離れることなく、開発サーバーの実行、ビルドの実行、出力の検証ができます。
サンドボックス化されたクラウドハンドオフ：セッションを独自のサンドボックス内のクラウドエージェントに引き継ぎ、長いビルド、テスト、PR作成を非同期で実行し、その後完成したプルリクエストに戻ります。
これらはまさに、OpenDesignがプロジェクトごとに再作成するのではなく、オーケストレーションするために構築された、ポータブルでエージェント形状の機能です。
プロジェクトのルールとコンテキスト：設計の慣習、トークン、レビューチェックリストをプロジェクトのルールとドキュメントに保持することで、エージェントは実行するたびにそれらを読み取り、あなたのブランドに沿って作業します。
コードベース、ツール、環境：Devinはローカルエージェントとして実行され、コードベース、ツール、環境にアクセスできます — ターミナルを離れることなく、開発サーバーの実行、ビルドの実行、出力の検証ができます。
サンドボックス化されたクラウドハンドオフ：セッションを独自のサンドボックス内のクラウドエージェントに引き継ぎ、長いビルド、テスト、PR作成を非同期で実行し、その後完成したプルリクエストに戻ります。
これらはまさに、OpenDesignがプロジェクトごとに再作成するのではなく、オーケストレーションするために構築された、ポータブルでエージェント形状の機能です。
デザイン向けに Devin、Codex、Claude Code、Cursor、Gemini CLI を比較する
設計作業に単一の勝者はいません — 各エージェントには異なる強みがあり、経験豊富なチームはそれらを積み重ねて使います。公平な要約：
Devin — 完全自律型のソフトウェアエンジニア。多段階のビルドを計画・実行し、サンドボックス化されたクラウドエージェントに引き継ぐ — あなたが離れた後も動き続けるエンドツーエンドのフロントエンドビルドを委任
Codex — フロントエンドスキルによる強力な視覚的洗練；サンドボックス化された非同期ビルド — 委任された非同期ビルドとポータブルなAGENTS.mdルール
Claude Code — 具体的な設計決定（16進数、スペーシング、タイポグラフィ）とコードベースを認識したUX — フロントエンドの推論と大コンテキストのリファクタリング
Cursor — ライブプレビューとインライン編集による視覚的なビルドと確認のループ — IDE内での緊密な反復と監視のUI作業
Gemini CLI — 強力なマルチモーダル画像理解と100万トークンのコンテキスト；無料枠のあるオープンソース — スクリーンショットの多い作業と、デザインシステム全体をコンテキストに保持すること
繰り返されるコミュニティの評決は、テイストは人間から生まれるということです。スキル、参照、制約がなければ、それらはすべて一般的な美学にデフォルトします。それが解決すべき本当の問題であり、それはモデル形状ではなく、デザインツール形状です。
エージェント — 設計の強み — 最適な用途
Devin — 完全自律型のソフトウェアエンジニア。多段階のビルドを計画・実行し、サンドボックス化されたクラウドエージェントに引き継ぐ — あなたが離れた後も動き続けるエンドツーエンドのフロントエンドビルドを委任
Codex — フロントエンドスキルによる強力な視覚的洗練；サンドボックス化された非同期ビルド — 委任された非同期ビルドとポータブルなAGENTS.mdルール
Claude Code — 具体的な設計決定（16進数、スペーシング、タイポグラフィ）とコードベースを認識したUX — フロントエンドの推論と大コンテキストのリファクタリング
Cursor — ライブプレビューとインライン編集による視覚的なビルドと確認のループ — IDE内での緊密な反復と監視のUI作業
Gemini CLI — 強力なマルチモーダル画像理解と100万トークンのコンテキスト；無料枠のあるオープンソース — スクリーンショットの多い作業と、デザインシステム全体をコンテキストに保持すること
繰り返されるコミュニティの評決は、テイストは人間から生まれるということです。スキル、参照、制約がなければ、それらはすべて一般的な美学にデフォルトします。それが解決すべき本当の問題であり、それはモデル形状ではなく、デザインツール形状です。
エージェント — 設計の強み — 最適な用途
落とし穴、そして「AI slop」的な見た目を避ける方法
AIが生成したデザインに対する最も一般的な不満は、凡庸に見えることだ——柔らかなグラデーション、浮いたパネル、大きすぎる角丸、劇的な影、そして「AIが作った」と叫んでいるようなInterと紫の雰囲気。他に報告されている問題には、モバイルレイアウトの崩れや、指示がUIのコピーに漏れ出すことなどがある。これらはいずれもDevin固有のものではない。キュレーションされたデザインコンテキストなしでエージェントを動かせば、どれでも起きることだ。
美的スキルを追加する：キュレーションされたデザインスキルは、エージェントにデフォルトの見た目ではなく、本物の方向性にコミットさせる。
実際のブラウザで検証する：Devinにブレークポイントをまたいでレンダリングとセルフチェックを行わせ、モバイルでレイアウトが黙って崩れないようにする。
トークンとリファレンスを提供する：実際のデザイントークンと参考スクリーンショットは、出力品質を左右する最大のレバーだ。
ルールをプロジェクトコンテキストに書き込む：「ヒーローカード禁止、書体は最大2つ、ブランド優先の階層」といったルールを、エージェントが毎回の実行で読む場所に、明示的な完了基準とともに置く。
どの緩和策も、エージェントにキュレーションされたデザインコンテキストを与えることだという点に注目してほしい。そのコンテキストをプロジェクトごとに手作業で維持するのは、OpenDesignが取り除く苦労だ。
美的スキルを追加する：キュレーションされたデザインスキルは、エージェントにデフォルトの見た目ではなく、本物の方向性にコミットさせる。
実際のブラウザで検証する：Devinにブレークポイントをまたいでレンダリングとセルフチェックを行わせ、モバイルでレイアウトが黙って崩れないようにする。
トークンとリファレンスを提供する：実際のデザイントークンと参考スクリーンショットは、出力品質を左右する最大のレバーだ。
ルールをプロジェクトコンテキストに書き込む：「ヒーローカード禁止、書体は最大2つ、ブランド優先の階層」といったルールを、エージェントが毎回の実行で読む場所に、明示的な完了基準とともに置く。
どの緩和策も、エージェントにキュレーションされたデザインコンテキストを与えることだという点に注目してほしい。そのコンテキストをプロジェクトごとに手作業で維持するのは、OpenDesignが取り除く苦労だ。
OpenDesign 内でデザインに Devin を使用する
OpenDesignは、上記のワークフローがずっと求めていたオープンソースのデザインレイヤーだ。これはDevin for Terminalをファーストパーティのアダプターとして扱い、キュレーションされたスキルとデザインシステムのライブラリ、構造化されたレンダーパイプライン、ローカルのデスクトップUIでそれを包み込む——だからDevinを良いものにするデザインコンテキストが、毎回手作業で組み立てるのではなく、最初の実行からそこにある。OpenDesignはオープンソースでローカルファーストであり、その組み合わせは、すでにターミナルで動かしているエージェントにとって自然な組み合わせだ。
OpenDesignをインストールし、エージェントとしてDevin for Terminalを選択する。
Devin（Cognition）アカウントで認証する——認証情報はエージェントによって直接使用され、私たちを通じてプロキシされることはない。
デザインシステムとスキルを選び、一貫したテイストでデッキ、プロトタイプ、ランディングページを生成する。
すべての成果物とDESIGN.mdファイルは、ホストされたクラウドではなく、あなた自身のリポジトリに置かれる。
同じDevinエージェント、同じアカウント——それに加えて、その周りに本物の、ポータブルな、オープンソースのデザインワークフローがある。OpenDesignはローカルファーストでApache-2.0なので、あなたの作業や認証情報が私たちを通じてマシンの外に出ることはない。
OpenDesignをインストールし、エージェントとしてDevin for Terminalを選択する。
Devin（Cognition）アカウントで認証する——認証情報はエージェントによって直接使用され、私たちを通じてプロキシされることはない。
デザインシステムとスキルを選び、一貫したテイストでデッキ、プロトタイプ、ランディングページを生成する。
すべての成果物とDESIGN.mdファイルは、ホストされたクラウドではなく、あなた自身のリポジトリに置かれる。
同じDevinエージェント、同じアカウント——それに加えて、その周りに本物の、ポータブルな、オープンソースのデザインワークフローがある。OpenDesignはローカルファーストでApache-2.0なので、あなたの作業や認証情報が私たちを通じてマシンの外に出ることはない。
OpenDesignはCognitionと提携していますか？
いいえ。OpenDesign は独立しています。Devin は Cognition の商標です。