Open Design: Studio thiết kế chạy bằng AI coding agent có sẵn trên máy bạn

Tóm tắt nhanh:

Open Design (OD) là giải pháp mã nguồn mở thay thế Claude Design (do Anthropic ra mắt tháng 4/2026, đóng và trả phí), được phát triển bởi nexu-io.

Không kèm AI agent riêng – thay vào đó tự động phát hiện 16 coding CLI có sẵn trên PATH: Claude Code, Codex, Devin, Cursor Agent, Gemini CLI, OpenCode, Qwen, Qoder, GitHub Copilot CLI, Hermes, Kimi, Pi, Kiro, Kilo, Mistral Vibe, DeepSeek TUI.

Tích hợp 132 Skills (web prototype, SaaS landing, dashboard, magazine poster, deck, finance report, HR onboarding…) và 129 Design Systems (Linear, Stripe, Vercel, Notion, Apple, Tesla, Figma, Anthropic…).

BYOK ở mọi layer với proxy hỗ trợ Anthropic, OpenAI, Azure, Google Gemini, Ollama, SenseAudio – không khoá vào vendor nào.

Hỗ trợ generate ảnh/video/audio ngay trong cùng chat surface: gpt-image-2, Seedance 2.0, HyperFrames – cùng 93 prompt template sẵn sàng.

Local-first: chạy native với pnpm tools-dev hoặc deploy web layer lên Vercel. License mã nguồn mở, đang ở phiên bản 0.8.0-preview, đạt 40K stars chỉ sau hai tuần.

Output là artifact thực sự: HTML, PDF, PPTX, ZIP, Markdown – render trong sandboxed iframe ngay khi vừa generate.

Tháng 4/2026, Anthropic công bố Claude Design trên nền Opus 4.7 – lần đầu tiên một LLM ngừng viết prose dài lê thê và thực sự ship ra design artifact: pitch deck dạng magazine, landing page hoàn chỉnh, dashboard có data thật. Sản phẩm viral lập tức, nhưng vẫn closed-source, trả phí, cloud-only, khoá vào Anthropic, không có checkout self-host, không có Vercel deploy, không thể swap agent khác.

Open Design trả lời cho khoảng trống đó. Đây là một dự án mã nguồn mở giữ nguyên triết lý “artifact-first” của Claude Design nhưng loại bỏ toàn bộ vendor lock-in. Quan điểm thú vị nhất: nhóm phát triển không ship agent riêng – vì các coding agent mạnh nhất đã sống sẵn trên laptop của bạn. Việc cần làm là wire chúng vào một skill-driven workflow chạy local.

Một câu lệnh đơn giản như “make me a magazine-style pitch deck for our seed round” sẽ kích hoạt: form câu hỏi tương tác hiện trước khi model improvise, agent chọn một trong năm visual direction được curate, kế hoạch TodoWrite live stream vào UI, daemon dựng project folder thật với seed template và checklist, agent đọc trước – chạy 5-dimensional critique – và emit <artifact> cuối cùng vào sandboxed iframe trong vài giây.

Các tính năng nổi bật

16 coding CLI tự động phát hiện qua PATH

Đây là quyết định kiến trúc khôn ngoan nhất của dự án. Khi bạn khởi động Open Design, daemon scan PATH và phát hiện CLI nào có sẵn: Claude Code, Codex CLI, Devin for Terminal, Cursor Agent, Gemini CLI, OpenCode, Qwen Code, Qoder CLI, GitHub Copilot CLI, Hermes (ACP), Kimi CLI (ACP), Pi (RPC), Kiro CLI, Kilo, Mistral Vibe CLI, DeepSeek TUI. Bạn click một cú là switch agent driving – không cần config lại API key, không cần dựng lại profile.

BYOK fallback cho người không có CLI

Nếu bạn không cài CLI nào, daemon expose một OpenAI-compatible proxy tại /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream. Paste baseUrl + apiKey + model, chọn provider – daemon normalize SSE về cùng chat stream. Internal IP / SSRF bị block ở edge.

Đặc biệt với SenseAudio, chat surface còn expose generate_image và generate_video tool – model có thể ghi rendered artifact thẳng vào project folder.

132 Skills và 129 Design Systems built-in

Skills được nhóm theo scenario: design, marketing, operation, engineering, product, finance, HR, sale, personal. Một số skill nổi bật:

Prototype mode (27 skills): web-prototype, saas-landing, dashboard, mobile-app, gamified-app, social-carousel, magazine-poster, dating-web, sprite-animation, motion-frames, critique, tweaks, wireframe-sketch, pm-spec, eng-runbook, finance-report, hr-onboarding, invoice, kanban-board, team-okrs…
Deck mode (4 skills): guizang-ppt, simple-deck, replit-deck, weekly-update.

129 Design Systems gồm 2 hand-authored starter, 70 product system thực tế (Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, Xiaohongshu), cộng 57 design skill từ awesome-design-skills.

Media generation cùng chat surface

Image, video, audio đều ship cùng design loop:

gpt-image-2 (Azure / OpenAI) – poster, avatar, infographic, illustrated map.
Seedance 2.0 (ByteDance) – cinematic 15s text-to-video và image-to-video.
HyperFrames – HTML→MP4 motion graphics (product reveal, kinetic typography, data chart, social overlay, logo outro).

