OpenCode cho thiết kế.

OpenCode thực chất là gì

OpenCode là một agent lập trình AI mã nguồn mở được xây dựng cho terminal, do đội ngũ đứng sau SST (Anomaly Innovations) duy trì. Nó đọc kho mã của bạn, chạy lệnh, chỉnh sửa tệp và trò chuyện với một mô hình ngôn ngữ lớn — nhưng khác với các agent buộc chặt vào nhà cung cấp, nó không đi kèm mô hình riêng. Bạn trỏ nó tới bất kỳ nhà cung cấp và mô hình nào bạn muốn và mang theo khóa của riêng mình.

Nó chạy như một giao diện terminal (TUI), với một ứng dụng desktop và các tiện ích IDE đặt trên cùng một engine. Bên dưới, nó dùng kiến trúc client/server, nên agent thực hiện công việc được tách rời khỏi bề mặt mà bạn điều khiển nó. Hai agent dựng sẵn — build và plan — chuyển đổi bằng phím Tab.

• Không phụ thuộc mô hình: Mô hình và nhà cung cấp đến từ models.dev, một danh mục mở. Bạn cấu hình chúng trong opencode.json bằng một chuỗi provider/model-id và có thể tắt các nhà cung cấp bạn không muốn nạp — nên cùng một quy trình thiết kế chạy trên Anthropic, OpenAI, Google, OpenRouter, các mô hình cục bộ và nhiều hơn nữa.
• Tệp chỉ dẫn: OpenCode đọc một tệp AGENTS.md trong dự án của bạn (chuẩn liên-công-cụ, cũng tương thích với CLAUDE.md) để lấy các quy tắc dự án — nơi tự nhiên để mã hóa các quy ước thiết kế của bạn. Chạy /init để tạo một tệp.
• Mở rộng được: Nó hỗ trợ tích hợp LSP, máy chủ MCP, theme, phím tắt và lệnh tùy chỉnh, cùng các liên kết phiên chia sẻ được cho việc cộng tác.

• Người duy trì: SST / Anomaly Innovations (dự án mã nguồn mở)
• Thông tin xác thực: (các) khóa API nhà cung cấp mô hình của riêng bạn — BYOK, không khóa chặt vào nhà cung cấp
• Giấy phép: MIT, mã nguồn mở

Vì sao một agent mở, bất-kỳ-mô-hình hợp với công việc thiết kế

OpenCode không có một “mô hình thiết kế” đơn lẻ như cách một agent gắn nhà cung cấp có — và đó chính là điểm mấu chốt. Vì nó không phụ thuộc mô hình và mở, bạn có thể chạy cùng một quy trình thiết kế trên mô hình nào đang giỏi frontend nhất hiện tại, đổi nó về sau, hoặc lùi về một mô hình cục bộ, tất cả mà không thay đổi thiết lập của bạn.

Nhưng riêng việc chọn mô hình không mua được gu thẩm mỹ. Như mọi agent lập trình, OpenCode tạo ra UI chung chung trừ khi bạn trao cho nó các ràng buộc. Đầu ra thiết kế tốt đến từ ba đầu vào mà bạn cung cấp.

• Một design system: Tokens, primitive và quy ước thực mà agent tái dùng, để đầu ra khớp với một thương hiệu thay vì mặc định về một diện mạo chung chung.
• Một skill thẩm mỹ: Một skill được tuyển chọn thực thi gu thẩm mỹ thực — chuyển động tiết chế, phân cấp ưu tiên thương hiệu, tối đa hai kiểu chữ và một màu nhấn — và khiến agent cam kết với một định hướng trước khi dựng.
• Tham chiếu cụ thể: Những ảnh tham chiếu thực và nhiều trạng thái (desktop và mobile, hover, rỗng, đang tải), không chỉ một ảnh hero.

Bài học: OpenCode cho bạn tự do về mô hình, nhưng gu thẩm mỹ vẫn đến từ một ngữ cảnh thiết kế được tuyển chọn. Open Design đóng gói đúng những đầu vào ấy, và đó là lý do hai thứ ăn khớp với nhau — cả hai đều mã nguồn mở và local-first (chi tiết bên dưới).

