Gemini CLI cho thiết kế.

Gemini CLI thực sự là gì

Gemini CLI là một agent AI mã nguồn mở (Apache-2.0) mà Google phát hành cho dòng lệnh. Nó đọc kho mã của bạn, chỉnh sửa tệp, chạy lệnh shell, lấy nội dung web và có thể củng cố câu trả lời bằng Google Search — lập kế hoạch và kiểm chứng công việc từ các nhiệm vụ ngôn ngữ tự nhiên thay vì chỉ hoàn thành từng dòng. Cùng một engine đó cũng vận hành agent Gemini Code Assist bên trong VS Code.

Với công việc thiết kế, có hai đặc tính nổi bật. Các mô hình của nó đa phương thức một cách tự nhiên, nên bạn có thể đưa cho nó một ảnh chụp màn hình và nó suy luận về chính bố cục đó. Và cửa sổ ngữ cảnh của nó lên tới 1M token, đủ lớn để chứa cả hệ thống thiết kế, thư viện thành phần và bộ tài liệu tham chiếu cùng lúc thay vì phải tóm lược chúng đi.

• Tệp ngữ cảnh: Gemini CLI đọc tệp GEMINI.md để có ngữ cảnh dự án bền vững — nơi tự nhiên để mã hóa các quy ước thiết kế, tokens và danh sách kiểm tra rà soát của bạn. Thiết lập cá nhân và nhóm được xếp chồng lên trên.
• Công cụ tích hợp + MCP: Nó đi kèm sẵn các công cụ tệp, shell, lấy nội dung web và Google Search, đồng thời hỗ trợ các máy chủ MCP (cấu hình trong ~/.gemini/settings.json) để bổ sung ngữ cảnh bên ngoài như một tệp Figma trực tiếp.
• Miễn phí khi bắt đầu: Đăng nhập bằng tài khoản Google cá nhân cho bạn một hạn mức miễn phí hào phóng các yêu cầu Gemini; bạn cũng có thể mang theo Gemini API key hoặc dùng Vertex AI.

• Nhà cung cấp: Google
• Thông tin xác thực: Tài khoản Google (hạn mức miễn phí) hoặc Gemini API key từ AI Studio (BYOK) hoặc Vertex AI
• Giấy phép: Apache-2.0, mã nguồn mở

Vì sao mô hình đa phương thức và ngữ cảnh khổng lồ phù hợp với thiết kế

Lợi thế thiết kế của Gemini CLI đến từ hai đặc tính của mô hình — nhưng, như với mọi agent, gu thẩm mỹ vẫn phải do bạn cung cấp.

• Khả năng hiểu đa phương thức mạnh mẽ: Vì các mô hình Gemini đa phương thức một cách tự nhiên, agent đọc tốt các ảnh chụp tham chiếu — đối chiếu kết quả nó dựng ra với một hình ảnh thay vì phỏng đoán từ một mô tả bằng văn xuôi.
• Cửa sổ ngữ cảnh 1M token: Ngữ cảnh lớn nghĩa là toàn bộ hệ thống thiết kế, tokens và nhiều trạng thái tham chiếu vừa khít cùng lúc, nên agent tái sử dụng các thành phần nguyên thủy thực của bạn thay vì sáng tác ra những kiểu dùng một lần.
• Quy ước trong GEMINI.md: Một tệp GEMINI.md (cùng với máy chủ Figma MCP) hướng agent tới tokens, thành phần và các đặc tả thực của bạn, để nó làm việc theo một thương hiệu thay vì một vẻ ngoài mặc định.

Bài học vẫn là điều mà mọi agent đều dạy: Gemini CLI mặc định không có gu thẩm mỹ. Nó tạo ra thiết kế tốt khi bạn cho nó các ràng buộc — một hệ thống thiết kế, một skill thẩm mỹ và những tài liệu 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 (chi tiết bên dưới).

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

# 1. Install Gemini CLI (Node 20+)
npm install -g @google/gemini-cli
# or run without installing: npx https://github.com/google-gemini/gemini-cli

# 2. Start it in your project and authenticate on first run
cd your-project
gemini            # sign in with your Google account, or set GEMINI_API_KEY

# 3. Generate project context
/init             # scaffolds a GEMINI.md for this project

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add it under "mcpServers" in ~/.gemini/settings.json

