Codex cho thiết kế.

OpenAI Codex thực chất là gì (và không phải là gì)

Trước hết, một sự phân biệt làm vấp ngã gần như tất cả những ai tìm kiếm “Codex.” OpenAI Codex nguyên gốc là một mô hình hoàn thành code năm 2021 từng vận hành GitHub Copilot thời đầu và bị ngừng hỗ trợ năm 2023. Đó không phải điều trang này nói tới. Codex ngày nay là công cụ lập trình theo dạng agent của OpenAI — nó lập kế hoạch, viết, chạy và kiểm chứng code từ các tác vụ bằng ngôn ngữ tự nhiên.

Codex hiện đại hiện diện trên bốn bề mặt: một CLI terminal (được viết lại bằng Rust, cấp phép Apache-2.0), một tiện ích IDE cho VS Code, Cursor và Windsurf, một trải nghiệm cloud/web cho các tác vụ bất đồng bộ được ủy thác, và một ứng dụng desktop có trình duyệt trong ứng dụng và Computer Use.

• Mô hình mặc định: Tính đến giữa năm 2026, mô hình được khuyến nghị là gpt-5.5, với gpt-5.4 là mô hình mà OpenAI huấn luyện rõ ràng cho frontend và computer use.
• Tệp chỉ dẫn: Codex đọc một tệp AGENTS.md trong dự án của bạn (một chuẩn liên-công-cụ) để 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.
• Sandbox: Nó chạy trong một sandbox ở cấp kernel (mặc định workspace-write), nên một agent đang chỉnh sửa UI của bạn không thể lang thang ra ngoài dự án.

• Nhà cung cấp: OpenAI
• Thông tin xác thực: Khóa API OpenAI (BYOK) hoặc gói đăng ký ChatGPT (Free / Go / Plus / Pro / Business / Enterprise)
• Giấy phép của CLI: Apache-2.0, mã nguồn mở

Vì sao Codex giờ đây giỏi thiết kế

Ba điều hội tụ vào đầu năm 2026 khiến Codex trở thành một công cụ thiết kế thực thụ thay vì một bộ sinh code chung chung.

• Một mô hình được huấn luyện cho frontend: OpenAI ra mắt GPT-5.4, mô hình dòng chính đầu tiên của họ được huấn luyện cho frontend và computer use, với khả năng hiểu hình ảnh tốt hơn nhiều xuyên suốt quy trình thiết kế và tự-kiểm-chứng mạnh hơn. Nó thậm chí có thể tạo mood board và các phương án thị giác trước khi cam kết với tài sản cuối cùng.
• Một skill frontend chính thức: Danh mục openai/skills cung cấp một frontend-skill được tuyển chọn nhằm thực thi gu thẩm mỹ thực: bố cục không thẻ, hero tràn viền, phân cấp ưu tiên thương hiệu, chuyển động tiết chế, tối đa hai kiểu chữ và một màu nhấn — và khiến Codex viết ra một luận đề thị giác trước khi dựng.
• Kiểm chứng trên trình duyệt: Với skill Playwright, Codex mở một trình duyệt thực, đổi kích thước theo breakpoint, và đối chiếu đầu ra của mình với tham chiếu thay vì chỉ kiểm tra rằng build thành công.

Bài học đằng sau cả ba: Codex không có gu thẩm mỹ mặc định. Nó tạo ra thiết kế tốt khi bạn trao 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 đúng những đầu vào ấy, và đó là lý do hai thứ ăn khớp với nhau (chi tiết bên dưới).

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

# 1. Install the Codex CLI
npm install -g @openai/codex
# or: brew install --cask codex
# or: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Authenticate (ChatGPT sign-in recommended for higher limits)
codex            # then choose “Sign in with ChatGPT”

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

# 4. Add the official frontend skill, then restart Codex
# (in the Codex app) $skill-installer frontend-skill

# 5. Wire the Figma MCP server (optional, for design handoff)
codex mcp add figma --url https://mcp.figma.com/mcp

• 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 rồi trỏ Codex tới đó, để đầ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.
• Chọn đúng mức reasoning: OpenAI lưu ý rằng các mức reasoning thấp-đến-trung bình thường tạo ra kết quả frontend mạnh hơn so với mức cao nhất.

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

Vòng thiết kế đòn bẩy cao nhất với Codex 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. Chính hướng dẫn của OpenAI cô đọng thành năm bước.

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 Codex biết tokens cùng các primitive chuẩn nằm ở đâu.
4. Bật skill tương tác Playwright để Codex render trong một trình duyệt thực và đổi kích thước theo breakpoint.
5. Lặp lại bằng cách cho Codex đố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.

