Open Design

Open source · Local-first · BYOK

Open Design

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

Open Design · demo trực tiếp
Xem cả 110 skills

Vì sao có dự án này

Claude Design viral. Và vẫn đóng.

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ở

Apache-2.0, từ trên xuống dưới.

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

Dùng CLI bạn đã có.

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

Chạy ngay laptop. Deploy lên Vercel.

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

Bốn bước. Không tuỳ hứng.

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ẽ.

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.

Picker hướng visual

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.

TodoWrite stream

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ẻ.

<artifact> render

Preview trong iframe sandbox. Sửa tại chỗ. Tải về dạng HTML, PDF, PPTX hoặc ZIP.

Skill spotlight · html-ppt

Một skill duy nhất. 36 theme, 31 layout, 47 animation, 14 template deck.

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.

tổng quan animation html-ppt — slide, layout, transition

Biến thể «taste-locked»

Cùng một engine, ba taste.

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

16 CLI tự động phát hiện trong PATH.

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ụ

Bọn mình tin gì, gói gọn bảy dòng.

01

Bọn mình không kèm agent. CLI của bạn là đủ.

+

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

Skills là file, không phải plugin.

+

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

Design Systems là Markdown di động, không phải JSON theme.

+

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

Form tương tác chặn 80 % lần phải sửa.

+

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 làm cho agent thấy như đang ở trên laptop bạn.

+

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

Prompt stack chính là sản phẩm.

+

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

Open Design không phải silo. Các agent khác của bạn cũng đọc được.

+

