Mistral Vibe CLI cho thiết kế.

Mistral Vibe CLI thực sự là gì

Mistral Vibe CLI là một agent lập trình mã nguồn mở (Apache-2.0) mà Mistral AI phát hành cho terminal. Nó cung cấp một giao diện chat tương tác với các công cụ để thao tác tệp, tìm kiếm mã, kiểm soát phiên bản và thực thi lệnh, và nó tự động quét cấu trúc tệp cùng trạng thái Git của dự án để cho agent ngữ cảnh liên quan. Nó được vận hành bằng các mô hình lập trình Devstral của Mistral — lập kế hoạch và kiểm chứng công việc từ các tác vụ ngôn ngữ tự nhiên thay vì chỉ hoàn thành từng dòng.

Đối với công việc thiết kế, hai đặc tính nổi bật. Nó chạy trên họ Devstral trọng-số-mở của Mistral (Devstral 2 và Devstral Small 2 nhỏ hơn), nên bạn có thể chạy agent đối chiếu với API Mistral trên đám mây hoặc đối chiếu với các mô hình cục bộ — hữu ích cho công việc thiết kế nhạy cảm về quyền riêng tư hoặc ngoại tuyến. Và nó nói Agent Client Protocol, nên cùng một agent có thể điều khiển các trình soạn thảo và công cụ, không chỉ một phiên terminal duy nhất.

• Tệp cấu hình: Vibe CLI được cấu hình qua một tệp config.toml (cấp dự án ./.vibe/config.toml, với một dự phòng ở ~/.vibe/config.toml). Đó là một nơi thực dụng để mã hóa các nhà cung cấp, lựa chọn mô hình và thiết lập dự án của bạn.
• Công cụ tích hợp sẵn + MCP: Nó cung cấp các công cụ tệp, tìm kiếm, kiểm soát phiên bản và thực thi lệnh, và hỗ trợ các máy chủ MCP (cấu hình dưới một mục [[mcp_servers]]) để thêm ngữ cảnh ngoài như một tệp Figma trực tiếp.
• BYOK hoặc cục bộ: Xác thực bằng một khóa API Mistral từ console Mistral, hoặc trỏ nó tới các mô hình cục bộ/tương thích để nó hoạt động hoàn toàn ngoại tuyến.

• Nhà cung cấp: Mistral AI
• Thông tin xác thực: khóa API Mistral (BYOK) từ console Mistral, hoặc các mô hình cục bộ / tương thích
• Giấy phép: Apache-2.0, mã nguồn mở

Vì sao một agent lập trình trọng-số-mở phù hợp với thiết kế

Lợi thế thiết kế của Vibe CLI đến từ họ mô hình trọng-số-mở và tầm với giao thức của nó — nhưng, như với mọi agent, gu thẩm mỹ vẫn phải do bạn cung cấp.

• Các mô hình lập trình Devstral: Vibe chạy trên họ Devstral của Mistral, các mô hình được tinh chỉnh cho lập trình, xây cho công việc nhiều-tệp mang tính agent — nên agent chỉnh sửa xuyên một codebase frontend thật thay vì phát ra các đoạn mã rời rạc.
• Trọng-số-mở và thân thiện cục bộ: Devstral Small 2 đủ nhỏ để chạy trên phần cứng tiêu dùng, nên công việc thiết kế có thể ở lại hoàn toàn cục bộ và ngoại tuyến — tham chiếu và mã không bao giờ phải rời khỏi máy bạn.
• Quy ước trong config.toml + ngữ cảnh: Cấu hình dự án và các chỉ dẫn của riêng bạn trỏ agent tới token, component và spec thật của bạn, nên nó làm việc đối chiếu với một thương hiệu thay vì một vẻ ngoài mặc định.

Bài học vẫn là bài học mà mọi agent dạy ta: Vibe CLI không có gu thẩm mỹ mặc định. Nó tạo ra thiết kế tốt khi bạn cho nó các ràng buộc — một design system, một skill thẩm mỹ và những tham chiếu cụ thể. Open Design đóng gói chính xác những đầu vào đó, đó là lý do hai bên ăn khớp với nhau (thêm bên dưới).

Thiết lập Vibe CLI 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 Vibe CLI có thể dựng và kiểm chứng UI.

# 1. Install Mistral Vibe CLI
uv tool install mistral-vibe
# or: pip install mistral-vibe

# 2. Run the setup wizard to register your API key
vibe --setup     # saves config to ~/.vibe/config.toml and ~/.vibe/.env
#    or set it directly:  export MISTRAL_API_KEY=...

# 3. Start Vibe in your project
cd your-project
vibe

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add an [[mcp_servers]] entry in your config.toml

