Kilo Code cho thiết kế.

Kilo Code thực sự là gì

Kilo Code là một agent lập trình AI mã nguồn mở do Kilo Code, Inc. xây dựng. Nó chạy như một extension VS Code, trong các IDE JetBrains, và như một giao diện dòng lệnh — đọc repository của bạn, chỉnh sửa tệp, chạy lệnh, và lập kế hoạch cùng 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. Đặc điểm định nghĩa của nó là nó độc lập với mô hình: bạn chọn mô hình nào điều khiển nó, và bạn mang theo các khóa nhà cung cấp của riêng mình.

Đối với công việc thiết kế, hai đặc tính nổi bật. Vì nó độc lập với mô hình, bạn có thể trỏ nó tới bất kỳ mô hình có thị giác mạnh nào đọc một ảnh chụp tham chiếu tốt nhất và suy luận về bố cục. Và vì nó mã nguồn mở và BYOK, bạn có thể kiểm tra chính xác ngữ cảnh nào được gửi đi và giữ thông tin xác thực cùng chi phí dưới quyền kiểm soát của riêng bạn.

• Chế độ agent: Kilo cung cấp các chế độ chuyên biệt — Architect cho lập kế hoạch, Code cho dựng, Debug cho sửa lỗi, và Ask cho câu hỏi — cộng với các chế độ tùy chỉnh, nên bạn có thể lập kế hoạch một thiết kế rồi triển khai nó trong các lượt riêng biệt, tập trung.
• Quy tắc tùy chỉnh + MCP: Nó đọc các quy tắc tùy chỉnh cấp dự án cho ngữ cảnh bền vững và hỗ trợ các máy chủ MCP (với một chợ MCP), nên bạn có thể thêm ngữ cảnh ngoài như một tệp Figma trực tiếp hoặc công cụ thiết kế.
• Mang theo các khóa của riêng bạn: Kilo là BYOK xuyên nhiều nhà cung cấp — Anthropic, OpenAI, Google, OpenRouter và nhiều hơn — hoặc bạn có thể dùng gateway riêng của Kilo, phơi bày hơn 500 mô hình ở mức giá nhà cung cấp.

• Nhà cung cấp: Kilo Code, Inc. (mã nguồn mở)
• Thông tin xác thực: khóa API nhà cung cấp của riêng bạn (BYOK — Anthropic, OpenAI, Google, OpenRouter và nhiều hơn) hoặc gateway riêng của Kilo
• Giấy phép: mã nguồn mở

Vì sao một agent mở, độc lập với mô hình phù hợp với thiết kế

Lợi thế thiết kế của Kilo Code đến từ tính mở và lựa chọn 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.

• Độc lập với mô hình theo thiết kế: Vì bạn chọn mô hình, bạn có thể điều khiển Kilo bằng bất kỳ mô hình có thị giác nào đọc ảnh chụp tham chiếu tốt nhất — và đổi khi một mô hình tốt hơn xuất hiện, mà không thay đổi quy trình.
• Mở và kiểm tra được: Kilo mã nguồn mở, nên bạn có thể thấy chính xác ngữ cảnh và lời nhắc nào được gửi đi — hữu ích khi bạn muốn agent tái sử dụng các primitive thiết kế thật của bạn thay vì sáng tạo những style dùng một lần.
• Quy ước trong quy tắc tùy chỉnh: Các quy tắc tùy chỉnh của dự án (cộng với một máy chủ MCP cho Figma) 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: Kilo Code 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 Kilo Code 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 Kilo Code có thể dựng và kiểm chứng UI.

# 1. Install the Kilo Code extension from the VS Code
#    (or JetBrains) marketplace, or install the CLI.

# 2. Open your project and sign in / add a provider key
cd your-project
kilo              # connect your provider (BYOK) or Kilo's gateway

# 3. Add project context
#    create custom rules for this project's design conventions

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add it from the MCP marketplace / MCP settings

• Mã hóa quy tắc thiết kế của bạn: Đặt token, primitive và quy ước của bạn trong các quy tắc tùy chỉnh của Kilo và trỏ agent 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 để Kilo 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 ảnh-chụp-thành-UI

