Mua gói Thành viên QuanTriMang Pro để trải nghiệm website không quảng cáo và sử dụng các tiện ích AI trên QuanTriMang.
Việc duy trì tính nhất quán về hình ảnh thương hiệu trên các kênh truyền thông luôn là thách thức lớn đối với nhà sáng lập và đội ngũ tiếp thị. Công cụ Open Design kết hợp cùng các trợ lý AI chạy lệnh (command-line AI agent) giúp bạn tự động trích xuất toàn bộ quy tắc thiết kế từ một website hoặc tài liệu tham khảo có sẵn. Từ hệ thống thiết kế (Design System) này, bạn có thể tạo nhanh các asset chuyển động (motion asset) hay bản mẫu giao diện (landing page prototype) chuẩn nhận diện thương hiệu.
Các đối tượng phù hợp với quy trình này
- Chuyên viên tiếp thị (Marketers): Cần sản xuất nhanh các asset mạng xã hội, quảng cáo hoặc trang chiến dịch mà vẫn giữ nguyên nhận diện thương hiệu.
- Nhà sáng lập và người vận hành (Founders & Operators): Muốn có một bản mẫu giao diện landing page nhất quán để làm điểm bắt đầu nhanh cho sản phẩm.
- Bất kỳ ai ứng dụng AI vào thiết kế: Mong muốn sở hữu một bộ quy tắc đóng đóng gói chuẩn hóa để áp dụng đồng bộ trên nhiều định dạng hình ảnh khác nhau.
Các công cụ cần chuẩn bị trước khi bắt đầu
|
Công cụ / Tài liệu |
Vai trò trong quy trình |
Lưu ý chuẩn bị |
|
Open Design |
Không gian làm việc trực quan (Visual workspace) |
Cài đặt ứng dụng trên máy tính từ open-design.ai |
|
Local AI Agent |
Trợ lý thực thi công việc thiết kế |
Sử dụng qua dòng lệnh (CLI) như Codex CLI |
|
Tài nguyên thương hiệu gốc |
Nguồn dữ liệu để AI học và trích xuất |
URL website đã duyệt, logo, bộ ảnh, file Figma, mã nguồn hoặc file DESIGN.md |
Mẹo nhỏ: Bạn có thể dùng ChatGPT hoặc các công cụ lập kế hoạch để định hình ý tưởng trước. Khi đã có bản tóm tắt (brief) hoàn chỉnh, hãy đưa vào Open Design để tiến hành chuyển thành hình ảnh.
Tải Open Design
4 bước tự động hóa trích xuất và tạo asset nhận diện thương hiệu
┌────────────────────────────────────────────────────────┐
│ Quy trình trích xuất & khởi tạo asset với Open Design │
├────────────────────────────────────────────────────────┤
│ [Nguồn thương hiệu] ──> Kết nối AI Agent (Codex CLI) │
│ │ │
│ ▼ │
│ Trích xuất Design System │
│ │ │
│ ▼ │
│ Tạo Asset / Landing Page │
│ │ │
│ ▼ │
│ [Kiểm tra, sửa lỗi & lưu Rule] │
└────────────────────────────────────────────────────────┘
Bước 1: Kết nối local AI agent với Open Design

Open Design đóng vai trò là giao diện làm việc trực quan. Để thực hiện các thao tác thiết kế, bạn cần kết nối một trợ lý AI chạy cục bộ trên máy tính.
- Trong quá trình thiết lập ban đầu (onboarding), chọn tùy chọn Local Agent.
- Hệ thống sẽ tự động quét và hiển thị AI agent dạng dòng lệnh có sẵn trên máy tính (ví dụ: Codex CLI).
- Đảm bảo bạn đã cài đặt và xác thực (authenticate) CLI của agent trước đó để Open Design nhận diện thành công.
- Sau khi mở không gian làm việc, sử dụng bộ chọn Design System ở góc trên cùng để bắt đầu tạo hệ thống mới hoặc chọn hệ thống sẵn có.
Lưu ý: Tính năng hỗ trợ agent có thể thay đổi, bạn nên kiểm tra lại thông tin mới nhất tại website open-design.ai hoặc tài liệu dự án trên GitHub.
Bước 2: Trích xuất và kiểm duyệt hệ thống thiết kế

- Chọn Create New Design System.
- Dán đường dẫn website hoặc kho lưu trữ GitHub của bạn vào ô tương ứng, nhấn Add và chọn Continue to generation.
- Open Design sẽ phân tích dữ liệu nguồn và tự động tổng hợp thành một hệ thống thiết kế hoàn chỉnh.
Sau khi quá trình trích xuất hoàn tất, bạn cần kiểm tra kỹ toàn bộ các yếu tố hình ảnh trước khi tạo sản phẩm:
Thành phần cần rà soát: Logo, kiểu chữ (typography), bảng màu (colors), văn phong (voice & tone), giao diện sáng/tối (light/dark styling) và quy chuẩn nút bấm (button treatments).
Xử lý khi thiếu thông tin: Nếu quét từ website bị bỏ sót logo hoặc hình ảnh, bạn có thể sử dụng tính năng AI optimization hoặc tự thêm thủ công logo, tệp ảnh, file DESIGN.md vào hệ thống.
Bước 3: Khởi tạo asset cụ thể từ hệ thống chuẩn