Thiết lập OpenCode cho công việc thiết kế, từ con số không

Đây là toàn bộ lộ trình từ một máy sạch đến một OpenCode có thể dựng và kiểm chứng UI.

# 1. Install OpenCode
curl -fsSL https://opencode.ai/install | bash
# or: npm i -g opencode-ai@latest
# or: brew install sst/tap/opencode

# 2. Start the TUI in your project, then authenticate your provider
opencode          # then run /login and pick your provider + paste your key

# 3. Generate project context
opencode          # inside your project, run /init to create AGENTS.md

# 4. Pick your model (any provider, via models.dev)
#    set "provider/model-id" in opencode.json or switch in the TUI

# 5. Add an MCP server (optional, e.g. for design handoff)
#    configure it under the "mcp" key in opencode.json

• Mã hóa các quy tắc thiết kế của bạn: Đặt tokens, primitive và quy ước của bạn vào AGENTS.md (hoặc một DESIGN.md được tham chiếu từ đó) để đầu ra khớp với một thương hiệu thay vì mặc định về một diện mạo chung chung. Tùy chọn instructions trong opencode.json có thể trỏ tới các tệp quy tắc bổ sung qua glob.
• Chọn một mô hình có năng lực: Vì OpenCode không phụ thuộc mô hình, hãy chọn provider/model nào đang mạnh nhất ở frontend hiện tại cho lượt thiết kế — và giữ phần còn lại của quy trình không đổi.

Quy trình ảnh-chụp-thành-UI

Vòng thiết kế đòn bẩy cao nhất với bất kỳ agent nào là biến một ảnh tham chiếu thành UI hoạt động được, responsive và lặp đi lặp lại cho đến khi nó khớp. Cùng dạng năm bước ấy áp dụng trong OpenCode.

1. Bắt đầu từ những tham chiếu hình ảnh rõ ràng nhất bạn có — và đưa vào nhiều trạng thái (desktop và mobile, hover, rỗng, đang tải), không chỉ một ảnh hero.
2. Hãy cụ thể trong prompt; prompt mơ hồ tạo ra UI chung chung.
3. Chuẩn bị một design system và cho OpenCode biết tokens cùng các primitive chuẩn nằm ở đâu (trong AGENTS.md).
4. Chạy một dev server và để agent render trong một trình duyệt thực, đổi kích thước theo breakpoint để kiểm tra kết quả.
5. Lặp lại bằng cách cho OpenCode đối chiếu phần hiện thực của nó với các ảnh chụp — không chỉ xác nhận nó build được.

Tham chiếu tệp bằng @ trong TUI để tìm kiếm mờ trong thư mục làm việc của bạn, chạy lệnh shell trực tiếp với một dấu ! ở đầu, và điều khiển hành động bằng các lệnh /. Rồi prompt với các ràng buộc cụ thể:

opencode
# in the TUI:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from AGENTS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, open it in a browser, and iterate until the
  UI matches the references across breakpoints.

Giữ prompt nhỏ và tập trung, commit các vòng lặp tốt và hoàn tác các vòng tệ (báo cho OpenCode biết khi bạn hoàn tác), để mỗi lượt dựng trên một nền sạch.

AGENTS.md, MCP và các phiên chia sẻ được

Ba điểm mở rộng khiến OpenCode thực dụng cho công việc thiết kế bền bỉ, và cả ba đều ánh xạ gọn gàng lên một quy trình thiết kế mở.

• Quy tắc AGENTS.md: Các quy tắc dự án nằm trong một AGENTS.md ở thư mục gốc repo (hoặc các quy tắc toàn cục trong ~/.config/opencode/AGENTS.md). Đó là nơi trú ngụ bền lâu cho các quy ước thiết kế của bạn, được đọc ở mỗi lần chạy, và nó tương thích với các tệp CLAUDE.md mà các agent khác dùng.
• Máy chủ MCP: OpenCode hỗ trợ cả máy chủ MCP cục bộ (command) lẫn từ xa (URL), được cấu hình dưới khóa mcp — cách di động để mang vào ngữ cảnh thiết kế và các công cụ bên ngoài hoạt động xuyên các agent, không chỉ OpenCode.
• Các phiên chia sẻ được: Lệnh /share tạo một liên kết công khai tới một cuộc hội thoại để cộng tác hoặc review, và /unshare thu hồi nó — hữu ích để lấy phản hồi về một lượt thiết kế.