• Mã hóa quy tắc thiết kế của bạn: Giữ token, primitive và quy ước của bạn ở nơi agent đọc chúng và trỏ Vibe tới chúng, để đầu ra khớp với một thương hiệu thay vì mặc định về một vẻ ngoài tầm thường.
• Thêm kiểm chứng trên trình duyệt: Nối một Playwright hoặc trình duyệt MCP để Vibe kết xuất trong một trình duyệt thật và kiểm tra đầu ra qua các breakpoint thay vì chỉ xác nhận build thành công.

Quy trình tham-chiếu-thành-UI

Vòng lặp thiết kế có đòn bẩy cao nhất với Vibe CLI là biến một tham chiếu rõ ràng thành UI hoạt động được, có khả năng đáp ứng và lặp lại cho đến khi khớp — dựa vào các công cụ của agent để kết xuất, kiểm tra và sửa chính đầu ra của nó.

1. Bắt đầu từ những tham chiếu rõ ràng nhất bạn có — và mô tả nhiều trạng thái (desktop và di động, hover, trống, đang tải), không chỉ một ảnh hero.
2. Hãy cụ thể trong lời nhắc; lời nhắc mơ hồ tạo ra UI tầm thường ngay cả với một mô hình mạnh.
3. Giữ design system và quy ước của bạn ở nơi Vibe đọc chúng, và cho nó biết token cùng các primitive chuẩn nằm ở đâu.
4. Chạy một dev server và cho Vibe kết xuất trong một trình duyệt thật, đổi kích thước về các breakpoint để kiểm tra kết quả.
5. Lặp lại bằng cách cho Vibe đối chiếu phần triển khai của nó với tham chiếu — chứ không chỉ xác nhận nó build được.

Tham chiếu tệp bằng @ (Vibe tự hoàn tất đường dẫn tệp) và điều khiển các lệnh slash bằng /, rồi đưa ra các ràng buộc cụ thể:

vibe
# in the prompt:
> @design-spec.md @tokens.css
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, render it in the browser, and iterate until
  it matches the references across breakpoints.

Giữ lời nhắc nhỏ và tập trung, commit những lần lặp tốt và hoàn nguyên những lần lặp tệ (báo cho Vibe khi bạn hoàn nguyên), để mỗi lần đi qua đều được xây trên một nền sạch.

config.toml, MCP và ACP

Ba điểm mở rộng khiến Vibe CLI 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 vào một quy trình thiết kế mở.

• config.toml: Quy tắc dự án và thiết lập nhà cung cấp/mô hình nằm trong một config.toml (cấp dự án, với một dự phòng ~/.vibe). Đó là ngôi nhà bền vững cho cách agent được nối vào dự án của bạn, được đọc mỗi lần chạy.
• Máy chủ MCP: Cấu hình các máy chủ MCP trong config.toml của bạn ([[mcp_servers]], với các transport HTTP, streamable-HTTP và stdio) — cách di động để đưa vào ngữ cảnh thiết kế và công cụ ngoài, liên quan nhất là máy chủ Figma MCP, hoạt động xuyên các agent, không chỉ Vibe.
• Agent Client Protocol: Vibe nói ACP, nên cùng một agent có thể được điều khiển từ các trình soạn thảo và các client ACP khác. Đây đúng là cách Open Design tích hợp nó — qua ACP thông qua tệp nhị phân vibe-acp.

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

Vibe CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI cho thiết kế

Không có người chiến thắng duy nhất cho công việc thiết kế — mỗi agent có một điểm mạnh khác nhau, và các nhóm dày kinh nghiệm kết hợp chúng. Một tóm tắt công bằng:

Phán quyết 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ỹ tầm thường nếu thiếu skill, tham chiếu và ràng buộc. Đó mới là vấn đề thực sự cần giải — và nó có hình hài của một công cụ thiết kế, không phải của một mô hình.

Cạm bẫy, và cách tránh vẻ ngoài “AI làm cẩu thả”

Phàn nàn phổ biến nhất về thiết kế do AI tạo ra là nó trông tầm thường — gradient mềm, các panel lơ lửng, góc bo tròn quá khổ, đổ bóng kịch tính, một bầu không khí Inter-và-tím “hét lên rằng AI làm cái này.” Các vấn đề khác được báo cáo gồm bố cục di động bị vỡ và lời chỉ dẫn rò rỉ vào nội dung UI. Không vấn đề nào trong số này là riêng của Vibe CLI; chúng là điều xảy ra khi bất kỳ agent nào chạy mà thiếu 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 một hướng đi thực sự thay vì vẻ ngoài mặc định.
• Kiểm chứng trong một trình duyệt thật: Cho Vibe kết xuất và tự kiểm tra qua các breakpoint để bố cục không âm thầm vỡ trên di động.
• Cung cấp token và tham chiếu: Token thiết kế thật và ảnh chụp tham chiếu là đòn bẩy lớn nhất, đơn lẻ lên chất lượng đầu ra.
• Mã hóa quy tắc trong cấu hình và ngữ cảnh: Đặt các quy tắc kiểu “không thẻ hero, tối đa hai kiểu chữ, phân cấp đặt thương hiệu lên trước” ở nơi agent đọc chúng mỗi lần chạy.

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

