Open Design demo topトップの一覧

Web検索とX投稿から、3種類を0から設計。

公式Quickstart、README、X投稿本文をもとに、既存のサンプルテンプレートとは別の情報設計、別の色、別の画面密度で作成したページ群です。

使い方の抽出

  1. 公式Quickstart: Node.js 24.x、pnpm 10.33.x、Corepackで固定版pnpmを使う。
  2. 起動入口: pnpm tools-dev run web。daemonとwebを立ち上げ、表示されたURLを開く。
  3. 初回利用: local agent CLIを検出し、skillとdesign systemを選び、promptを送る。
  4. 生成結果: artifactのHTMLが右側でlive previewされ、Save to diskで.od/artifacts配下に保存できる。
  5. X投稿の要点: Open DesignをCodex内のvisual canvasとして使い、design、code、motionを同じ会話で反復する。
01

Brief Studio

X投稿の「会話しながら設計する」流れを、最初のブリーフ固定に寄せた完全新規デザイン。プロンプト、対象、出力形式を一画面で揃える。

 02

Agent Console

READMEのdaemon、web、local agent CLIの説明をもとに、Open Designを運用ビューとして再解釈した完全新規デザイン。

 03

Motion Handoff

X投稿の「Designからmotionまで一つのworkflow」を、出荷前の確認ページとして作り直した完全新規デザイン。