Đây là những năng lực di động, đa-agent — đúng kiểu thứ mà Open Design được tạo ra để điều phối, thay vì tạo lại theo từng dự án.

OpenCode so với Codex so với Claude Code so với Cursor cho thiết kế

Không có người thắng cuộc duy nhất cho công việc thiết kế — mỗi agent có một thế mạnh khác nhau, và các đội ngũ giàu kinh nghiệm xếp chồng chúng. Một bản tóm tắt công bằng:

Kết luận lặp đi lặp lại của cộng đồng là gu thẩm mỹ đến từ con người: tất cả chúng đều mặc định về một thẩm mỹ chung chung nếu thiếu skill, tham chiếu và ràng buộc. Đó mới là vấn đề thực cần giải — và nó mang hình hài công cụ thiết kế, chứ không phải hình hài mô hình, đó chính là lý do một agent mở như OpenCode ghép đôi rất hợp với một lớp thiết kế mở.

Cạm bẫy, và cách tránh diện mạo “AI slop”

Phàn nàn phổ biến nhất về thiết kế do AI tạo ra là nó trông chung chung — gradient mềm, panel lơ lửng, bo góc quá khổ, đổ bóng kịch tính, một cảm giác Inter-và-tím “gào lên rằng AI làm cái này.” Những vấn đề khác được báo cáo gồm bố cục mobile vỡ và phần chỉ dẫn rò rỉ vào nội dung UI. Không điều nào trong số này là riêng có ở OpenCode; chúng là điều xảy ra khi bất kỳ agent nào chạy mà không có một ngữ cảnh thiết kế được tuyển chọn.

• Thêm một skill thẩm mỹ: Một skill thiết kế được tuyển chọn buộc agent cam kết với một định hướng thực thay vì diện mạo mặc định.
• Kiểm chứng trong một trình duyệt thực: Render và tự kiểm tra trên các breakpoint để bố cục không âm thầm vỡ trên mobile.
• Cung cấp tokens và tham chiếu: Tokens thiết kế thực và ảnh chụp tham chiếu là đòn bẩy lớn nhất duy nhất lên chất lượng đầu ra.
• Mã hóa quy tắc trong AGENTS.md: Đặt những quy tắc kiểu “không thẻ hero, tối đa hai kiểu chữ, phân cấp ưu tiên thương hiệu” ở nơi agent đọc mỗi lần chạy.

Hãy để ý rằng mọi biện pháp giảm thiểu đều xoay quanh việc trao cho agent một ngữ cảnh thiết kế được tuyển chọn — bất kể bạn chạy mô hình nào. Duy trì ngữ cảnh đó bằng tay, theo từng dự án, chính là sự cực nhọc mà Open Design loại bỏ.

Thiết kế với OpenCode bên trong Open Design

Open Design là lớp thiết kế mã nguồn mở mà quy trình ở trên cứ liên tục đòi hỏi. Nó coi OpenCode như một adapter hạng nhất và bao bọc nó trong một thư viện skill và design-system được tuyển chọn, một render pipeline có cấu trúc và một giao diện desktop cục bộ — để ngữ cảnh thiết kế giúp bất kỳ agent nào trở nên giỏi đã có sẵn ngay từ lần chạy đầu tiên, chứ không phải ghép lại bằng tay mỗi lần. Cả hai dự án đều mã nguồn mở và local-first, điều khiến sự ghép đôi này là một sự phù hợp tự nhiên.