• Mã hóa các quy tắc thiết kế của bạn: Đặt tokens, thành phần nguyên thủy và quy ước của bạn vào GEMINI.md rồi trỏ Gemini tới đó, để kết quả khớp với một thương hiệu thay vì mặc định về một vẻ ngoài chung chung.
• Thêm kiểm chứng trên trình duyệt: Kết nối một MCP Playwright hoặc trình duyệt để Gemini hiển thị trong một trình duyệt thực và kiểm tra kết quả qua các breakpoint thay vì chỉ xác nhận quá trình build thành công.

Quy trình từ ảnh chụp màn hình đến UI

Vòng lặp thiết kế có đòn bẩy cao nhất với Gemini CLI là biến một ảnh tham chiếu thành UI hoạt động, đáp ứng (responsive) và lặp lại cho đến khi khớp — dựa vào mô hình đa phương thức để đối chiếu kết quả với ảnh tham chiếu.

1. Bắt đầu từ những tài liệu tham chiếu trực quan rõ ràng nhất mà bạn có — và đưa vào nhiều trạng thái (desktop và di động, hover, trống, đang tải), không chỉ một ảnh hero duy nhất.
2. Hãy cụ thể trong prompt; prompt mơ hồ sẽ tạo ra UI chung chung ngay cả với một mô hình mạnh.
3. Giữ hệ thống thiết kế và quy ước của bạn trong GEMINI.md, và cho Gemini biết tokens cùng các thành phần nguyên thủy chuẩn nằm ở đâu.
4. Chạy một dev server và để Gemini hiển thị trong một trình duyệt thực, thay đổi kích thước theo các breakpoint để kiểm tra kết quả.
5. Lặp lại bằng cách để Gemini đối chiếu phần triển khai của nó với các ảnh chụp màn hình — chứ không chỉ đơn thuần xác nhận nó build được.

Tham chiếu một hình ảnh bằng @ để đính kèm vào prompt, rồi đưa ra những ràng buộc cụ thể:

gemini
# in the prompt:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from GEMINI.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

Giữ prompt ngắn gọn và tập trung, commit những lần lặp tốt và hoàn tác những lần tệ (báo cho Gemini biết khi bạn hoàn tác), để mỗi lượt được xây trên một nền sạch.

GEMINI.md, MCP và các phần mở rộng

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

• Ngữ cảnh GEMINI.md: Các quy tắc dự án nằm trong một tệp GEMINI.md ở gốc kho mã (cùng các lớp toàn cục và nhóm). Đó là ngôi nhà bền vững cho các quy ước thiết kế 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 ~/.gemini/settings.json — cách linh hoạt để mang vào ngữ cảnh thiết kế và công cụ bên ngoài, đáng chú ý nhất là máy chủ Figma MCP, hoạt động xuyên suốt nhiều agent chứ không chỉ Gemini.
• Phần mở rộng và công cụ tích hợp: Các phần mở rộng của Gemini CLI cùng những công cụ tích hợp sẵn là Google Search, tệp, shell và lấy nội dung web cho phép nó thu thập tài liệu tham chiếu và chạy vòng kiểm chứng mà không cần rời khỏi dòng lệnh.

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

Gemini CLI so với Codex, Claude Code và Cursor cho thiết kế

Không có một 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 thường kết hợp 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, tài liệu tham chiếu và ràng buộc. Đó mới là vấn đề thực cần giải quyết — và nó mang 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 cho có”

Lời phàn nàn phổ biến nhất về thiết kế do AI tạo ra là nó trông chung chung — những dải chuyển màu nhạt nhòa, các panel lơ lửng, góc bo tròn quá khổ, đổ bóng kịch tính, một kiểu Inter-và-tím “hét lên rằng một con AI đã làm ra thứ này”. Các vấn đề khác được báo cáo gồm bố cục di động bị vỡ và phần hướng dẫn lọt vào nội dung UI. Không vấn đề nào trong số này là riêng của Gemini CLI; 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 phải cam kết theo một hướng đi thực thụ thay vì vẻ ngoài mặc định.
• Kiểm chứng trong một trình duyệt thực: Dùng mô hình đa phương thức để hiển thị và tự kiểm tra qua các breakpoint, sao cho bố cục không âm thầm vỡ trên di động.
• Cung cấp tokens và tài liệu tham chiếu: Tokens thiết kế thực và ảnh chụp tham chiếu là đòn bẩy lớn nhất đối với chất lượng đầu ra.
• Mã hóa các quy tắc trong GEMINI.md: Đặt những quy tắc kiểu “không dùng thẻ hero, tối đa hai kiểu chữ, thứ bậc ưu tiên thương hiệu” ở nơi agent đọc chúng ở 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. Việc duy trì ngữ cảnh đó bằng tay, cho từng dự án, chính là công sức nhọc nhằn mà Open Design loại bỏ.