Cấp ảnh bằng cách kéo một ảnh chụp vào terminal hoặc bằng cờ image, rồi prompt với các ràng buộc cụ thể:

codex -i reference-desktop.png -i reference-mobile.png \
  "Implement this design in React + Vite + Tailwind + TypeScript.
   Reuse my existing design-system components and tokens.
   Match spacing, layout, and hierarchy; make it responsive.
   Use the Playwright skill to verify the UI matches the
   references and iterate until it does."

Chạy một dev server ở terminal thứ hai, giữ prompt nhỏ và tập trung, commit các vòng lặp tốt / hoàn tác các vòng tệ (báo cho Codex biết khi bạn hoàn tác) để mỗi lượt dựng trên một nền sạch.

Codex + Figma: vòng đi-về thiết kế ↔ code

Vào tháng 2 năm 2026, OpenAI và Figma công bố một quan hệ đối tác chính thức, biến bản beta Figma MCP trước đó thành một tích hợp hai chiều hạng nhất. Nó hoạt động theo cả hai chiều.

• Thiết kế → Code: Sao chép “link to selection” của một frame trong Figma, dán nó vào Codex với get_design_context, và yêu cầu nó hiện thực thiết kế bằng thư viện component sẵn có của bạn.
• Code → Thiết kế: Công cụ generate_figma_design (“Code to Canvas”) biến một UI sống động, đang chạy ngược lại thành các frame Figma chỉnh sửa được — toàn bộ màn hình, một phần tử được chọn, hoặc cả một tệp.

Figma MCP chạy như một máy chủ từ xa và được miễn khỏi giới hạn tần suất. Thêm nó một lần và nó có sẵn cho Codex, Claude Code, Cursor, VS Code và nhiều hơn nữa — đúng kiểu năng lực di động, đa-agent mà Open Design được tạo ra để điều phối.

Codex so với Cursor so với Claude Code 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: cả ba đề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.

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 Codex 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ỡ, phần chỉ dẫn rò rỉ vào nội dung UI, và chạm giới hạn sử dụng nhanh chóng.

• Cài một skill frontend: Một skill thẩm mỹ được tuyển chọn buộc Codex cam kết với một định hướng thực thay vì diện mạo mặc định.
• Bật kiểm chứng Playwright: Bắt Codex 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. 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 Codex 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 Codex 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 Codex 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.

1. Cài đặt Open Design và chọn Codex làm agent của bạn.
2. Xác thực bằng khóa API OpenAI (BYOK) hoặc gói đăng ký ChatGPT của bạn — 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 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 Codex, cùng một khóa — 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 OpenAI Codex có thực sự làm được công việc thiết kế không? +

   Có — với một skill frontend, một design system và những ảnh tham chiếu thực trong ngữ cảnh, Codex (đặc biệt trên GPT-5.4) 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. Thiếu ngữ cảnh đó, 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 Đây có phải plugin Product Design của OpenAI Codex không? +

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

3. 03 Tôi có cần gói đăng ký ChatGPT để thiết kế với Codex không? +

   Bạn có thể dùng hoặc khóa API OpenAI (BYOK) hoặc gói đăng ký ChatGPT của bạn. Đăng nhập ChatGPT thường cho giới hạn hào phóng hơn; 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.

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

   Cả hai đều mạnh. Claude Code nổi tiếng với các quyết định thiết kế cụ thể, hiểu codebase; Codex có độ tinh chỉnh thị giác mạnh sau GPT-5.4 và xuất sắc ở các bản build được ủy thác, chạy trong sandbox. Nhiều đội dùng cả hai — Open Design cho phép bạn đổi agent mà không thay đổi quy trình thiết kế của mình.

5. 05 Làm sao kết nối Codex với Figma? +

   Thêm máy chủ Figma MCP chính thức (codex mcp add figma --url https://mcp.figma.com/mcp). Sau đó bạn có thể hiện thực các frame Figma thành code với get_design_context và đẩy một UI đang chạy ngược lại thành các frame Figma chỉnh sửa được với generate_figma_design.

6. 06 Làm sao tránh thẩm mỹ “AI slop” chung chung? +

   Cài một skill frontend, cung cấp tokens thiết kế thực và ảnh chụp tham chiếu, mã hóa quy tắc thương hiệu trong AGENTS.md, và bật kiểm chứng Playwright. Open Design cung cấp những thứ này dưới dạng một thư viện 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 OpenAI không? +

   Không. Codex là sản phẩm của OpenAI; 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. OpenAI và Codex là thương hiệu của OpenAI.

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 OpenAI 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.