1. Cài đặt Open Design và chọn OpenCode làm agent của bạn.
2. Xác thực bằng khóa API nhà cung cấp mô hình của riêng bạn (BYOK) — thông tin xác thực ở lại trên máy bạn và không bao giờ được trung chuyển qua chúng tôi.
3. Chọn bất kỳ nhà cung cấp và mô hình nào, cùng một design system và một skill, rồi tạo ra deck, prototype và landing page với gu thẩm mỹ nhất quán.
4. Mọi sản phẩm và tệp DESIGN.md đều nằm trong repo của riêng bạn, không phải một đám mây được lưu trữ ở nơi khác.

Cùng một agent OpenCode, cùng một sự tự do về mô hình — cộng thêm một quy trình thiết kế thực, di động, mã nguồn mở bao quanh nó. Nó local-first và Apache-2.0, nên không gì về công việc hay thông tin xác thực của bạn rời khỏi máy bạn.

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

1. 01 OpenCode có thực sự làm được công việc thiết kế không? +

   Có — với một skill thẩm mỹ, một design system và những ảnh tham chiếu thực trong ngữ cảnh, OpenCode tạo ra UI responsive chất lượng sản xuất và có thể kiểm chứng trong trình duyệt. Vì nó không phụ thuộc mô hình, bạn chạy mô hình nào đang giỏi frontend nhất hiện tại. Thiếu ngữ cảnh được tuyển chọn đó, nó có xu hướng mặc định về một diện mạo chung chung, và đó chính là khoảng cách mà Open Design lấp đầy.

2. 02 Tôi nên dùng mô hình nào với OpenCode cho thiết kế? +

   Mô hình nào bạn thích — OpenCode không phụ thuộc nhà cung cấp qua models.dev, nên bạn có thể chạy Anthropic, OpenAI, Google, OpenRouter, hoặc các mô hình cục bộ đứng sau cùng một quy trình và đổi bất cứ lúc nào. Chất lượng đầu ra thiết kế phụ thuộc vào skill, design system và tham chiếu của bạn nhiều hơn nhiều so với riêng mô hình.

3. 03 Open Design có do đội ngũ OpenCode (SST) làm không? +

   Không. Open Design là một dự án mã nguồn mở độc lập tích hợp OpenCode như một agent. Nó bổ sung cho OpenCode bằng một thư viện skill và design-system mở, local-first.

4. 04 Tôi có cần một gói đăng ký đặc biệt để thiết kế với OpenCode không? +

   Không — OpenCode là BYOK. Bạn mang theo khóa API nhà cung cấp mô hình của riêng mình, và Open Design không bao giờ trung chuyển thông tin xác thực của bạn. Không có khóa chặt vào nhà cung cấp.

5. 05 OpenCode hay Codex hay Claude Code cho thiết kế frontend? +

   Tất cả đều mạnh, và nhiều đội xếp chồng chúng. Lợi thế của OpenCode là hoàn toàn mã nguồn mở và không phụ thuộc mô hình; Codex xuất sắc ở các bản build được ủy thác, chạy trong sandbox; Claude Code nổi tiếng với các quyết định thiết kế cụ thể, hiểu codebase. Open Design cho phép bạn đổi agent mà không thay đổi quy trình thiết kế của mình.

6. 06 Làm sao mở rộng OpenCode cho ngữ cảnh thiết kế? +

   Mã hóa quy tắc trong AGENTS.md, thêm các máy chủ MCP dưới khóa mcp cho các công cụ di động và ngữ cảnh thiết kế, và dùng các phiên chia sẻ được để review. Open Design cung cấp một thư viện skill và design-system được tuyển chọn để bạn bỏ qua phần thiết lập theo từng dự án.

7. 07 Open Design có liên kết với OpenCode hay SST không? +

   Không. OpenCode là một dự án mã nguồn mở được SST (Anomaly Innovations) duy trì; Open Design là một dự án mã nguồn mở độc lập hỗ trợ nó như một adapter hạng nhất.

8. 08 Tệp tin và thông tin xác thực của tôi có an toàn không? +

   Có — Open Design là local-first. Tệp tin, sản phẩm và DESIGN.md của bạn ở lại trong repo của riêng bạn, còn thông tin xác thực nhà cung cấp mô hình của bạn được agent của bạn dùng trực tiếp, không bao giờ định tuyến qua máy chủ Open Design.