Open Design research 一覧
Brief Studio, built from scratch

最初の30秒を、画面の骨格に変える。

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を同じ会話で反復する。
project/new-page/brief.htmlskill: web-prototype

Design intent lives before the first component.

Open Designの流れを、まず「何を作るか」を固める画面として再設計。ここからLP、dashboard、mobile appへ分岐できる。

Inputprompt, context, direction
Outputfirst usable HTML