Form trước đã
Surface · đối tượng · tone · brand · scale. Ba mươi giây bấm radio hơn ba mươi phút sửa tới sửa lui.
Open source · Local-first · BYOK
Lựa chọn open source thay thế Claude Design.
Chạy trên coding-agent CLI bạn đã có — Claude Code, Codex, Cursor, Gemini, OpenCode và mười một cái khác. 110 Skills · 141 Design Systems · 5 hướng visual · Apache-2.0.
Apache-2.0 · không cần đăng ký · CLI của bạn, key của bạn
Vì sao có dự án này
Claude Design của Anthropic (Opus 4.7, tháng 4/2026) cho thấy chuyện gì xảy ra khi LLM thôi viết văn xuôi và bắt đầu giao artifact thiết kế. Nó viral — và vẫn đóng, vẫn trả phí, vẫn chỉ chạy trên cloud, vẫn khoá vào model và skills của Anthropic. Open Design là lựa chọn open source. Cùng loop. Cùng tư duy «artifact trước tiên». Không lock-in.
Đóng → mở
Mỗi skill là một file. Mỗi design system là một file Markdown. Mỗi prompt là một module TypeScript bạn đọc và sửa được.
Agent kèm theo → của bạn
16 CLI coding-agent tự động phát hiện trong PATH. Không có CLI? Dán bất kỳ baseUrl + apiKey chuẩn OpenAI.
Cloud → local
pnpm tools-dev là chạy local. SQLite ở .od/. Deploy Vercel tuỳ chọn. Dữ liệu của bạn, filesystem của bạn, bạn quyết.
Một prompt thành artifact ra sao
OD không cho model tự do dù chỉ một pixel. Mỗi brief đều bị khoá lại trước khi bắt đầu vẽ.
Surface · đối tượng · tone · brand · scale. Ba mươi giây bấm radio hơn ba mươi phút sửa tới sửa lui.
Không có brand spec? Chọn 1 trong 5 hướng visual đã tuyển — mỗi hướng có palette OKLch deterministic và font stack riêng.
Kế hoạch của agent đến dạng card live. in_progress → completed cập nhật theo thời gian thực. Bẻ hướng giữa chừng rất rẻ.
Preview trong iframe sandbox. Sửa tại chỗ. Tải về dạng HTML, PDF, PPTX hoặc ZIP.
Có sẵn trong hộp
Mỗi Skill là một thư mục. Mỗi Design System là một file Markdown 9 section. Thả thư mục, restart daemon, là có trong picker. Đổi system, render kế đã chạy token mới.
Skill spotlight · html-ppt
Skill html-ppt đi kèm mang đủ mọi primitive một agent deck cần: chế độ presenter, thư viện layout, bộ animation cinetic và 14 template sẵn để fork. Thả thư mục, restart daemon, là có engine PPT chạy ngay trong trình duyệt.
Biến thể «taste-locked»
html-ppt-taste-brutalist và html-ppt-taste-editorial ship dưới dạng wrapper «taste-locked» độc lập — cùng skill, thẩm mỹ đóng đinh sẵn. Còn ba cái nữa cho web prototype: web-prototype-taste-{brutalist,editorial,soft}.
Bring your own agent
Cái nào bạn đã cài sẽ trở thành ứng viên engine thiết kế. Đổi một click trong picker model.
claude
Claude Code
stream-json
codex
Codex CLI
json-event-stream
cursor-agent
Cursor Agent
json-event-stream
gemini
Gemini CLI
json-event-stream
opencode
OpenCode
json-event-stream
qwen
Qwen Code
plain
qoder
Qoder CLI
json-event-stream
copilot
GitHub Copilot CLI
stream-json
devin
Devin Terminal
ACP
hermes
Hermes
ACP
kimi
Kimi CLI
ACP
kiro-cli
Kiro CLI
ACP
kilo
Kilo
ACP
vibe-acp
Mistral Vibe
ACP
deepseek
DeepSeek TUI
stream-json
pi
Pi
stdio JSON-RPC
Không cài CLI nào? POST /api/proxy/stream nhận mọi baseUrl + apiKey + model chuẩn OpenAI, Azure hay Google. Shim Anthropic-via-OpenAI, DeepSeek, Groq, OpenRouter, Azure OpenAI, Google Vertex, vLLM bạn tự host — đều cùng một loop. Có guard SSRF ngay rìa daemon, chặn loopback, link-local và RFC1918.
Bảy ý tưởng làm trụ
01
Daemon scan PATH tìm 16 CLI coding-agent đã biết. Cái nào nó tìm thấy đều thành ứng viên engine thiết kế, điều khiển qua stdio với một adapter mỗi CLI.
02
Mỗi skill là SKILL.md + assets/ + references/. Thả thư mục vào skills/, restart daemon, là có trong picker. Bundle magazine-web-ppt nằm nguyên trong repo, license giữ nguyên.
03
Schema DESIGN.md 9 section — màu, typography, spacing, layout, component, motion, voice, brand, anti-pattern. Mỗi artifact đọc system đang active. Đổi system → render kế chạy token mới.
04
Lượt 1 chỉ là một <question-form>: không suy nghĩ, không công cụ, không kể chuyện. Surface · đối tượng · tone · brand · scale. Cái giá của hướng sai là một vòng chat, không phải một deck đã làm xong.
05
Daemon spawn CLI với cwd vào thư mục artifact của dự án. Agent có Read, Write, Bash, WebFetch — công cụ thật trên filesystem thật. SQLite giữ projects, conversations, messages, tabs.
06
Discovery directives + identity charter + DESIGN.md đang active + SKILL.md đang active + metadata dự án + side-file của skill. Mỗi tầng đều composable. Mỗi tầng đều là file bạn sửa được.
07
`od mcp` mở dự án ra dạng MCP server stdio. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — bất cứ thứ gì nói được MCP — đều đọc thẳng artifact, file và metadata của bạn. Read-only ở rìa: đọc file, search, metadata. Không có bề mặt ghi, không có gọi ra ngoài.
Prompt stack
DISCOVERY directives (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critique)
+ identity charter (OFFICIAL_DESIGNER_PROMPT, anti-AI-slop, junior-pass)
+ active DESIGN.md (141 systems available)
+ active SKILL.md (110 skills available)
+ project metadata (kind, fidelity, speakerNotes, animations, inspiration ids)
+ skill side files (auto-injected pre-flight: read assets/template.html + references/*.md)
+ (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE (nav / counter / scroll / print)
Mỗi tầng đều composable. Mỗi tầng đều là file bạn sửa được.
So sánh
Sản phẩm cloud đóng, peer desktop mở, web app mở. Bọn mình mượn rất nhiều từ open-codesign và ghi credit ở /about — khác form factor, khác prompt-stack, cùng sao Bắc Đẩu.
| Claude Design | Open CoDesign | Open Design | |
|---|---|---|---|
| License và chi phí | |||
| License | đóng | MIT | Apache-2.0 |
| Mức tính phí tối thiểu | Pro / Max / Team | BYOK | BYOK — bất kỳ URL chuẩn OpenAI |
| Form factor | |||
| Form factor | Web (claude.ai) | Desktop (Electron) | Web app + daemon local |
| Deploy được lên Vercel | — | — | có |
| Runtime AI và flow | |||
| Runtime của agent | kèm theo (Opus 4.7) | kèm theo (pi-ai) | CLI bạn đang có |
| Linh hoạt provider | chỉ Anthropic | 7+ qua pi-ai | 16 CLI + proxy BYOK |
| Form (lượt 1) | — | — | luật cứng |
| 5 hướng visual | — | — | có |
| Tự phê 5 chiều | — | — | cổng trước khi emit |
| Skills, system và migration | |||
| Skills | độc quyền | 12 module TS | 110 bundle SKILL.md có thể thả |
| Design systems | độc quyền | DESIGN.md (v0.2) | 141 system đi kèm |
| Import ZIP Claude Design | n/a | — | có — sửa tiếp từ chỗ Anthropic dừng |
Claude Design là nhãn hiệu của Anthropic. Open Design không có liên kết hay được Anthropic chứng thực.
Vượt khỏi chat
Cái chat tạo HTML <artifact> cũng điều khiển luôn việc sinh hình, video và audio. Mỗi render đều rơi xuống dạng .png hoặc .mp4 thật trong workspace của dự án. 95 prompt sẵn để làm lại trong prompt-templates/.
Poster · avatar · bản đồ minh hoạ · infographic · social card kiểu tạp chí · UI game · still narrative game
phóng to gpt-image-2
Tiến hoá cầu thang đá 3D
phóng to gpt-image-2
Bản đồ ẩm thực thành phố minh hoạ
phóng to gpt-image-2
Cảnh thang máy điện ảnh
phóng to gpt-image-2
Chân dung anime cyberpunk
phóng to gpt-image-2
Chân dung studio glamour
phóng to gpt-image-2
Anime Fighting Game — Captain Ryuuga vs Kaze Renshin
phóng to gpt-image-2
Three Kingdoms — Quan Vũ chém Nhan Lương
phóng to gpt-image-2
Three Kingdoms — Lữ Bố bắn cung Viên Môn
phóng to gpt-image-2
Three Kingdoms — Triệu Vân thoát thân ôm ấu chúa
phóng to gpt-image-2
HUD MMO open-world Trung Hoa cổ
phóng to gpt-image-2
Tranh sáp trẻ con → vẽ lại photo-real
phóng to gpt-image-2
Phân tích vũ đạo otaku — 16 panel
phóng to gpt-image-2
Storyboard vũ điệu giật gân — 8 cảnh
15s t2v + i2v điện ảnh kèm audio · short narrative · phim sản phẩm
Seedance 2.0
Music Podcast & guitar
Seedance 2.0
Cận mặt cảm xúc
Seedance 2.0
Siêu xe luxury điện ảnh
Seedance 2.0
Châm biếm mèo Tử Cấm Thành
Seedance 2.0
Short tình cảm Nhật Bản
Seedance 2.0
Rồng bay điện ảnh
Seedance 2.0
Rượt đuổi nhà máy hậu tận thế
Seedance 2.0
Trailer game cyberpunk
Seedance 2.0
Crimson Horizon Sci-Fi
Seedance 2.0
Storyboard học viện phép thuật
Seedance 2.0
Đánh nhau ma cà rồng trong hẻm
Seedance 2.0
Mỹ học wuxia HK retro
Seedance 2.0
Three Kingdoms — Quan Vũ chém Nhan Lương
Seedance 2.0
Three Kingdoms — Lữ Bố bắn cung Viên Môn
Seedance 2.0
Three Kingdoms — Triệu Vân thoát thân ôm ấu chúa
Seedance 2.0
Bé trai 3D xếp Lego
Seedance 2.0
Cứu rồng thủ hộ thời cổ
Seedance 2.0
Vương quốc Ấn Độ cổ — FPV
Seedance 2.0
Motion graphics intro nhân vật
Seedance 2.0
Vũ điệu bàn tay phụ nữ Đông Á
Seedance 2.0
Nhà sinh vật biển khám phá
Seedance 2.0
Đua xe đường phố điện ảnh
Seedance 2.0
Jumpscare máy nướng bánh hoá tên lửa
Seedance 2.0
Hải tặc Disney vintage và cá sấu
Seedance 2.0
Fantasy haute couture Hollywood
HTML→MP4 motion graphics · reveal sản phẩm · typography động · biểu đồ dữ liệu
phóng to HyperFrames
Outro logo điện ảnh
phóng to HyperFrames
Showcase app trên ba điện thoại
phóng to HyperFrames
TikTok karaoke
phóng to HyperFrames
Bar-chart race
phóng to HyperFrames
Đường bay trên bản đồ
phóng to HyperFrames
Đếm tiền hype
phóng to HyperFrames
Stack overlay social
phóng to HyperFrames
UI 3D-reveal
Quickstart
Node ~24, pnpm 10.33.x. Chạy trên macOS, Windows và Linux (build AppImage qua `pnpm tools-pack linux build --to appimage`). Daemon tạo thư mục .od/ ngay tại máy cho SQLite và artifact theo dự án. Không có bước init.
git clone https://github.com/nexu-io/open-design.git
cd open-design && pnpm install
pnpm tools-dev run web Có gì mới · v0.5.0
v0.5.0 bẻ tiếp loop artifact — Inspect mode soi đến từng node DOM, dashboard kéo dữ liệu sống về panel, Critique Theater sang Phase 5 với rubric cứng và panelist tự gọi MCP. Linux có CLI hạng nhất, Docker Compose có một lệnh, Nano Banana đã nối dây sẵn.
Inspect mode
Click element trong preview, Inspect mode trả về đúng node — class, prop, layout — và đính kèm thẳng vào prompt kế. Không phải vòng lại agent kể chuyện đầu đuôi: chỉ vào và bảo 'sửa cái này'.
v0.5.0 · PR #672
Live dashboards
v0.5.0 đẩy dữ liệu sống thành hạng artifact riêng. Hai skill dashboard mới (`live-dashboard`, `flowai-live-dashboard-template`) ship cùng connector Composio đã nối dây — kéo từ GitHub, Linear, Notion, Gmail, artifact tự cập nhật tại chỗ.
v0.5.0 · PR #698 + #701
Critique Phase 5
Critique Theater bước sang Phase 5: rubric không lung lay theo từng lượt chấm, panelist gọi tool MCP để verify bằng chứng, transcript có cấu trúc, persistence ổn định khi chạy nhiều artifact song song.
v0.5.0 · PR #689 + #694
Giao thức
Chạy `od mcp` và bất cứ coding-agent nào hiểu MCP (Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf) đều đọc thẳng file, search index và metadata của dự án bạn. Read-only ở rìa. Đã ship trong v0.4.0, vẫn là cửa chính cho coding-agent của bạn.
v0.4.0 · PR #399
Dòng dõi của Open Design
alchaincyf
La bàn triết lý thiết kế
Workflow Junior-Designer, protocol brand-asset 5 bước, checklist chống AI-slop, tự phê 5 chiều, cùng 5 trường phái × 20 triết lý thiết kế đứng sau picker hướng visual của Open Design.
op7418
Chế độ deck
Đặt nguyên trong skills/guizang-ppt/ với LICENSE gốc giữ nguyên. Layout kiểu tạp chí, hero WebGL và văn hoá checklist P0/P1/P2 đã thấm sang mọi skill khác của Open Design.
OpenCoworkAI
Họ hàng gần nhất · sao Bắc Đẩu UX
Loop artifact streaming, preview iframe sandbox, panel agent live (todos + tool calls + ngắt được), xuất 5 định dạng, annotation chế độ comment. Form factor cố tình rẽ khác — open-codesign ship Electron + pi-ai, Open Design ship web + daemon local + CLI của bạn.
multica-ai
Kiến trúc daemon
Phát hiện agent qua scan PATH, daemon local là tiến trình duy nhất có quyền cao, coi agent như đồng đội. Open Design lấy mô hình kiến trúc; bản thân code multica không nhúng vào.
Star cho bọn mình
Star không trả tiền nhà, nhưng nó nói với designer, agent và contributor kế tiếp rằng thí nghiệm này đáng để chú ý.
Apache-2.0
Open source
110
Skills
141
Design Systems
16 + BYOK
CLIs
FAQ
Open Design là lựa chọn open source thay thế Claude Design của Anthropic. Chạy local bằng pnpm tools-dev, deploy lên Vercel, dùng coding-agent CLI bạn đã có (Claude Code, Codex, Cursor, Gemini, OpenCode, +11 cái nữa) làm engine thiết kế. License Apache-2.0.
Claude Design đóng, trả phí (Pro/Max/Team), chỉ cloud, khoá vào model và skills của Anthropic. Open Design open source, BYOK, local-first, cho phép đổi model thoải mái giữa 16 adapter CLI hoặc bất kỳ endpoint chuẩn OpenAI / Azure / Google.
Nếu cần self-hosting, linh hoạt model hay skill custom, có. Loop kín (phát hiện agent → chọn skill + design system → chat → parse <artifact> → preview → save) chạy đầu tới cuối. v0.4.x đã thêm Critique Theater (Design Jury chấm điểm trước khi ship), Tweaks mode (picker element + đính kèm chat), Manual edit mode và live artifact kéo dữ liệu sống qua connector Composio.
Không. Open Design dùng coding-agent CLI bạn đã có sẵn trong PATH, hoặc bất kỳ API key chuẩn OpenAI qua proxy BYOK. Mang key của provider bạn thích đến.
16 cái có sẵn: Claude Code, Codex CLI, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, Qoder CLI, GitHub Copilot CLI, Devin for Terminal, Hermes, Kimi CLI, Kiro CLI, Kilo, Mistral Vibe, DeepSeek TUI và Pi. Tự động phát hiện trong PATH lúc daemon khởi động.
Kéo ZIP export Claude Design vào dialog welcome. POST /api/import/claude-design giải nén vào thư mục thật .od/projects/<id>/, mở file entry thành tab và chuẩn bị continue-prompt cho agent local của bạn.
Có. Lớp web là Next.js 16 + React 18 + TypeScript, deploy được lên Vercel. Daemon local vẫn ở trên laptop. Topology B (Vercel + tunnel) cho setup hoàn toàn từ xa nằm trong roadmap.
Thả file DESIGN.md vào design-systems/<brand-của-bạn>/ theo schema 9 section (màu, typography, spacing, layout, component, motion, voice, brand, anti-pattern). Restart daemon — nó hiện trong picker.
Apache-2.0. Bundle skills/guizang-ppt/ và skills/html-ppt/ giữ license MIT gốc với phần ghi nhận tác giả. Không có gói trả phí. Không giới hạn dùng. Chi phí duy nhất là phần provider LLM bạn chọn tính.
Form ở lượt 1 chốt brief trước khi model vẽ. Picker 5 hướng cho palette deterministic khi không có brand spec. Tự phê 5 chiều chấm điểm output trước khi emit. Mỗi skill mang một checklist P0/P1/P2 ép buộc qua injection side-file ở pre-flight. Gradient tím chói, emoji icon chung chung và Inter dùng làm display font đều bị cấm rõ ràng trong prompt stack.
Được. POST /api/proxy/stream forward chunk SSE đến bất kỳ endpoint chuẩn OpenAI, Azure hay Google. Dán baseUrl, apiKey và model — DeepSeek, Groq, OpenRouter, MiMo, Azure OpenAI, Google Vertex, vLLM bạn tự host, shim Anthropic-via-OpenAI — tất cả đều chạy. Có guard SSRF chặn loopback và mạng nội bộ.
Settings → Execution có nút Connection test (v0.5.0, PR #507). Dán baseUrl + apiKey + model, bấm Test — Open Design bắn một handshake tối giản đến provider rồi show response hoặc đúng frame lỗi. Chạy được với Anthropic, OpenAI-compat, Azure và Google. Đỡ phải vòng chat-rồi-truy-vết-lỗi khi key sai, tên model gõ sai hay gateway đang chặn bạn.
Chỉ khi bạn chọn model của Anthropic (Claude Code hoặc qua proxy BYOK với key Anthropic). Bản thân Open Design giữ tất cả trong SQLite local ở .od/app.sqlite và file theo dự án dưới .od/projects/. Không có gì upload lên server Open Design — không có server Open Design nào hết.
Có. Chạy `od mcp` và Open Design tự mở ra như MCP server stdio. Claude Code, Codex, Cursor, VS Code, Antigravity, Zed, Windsurf — bất kỳ tool nào hiểu MCP — đều đọc được file dự án, chạy search và xem metadata. Giao diện read-only ở rìa: đọc file, search, metadata. Không có bề mặt ghi, không gọi ra ngoài. Đã ship trong v0.4.0.
Một Design Jury 5 panelist chấm điểm mọi artifact trước khi ship — accessibility, brand fit, craft, content, structure. Persistence + transcript + orchestrator đã đầu tới cuối từ Phase 4 của v0.4.0. Dưới ngưỡng cấu hình thì agent sửa rồi chấm lại; trên ngưỡng thì artifact emit ra.
Live artifact kéo dữ liệu sống vào panel preview qua catalog connector Composio — GitHub, Linear, Notion, Gmail và nhiều thứ khác. Skill orbit-general / orbit-github / orbit-gmail / orbit-linear / orbit-notion và social-media-dashboard kèm sẵn cho thấy nối dây đầu tới cuối. Đã ship trong v0.4.0 (PR #381).
Ship
Clone repo. Chạy ba lệnh. Gõ một prompt. Xem form xuất hiện, điền vào, xem card todo stream, xem artifact render.