Thiết kế với Vibe CLI 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ó xem Mistral Vibe CLI như một adapter chính thức — điều khiển nó qua ACP thông qua tệp nhị phân vibe-acp — và bao nó trong một thư viện skill và design-system được tuyển chọn, một pipeline kết xuất có cấu trúc, và một giao diện máy tính cục bộ. Nên ngữ cảnh thiết kế khiến Vibe trở nên giỏi đã có sẵn ngay từ lần chạy đầu tiên, chứ không phải lắp ráp bằng tay mỗi lần. Cả hai đều mã nguồn mở và ưu tiên cục bộ, điều đó khiến sự kết hợp trở nên tự nhiên.

1. Cài Open Design và chọn Mistral Vibe CLI làm agent của bạn.
2. Xác thực bằng khóa API Mistral của bạn (BYOK) hoặc trỏ Vibe tới các mô hình cục bộ — 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 một design system và một skill, rồi tạo deck, prototype và landing page với gu thẩm mỹ nhất quán.
4. Mọi artifact 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 lưu trữ.

Cùng một agent Vibe CLI, cùng một khóa — cộng thêm một quy trình thiết kế thực thụ, di động, mã nguồn mở bao quanh nó. Nó ưu tiên cục bộ và Apache-2.0, nên không có 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ác câu hỏi thường gặp

1. 01 Mistral Vibe CLI 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à các tham chiếu thật trong ngữ cảnh, Vibe CLI tạo ra UI chất lượng sản xuất, có khả năng đáp ứng, và các mô hình Devstral của nó chỉnh sửa xuyên một codebase frontend thật. Thiếu ngữ cảnh đó, nó có xu hướng mặc định về một vẻ ngoài tầm thường, đó chính là khoảng trống mà Open Design lấp đầy.

2. 02 Làm thế nào để xác thực Vibe CLI? +

   Chạy trình hướng dẫn thiết lập với vibe --setup để đăng ký một khóa API Mistral (từ console Mistral), hoặc đặt MISTRAL_API_KEY trong môi trường của bạn. Nó cũng có thể chạy đối chiếu với các mô hình cục bộ hoặc tương thích, hoàn toàn ngoại tuyến. Open Design dù sao cũng không bao giờ trung chuyển thông tin xác thực của bạn.

3. 03 Điều gì khiến Vibe CLI tốt riêng cho thiết kế? +

   Nó là một agent Apache-2.0, native với ACP được vận hành bằng các mô hình lập trình Devstral trọng-số-mở của Mistral — nên bạn có thể chạy nó cục bộ cho công việc nhạy cảm về quyền riêng tư và chỉnh sửa xuyên một codebase thật. Nhưng gu thẩm mỹ vẫn đến từ design system, skill và tham chiếu mà bạn cung cấp.

4. 04 Vibe CLI hay Claude Code cho thiết kế frontend? +

   Cả hai đều mạnh. Claude Code nổi tiếng về các quyết định thiết kế cụ thể, nhận biết codebase; lợi thế của Vibe CLI là một ngăn xếp Devstral trọng-số-mở bạn có thể chạy cục bộ và một giấy phép Apache-2.0. Nhiều nhóm dùng cả hai — Open Design cho phép bạn đổi agent mà không thay đổi quy trình thiết kế.

5. 05 Làm thế nào để kết nối Vibe CLI với Figma? +

   Thêm máy chủ Figma MCP như một mục [[mcp_servers]] trong config.toml của bạn. Vibe khi đó có thể kéo ngữ cảnh thiết kế thật — component, biến, dữ liệu bố cục — nên mã sinh ra khớp với nguồn thay vì xấp xỉ nó.

6. 06 Open Design có liên kết với Mistral AI không? +

   Không. Mistral Vibe CLI là một sản phẩm của Mistral AI; Open Design là một dự án mã nguồn mở độc lập hỗ trợ nó như một adapter chính thức, được điều khiển qua ACP. Mistral là một thương hiệu của Mistral AI.

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

   Có — Open Design ưu tiên cục bộ và Apache-2.0. Tệp, artifact và DESIGN.md của bạn ở lại trong repo của riêng bạn, và thông tin xác thực Mistral 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ủ của Open Design.