Codex
Codex でインターフェースをデザインするためのワークフロー、プラグイン、スライドです。
あなたのコーディングエージェントに。より良いデザインのワークフローを。
22 のコーディングエージェント向けのワークフローガイド、セットアップ手順、デザインリソースをまとめました。すでに使っているツールで、ブリーフを練られたインターフェースに変えられます。
コーディングエージェントのデザインワークフローにおける3つの役割
デザインエージェントとはコーディングエージェントは指示をコードに変換します。デザインワークフローは、そのコードを使えるインターフェースに変える参照資料、制約、レビューを加えます。
- 01あなたのコーディングエージェント
- プロジェクトを読み取り、変更を加え、フィードバックに応じます。すでに使っているツールをそのまま使えます。
- 02OpenDesign
- ブリーフ、デザインリソース、ビジュアルレビューのためのワークスペースです。各エージェントガイドでセットアップ方法を説明します。
- 03あなたの判断
- 参照資料を選び、一貫性を保つべき点を定義し、実際の画面で結果を確認します。
22 のコーディングエージェントのためのデザインワークフローガイド
すでに使っているツールから始めてください。各ガイドでは、そのエージェントの役割、準備すべきこと、次のステップを説明します。このリストはランキングではなく、ディレクトリです。
Claude Code
最初のブリーフから最終レビューまで、Claude Code を使ったフロントエンドデザインのワークフローです。
DeepSeek Harness
ハーネスのセットアップ、ワークフローにおけるその役割、利用できるデザインリソースについて説明します。
OpenCode
選択したツールとモデルプロバイダーを中心に構築するデザインワークフローです。
Grok
Grok Build
セットアップ、前提条件、そして Grok Build を使った最初のビジュアルデザインタスクです。
Cursor
Cursor Agent
Cursor エディタとデザインワークフローが1つのプロジェクトの中でどのように連携するかを説明します。
DeepSeek
DeepSeek TUI
DeepSeek TUI、その前提条件、そして DeepSeek Harness との違いについて説明します。
Hermes
Hermes を使ったワークフローのためのデザインリソース、拡張オプション、前提条件です。
Antigravity
最初にセットアップを行い、その後 Antigravity を使ったフロントエンドデザインとレビューのワークフローに進みます。
Kimi
Kimi CLI
Kimi CLI での最初のデザインタスクに取り組む前に用意しておくべき入力、コンテキスト、セットアップです。
Qwen
Qwen Code
Qwen Code、モデルプロバイダー、デザインワークフローがどのように接続するかを説明します。
Trae CLI
Trae CLI のセットアップと、インターフェースデザインの出発点です。
Qoder
Qoder CLI
Qoder CLI のセットアップと、それを補完するデザインワークフローです。
Mistral Vibe
Mistral Vibe CLI
Mistral Vibe CLI は、一般的な vibe デザインとは異なる、デザインツールとしての位置づけです。
Gemini
Gemini CLI
セットアップからレビューまで、Gemini CLI を使った参照重視の UI ワークフローです。
Copilot
GitHub Copilot CLI
GitHub Copilot CLI を使ったインターフェースデザインのワークフローにおける、リポジトリのコンテキストとレビューです。
Kilo
Kilo を使ったデザインのための設定、モード、実践的な出発点です。
Aider
Aider で既存のコードから始め、一つの慎重な変更を行い、その差分をレビューします。
Pi
Pi のためのセットアップ、拡張機能、デザインリソースです。
Kiro
Kiro CLI
Kiro CLI のワークフローにおいて、要件とインターフェースの判断がどこに位置づけられるかを説明します。
Devin
Devin for Terminal
Devin for Terminal を使って、タスクの枠組みを定め、ハンドオフを定義し、インターフェースをレビューします。
Reasonix
DeepSeek Reasonix
DeepSeek Reasonix を使って、プロジェクトとその関係性を理解し、どこから始めるべきかを把握します。
OpenDesignをダウンロードしてコーディングエージェントを接続する
- 01
OpenDesignをダウンロード
macOSまたはWindows用のビルドを選択し、アプリを開いてください。
- 02
エージェントを接続する
上記のガイドで前提条件を確認し、記載されているセットアップを完了してください。
- 03
最初のタスクを開始する
以下のリソースから、リファレンス、簡単なブリーフ、またはテンプレートを用意してください。
コーディングエージェントのためのデザインリソース
コーディングエージェント、モデル、スキルを解説します
このワークフローのために新しいコーディングエージェントを用意する必要はありません。以下は用語と関連ページについての回答です。
エージェントを切り替える必要はありますか？
いいえ。まずはお使いのツール向けのガイドから始めてください。セットアップと利用可能な機能はそのツールとバージョンに依存し、このディレクトリはそれらを順位付けしません。
エージェント、モデル、スキルは同じものですか？
いいえ。モデルは推論を担い、エージェントはタスクを実行し、スキルは再利用可能な作業方法を提供します。スキルディレクトリには、最後のこの層が掲載されています。
デザインツールを比較検討しています。どこを見るべきですか？
乗り換えや併用に関する質問にはツール比較をご利用ください。これらのエージェントガイドは、すでに使っているツールでの作業方法を説明します。
最初のタスクは何にすべきですか？
小さなインターフェースを1つ選び、参考資料を用意してください。拡張する前に、そのレイアウト、1つのインタラクション、狭い画面幅を確認しましょう。テンプレートを使えば出発点が得られます。
すでに使っているコーディングエージェントから始めましょう
macOSおよびWindows向けのデスクトップビルドです。スマートフォンの場合は、セットアップガイドを保存し、デスクトップで続きを行ってください。
OpenDesignをダウンロード セットアップに関する注意事項