OD

Issue 01 · 2026 · Architecture Deep-Dive

nexu-io / open-design

// LOCAL-FIRST DESIGN ENGINE

OD

15 CLI agents chạy ngay trên máy bạn,
điều phối bởi 31 skills + 72 design systems — không có cloud lock-in.

Apache-2.0·BYOK·localhost:7456

← / → để lật trang

Why Open Design · Vấn đề & Giải pháp

02 / 09

// THE SHIFT

Hai mô hình. Một sự khác biệt.

Claude Design

Closed-source · Cloud-only · Vendor lock-in.

×Phải gửi prompt + asset lên Anthropic cloud

×Chỉ chạy được Claude, không swap-in agent khác

×Không truy cập được local CLI, MCP, file system

×Token billing trực tiếp vào tài khoản Anthropic

"Stop writing prose.
Start shipping artifacts." — OD MANIFESTO

Open Design

Local-first · BYOK · Swap-in any agent.

→Daemon HTTP nghe localhost — không có cloud middle-man

→Auto-detect 15 CLI trên $PATH, gọi cái nào thì gọi

→Inject 31 skills + 72 design systems vào prompt stack

→BYOK proxy fallback · MCP server mode · Apache-2.0

Issue 01 · How Open Design works

02 — Architecture rationale

System Architecture · Three-Process Topology

03 / 09

// FIG. 01 — RUNTIME TOPOLOGY

Browser ↔ Daemon ↔ Agent.

Daemon là process duy nhất được phép spawn CLI. Browser chỉ kết nối qua HTTP/SSE — không có quyền chạm vào file system hay child process.

Fig. 01 — Three-process topology

03 — Architecture

Agent Detection · auto-scan

04 / 09

// $PATH SCAN · 4 LOOKUP DIRS

15 CLIs auto-detected
trên $PATH của bạn.

~/.local/bin

~/.cargo/bin

/opt/homebrew/bin

$PATH

01

claude

Anthropic

● claude-stream-json

02

codex

OpenAI

● claude-stream-json

03

gemini

Google

● json-event-stream

04

devin

Cognition

● acp-json-rpc

05

copilot

GitHub

● copilot-stream-json

06

cursor-agent

Cursor

● acp-json-rpc

07

opencode

SST

● json-event-stream

08

hermes

Inflection

● json-event-stream

09

kimi

Moonshot

● plain

10

qwen

Alibaba

● json-event-stream

11

pi

Inflection

● pi-rpc

12

kiro-cli

AWS

● plain

13

kilo

community

● acp-json-rpc

14

vibe-acp

community

● acp-json-rpc

15

deepseek

DeepSeek

● plain

scan order · $PATH first → fallback dirs → cache 60s

● stream-json ● ndjson / acp ● rpc ● plain

Detected on first daemon boot · 15 binaries

04 — Agents

Spawn & Stream Pipeline · The Engine Room

05 / 09

// LIFE OF A PROMPT — 6 STAGES

Từ prompt đến artifact — qua 6 trạm.

Mỗi trạm là một bước được kiểm soát rõ ràng. Daemon không gọi LLM trực tiếp — nó chuẩn bị, spawn, parse, rồi chuyển tiếp.

Pipeline · 6 stages — flowing left → right

01 · COMPOSE

composeSystemPrompt()

Inject 31 skills + 72 design systems vào prompt header. Ghép với CLAUDE.md, brand spec, spec fragments.

02 · SPAWN

spawn(bin, args, {env})

child_process.spawn() · binary nằm trên $PATH · stdio: pipe — daemon là process duy nhất có quyền này.

03 · INJECT ENV

env · 3 cờ định danh

OD_DAEMON_URL · OD_PROJECT_ID · OD_PROJECT_DIR — agent biết "tôi đang được host trong context nào".

04 · PARSE

stdout → 6 parsers

Mỗi vendor dùng wire format khác. Daemon chọn parser phù hợp dựa trên agent name + heuristic detect.

05 · STREAM SSE

SSE → web UI

Browser nhận token chunks qua EventSource — render incremental, không chờ full response.

06 · ARTIFACT

parse <artifact> → iframe

HTML wrapped trong <artifact>...</artifact> được extract & inject vào sandboxed iframe — preview live.

6 Parsers · vendor-specific wire formats

claude-stream-json acp-json-rpc pi-rpc json-event-stream copilot-stream-json plain + heuristic auto-detect

Daemon doesn't call LLM — it hosts CLIs.

05 — Pipeline

Skill System · Prompt Stack Composition

06 / 09

// SKILL.MD · FRONTMATTER + BODY

Mỗi skill là 1 folder · 1 file YAML.