`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

Open Design đối đầu phần còn lại.

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
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
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

Hình, video, audio — cùng giao diện.

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/.

01

gpt-image-2

Poster · avatar · bản đồ minh hoạ · infographic · social card kiểu tạp chí · UI game · still narrative game

Tiến hoá cầu thang đá 3D phóng to

gpt-image-2

Tiến hoá cầu thang đá 3D

Bản đồ ẩm thực thành phố minh hoạ phóng to

gpt-image-2

Bản đồ ẩm thực thành phố minh hoạ

Cảnh thang máy điện ảnh phóng to

gpt-image-2

Cảnh thang máy điện ảnh

Chân dung anime cyberpunk phóng to

gpt-image-2

Chân dung anime cyberpunk

Chân dung studio glamour phóng to

gpt-image-2

Chân dung studio glamour

Anime Fighting Game — Captain Ryuuga vs Kaze Renshin phóng to

gpt-image-2

Anime Fighting Game — Captain Ryuuga vs Kaze Renshin

Three Kingdoms — Quan Vũ chém Nhan Lương phóng to

gpt-image-2

Three Kingdoms — Quan Vũ chém Nhan Lương

Three Kingdoms — Lữ Bố bắn cung Viên Môn phóng to

gpt-image-2

Three Kingdoms — Lữ Bố bắn cung Viên Môn

Three Kingdoms — Triệu Vân thoát thân ôm ấu chúa phóng to

gpt-image-2

Three Kingdoms — Triệu Vân thoát thân ôm ấu chúa

HUD MMO open-world Trung Hoa cổ phóng to

gpt-image-2

HUD MMO open-world Trung Hoa cổ

Tranh sáp trẻ con → vẽ lại photo-real phóng to

gpt-image-2

Tranh sáp trẻ con → vẽ lại photo-real

Phân tích vũ đạo otaku — 16 panel phóng to

gpt-image-2

Phân tích vũ đạo otaku — 16 panel

Storyboard vũ điệu giật gân — 8 cảnh phóng to

gpt-image-2

Storyboard vũ điệu giật gân — 8 cảnh

02

Seedance 2.0

15s t2v + i2v điện ảnh kèm audio · short narrative · phim sản phẩm

phát khi rê chuột phóng to

Seedance 2.0

Music Podcast & guitar

phát khi rê chuột phóng to

Seedance 2.0

Cận mặt cảm xúc

phát khi rê chuột phóng to

Seedance 2.0

Siêu xe luxury điện ảnh

phát khi rê chuột phóng to

Seedance 2.0

Châm biếm mèo Tử Cấm Thành

phát khi rê chuột phóng to

Seedance 2.0

Short tình cảm Nhật Bản

phát khi rê chuột phóng to

Seedance 2.0

Rồng bay điện ảnh

phát khi rê chuột phóng to

Seedance 2.0

Rượt đuổi nhà máy hậu tận thế

phát khi rê chuột phóng to

Seedance 2.0

Trailer game cyberpunk

phát khi rê chuột phóng to

Seedance 2.0

Crimson Horizon Sci-Fi

phát khi rê chuột phóng to

Seedance 2.0

Storyboard học viện phép thuật

phát khi rê chuột phóng to

Seedance 2.0

Đánh nhau ma cà rồng trong hẻm

phát khi rê chuột phóng to

Seedance 2.0

Mỹ học wuxia HK retro

phát khi rê chuột phóng to

Seedance 2.0

Three Kingdoms — Quan Vũ chém Nhan Lương

phát khi rê chuột phóng to

Seedance 2.0

Three Kingdoms — Lữ Bố bắn cung Viên Môn

phát khi rê chuột phóng to

Seedance 2.0

Three Kingdoms — Triệu Vân thoát thân ôm ấu chúa

phát khi rê chuột phóng to

Seedance 2.0

Bé trai 3D xếp Lego

phát khi rê chuột phóng to

Seedance 2.0

Cứu rồng thủ hộ thời cổ

phát khi rê chuột phóng to

Seedance 2.0

Vương quốc Ấn Độ cổ — FPV

phát khi rê chuột phóng to

Seedance 2.0

Motion graphics intro nhân vật

phát khi rê chuột phóng to

Seedance 2.0

Vũ điệu bàn tay phụ nữ Đông Á

phát khi rê chuột phóng to

Seedance 2.0

Nhà sinh vật biển khám phá

phát khi rê chuột phóng to

Seedance 2.0

Đua xe đường phố điện ảnh

phát khi rê chuột phóng to

Seedance 2.0

Jumpscare máy nướng bánh hoá tên lửa

phát khi rê chuột phóng to

Seedance 2.0

Hải tặc Disney vintage và cá sấu

phát khi rê chuột phóng to

Seedance 2.0

Fantasy haute couture Hollywood

03

HyperFrames

HTML→MP4 motion graphics · reveal sản phẩm · typography động · biểu đồ dữ liệu

Outro logo điện ảnh phóng to

HyperFrames

Outro logo điện ảnh

Showcase app trên ba điện thoại phóng to

HyperFrames

Showcase app trên ba điện thoại

TikTok karaoke phóng to

HyperFrames

TikTok karaoke

Bar-chart race phóng to

HyperFrames

Bar-chart race

Đường bay trên bản đồ phóng to

HyperFrames

Đường bay trên bản đồ

Đếm tiền hype phóng to

HyperFrames

Đếm tiền hype

Stack overlay social phóng to

HyperFrames

Stack overlay social

UI 3D-reveal phóng to

HyperFrames

UI 3D-reveal

nhấn Esc hoặc click ra nền để đóng

Quickstart

Ba lệnh. Không cần đăng ký.

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

Render một lần, v0.4.0, lặp đến vô tận.

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

Inspect — chỉ thẳng vào node DOM, ra mảnh sửa gọn.

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

Live Artifacts — hạng nhất, không phải mock đông cứng.

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

Phase 5 — rubric đã mài cứng, panelist tự gọi MCP.

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

od mcp — Open Design dạng MCP server.

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

Star cho bọn mình

Nếu cái này tiết kiệm cho bạn nửa giờ — xin một ★.

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ú ý.

Stars Forks Issues Commit gần nhất
★ Star trên GitHub

Apache-2.0

Open source

110

Skills

141

Design Systems

16 + BYOK

CLIs

FAQ

Câu hỏi thường gặp

Open Design là gì?

+

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.

Open Design khác Claude Design ở đâu?

+

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.

Open Design thay được Claude Design cho team mình không?

+

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.

Có cần subscription Claude Pro để dùng Open Design không?

+

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.

Open Design hỗ trợ những CLI coding-agent nào?

+

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.

Import dự án Claude Design hiện có vào Open Design như thế nào?

+

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ó self-host được Open Design trên Vercel không?

+

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êm design system riêng vào Open Design ra sao?

+

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.

Open Design có miễn phí không? License gì?

+

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.

Open Design tránh dáng vẻ AI-slop bằng cách nào?

+

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ó dùng Open Design mà không cài CLI nào được không?

+

Đượ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ộ.

Làm sao verify config BYOK provider mà không phải mở chat lên?

+

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.

Dữ liệu của mình có bị gửi lên Anthropic khi dùng Open Design không?

+

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ác coding-agent khác của mình đọc được dự án Open Design không?

+

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.

Critique Theater là gì?

+

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 là gì và hỗ trợ connector nào?

+

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

Ship artifact đầu tiên trong ba phút.

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.