Design Studio アーキテクチャ概要

Design Studio は、基盤としてチャットシステム（chat_sessions + EngineDispatcher）を再利用し、その上に一連のデザインドメインサービスを重ねています。このページでは全体のパイプラインを説明し、個別コンポーネントの詳細はサブページで掘り下げます。

モジュールの場所

• Renderer: packages/renderer/src/features/design-studio/components/design-studio/
• Main process services: packages/desktop/app/main/services/content/workspace/design/
• 組み込みリソース（git 管理外）: resources/design-studio-builtin/ — 組み込みリソース同期プロセスを参照
• 組み込みリソースのピン: resources/design-studio-builtin.lock.json（git 管理される唯一の部分）

データフロー

graph TB
    User["User selects Skill + DS in new session page, enters requirements"] --> Persona["DesignStudio persona"]
    Persona --> Create["AgentRouter.createSession<br/>kind='design'"]

    Create --> DPS["DesignProjectService<br/>Create project metadata"]
    Create --> DPM["DesignProjectMaterializer<br/>Copy Skill / DS into session workspace"]

    DPS --> ChatSess["chat_sessions row<br/>(kind='design')"]
    DPM --> Workspace["session workspace directory<br/>(skills + design-system + craft)"]

    ChatSess --> Disp["EngineDispatcher"]
    Disp --> Adapter["Design Backend adapter<br/>(per-engine)"]
    Workspace --> Adapter

    Adapter --> Engine["TinyElf / ClaudeSdk / CliRunner"]
    Engine --> Out["AI output artifact"]
    Out --> AS["ArtifactService<br/>Persist artifact"]
    AS --> ALS["ArtifactLintService<br/>Validate token / boundaries"]
    AS --> AES["ArtifactExportService<br/>HTML/PNG/PDF/Deck"]

主要サービス

Service	責務
DesignProjectService	Design プロジェクトのメタデータ CRUD（= chat_sessions[kind='design']）: 選択された Skill、DS、craft サブセット。
DesignProjectMaterializer	セッション作成時に、選択された Skill / DS / craft をセッション固有のワークスペースへコピーし、エンジンにクリーンな読み取り専用ビューを提供します。
SkillDiscoveryService	ユーザーディレクトリと組み込みディレクトリから Skill マニフェストをスキャンし、マージして重複を排除します。
DesignSystemService	上記と同様ですが、対象はデザインシステムです — トークンテーブル、コンポーネント参照、サンプルレンダリング。
CraftService	接続可能な HTML/CSS/SVG フラグメントを提供します。
ArtifactService	アーティファクトファイル（成果物）を書き込み / 読み取りし、特定のメッセージに関連付けます。
ArtifactLintService	アーティファクトを検証します: 色が DS トークン内に収まっているか、フォントスタックが有効か、アクセシビリティのベースラインなど。
ArtifactExportService	アーティファクトのエクスポート — HTML インライン化、Puppeteer スクリーンショット（PNG/JPG/PDF）、Deck 複数ページパッケージ。
DeckExportService	Deck 専用エクスポート（Reveal.js スタイルのプレゼンテーションパッケージ）。
SkillSymlinker	セッションワークスペース内の Skill を <userData>/elftia/design-skills/ へシンボリックリンクします — Skill の編集が実行中のセッションへリアルタイムに反映されます。
TinyElfSkillsParserAdapter	TinyElf エンジン専用 — Design Skill を TinyElf が消費可能なツール / コンテキスト形式に変換します。
backends/	エンジンごとのアダプターディレクトリ。各エンジンは Design モードで動作するために、独自のバックエンドを実装する必要があります。
prompts/	組み込みシステムプロンプト（upstream open-design 由来）。Skill タイプごとに分割されています。
mcp/	Design モード専用の MCP ツール公開。

エンジン適応（Design Backend）

すべてのエンジンが Design プロジェクトを実行できるわけではありません。backends/ ディレクトリ配下の Backend アダプターはレジストリ形式です。Design モードをサポートしたいエンジンは、Backend を明示的に登録する必要があります。

// Simplified signature
interface DesignBackend {
  engineType: EngineType;
  prepareSession(ctx, project): Promise<DesignContext>;
  // …
}

登録済み Backend がないエンジンの場合、renderer の useDesignStudioGate() は unavailable を返し、ホームページと新規セッションパネルはプレースホルダー UI に縮退します（画面半分がクラッシュするような状態にはなりません）。

アーティファクトとメッセージのバインド

アーティファクトを生成する各 AI メッセージは、アーティファクト ID にバインドされます（メッセージメタデータに書き込まれます）:

• 永続化先: <userData>/elftia/design-artifacts/<sessionId>/<artifactId>.html
• Renderer は artifactId で読み取り、単一メッセージにはPreviewボタンがあります
• 「Open workspace」は現在のセッションの最新アーティファクトを自動的にバインドします。古いメッセージの Preview をクリックすると、履歴バージョンがワークスペースに再生されます

これにより、ブランチが自然にサポートされます。各「regenerate」は新しいアーティファクトを生成し、古いバージョンは失われません。

Chat との関係

Design プロジェクトは本質的に、chat_sessions の行と関連テーブルの集合です。そのため:

• 同じ IPC（chatSessions:* + agents:*）を使用します
• 同じエンジンディスパッチ（EngineDispatcher）を使用します
• 同じメッセージブランチ、添付ファイル、API Key Pool ロジックを再利用します
• メインサイドバーでは kind='design' アイコンで区別されますが、通常セッションと同じリストに表示されます

違いは次の点のみです:

Point	Design	Chat
Persona	DesignStudio である必要があります	任意
Backend	Design backend を登録する必要があります	任意
Workspace	セッション作成時にマテリアライズします	なし
Artifact Service	各成果物を自動的に永続化します	関与しません

サブページ

• 組み込みリソース同期プロセス — resources/design-studio-builtin.lock.json + scripts/sync-design-studio.mjs の完全なフロー。upstream の最新コミットへアップグレードする方法を含みます