Chọn đúng hệ thống thiết kế vừa tạo trước khi nhập câu lệnh mới. Chọn định dạng đầu ra mong muốn và mô tả chi tiết yêu cầu công việc.
Mẫu prompt 1: Tạo asset chuyển động (Motion asset)
"Hãy tạo một chuyển động hoạt họa thể hiện sự phát triển của một thành viên Rundown University trong vòng 6 tháng."
Mẫu prompt 2: Mẫu khung câu lệnh chuẩn cho mọi công việc thiết kế
"Hãy tạo một [định dạng asset] dành cho [đối tượng người xem] nhằm giải thích [kết quả hoặc thông điệp cụ thể].
Sử dụng hệ thống thiết kế [tên thương hiệu] đang kích hoạt. Bắt buộc bao gồm [yếu tố thương hiệu bắt buộc], và giới hạn kết quả trong phạm vi [thời lượng hoặc quy mô]."
Trong quá trình xử lý, Open Design sẽ hiển thị danh sách các tác vụ đang thực hiện theo thời gian thực (như áp dụng token thương hiệu, dựng các phần của trang landing page, thiết lập bộ đếm ngược countdown...).
Bước 4: Đánh giá, hiệu chỉnh và tái sử dụng quy tắc thiết kế
Sau khi AI hoàn thành, hãy kiểm tra kỹ các yếu tố nhận diện thương hiệu trên sản phẩm đầu ra:
- Sửa lỗi trực tiếp: Nếu asset chuyển động quá nhanh hoặc quên gắn logo, hãy đưa ra phản hồi ngắn gọn và chính xác.
- Ví dụ câu lệnh sửa: "Hãy tăng gấp đôi thời lượng chuyển động và thêm logo chính thức từ hệ thống thiết kế vào."
- Lưu quy tắc (Save rule): Khi tìm thấy câu lệnh hiệu chỉnh hiệu quả, hãy lưu lại thành quy tắc tái sử dụng trong không gian làm việc để các lần tạo sau không gặp lại lỗi cũ.
Lưu ý quan trọng khi chuyển giao sản phẩm sang mã nguồn thực tế
Bản mẫu giao diện tạo ra bởi Open Design là điểm bắt đầu trực quan giúp tiết kiệm thời gian, không phải là một website thương mại đã sẵn sàng vận hành.
- Kiểm tra giao diện di động (Mobile view): Trải nghiệm thử tính năng tương tác (như nút đặt chỗ, bộ đếm ngược) trên giao diện điện thoại trực tiếp trong công cụ.
- Xuất mã nguồn (Export code): Bạn có thể tải toàn bộ mã nguồn của bản mẫu về máy để tiếp tục phát triển trên các trình chỉnh sửa mã như Cursor.
- Đánh giá toàn diện trước khi phát hành: Luôn thực hiện lại bước kiểm duyệt thủ công về nội dung, tính khả dụng (accessibility), hiệu năng kỹ thuật và chuẩn mực thương hiệu trước khi đưa trang web vào vận hành thực tế.
Cách làm việc hiệu quả lâu dài
Bạn có thể dùng ChatGPT hoặc một công cụ lập kế hoạch khác để định hình ý tưởng trước, rồi mang bản brief đã chốt vào Open Design khi sẵn sàng chuyển sang giai đoạn thị giác. Hãy giữ mỗi thương hiệu hoặc chiến dịch một hệ thống riêng, và lưu những chỉnh sửa hữu ích thành quy tắc tái sử dụng khi không gian làm việc cho phép. Nhờ vậy, mỗi quảng cáo, bài đăng, hoạt ảnh hay bản mẫu tiếp theo sẽ bắt đầu gần với đáp án đúng hơn.
Câu hỏi thường gặp
Open Design có miễn phí không?
- Đây là công cụ thiết kế AI miễn phí nhưng vẫn sẽ có những tính năng yêu cầu bạn cần trả phí. Bạn vẫn cần một AI agent dòng lệnh, và agent đó có thể có điều kiện sử dụng riêng, nên hãy kiểm tra trên trang chính thức.
Tôi cần nguồn tham chiếu nào để bắt đầu?
- Một URL website, logo, bộ hình ảnh, file Figma, kho mã nguồn hoặc file DESIGN.md đều dùng được. Bạn cũng có thể bắt đầu từ một đoạn mô tả.
Kết quả có dùng ngay cho sản phẩm thật được không?
- Câu trả lời là chưa nên, đó là điểm khởi đầu nhất quán để bạn xem xét, chỉnh sửa và phát triển tiếp. Nếu thấy ổn định qua vài lần test thì hãy sử dụng cho sản phẩm thật.
Làm sao để hệ thống ngày càng chính xác hơn?
- Nêu rõ lỗi nhìn thấy và cách sửa cụ thể, rồi lưu thành quy tắc nếu Open Design cho phép.
Kết luận
Sức mạnh của quy trình này nằm ở việc trích xuất quy tắc thương hiệu một lần, kiểm tra kỹ, rồi tái sử dụng cho mọi định dạng. Với nguồn tham chiếu rõ ràng, prompt cụ thể và thói quen phản hồi chính xác, bạn có thể tạo tài sản thiết kế nhất quán nhanh hơn mà không phải bắt đầu lại từ đầu mỗi lần.