Có 93 prompt template ready-to-replicate trong prompt-templates/: 43 cho gpt-image-2, 39 cho Seedance, 11 cho HyperFrames. Output .mp4 / .png chip thẳng vào project workspace.

5 visual direction được curate

Mỗi direction ship một deterministic OKLch palette + font stack cố định:

Editorial Monocle – kiểu magazine sang trọng
Modern Minimal – sạch sẽ, Bauhaus-influenced
Warm Soft – tông pastel ấm áp
Tech Utility – dashboard, monospace
Brutalist Experimental – phá cách, đậm

Điều này ngăn model “improvise” màu lung tung – một vấn đề kinh điển khi để LLM tự chọn palette.

Hướng dẫn cài đặt Open Design

Open Design là dạng monorepo Node.js với daemon local và web layer. Yêu cầu Node.js LTS và pnpm.

Bước 1: Clone repository

git clone https://github.com/nexu-io/open-design.git
cd open-design

Bước 2: Cài dependencies

pnpm install

Bước 3: Khởi động dev mode

pnpm tools-dev

Lệnh này khởi động cả daemon local (process privileged duy nhất, xử lý filesystem, agent spawn, proxy) và web UI. Mở browser tại http://localhost:3000 (hoặc port hiển thị trong console).

Bước 4: Cấu hình agent

Open Design tự scan PATH để phát hiện CLI có sẵn. Bạn chỉ cần đảm bảo các CLI bạn muốn dùng đã được install global:

# Ví dụ với một số agent phổ biến
npm install -g @anthropic-ai/claude-code
npm install -g @openai/codex
npm install -g @google/gemini-cli

Sau khi cài, refresh Open Design UI – các agent sẽ xuất hiện trong picker. Click để chọn agent driving.

Bước 5 (tuỳ chọn): Deploy web layer lên Vercel

Nếu muốn truy cập Open Design từ nhiều thiết bị, web layer có thể deploy lên Vercel. Lưu ý: daemon vẫn phải chạy local trên máy bạn để có quyền filesystem và spawn CLI – đây là kiến trúc local-first cố ý.

BYOK setup (nếu không dùng CLI)

Trong settings UI, vào tab BYOK, chọn provider (Anthropic, OpenAI, Azure, Google Gemini, Ollama, SenseAudio), paste baseUrl + apiKey + model. Daemon sẽ normalize traffic. Phù hợp khi bạn dùng provider OpenAI-compatible proxy như OpenRouter, Together.ai…

Workflow điển hình: Tạo một artifact

Bước 1: Chọn scenario

Mở Open Design, chọn scenario phù hợp (design, marketing, engineering…). Ví dụ scenario design sẽ filter ra các skill như magazine poster, social carousel, dashboard.

Bước 2: Mô tả yêu cầu

Gõ prompt tự nhiên, ví dụ: “Tạo dashboard analytics cho SaaS B2B, tông Linear, dark mode, có chart MRR/ARR và funnel conversion”.

Bước 3: Trả lời form interactive

Trước khi model bắt đầu generate, một form ngắn pop-up hỏi các thông tin cần thiết: tỷ lệ, độ dài, audience, brand color cụ thể (nếu có). Đây là cách Open Design giảm “AI slop” – ép agent làm rõ requirement trước thay vì improvise.

Bước 4: Chọn visual direction

Agent đề xuất 1-2 trong 5 direction curated. Bạn confirm hoặc override.

Bước 5: Quan sát TodoWrite plan

Live stream plan của agent vào UI – bạn thấy chính xác nó đang làm gì, có thể interrupt khi cần.

Bước 6: Nhận artifact và export

Output render trong sandboxed iframe. Click export để xuất ra một trong 5 format: HTML, PDF, PPTX, ZIP (đầy đủ source), Markdown.

Một số mẹo và lưu ý

Để chất lượng output cao nhất, ưu tiên dùng Claude Code với Opus hoặc Codex với GPT-5 làm agent driving – hai model này hiện cho artifact “design-grade” tốt nhất. Với budget hạn chế, Gemini CLI với Gemini 2.5 Pro cũng rất ổn.

Khi làm deck slide, hãy thử skill guizang-ppt – đây là skill nổi tiếng từ cộng đồng Trung Quốc với layout magazine-style, WebGL hero, P0/P1/P2 checklist – được Open Design bundle nguyên với LICENSE gốc.

Khi cần generate ảnh kèm theo design, bật Custom Image API hoặc ImageRouter trong settings – bạn có thể wire các generator OpenAI-compatible khác. ComfyUI đang được track như planned adapter.

Vì daemon là process privileged duy nhất, hãy đọc kỹ permission khi nó request access filesystem – đặc biệt nếu bạn deploy web layer ra internet, hãy đảm bảo daemon vẫn bind localhost-only.

Open Design đại diện cho làn sóng “unbundle AI products” đang diễn ra mạnh mẽ: thay vì chấp nhận một sản phẩm đóng và đắt từ một vendor, cộng đồng tái hợp các thành phần (agent, skill, design system, proxy) thành một giải pháp open mà cá nhân và team đều kiểm soát được. Đối với bất kỳ ai đã đầu tư vào ecosystem coding CLI (Claude Code, Cursor, Codex…), việc thêm Open Design vào workflow gần như “miễn phí” – bạn tận dụng lại chính các agent đó cho design task mà trước đây phải mua riêng tool.

Duy Nghiện

Hãy làm khán giả, đừng làm nhân vật chính :)