Vòng lặp thiết kế có đòn bẩy cao nhất với Kilo Code là biến một ảnh tham chiếu 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 một mô hình có thị giác để đối chiếu đầu ra với tham chiếu.

1. Bắt đầu từ những tham chiếu hình ảnh rõ ràng nhất bạn có — và bao gồm 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 trong các quy tắc tùy chỉnh của Kilo, và cho agent biết token cùng các primitive chuẩn nằm ở đâu.
4. Chạy một dev server và cho Kilo 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 Kilo đối chiếu phần triển khai của nó với các ảnh chụp — chứ không chỉ xác nhận nó build được.

Dùng chế độ Architect để lập kế hoạch bản dựng, rồi đổi sang chế độ Code và đính kèm tham chiếu của bạn với các ràng buộc cụ thể:

# Plan in Architect mode, then build in Code mode:
> Implement this design from @reference-desktop.png and
  @reference-mobile.png in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens
  from the custom rules.
  Match spacing, layout, and hierarchy; make it responsive.
  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 Kilo 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.

Chế độ, quy tắc tùy chỉnh và MCP

Ba điểm mở rộng khiến Kilo Code 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ở.

• Chế độ (Architect → Code): Lập kế hoạch cấu trúc của một màn hình trong chế độ Architect, rồi triển khai nó trong chế độ Code và sửa vấn đề trong chế độ Debug — tách ý định thiết kế khỏi triển khai. Các chế độ tùy chỉnh cho phép bạn mã hóa một lượt rà soát thiết kế của riêng mình.
• Quy tắc tùy chỉnh: Các quy tắc tùy chỉnh của dự án là ngôi nhà bền vững cho quy ước thiết kế của bạn — token, primitive và danh sách kiểm tra rà soát — được đọc mỗi lần chạy để agent làm việc đối chiếu với thương hiệu của bạn.
• Máy chủ MCP: Kilo hỗ trợ các máy chủ MCP qua chợ của nó — 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ột máy chủ Figma MCP, hoạt động xuyên các agent, không chỉ Kilo.

Đâ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.

Kilo Code 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 Kilo Code; 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: Dùng một mô hình có thị giác để 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ác quy tắc tùy chỉ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 Kilo Code 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 Kilo Code như một adapter chính thức 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ộ — để ngữ cảnh thiết kế khiến Kilo 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 Kilo Code làm agent của bạn.
2. Xác thực bằng khóa nhà cung cấp của riêng bạn (BYOK) hoặc gateway của Kilo — 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 Kilo Code, cùng các 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à mã nguồn mở, 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 Kilo Code 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 tham chiếu thật trong ngữ cảnh, Kilo Code tạo ra UI chất lượng sản xuất, có khả năng đáp ứng, và một mô hình có thị giác kiểm chứng đầu ra đối chiếu với tham chiếu. 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 Tôi có cần trả tiền để thiết kế với Kilo Code không? +

   Kilo Code mã nguồn mở và miễn phí để cài. Bạn mang theo khóa API nhà cung cấp của riêng mình (BYOK) và trả nhà cung cấp đó trực tiếp, hoặc dùng gateway riêng của Kilo ở mức giá nhà cung cấp. 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 Kilo Code tốt riêng cho thiết kế? +

   Nó độc lập với mô hình và mã nguồn mở, nên bạn có thể điều khiển nó bằng bất kỳ mô hình có thị giác nào đọc ảnh chụp tham chiếu tốt nhất, kiểm tra chính xác ngữ cảnh nào được gửi đi, và giữ chi phí cùng thông tin xác thực dưới quyền kiểm soát của bạn. Gu thẩm mỹ vẫn đến từ design system, skill và tham chiếu mà bạn cung cấp.

4. 04 Kilo Code 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 Kilo Code là mã nguồn mở và độc lập với mô hình với BYOK, nên bạn chọn mô hình. 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 Kilo Code với Figma? +

   Thêm một máy chủ Figma MCP từ chợ MCP hoặc cài đặt MCP của Kilo. Kilo 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 Kilo Code không? +

   Không. Kilo Code là một sản phẩm của Kilo Code, Inc.; 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ả hai tình cờ đều mã nguồn mở, nhưng chúng là các dự án riêng biệt.

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à mã nguồn mở. 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 nhà cung cấp 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.