メインコンテンツまでスキップ

Design Studio

Design Studio は、Elftia に組み込まれた AI デザインワークベンチです。デザイン Skill、Design System、Craft スニペットという 3 つの抽象を組み合わせることで、AI が一貫したビジュアル言語に基づいて Web ページ、ポスター、デッキ、ソーシャルグラフィックなどの成果物を生成できるようにし、その場でのプレビュー、Lint 検証、エクスポートにも対応します。

入口: 左ナビゲーションの Design Studio（ルート /design-studio）。

3 つの要素が行うこと​

抽象役割ソース
Skill（design skill）「何を作るか」を、再利用可能な prompt + 入力 schema としてカプセル化します。例: 「プロダクトのランディングページ」、「イベントポスター」、「ポッドキャストカバー」。70+ built-in + user-defined
Design System「どのように見えるか」を、token + コンポーネント参照としてカプセル化します。色、タイポグラフィ、余白、角丸、影、ボタンスタイルなど。140+ built-in + user-defined
Craft（snippet library）組み合わせ可能な HTML / CSS / SVG フラグメントです。装飾要素、レイアウトの骨格、チャートテンプレートなど。7 built-in categories + user-defined

新しいプロジェクトを開始するときは、Mode + Skill + Design System の軸を選びます。AI はこのコンテキストと Craft ライブラリを組み合わせて出力を生成します。

4 つのモード​

新しいプロジェクトを作成するときは、次のいずれかのモードを選びます。モードは成果物の種類と編集フローを決定します。

モード成果物ハイライト
Prototype単一ページの HTML プロトタイプデフォルトモード。左にチャット、右にワークスペースを配置し、コメントと surgical edits に対応
Deck複数ページのスライドiframe + 次/前ページ + フルスクリーン + クイック概要 + PDF/PPTX エクスポート
Templateフォーム駆動の HTMLEJS サブセットのプレースホルダーテンプレート。フォームを自動生成し、入力に応じて右ペインのプレビューをリアルタイム更新
Design SystemDESIGN.md + サンプルページ2 ペイン表示（左: DESIGN.md ソース + token swatches / 右: サンプルダッシュボード）。<userData>/elftia/design-systems/<slug>/ に保存

メインインターフェイス​

ホーム（/design-studio）​

上部に 2 つのタブがあり、全幅レイアウトです（サイドバーなし）。

タブ内容
ExamplesSkill ごとに事前作成済みのサンプルプロジェクトを閲覧し、ワンクリックで新しいセッションとしてフォークできます。
Design Systemsbuilt-in + custom Design Systems を閲覧し、テンプレートへの効果をプレビューし、デフォルトを切り替えます。

過去の Design プロジェクトは、通常のセッション一覧に kind='design' のセッションとして表示されます。チャットセッションと同じ基盤を共有し、分岐、再生成、添付ファイルに対応します。

新しいプロジェクトの作成​

入口は、新規セッションページの DesignStudio persona です。

  1. 新規セッションページで、上部の persona ピッカーから DesignStudio を選択します
  2. Skill（左）+ Design System（右）を選択します
  3. 要件を説明して送信します
  4. AI が成果物を出力し、プレビューパネルが自動的に開きます

詳細は 新規セッションと Persona を参照してください。

成果物プレビュー​

AI が成果物（通常は HTML ドキュメント）を生成すると、「ワークスペースを開く」アクションがトリガーされ、右ペインがプレビューパネルに切り替わります。

  • Preview — HTML をライブレンダリングします。ビューポート幅の切り替え（mobile / tablet / desktop）に対応します
  • Source — 成果物のソースコードを表示します（CodeMirror、コピー可能）
  • Lint — 成果物が Design System の制約に適合しているかを自動検証します（範囲外の色、token set にないフォントなど）

成果物を生成した各メッセージにも、個別の Preview ボタンが表示されます。ワークスペースを現在のものに戻さなくても、過去のバージョンを再生できます。

エクスポート​

プレビューパネル上部の Export ボタンでは、次を出力できます。