Thiết kế với Gemini 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ó coi Gemini CLI là một adapter chính thức và bao bọc nó bằng một thư viện skill và hệ thống thiết kế được tuyển chọn, một pipeline render có cấu trúc, và một giao diện máy tính cục bộ — để ngữ cảnh thiết kế làm nên sự xuất sắc của Gemini đã 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 đặt Open Design và chọn Gemini CLI làm agent của bạn.
2. Xác thực bằng tài khoản Google hoặc Gemini API key (BYOK) — thông tin xác thực ở lại trên máy của bạn và không bao giờ được trung chuyển qua chúng tôi.
3. Chọn một hệ thống thiết kế và một skill, rồi tạo ra các bộ slide, prototype và trang đích 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 kho mã của riêng bạn, không phải trên một đám mây được lưu trữ ngoài.

Vẫn là agent Gemini CLI đó, vẫn key đó — cộng thêm một quy trình thiết kế thực thụ, linh hoạt, mã nguồn mở bao quanh. Nó ưu tiên cục bộ và theo giấy phép 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 của bạn.

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

1. 01 Gemini 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 hệ thống thiết kế và những ảnh tham chiếu thực trong ngữ cảnh, Gemini CLI tạo ra UI đáp ứng (responsive), chất lượng sản xuất, và các mô hình đa phương thức mạnh mẽ của nó kiểm chứng đầu ra so với tài liệu tham chiếu. Thiếu ngữ cảnh đó, nó có xu hướng mặc định về một vẻ ngoài chung chung, và đó chính là khoảng trống mà Open Design lấp đầy.

2. 02 Tôi có cần trả phí để thiết kế với Gemini CLI không? +

   Không — đăng nhập bằng tài khoản Google cho bạn một hạn mức miễn phí hào phóng, và bạn cũng có thể mang theo Gemini API key (BYOK) hoặc dùng Vertex AI. Dù theo cách nào, Open Design 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 Gemini CLI đặc biệt phù hợp với thiết kế? +

   Hai điều: các mô hình của nó đa phương thức rất mạnh, nên nó đọc tốt các ảnh chụp tham chiếu, và ngữ cảnh 1M token của nó có thể chứa cả một hệ thống thiết kế và bộ tài liệu tham chiếu cùng lúc. Cả hai đều giúp ích — nhưng gu thẩm mỹ vẫn đến từ hệ thống thiết kế, skill và tài liệu tham chiếu mà bạn cung cấp.

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

   Cả hai đều mạnh. Claude Code được biết đến với những quyết định thiết kế cụ thể, am hiểu kho mã; lợi thế của Gemini CLI là khả năng hiểu đa phương thức cộng với ngữ cảnh khổng lồ và một hạn mức miễn phí. Nhiều đội ngũ dùng cả hai — Open Design cho phép bạn đổi agent mà không cần thay đổi quy trình thiết kế của mình.

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

   Thêm máy chủ Figma MCP vào mục mcpServers trong ~/.gemini/settings.json. Khi đó Gemini có thể kéo về ngữ cảnh thiết kế thực — thành phần, biến, dữ liệu bố cục — để mã được tạo ra khớp với nguồn thay vì chỉ áng chừng.

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

   Không. Gemini CLI là sản phẩm của Google; Open Design là một dự án mã nguồn mở độc lập hỗ trợ nó với vai trò một adapter chính thức. Gemini là thương hiệu của Google.

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à theo giấy phép Apache-2.0. Tệp, sản phẩm và DESIGN.md của bạn ở lại trong kho mã của riêng bạn, và thông tin xác thực Google 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.