Thiết kế frontend tinh tế với GPT-5.4

• OpenAI đã công bố các kỹ thuật prompting thực chiến và hướng dẫn thiết kế nhằm nâng cao năng lực phát triển frontend của GPT-5.4
• Khả năng hiểu hình ảnh, mức độ hoàn thiện tính năng, và năng lực sử dụng máy tính (Computer Use) là ba trục cải tiến cốt lõi, giúp tạo ra kết quả trực quan tinh tế và tham vọng hơn so với các mô hình trước
• Bài viết chỉ ra rằng nếu prompt không đủ rõ ràng, mô hình sẽ quay về các mẫu có tần suất cao trong dữ liệu huấn luyện và dừng ở thiết kế mang tính generic, đồng thời đưa ra các kỹ thuật cụ thể để khắc phục
• Nhấn mạnh 4 mẹo thực chiến cốt lõi: định nghĩa design system, cung cấp visual reference, cấu trúc theo narrative, và đặt mức suy luận thấp
• OpenAI cũng phát hành mã nguồn mở gói prompt frontend-skill để có thể dùng ngay trong các coding agent như Codex

---

Các cải tiến của mô hình

• GPT-5.4 tập trung vào ba cải tiến thực chất trong công việc frontend:
  • Tăng cường khả năng hiểu hình ảnh
  • Tạo ứng dụng/website hoàn thiện hơn
  • Cải thiện khả năng dùng công cụ để tự kiểm tra, test và xác minh công việc của chính nó

• Hiểu hình ảnh và sử dụng công cụ

  • Mô hình được huấn luyện để dùng tìm kiếm hình ảnh và công cụ tạo ảnh một cách native, từ đó trực tiếp thực hiện suy luận thị giác trong quá trình thiết kế
  • Để có kết quả tốt nhất, OpenAI khuyến nghị yêu cầu mô hình tạo moodboard hoặc nhiều phương án hình ảnh trước khi chọn asset cuối cùng
  • Có thể dẫn dắt mô hình bằng visual reference mạnh bằng cách mô tả rõ các thuộc tính mà hình ảnh cần thể hiện như phong cách, bảng màu, bố cục và bầu không khí
  • Bài viết cũng đưa ra mẫu prompt nêu rõ rằng theo mặc định hãy ưu tiên ảnh tải lên/ảnh tạo sẵn, và nếu không có thì dùng công cụ tạo ảnh để sinh hình ảnh mới

• Nâng cao mức độ hoàn thiện tính năng

  • GPT-5.4 được huấn luyện để xây dựng các ứng dụng hoàn chỉnh và vững về mặt chức năng hơn
  • Mô hình ổn định hơn trong các tác vụ dài hạn, và giờ có thể triển khai game hoặc trải nghiệm người dùng phức tạp chỉ trong 1-2 lượt vốn trước đây rất khó hoặc không thể làm được

• Computer Use và xác minh

  • GPT-5.4 là mô hình dòng chính đầu tiên được huấn luyện cho Computer Use, nên có thể tự nhiên điều hướng giao diện
  • Khi kết hợp với Playwright, mô hình có thể kiểm tra trang đã render, test trên nhiều viewport, đi qua các luồng trong ứng dụng và phát hiện vấn đề về trạng thái hoặc điều hướng
  • Nếu cung cấp tool/skill của Playwright, khả năng GPT-5.4 tạo ra giao diện vừa tinh tế vừa hoàn thiện về chức năng sẽ tăng đáng kể
  • Nhờ khả năng hiểu hình ảnh được cải thiện, mô hình còn có thể xác minh kết quả bằng thị giác và kiểm tra xem nó có khớp với UI tham chiếu đã cho hay không

Khởi động nhanh với các mẹo thực chiến

• Nếu chỉ áp dụng được vài thực hành, hãy bắt đầu từ 4 điều sau:
  • Bắt đầu với mức suy luận thấp (low reasoning level)
  • Định nghĩa trước design system và các ràng buộc như typography, bảng màu, bố cục
  • Thiết lập guardrail thị giác bằng cách cung cấp visual reference hoặc moodboard như ảnh chụp màn hình
  • Định nghĩa trước narrative hoặc chiến lược nội dung để định hướng cách mô hình tạo nội dung