---
name: magazine-web-ppt
description: Build editorial × e-ink HTML decks
  with horizontal swipe nav, 5 magazine
  directions, 5 theme presets.
triggers:
  - "build a deck"
  - "slide presentation"
  - "magazine ppt"
od:
  mode: deck
  surface: desktop-1920x1080
  design_system: monocle-editorial
  preview: single-html
---

## Step 0 · Pick a direction

5 magazine directions ship with palette,
recommended layouts, chrome style...

## Step 2 · Copy template

# cp assets/template.html → project root

Skills bundled

31

workflow + design + dev

Design systems

72

full DESIGN.md + tokens

Frontmatter fields

name slug — folder phải trùng tên skill

description đoạn ngắn để LLM tự chọn skill phù hợp

triggers[] câu kích hoạt — skill auto-load nếu match

od.mode deck · prototype · landing · dashboard

od.surface target canvas — mobile / desktop / fixed 1920×1080

od.design_system link vào 1 trong 72 design systems có sẵn

od.preview single-html · multi-screen · iframe-frames

Skill folder = SKILL.md + assets/ + references/. Daemon đọc cả 3 và inject vào system prompt — agent không cần đọc file system. — Composition rule

Skills compose the system prompt — agent never reads files directly

06 — Skills

BYOK Proxy · MCP Server Mode

07 / 09

// TWO ESCAPE HATCHES

Khi không có CLI — vẫn không lock-in.

Mode A · FallbackBYOK Proxy.

Không có CLI nào trên máy? Settings → dán API key. Daemon tự convert thành proxy POST /v1/messages → cùng SSE loop, cùng skill stack, cùng artifact pipeline.

Hỗ trợ Anthropic, OpenAI, Google AI Studio, OpenRouter
API key lưu local — không leak qua daemon log
Stream giống y hệt CLI mode → web UI không phân biệt
Có thể mix: CLI cho code, BYOK cho design

$ od config set anthropic.api_key sk-ant-... # daemon now serves /v1/messages locally

Mode B · InvertedMCP Server.

Đảo chiều: chạy od mcp → daemon expose stdio MCP server. Claude Code (hay bất kỳ MCP client nào) ở repo khác kết nối vào, lấy skill + design context như tool calls.

OD trở thành "skill provider" cho hệ sinh thái MCP
31 skills + 72 design systems available as tools
Project switching qua get_active_context
Read-only by default — không spawn ngược

$ od mcp --stdio # in another repo's .claude/mcp.json: # "open-design": { "command": "od", "args": ["mcp"] }

Either side — daemon stays the constant

07 — BYOK & MCP

Quickstart · 3 commands to first artifact

08 / 09

// FROM ZERO TO STREAMING ARTIFACT

Ba bước. Bốn phút. Một artifact thật.

01

Clone & install.

Repo public Apache-2.0. pnpm là tooling chính — npm/yarn vẫn được nhưng pnpm tối ưu workspace.

$ git clone github.com/nexu-io/open-design $ cd open-design $ pnpm install

02

Start daemon + UI.

Một command — daemon binds 127.0.0.1:7456, web UI mở trong browser. Daemon scan PATH, list 15 CLI nào đang available.

$ pnpm tools-dev # → http://127.0.0.1:7456 # ✓ detected: claude, codex, gemini ...

03

Pick + prompt.

Web UI: chọn 1 skill, 1 design system, 1 agent. Gõ prompt. Artifact stream live trong iframe — Save xuống .od/artifacts/.

→ Skill: magazine-web-ppt → System: monocle-editorial → Agent: claude # prompt → SSE → <artifact> → iframe

Artifact persists · .od/artifacts/<timestamp>/index.html

No telemetry · No cloud · No login required

Local-first means: it just works on your laptop

08 — Quickstart

Closing · The Pitch

09 / 09

// THE THESIS

"An AI trained by the prompt stack to behave like a senior designer
with a working filesystem"

Type a prompt. Get a real artifact.
Locally. Yours. Built on top of any agent you already trust.

github.com/nexu-io/open-design

Apache-2.0 · BYOK · No cloud lock-in

Issue 01 · 2026

Architecture deep-dive · fin.

OD

Hai mô hình. Một sự khác biệt.

Browser ↔ Daemon ↔ Agent.

15 CLIs auto-detectedtrên $PATH của bạn.

Từ prompt đến artifact — qua 6 trạm.

Mỗi skill là 1 folder · 1 file YAML.

Khi không có CLI — vẫn không lock-in.

Mode A · FallbackBYOK Proxy.

Mode B · InvertedMCP Server.

Ba bước. Bốn phút. Một artifact thật.

15 CLIs auto-detected
trên $PATH của bạn.