種類出力
HTML単一ファイル HTML（リソースをインライン化）
PNG / JPG指定した解像度でのビューポートスクリーンショット
PDF複数ページ PDF（ポスター、デッキに適しています）
DeckReveal.js スタイルの複数ページスライドパッケージ

built-in アセットのソース​

design-skills/、design-systems/、craft/ の 3 つのディレクトリは、初回起動時にユーザーデータディレクトリ（<userData>/elftia/）へ materialize されます。Elftia のインストールディレクトリには書き込まれません。

つまり、次のようになります。

  • ユーザーディレクトリ内のファイルを直接編集することで、built-in Skills / DS / Craft をカスタマイズできます
  • 編集内容は Elftia のアップグレードで上書きされません（アップグレードは新しいファイルを追加するだけで、既存ファイルには触れません）
  • built-in アセットは、上流のオープンソースプロジェクト nexu-io/open-design に由来し、コミットスナップショットで固定されています

最新の上流バージョンへアップグレードするには（開発者向け操作）、開発者ドキュメントの Built-in Resource Sync Process を参照してください。

チャットシステムとの関係​

Design プロジェクトは内部的には通常の chat_sessions 行（kind='design'）なので、次に対応します。

  • 同じ LLM 設定、プロバイダー切り替え、API Key プールに対応
  • メッセージの分岐と再生成に対応（再生成ごとに新しい成果物バージョンになります）
  • 添付ファイルのアップロードに対応（参照画像、ブランドアセット）
  • 履歴サイドバーで通常のチャットセッションと混在して表示され、フォルダー / タグを追加できます

相違点:

  • Skill + Design System にバインドされている必要があり、セッション作成時に決まります。セッション途中で変更することはできません
  • エンジン層は Design Adapter を経由します。すべてのエンジンがこれに対応しているわけではありません。claude-sdk / tinyelf / chat などは Prompt Injection 戦略で直接使用できます。cli（Claude Code、Codex CLI）は FilePlaced 戦略を使用します。純粋な api エンジンは未対応で、プレースホルダーを表示します

0.1.7+ 常時有効（Experimental Flag は不要）​

0.1.7 以降、Design Studio はデフォルトで有効です。Settings → System → Experimental Features で切り替える必要はありません。🎨 Design Studio の入口はナビゲーションバーに直接表示されます。

残る要件は 1 つだけです。現在の LLM プロバイダーのエンジンが Design Adapter に対応している必要があります。

対応マトリクス:

Engine TypeSupportedInjection Method
claude-sdk✅ネイティブな skill ロード。surgical-edit コメントとローカル編集に対応
tinyelf✅Prompt Injection — SKILL.md + DESIGN.md をシステムプロンプトへインライン化
chat✅Prompt Injection（オーバーフロー防止のため、>16k tokens の場合は拒否）
cli (Claude Code, Codex)✅FilePlaced — .cursorrules / .aider.conf.yml などへ書き込み
api❌未対応。"Adapter unavailable" プレースホルダーを表示

FAQ​

問題解決策
Design Studio ページに "Adapter unavailable" と表示される現在の LLM プロバイダーが Design Adapter に対応していないエンジン（ほとんどの場合 api）を使用しています。Claude SDK / TinyElf / Chat / 対応する CLI バックエンドへ切り替えてください
Custom Design System が表示されない<userData>/elftia/design-systems/<your-ds>/ に有効な schema を持つ manifest.json が含まれているか確認し、Design Systems タブで "Rescan" をクリックしてください
Elftia のアップグレード後に built-in Skills / DS が更新されないこれは仕様です。既存ファイルは上書きされません（ユーザー編集は SHA-1 で検出されます）。ファイルをリセットするには、ユーザーディレクトリ内の該当ファイルを削除してください。再起動時に再 materialize されます
成果物プレビューの Lint が "color out of range" を報告する成果物がデザイントークンに含まれない色値を使用しています。成果物を token を使うように更新するか、Design System の token テーブルを拡張してください
Surgical-edit（comments / Send to chat）が利用できないclaude-sdk エンジンでのみ有効です。他のエンジンでは、Comments ドロワーは表示のみ可能で、チャットへ送信することはできません

関連リンク​