• Prompt khởi đầu
  • When doing frontend design tasks, avoid generic, overbuilt layouts.
  • Khi thực hiện các tác vụ thiết kế frontend, hãy tránh những layout generic và xây dựng quá mức
  • Use these hard rules:
  • Hãy áp dụng các quy tắc cứng sau:
    • One composition: The first viewport must read as one composition, not a dashboard (unless it's a dashboard).
    • Viewport đầu tiên phải được cảm nhận như một bố cục thống nhất, không phải dashboard (trừ khi đó thực sự là dashboard)
    • Brand first: On branded pages, the brand or product name must be a hero-level signal, not just nav text or an eyebrow. No headline should overpower the brand.
    • Trên các trang mang tính thương hiệu, tên thương hiệu/sản phẩm phải là tín hiệu cấp hero, không chỉ là chữ trong nav hay eyebrow. Không headline nào được lấn át thương hiệu
    • Brand test: If the first viewport could belong to another brand after removing the nav, the branding is too weak.
    • Nếu bỏ phần điều hướng mà viewport đầu tiên vẫn có thể thuộc về một thương hiệu khác, thì branding đang quá yếu
    • Typography: Use expressive, purposeful fonts and avoid default stacks (Inter, Roboto, Arial, system).
    • Hãy dùng font có chủ đích và giàu biểu cảm, tránh các font stack mặc định (Inter, Roboto, Arial, system)
    • Background: Don't rely on flat, single-color backgrounds; use gradients, images, or subtle patterns to build atmosphere.
    • Đừng phụ thuộc vào nền phẳng một màu; hãy dùng gradient, hình ảnh hoặc pattern tinh tế để tạo bầu không khí
    • Full-bleed hero only: On landing pages and promotional surfaces, the hero image should be a dominant edge-to-edge visual plane or background by default. Do not use inset hero images, side-panel hero images, rounded media cards, tiled collages, or floating image blocks unless the existing design system clearly requires it.
    • Trên landing page và các bề mặt quảng bá, hình ảnh hero mặc định phải là mặt phẳng thị giác full-bleed (edge-to-edge) hoặc nền chiếm ưu thế. Không dùng hero inset, hero dạng side-panel, media card bo góc, collage dạng ô hay các khối ảnh nổi trừ khi design system hiện có yêu cầu rõ ràng
    • Hero budget: The first viewport should usually contain only the brand, one headline, one short supporting sentence, one CTA group, and one dominant image. Do not place stats, schedules, event listings, address blocks, promos, "this week" callouts, metadata rows, or secondary marketing content in the first viewport.
    • Viewport đầu tiên thông thường chỉ nên có thương hiệu, một headline, một câu hỗ trợ ngắn, một nhóm CTA và một hình ảnh chủ đạo. Không đặt thống kê, lịch trình, danh sách sự kiện, khối địa chỉ, promo, callout “tuần này”, hàng metadata hay nội dung marketing phụ trong viewport đầu tiên
    • No hero overlays: Do not place detached labels, floating badges, promo stickers, info chips, or callout boxes on top of hero media.
    • Không chồng lớp lên hero: không đặt nhãn tách rời, badge nổi, sticker promo, info chip hay callout box lên trên phần media của hero
    • Cards: Default: no cards. Never use cards in the hero. Cards are allowed only when they are the container for a user interaction. If removing a border, shadow, background, or radius does not hurt interaction or understanding, it should not be a card.
    • Mặc định không dùng card. Tuyệt đối không dùng card trong hero. Card chỉ được phép khi nó là container cho một tương tác người dùng. Nếu bỏ border, shadow, background hoặc bo góc mà vẫn không ảnh hưởng đến tương tác hay khả năng hiểu nội dung, thì nó không nên là card
    • One job per section: Each section should have one purpose, one headline, and usually one short supporting sentence.
    • Mỗi section chỉ có một mục đích, một headline, và thường là một câu hỗ trợ ngắn
    • Real visual anchor: Imagery should show the product, place, atmosphere, or context. Decorative gradients and abstract backgrounds do not count as the main visual idea.
    • Hình ảnh cần thể hiện sản phẩm, không gian, bầu không khí hoặc ngữ cảnh. Gradient trang trí và nền trừu tượng không được tính là ý tưởng hình ảnh chính
    • Reduce clutter: Avoid pill clusters, stat strips, icon rows, boxed promos, schedule snippets, and multiple competing text blocks.
    • Giảm sự lộn xộn: tránh cụm pill, dải số liệu, hàng icon, promo đóng khung, mẩu lịch trình và nhiều khối văn bản cạnh tranh lẫn nhau
    • Use motion to create presence and hierarchy, not noise. Ship at least 2-3 intentional motions for visually led work.
    • Dùng motion để tạo sự hiện diện và phân cấp, không phải để gây nhiễu. Với sản phẩm thiên về thị giác, hãy triển khai ít nhất 2-3 chuyển động có chủ đích
    • Color & Look: Choose a clear visual direction; define CSS variables; avoid purple-on-white defaults. No purple bias or dark mode bias.
    • Chọn một hướng thị giác rõ ràng; định nghĩa biến CSS; tránh kiểu mặc định tím-trên-trắng. Không thiên vị màu tím hay dark mode
    • Ensure the page loads properly on both desktop and mobile.
    • Đảm bảo trang tải đúng trên cả desktop lẫn mobile
    • For React code, prefer modern patterns including useEffectEvent, startTransition, and useDeferredValue when appropriate if used by the team. Do not add useMemo/useCallback by default unless already used; follow the repo's React Compiler guidance.
    • Với code React, hãy ưu tiên các pattern hiện đại như useEffectEvent, startTransition, useDeferredValue khi phù hợp nếu team có dùng. Không mặc định thêm useMemo/useCallback trừ khi dự án đã dùng sẵn; hãy tuân theo hướng dẫn React Compiler của repo
    • Exception: If working within an existing website or design system, preserve the established patterns, structure, and visual language.
    • Ngoại lệ: nếu làm việc trong một website hoặc design system có sẵn, hãy giữ nguyên các pattern, cấu trúc và ngôn ngữ thị giác đã được thiết lập

Các kỹ thuật để có thiết kế tốt hơn

• Bắt đầu từ nguyên tắc thiết kế

  • Xác định các ràng buộc như chỉ một headline H1, tối đa 6 section, không quá 2 font, một màu accent, một CTA chính phía trên nếp gấp (above the fold)

• Cung cấp visual reference

  • Ảnh chụp tham chiếu hoặc moodboard giúp mô hình suy ra nhịp điệu bố cục, tỷ lệ typography, hệ thống spacing và cách xử lý hình ảnh
  • Bài viết có cả ví dụ GPT-5.4 tự tạo moodboard để người dùng duyệt, lấy cảm hứng từ văn hóa cà phê ở NYC và thẩm mỹ Y2K

• Cấu trúc trang như một narrative

  • Cấu trúc marketing page phổ biến gồm:
    • Hero — thiết lập bản sắc và lời hứa
    • Supporting imagery — thể hiện ngữ cảnh hoặc môi trường
    • Product detail — giải thích đề xuất
    • Social proof — tạo độ tin cậy
    • Final CTA — chuyển sự quan tâm thành hành động

• Chỉ dẫn tuân thủ design system

  • Khuyến khích thiết lập design system rõ ràng ngay từ đầu quá trình build
  • Định nghĩa các design token cốt lõi: background, surface, primary text, muted text, accent
  • Định nghĩa vai trò typography: display, headline, body, caption
  • Với phần lớn dự án web, bắt đầu bằng stack React và Tailwind là hiệu quả, và GPT-5.4 đặc biệt mạnh với bộ công cụ này
  • Khi làm animation, overlay và các lớp trang trí, nên kèm theo hướng dẫn về hành vi layout an toàn để các thành phần UI cố định/nổi không chồng lên nội dung cốt lõi như văn bản hay nút bấm

• Giảm mức suy luận

  • Với website đơn giản, suy luận nhiều hơn không phải lúc nào cũng tốt hơn
  • Mức suy luận thấp (low) và trung bình (medium) thường cho ra kết quả frontend mạnh hơn
  • Điều này giúp mô hình nhanh hơn, tập trung hơn, bớt suy nghĩ quá mức mà vẫn dành được khoảng trống cho các thiết kế tham vọng hơn

• Xây nền thiết kế bằng nội dung thực tế

  • Cung cấp copy thật, ngữ cảnh sản phẩm và mục tiêu dự án rõ ràng là một trong những cách đơn giản nhất để cải thiện kết quả frontend
  • Bối cảnh này giúp chọn đúng cấu trúc trang, xây dựng narrative rõ ràng hơn cho từng section và viết thông điệp thuyết phục thay vì placeholder generic

Gói prompt Frontend Skill

• Để hỗ trợ tận dụng GPT-5.4 cho các tác vụ frontend nói chung, OpenAI đã công bố [frontend-skill](https://github.com/openai/skills/…) trên GitHub
• Gói này cung cấp hướng dẫn mạnh về cấu trúc, gu thẩm mỹ và pattern tương tác, giúp mặc định tạo ra các thiết kế tinh tế hơn, có chủ đích hơn và đem lại cảm giác dễ chịu hơn
• Có thể cài trong ứng dụng Codex bằng lệnh $skill-installer frontend-skill

• Cấu trúc cốt lõi của Frontend Skill

  • Working Model: trước khi build, hãy viết ra 3 thứ — visual thesis (bầu không khí, chất liệu, năng lượng), kế hoạch nội dung (hero, support, detail, final CTA), và interaction thesis (2-3 ý tưởng motion)
  • Beautiful Defaults: bắt đầu từ bố cục, không phải từ component. Ưu tiên hero full-bleed, đặt tên thương hiệu/sản phẩm là phần chữ lớn nhất, copy phải quét được trong vài giây, và mặc định là layout không có card
  • Chuỗi mặc định cho Landing Page: Hero → Support → Detail → Final CTA
    • Quy tắc hero: một bố cục thống nhất, hình ảnh full-bleed, ưu tiên thương hiệu, không có card, dải số liệu hay logo cloud trong hero
    • Ngân sách viewport: nếu có header cố định thì hero và header cộng lại phải nằm gọn trong viewport ban đầu
  • Apps: mặc định theo sự tiết chế kiểu Linear — phân cấp surface điềm tĩnh, typography và spacing mạnh, ít màu sắc, card chỉ dùng khi có tương tác
  • Imagery: hình ảnh phải có vai trò trong narrative, ưu tiên ảnh chụp có cảm giác thực tế hơn là gradient trừu tượng hay vật thể 3D giả. Viewport đầu tiên bắt buộc phải có visual anchor thực sự
  • Copy: viết bằng ngôn ngữ của sản phẩm, không phải lời bình về thiết kế. Headline phải truyền được ý nghĩa; nếu xóa 30% copy mà trang tốt hơn thì hãy tiếp tục xóa
  • Utility Copy: với dashboard, app và công cụ quản trị, mặc định dùng utility copy thay cho marketing copy — ưu tiên định hướng, trạng thái và hành động
  • Motion: motion để tạo sự hiện diện và phân cấp, không phải để gây nhiễu. Hãy triển khai tối thiểu 2-3 chuyển động có chủ đích như chuỗi xuất hiện của hero, hiệu ứng theo cuộn trang, hay transition hover/reveal. Ưu tiên Framer Motion
  • Hard Rules: mặc định không có card, mỗi section chỉ có một ý tưởng chủ đạo, không quá 2 font, không quá 1 màu accent, không dùng filler copy
  • Litmus Checks: kiểm tra xem thương hiệu có rõ ngay từ màn hình đầu tiên không, có visual anchor mạnh không, chỉ đọc headline có hiểu được trang không, mỗi section có đúng một vai trò không, card có thực sự cần thiết không, và motion có cải thiện phân cấp không

Ví dụ kết quả

• Bài viết đưa ra các ví dụ được tạo bằng Frontend Skill trong 3 nhóm: landing page, game, dashboard (mỗi nhóm có nhiều video demo)

Điểm chính

• GPT-5.4 có thể tạo giao diện frontend chất lượng cao khi prompt cung cấp ràng buộc thiết kế rõ ràng, visual reference, narrative có cấu trúc và design system được định nghĩa sẵn
• Các dự án được tạo hoàn toàn chỉ với GPT-5.4 trong các coding agent như Codex có thể được gửi lên gallery của OpenAI để trưng bày

[ndrgrd]

Thành thật mà nói, nhìn vào frontend của các dịch vụ LLM thì chậm đến mức khiến người ta nghĩ “sao lại làm kiểu này vậy”, lại còn thiếu tính năng và tương tác bất tiện, nên đọc những bài như thế này tôi chỉ thấy buồn cười thôi.

[click]

Tôi dùng vì KakaoTalk chatgpt pro, nhưng cảm giác mọi thiết kế frontend mà GPT tạo ra đều khá u tối.

[slowandsnow]

Đừng bao giờ dùng gpt cho frontend. Tệ nhất đấy. Hãy thử so sánh với opus bằng cùng một prompt.

[frogbam]

Phần thiết kế frontend thì GPT vốn làm không được ổn nên tôi đã để model khác làm, hy vọng với cái này kết quả sẽ ra khá ổn.

[angrybird0]

Mình khá tò mò không biết nó sẽ khác biệt thế nào so với frontend-design của Claude.
Có lẽ sẽ khó mà so sánh kiểu ai thiết kế frontend tốt hơn, nhưng việc nó cũng đã xuất hiện trong Codex chắc là một điểm quan trọng, đúng không?