参考リンク
Reasonix に関する参考資料
公開されているガイドに記載されている、Reasonix でデザインするためのチュートリアル、ドキュメント、ウォークスルーです。
Reasonix 
OpenDesign OpenDesign で
Reasonix と
デザインする。
OpenDesignでDeepSeek Reasonixを使ってインターフェースをデザインする方法：自分のDeepSeekキーで行う短く安価なパス、brief から確認済みファイルまでの予約スケジュール1タスク、そして始める前に知っておくべき制限事項について解説します。
ブリーフからインターフェースへ01 / Reasonix
アイデアを持ち込むのはあなたです↗
“読みやすくなるまで
安価に反復される予約スケジュール。”
このReasonixガイドへの3つの入り口
Reasonixでどこから始めるかを選ぶ
このガイド・UIデザイン
Reasonixでプロダクトインターフェースを構築する
このガイドでは、ブリーフ、参考資料、デザインルール、そしてレビュー済みのHTML結果を紹介します。
このガイドを読む セットアップゼロからReasonixをセットアップする
クリーンなマシンから、UIを構築・検証できるDeepSeek Reasonixに至るまでの道筋を紹介します。
セットアップに進む 比較Reasonixを他のエージェントと比較する
デザイン作業においてReasonixがCodex、Claude Code、Cursorとどのように異なるか、そして別のワークフローを選ぶべきタイミングについて解説します。
比較を見るReasonixによる1つの完全なデザインタスク
Reasonixのデザインタスク：brief からインターフェースまで
1つのタスクを最初から最後まで示します：渡すbrief と制約、返ってくる成果物、そして完了前に実施すべきチェック内容です。以下のインターフェースはこのページのために作成した説明用の例であり、記録されたReasonixの実行結果ではありません。
1設計ブリーフと制約条件
ブリーフ小規模クリニックの予約スケジュールをデザインします：施術者ごとの5日間ビュー、空き時間枠、予約済み・ブロック済みの時間、そしてスマートフォン向けの日別リストです。短いパスで反復してください。デスクトップとスマートフォン向けです。
- デザインシステムOpenDesignのペーパーキャンバス：Albert Sans、グリーンのアクセント1色
- ブレークポイント1440pxデスクトップと390pxモバイル、横スクロールなし
- インタラクション施術者切替、時間枠を開く、時間をブロック、日移動
- 出力安定した
data-od-idフックを持つ、自己完結型のHTMLファイル1つ
2作業分担：あなた、ReasonixとOpenDesign
- あなた
ブリーフを作成し、デザインシステムを選択し、受け入れ基準を定義します。
- Reasonix
レイアウトを計画し、HTML、CSS、JavaScriptを書き、要求に応じて修正します。
- OpenDesign
デザインシステムとスキルを提供し、プレビューをレンダリングし、すべてのバージョンをプロジェクト内のファイルとして保存します。
- レビュー
ビジュアルの階層構造、8pxグリッドに基づく間隔、両方のブレークポイント、そしてすべてのインタラクションが、引き渡し前にチェックされます。
3Reasonixの成果物：1440pxと390pxにおける予約スケジュール
4ハンドオフ前のレビュー
レイアウト
グリッドとスペーシング
8pxグリッド上の30分刻みの行。ブロック済みの時間はイベントではなくハッチング帯として表示されます。
階層
視覚的階層
受付担当者がまず目に入るのは空き時間枠です。アクセントカラーは空き時間枠のみを示します。
レスポンシブ
モバイルレイアウト
日ストリップに加え、予約アクション付きの時間枠リスト。上部に施術者切替があります。
インタラクション
インタラクションの確認
施術者を切り替え、時間枠を開き、1時間をブロックし、日を移動します。
適合性
Reasonixが適したタスクと、そうでないタスク
Reasonixが適しているケース
- 安価で密なイテレーション。 DeepSeekのプレフィックスキャッシュを中心に構築されており、長いデザインセッションでもビルド・検証・改善のループを手頃なコストで維持できます。
- リポジトリを認識した編集。 レビューでゲートされたエディタを使ってリポジトリ内のファイルを直接編集するため、実際のコンポーネントとトークンを再利用します。
- スキル + MCP。 Markdownスキルが規約を伝え、MCPサーバーがFigmaソースをテキストとして取り込むようなデザインコンテキストをもたらします。
- オープンでBYOK。 MITライセンスのオープンソースで、ご自身のDeepSeek APIキーを使ってDeepSeekモデル上で動作します。
別のワークフローを選ぶべきケース
- 編集可能なベクターファイルが必要な場合。 成果物はHTMLであり、編集可能なデザインドキュメントではありません。必要なアセット形式については、別のベクターワークフローをご確認ください。
- 参照も制約もない場合。 デザインシステムや例がないと、出力は一般的な見た目になりがちです。まずブリーフを書いてください。
- このエージェントに必要な認証情報をお持ちではありません。 必要なもの：ご自身のDeepSeek APIキー（Bring Your Own Key）。OpenDesignは認証情報を提供またはプロキシしません。
- チームはDeepSeekまたはDeepSeek Harnessで作業しています。 それらのエージェントには専用のページがあり、ワークスペースは同じですが設定が異なります。関連エージェントをご覧ください。
互換性
開始前に必要なReasonixの要件
このガイドでは、OpenDesignデスクトップアプリを通じて接続されたReasonixを扱います。公開情報の確認日: 2026年9月6日。
ツールの範囲Reasonix（Community / esengine提供）
DeepSeek ReasonixはDeepSeekモデルを利用したオープンソース（MITライセンス）のターミナルAIコーディングエージェントです。esengineというGitHub作者によるコミュニティ製プロジェクトであり、DeepSeekの公式製品ではありません。DeepSeekのプレフィックスキャッシュを活用する設計になっており、長時間のセッションでもコストを抑えられます。このページはOpenDesignを通じてReasonixでインターフェースを設計することについて説明しており、Reasonix自体のインターフェースについては扱いません。OpenDesignのセットアップノートに利用可能なエージェントの一覧があります。
アカウントと認証あなた自身のDeepSeek APIキー（BYOK）
あなた自身のDeepSeek APIキー（BYOK）。あなた自身のDeepSeek APIキー（BYOK）で認証してください。認証情報はお使いのマシン上にのみ保存されます。このページではクォータや価格を保証するものではありません。
システムとバージョンデスクトップアプリまたはソース
デスクトップ版のビルドについてはダウンロードページをご確認ください。ソース内のクイックスタートに記載されているNode.jsおよびpnpmの要件は、ソースから実行する場合に適用されるもので、デスクトップパッケージのインストールには適用されません。動作確認済みのReasonixの最小バージョンについては、ここでは検証していません。
接続確認成功の目安
インストール済みバージョンに表示される接続手順に従い、小さなタスクを実行してください。Reasonixがそれを処理し、成果物が開くことを確認してください。ダウンロードだけでは、動作する接続が確立されたことにはなりません。
デスクトップアプリから始める
3ステップで完了するReasonixのセットアップ
まずダウンロードし、インストール済みバージョンに合わせてReasonixのセットアップを完了させ、その後小さな結果を確認してください。この手順を進めるためにOpenDesignをソースからビルドする必要はありません。
- 1
OpenDesignデスクトップアプリをダウンロードする
お使いのコンピューターに合ったパッケージを選び、インストールしてアプリを開いてください。
OpenDesignをダウンロードチェックポイントデスクトップアプリが開きます。すでにインストール済みの場合は、次のステップに進んでください。再度ダウンロードする必要はありません。 - 2
Reasonixの接続を準備する
インストール済みバージョンのReasonixの手順に従ってください。あなた自身のDeepSeek APIキー（BYOK）で認証してください。認証情報はお使いのマシン上にのみ保存されます。
# 1. Install DeepSeek Reasonix (Node 22+) — see the repo README npm install -g reasonix # 2. Bring your own DeepSeek API key (BYOK) # Reasonix reads it from your environment, not from config files. export DEEPSEEK_API_KEY=sk-... # your DeepSeek key公開ガイド内のReasonixセットアップノートより。最新のコマンドについてはベンダーのドキュメントをご確認ください。
チェックポイント想定しているエージェントとアカウントを確認してください。利用できない場合は、大きなタスクを試す前に互換性を確認してください。 - 3
小さなReasonixタスクを1つ実行する
全体のループを判断できるよう、1回の修正を含む小さなブリーフを使用してください。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールを使用し、デスクトップとモバイルの幅で確認してください。
チェックポイント結果を開き、保存状態をテストして、具体的な変更を一つ依頼してください。生成されたファイルはレビューの始まりであり、終わりではありません。
ソースから OpenDesign を実行するには、代わりに技術クイックスタートをご覧ください。
Reasonixのデザインワークフロー
5ステップで見るReasonixデザインワークフロー
同じ予約スケジュールの課題を、ブリーフから検証済みファイルまで追跡します。各ステップでは、あなたが提供するもの、Reasonixが行うこと、OpenDesignが提供するもの、そしてあなたが確認する内容を示しています。
- 1
デザインブリーフ
平易な言葉で3〜6行。対象ユーザー、画面の役割、対象プラットフォームを明記します。
- あなたブリーフを書きます。参考となるスクリーンショットがあれば添付します。
- Reasonixブリーフとプロジェクトの指示ファイルを読み込み、曖昧な点があれば質問します。
- OpenDesignプロジェクト、プロンプトサーフェス、成果物の種類に応じたスキルを提供します。
- 確認ブリーフに受け入れ基準が記載されていることを確認します。生成後よりも今のうちに追加する方がコストを抑えられます。
- 2
デザイン制約
デザインシステムと少数の厳格なルールです。これがブランドに沿った出力と、ありふれた見た目とを分ける要因になります。
- あなたデザインシステムを選び、ブレークポイントと必須のコンポーネントを指定します。
- Reasonixコードを書き始める前に、DESIGN.mdのトークンとポスチャールールをコンテキストに読み込みます。
- OpenDesignデザインシステムライブラリを提供し、選択したものをスキルテンプレートに紐付けます。
- 確認トークンがブランドに合っているかを確認します。アクセントカラーは1色、フォントと角丸の値が適切であることを確かめます。
- 3
インターフェースを生成する
Reasonix は、レイアウト・スタイル・インタラクション・安定したフックを備えた自己完結型の HTML ファイルを作成します。
- あなた待つか、確認の質問に答えます。設定することは何もありません。
- Reasonixセクションを設計し、HTML、CSS、JavaScript を記述し、ファイルを実行して不具合を修正します。
- OpenDesign成果物をプロジェクトフォルダに保存し、プレビュー用にインデックスを作成します。
- 確認ここではまだ何もありません。ファイルはソースではなく、レンダリングされた状態で評価します。
- 4
プレビュー
ファイルは、指定した幅で OpenDesign 内にレンダリングされます。ここでデザインが判断されます。
- あなた幅を切り替え、インタラクションをクリックして試し、要素にコメントを残します。
- Reasonixプレビューに対するあなたのコメントを読み取り、次の改訂を準備します。
- OpenDesignプレビューをレンダリングし、コメントや編集用に
data-od-idターゲットを公開します。 - チェック階層構造、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントカラーが控えめに使われているかを確認します。
- 5
修正と検証
プレビュー内の要素を指し示して変更を依頼します。修正はすべて新しいファイルとして作成され、既存のものが黙って上書きされることはありません。
- あなたコメントを依頼に変換し、タスクが完了したかどうかを判断します。
- Reasonix変更をその場で適用し、ファイルを再実行します。
- OpenDesignバージョンを並べて保持し、完了時に画像または HTML をエクスポートします。
- チェック変更された部分のみを再確認した後、各ブレークポイントでページ全体を一度確認します。
リソース
Reasonix デザインリソース
制限事項
Reasonix の制限事項、手動での確認、フォールバック
- 対応範囲コードベースを読み取り、レビューゲート付きのエディタでファイルを編集し、コマンドを実行し、Markdown スキルと MCP に対応しています。DeepSeek モデル（deepseek-v4-pro や deepseek-v4-flash など）はテキストのみを扱うため、デザインループはリファレンスを文章で記述し、ブラウザで検証する形になります。このページでは、OpenDesign に接続されたエージェントとしての Reasonix を扱い、Reasonix のすべての機能を網羅するものではありません。
- 利用上限利用上限とコストは、使用する認証情報（自身の DeepSeek API キー）に従います。このページは無料枠について何も保証しません。
- ネットワークローカルのプロジェクトファイルであっても、推論がオフラインで行われるとは限りません。機密性のある入力を共有する前に、エージェントのプロバイダー設定とデータポリシーを確認してください。
- 出力は HTML です成果物は HTML ファイルであり、ベクター形式のデザインファイルではありません。
- 手動レビューアクセシビリティ、実際のコンテンツ、ブランドとの整合性、インタラクションの正しさは、プレビューであなたが確認します。エージェントによる自己チェックは、あくまで一次チェックとして扱ってください。
- フォールバックエージェントが利用できない場合やタスクが失敗した場合は、インストールされているバージョンの接続手順と認証を確認してください。設定を変更する前に、エラーと最後に成功した成果物を保存しておいてください。
よくある質問
Reasonix と OpenDesign に関するよくある質問
DeepSeek Reasonix は実際にデザイン業務をこなせますか？
はい ── 美的スキル、デザインシステム、そしてコンテキスト内で正確に記述されたリファレンスがあれば、DeepSeek Reasonix はあなた自身のリポジトリ内で本番品質のレスポンシブな UI を生成し、実際のブラウザで出力を検証できます。DeepSeek モデルはテキストのみを扱うため、このループは画像を読み取るのではなく、リファレンスを記述し検証する形になります。そのコンテキストがなければ、一般的な見た目になりがちで、そこが OpenDesign が補う部分です。
DeepSeek Reasonix でデザインするには料金が必要ですか？
自身の DeepSeek API キーを持ち込むため、利用料は DeepSeek に支払います（BYOK）── ただし、このエージェントは DeepSeek のプレフィックスキャッシュを活用して設計されており、長時間のセッションでもコストを低く抑えられます。Reasonix 自体は無料で MIT ライセンスです。OpenDesign はあなたの認証情報を中継することはありません。
DeepSeek Reasonix は DeepSeek の公式製品ですか？
いいえ。DeepSeek Reasonix は esengine という GitHub の作者によるコミュニティ主導のオープンソースプロジェクトです ── DeepSeek のモデル上で動作し、DeepSeek の API キーを使用しますが、DeepSeek 社が制作または承認したものではありません。DeepSeek はそれぞれの権利者の商標です。
フロントエンドデザインには DeepSeek Reasonix と Claude Code のどちらが適していますか？
どちらも実際のデザイン業務に対応できます。Claude Code はコードベースを理解した上での具体的なデザイン判断に定評があり、DeepSeek Reasonix の強みはオープンソースであることとコスト効率の良さで、自身のキーを使って DeepSeek モデル上で安価かつ大量の反復処理を実行できる点です。多くのチームは複数のエージェントを併用しています ── OpenDesign を使えば、デザインのワークフローを変えることなくエージェントを切り替えられます。
DeepSeek Reasonix を Figma のようなデザインソースに接続するにはどうすればよいですか？
Reasonix は MCP サーバーに対応しているため、リポジトリのドキュメントに従って、デザインソース用の MCP（Figma MCP サーバーなど）を追加できます。これにより、エージェントはコンポーネント、変数、レイアウトデータといった実際のデザインコンテキストをテキストとして取得し、それに基づいて処理できるため、生成されるコードは元のソースを近似するのではなく、それに一致するようになります。
Reasonixで最初のデザインタスクを開始
まずは小さなタスクから始めて往復のやり取りを確認し、その後に本番のブリーフを持ち込んでください。ご自身の環境に合ったオプションを選択してください。このページは環境を自動検出しません。