Sao Claude làm web lại đẹp đến thế? Nhà thiết kế này vừa công khai toàn bộ bộ Skill của mình!

Bài viết gốc Weixin: https://mp.weixin.qq.com/s/GGn2DCc40UE344xr6JE2pw

Tác giả: 公子龙 (Công Tử Long) · WeChat · Kho GitHub: https://github.com/elayadesign/ai-design-skills & https://github.com/elayadesign/redesign-skill · Bản dịch tiếng Việt tại aihot.vn

Vì sao nhìn thoáng qua là biết web do AI làm? Loạt tác phẩm khác biệt của Elaya

Có những trang web do AI tạo ra, bạn chỉ cần liếc mắt nhìn giây đầu tiên là nhận ra ngay sản phẩm của AI.

Một dòng tiêu đề chữ thật to, nền chuyển sắc (gradient), ba chiếc thẻ tính năng (feature cards) xếp ngang bằng chằn chặn, nối tiếp bằng một hàng ảnh đại diện (avatar) khách hàng cùng vài con số thống kê bóng bẩy. Nếu tách riêng từng thành phần ra để soi thì dường như chẳng có lỗi gì, nhưng khi ghép chúng lại với nhau trên cùng một trang thì luôn toát lên một cảm giác 'khuôn mẫu công nghiệp' quen thuộc đến nhàm chán.

Hôm nay, tình cờ bắt gặp loạt tác phẩm thiết kế web mà nhà thiết kế <strong>Elaya</strong> (<code>@elayadesigns</code>) vừa đăng tải, tôi thực sự muốn mang ra chia sẻ kỹ cùng mọi người.

Chẳng hạn như trang đích tiếp thị (marketing landing page) <strong>Landfall</strong> dưới đây. Một vùng biển đêm xanh thẫm, dọc bờ biển đứng chật kín người, ngọn hải đăng chiếu một luồng sáng vàng ấm áp vươn xa ra khơi. Dòng tiêu đề viết <em>“They're waiting for your ship”</em> (Họ đang chờ con tàu của bạn), nhưng chính toàn bộ khung hình đã tự kể trọn vẹn câu chuyện <strong>“thu hút sự chú ý và tìm kiếm khách hàng”</strong> ngay trước khi người xem đọc đến chữ thứ hai.

Hay như trang du lịch <strong>Convex</strong> này. Thanh điều hướng (navbar) phía trên và các nút bấm đều được tiết chế cực kỳ nhẹ nhàng, nhường trọn vẹn tầm mắt cho góc nhìn từ buồng lái của một chiếc máy bay cổ điển, bên ngoài khung cửa kính là cánh đồng rực sắc vàng ấm áp dưới ánh hoàng hôn. Xem xong, người ta sẽ dâng lên cảm giác muốn xách ba lô lên đường trước, rồi mới nghĩ đến chuyện bấm nút <em>Get started</em>.

Trên mạng xã hội X, Elaya đã chia sẻ bộ sưu tập các trang web mà anh thực hiện trong suốt hai tháng qua. Anh cho biết bộ công cụ sử dụng bao gồm <strong>Higgsfield</strong>, <strong>Claude</strong>, <strong>Cursor</strong>, kết hợp cùng <strong>bộ Skill thiết kế AI do chính anh tự đúc kết và biên soạn</strong>.

Bộ Skill thiết kế trang đích (Landing Page) được anh công khai miễn phí có tên là <code>landing-page-design</code>, đặt trong kho mã nguồn mở <strong>AI Design Skills</strong> của mình.

Lời giới thiệu này rất dễ khiến nhiều người phấn khích: <em>Phải chăng cuối cùng đã có một tệp tài liệu thần kỳ, chỉ cần nhét cho AI đọc là giúp trang web thoát hẳn khỏi cái mùi khuôn mẫu rập khuôn kia?</em>

Tôi đã dành thời gian đọc kỹ toàn bộ tệp Skill mà anh công khai cùng một bộ Skill cải tạo web cũ (<code>redesign-skill</code>) đi kèm. Bên trong quả thực có rất nhiều nguyên tắc quý giá có thể áp dụng ngay lập tức, nhưng những điều đáng học hỏi nhất lại nằm ở tầng sâu hơn chuyện “đổi một câu prompt” rất nhiều.

01. Đừng vội bắt AI viết code ngay: Chiến lược & Cấu trúc phải đi trước

Hình ảnh gánh vác biểu đạt, nhưng điểm xuất phát là 1 hành động duy nhất

Trước tiên, hãy cùng xem thêm một tác phẩm khác trong bộ sưu tập.

Đây là giao diện quản lý ngân sách mang tên <strong>Finmain</strong> (<em>Know when to stop spending</em> — Biết khi nào cần dừng chi tiêu). Các con số thống kê, thanh tỷ trọng chi tiêu, thu nhập và tổng hạn mức ngân sách đều trôi nổi nhẹ nhàng trên nền trời xanh mây trắng. Bên góc phải thậm chí còn đặt một cột đèn tín hiệu giao thông và biển báo giới hạn tốc độ 40.

Loạt tác phẩm này có một đặc điểm vô cùng rõ nét: <strong>Hình ảnh gánh vác phần lớn trọng trách biểu đạt thông điệp của sản phẩm</strong>.

Trang tiếp thị dùng sóng biển và đám đông quanh ngọn hải đăng; trang du lịch dùng buồng lái máy bay; còn trang nói về nền tảng điều phối AI Agent (<strong>Relay</strong> — <em>Real agents, real control</em>) thì đặt thẳng hình ảnh một bàn tay đang điều khiển con rối gỗ qua những sợi dây ký tự.

Bạn thậm chí chưa cần đọc kỹ từng dòng chữ mô tả tính năng mà đã cảm nhận được ngay lập tức trang web muốn truyền tải thông điệp cốt lõi gì.

Thế nhưng, bộ Skill được Elaya công khai lại <strong>không hề bắt đầu từ việc “vẽ một bức ảnh lớn gây choáng ngợp”</strong>.

Ngay ở dòng đầu tiên của Phần A (<code>Part A — Strategy and structure</code>), bộ quy tắc đóng đinh một định nghĩa bất di bất dịch: <strong>Một trang đích (Landing Page) không phải là trang chủ đa năng; nó chỉ xoay quanh một sản phẩm/đề xuất duy nhất, hướng tới một nhóm đối tượng duy nhất, và thúc đẩy một hành động chính duy nhất (<code>one offer → one audience → one primary action</code>).</strong>

Hành động chính đó có thể là đăng ký dùng thử, đặt lịch xem demo, tải xuống ứng dụng hoặc thanh toán đặt mua. Phải nghĩ thông suốt đích đến này trước rồi mới được bước sang khâu thiết kế.

Tiếp theo, Skill yêu cầu làm rõ hàng loạt câu hỏi thu thập đầu vào (Intake Questions): Khách truy cập là ai (chân dung khách hàng lý tưởng ICP)? Họ đang muốn giải quyết vấn đề cụ thể nào? Tại sao đến tận bây giờ họ vẫn còn chần chừ chưa hành động (3 rào cản tâm lý lớn nhất)? Họ truy cập từ quảng cáo trả phí, công cụ tìm kiếm hay mạng xã hội? Và trong tay bạn đang có sẵn những ảnh chụp màn hình thật, video demo hay câu chuyện khách hàng (case study) xác thực nào?

Những câu hỏi này nghe chẳng có vẻ gì là “hào nhoáng về mặt mỹ thuật”, nhưng lại <strong>trực tiếp quyết định trang web cuối cùng sẽ mang hình hài ra sao</strong>.

Ví dụ: Cùng là một công cụ tạo video AI, nếu giới thiệu cho những người chưa từng nghe nói đến sản phẩm bao giờ, có lẽ bạn phải đặt ngay video thành phẩm ở màn hình đầu tiên để họ thấy tận mắt công cụ làm được gì; nhưng nếu trang đích nhắm tới những người đã tìm hiểu và sẵn sàng dùng thử, một lối vào bắt đầu nhanh gọn kèm thông tin bảng giá minh bạch lại hữu ích hơn nhiều. Cố nhồi nhét cả hai nhóm người dùng với hai mục đích khác nhau vào chung một trang web sẽ rất dễ khiến bố cục ngày càng phình to, rối rắm.

Khóa dàn ý & triển khai cuốn chiếu từng phân khu (Section-by-section)

Tài liệu của Elaya cũng quy định trình tự thực hiện rất rành mạch: <strong>Phải lên khung dàn ý toàn trang (page outline), câu chữ màn hình đầu tiên (hero copy), lợi ích sản phẩm, quy trình sử dụng và danh sách câu hỏi thường gặp (FAQ) trước — sau khi duyệt xong phần chữ mới bắt đầu viết code.</strong>

Hãy quyết định xem trang web này cần nói rõ điều gì trước, rồi mới quyết định chữ to bao nhiêu, hình ảnh đặt ở vị trí nào.

Nguyên tắc làm cuốn chiếu từng phân khu: Bộ Skill yêu cầu AI triển khai theo từng khối độc lập, làm chắc từng phần từ trên xuống dưới, tuyệt đối không vì sửa một chi tiết nhỏ mà yêu cầu AI sinh lại toàn bộ cả trang web từ đầu.

02. Biến câu lệnh mơ hồ 'Làm cho sang xịn hơn' thành những quyết định cụ thể

Thang đo định lượng: Phông chữ, cỡ chữ, khoảng cách và công thức bo góc đồng tâm

Đọc tiếp xuống phần thứ hai (<code>Part B — Visual System</code>), chúng ta mới chạm tới phần mà đại đa số người làm web quan tâm nhất: <strong>Các quy tắc thị giác bắt buộc</strong>.

Ở đây hoàn toàn không có chuyện phó mặc nhiệm vụ cho một câu nhắc vô định kiểu <em>“Hãy thiết kế sao cho có gu và sang trọng một chút”</em>. Từ phông chữ (typography), cỡ chữ, khoảng cách đệm (spacing), độ bo góc (corner radius), màu nền, biểu tượng (icon) cho tới hiệu ứng chuyển động (motion) đều được lượng hóa thành những quy tắc có thể kiểm chứng rõ ràng.

• Giới hạn phông chữ nghiêm ngặt : Bộ quy tắc chỉ cho phép chọn trong một danh sách hẹp như Geist , Manrope , Geist Mono , Poppins , và thông thường một website chỉ dùng duy nhất 1 phông chữ chính . Chỉ khi giao diện có hiển thị khối mã lệnh hoặc bảng số liệu kỹ thuật thực sự cần thiết thì mới bổ sung thêm phông chữ đơn cách (monospace).
• Thang cỡ chữ và khoảng cách cố định : Cỡ chữ không được phép tiện tay gõ bừa những con số lẻ như 19px hay 22px , mà phải lấy từ thang tỷ lệ định sẵn. Khoảng cách (spacing) cũng tuân thủ bảng cấp số chuẩn: 8px , 12px , 16px , 24px , 32px ... tăng dần nhất quán.
• Công thức bo góc đồng tâm (Concentric Corner Radius) : Khi bên ngoài là một thẻ bo góc (card) và bên trong lồng một bức ảnh hoặc khung con, rất nhiều trang web do AI code sẽ gán cùng một bán kính bo góc cho cả hai lớp — nhìn vào luôn có cảm giác lệch lạc ở bốn góc. Elaya đưa thẳng công thức toán học vào quy tắc: Bán kính bo góc lớp trong = Bán kính lớp ngoài trừ đi khoảng đệm ở giữa ( inner_radius = outer_radius - gap ) . Ví dụ: thẻ ngoài bo góc 16px , khoảng đệm padding là 8px , thì ảnh bên trong sẽ bo góc đúng 8px .
• Kiểm soát chi tiết vi mô (Micro-polish) : Tiêu đề lớn không được để rớt một từ đơn lẻ xuống dòng cuối cùng (chống lỗi chữ mồ côi orphan word ); độ rộng dòng văn bản chính (body text) không được trải dài tràn ngang toàn màn hình; bộ icon không được pha tạp nhiều bộ có độ dày nét vẽ ( stroke-width ) lệch nhau.

Bản thân những con số như 8, 16 hay 24 không hề có phép thuật gì cả. Điểm lợi hại thực sự của chúng nằm ở chỗ: <strong>khi AI viết code đến phân khu thứ ba, thứ tư của trang web, nó sẽ không tự tiện “phát minh” ra một bộ tiêu chuẩn kích thước mới lệch hẳn với phần đầu trang.</strong>

Những lỗi nhỏ mà một nhà thiết kế lành nghề thường thuận tay chỉnh lại bằng mắt, nay đã được Elaya viết thành điều khoản ràng buộc cho AI ngay từ trước khi sinh mã nguồn. Trên một trang web, nếu chỉ nhìn riêng lẻ từng chỗ thì có vẻ không quá đáng kể; nhưng khi hàng chục chi tiết chuẩn xác cộng hưởng lại với nhau, cảm giác hoàn thiện (craftsmanship) của trang web sẽ khác biệt một trời một vực.

Kiểm soát màu sắc & độ tương phản: Để nhiếp ảnh và ánh sáng tự lên tiếng

Cách phối màu trong bộ Skill cũng thể hiện chính kiến rất rõ ràng.

Nó giới hạn chặt chẽ phạm vi sử dụng nền tối, cấm việc cứ hở ra là trải màu chuyển sắc (gradient) lên toàn bộ nền trang; riêng phần tiêu đề màn hình đầu (Hero headline) thì được phép dùng hiệu ứng chuyển sắc chữ theo chỉ định. Trong tệp Skill cải tạo web đi kèm, tác giả còn chỉ đích danh căn bệnh lạm dụng dải màu <strong>“tím – xanh AI gradient”</strong> quen thuộc để yêu cầu loại bỏ triệt để.

Nhưng điều đó tuyệt đối không có nghĩa là mọi trang web đều phải biến thành một màu trắng – đen – xám lạnh lẽo.

Hãy nhìn lại những tác phẩm ở trên: biển đêm mang sắc xanh sâu thẳm, buồng lái máy bay rực ánh vàng cam ấm áp, còn xung quanh nhân vật ở trang sản phẩm giấc ngủ <strong>Sova+rest</strong> lại là sắc đỏ nồng đượm. <strong>Sức căng thị giác (visual tension) hoàn toàn có thể đến từ nhiếp ảnh, ánh sáng và bố cục khung hình — bản thân các khung viền hay thẻ giao diện không nhất thiết phải đồng loạt phát sáng để tranh giành sự chú ý với nội dung.</strong>

Lưu ý thực tế khi áp dụng cho tiếng Việt & tiếng Trung: Cần kiểm tra thực tế với các bộ font hỗ trợ trọn vẹn dấu bản địa, đồng thời rà soát kỹ độ dài dòng và nhịp ngắt dòng thực tế.

03. Đẹp mắt rồi, nhưng vẫn phải ra dáng một sản phẩm dùng được thật

Từ trang lỗi 404 vũ trụ đến bảng tính giá tương tác (Usage Calculator)

Ở nửa sau video trình diễn bộ tác phẩm của Elaya, có hai chi tiết nhỏ khiến tôi đặc biệt tâm đắc.

Chi tiết thứ nhất là <strong>trang báo lỗi 404</strong>. Bên phải màn hình là một phi hành gia đang mở laptop trôi lơ lửng giữa khoảng không vũ trụ đầy sao tối thẫm; bên trái là một gốc cây cổ thụ dưới bầu trời hoàng hôn ấm áp; ngăn cách ở chính giữa là một đường ranh giới sáng – tối sắc nét kèm thông điệp <em>“Your route escaped Earth's gravity”</em> (Đường dẫn của bạn đã thoát khỏi lực hấp dẫn của Trái Đất).

Trang báo lỗi không hề bị bỏ mặc cho trình duyệt xử lý mặc định, mà tiếp nối liền mạch ngôn ngữ thị giác của toàn bộ website.

Chi tiết thứ hai là <strong>giao diện chọn gói cước và ước tính sản lượng sử dụng (Pricing &amp; Usage Calculator)</strong>. Khi con trỏ chuột di chuyển qua khu vực tùy chọn loại nội dung, trên bảng điều khiển hiển thị đầy đủ các gói cước, thanh trượt (slider) điều chỉnh khối lượng video/âm thanh hàng tháng và thanh dự tính lượng credit tiêu thụ trực quan.

Màn hình đầu tiên (Hero section) làm đẹp rồi, thì trang bảng giá và trang báo lỗi phía sau cũng phải giữ vững chất lượng tương xứng.

Danh sách nghiệm thu trạng thái tương tác & Ranh giới giữa thẩm mỹ và sự thật

Bộ Skill công khai quả thực đặt ra yêu cầu rất cụ thể cho những chi tiết này: <strong>Nút bấm khi di chuột qua (<code>hover</code>), khi nhấn xuống (<code>active</code>), khi điều hướng bằng bàn phím (<code>focus-visible</code>), trạng thái đang tải (<code>loading</code>), trạng thái trống chưa có dữ liệu (<code>empty state</code>) và trạng thái báo lỗi (<code>error state</code>) đều bắt buộc phải có thiết kế riêng.</strong> Một trang trống không được phép chỉ để lại mảng trắng trơ trọi, và khi xảy ra lỗi cũng tuyệt đối không chỉ bật lên một dòng chữ <em>“Oops”</em> cụt lủn.

Ngay cả việc rà soát liên kết hỏng (dead links), thiếu nút quay về trang chủ, biểu mẫu (form) chưa kiểm tra dữ liệu đầu vào (validation) hay hình ảnh thiếu văn bản thay thế (<code>alt text</code>) — tất cả đều được đưa vào danh sách kiểm tra bắt buộc trước khi bàn giao (Delivery Checklist). Sau khi AI viết ra một trang web mở lên xem được, nó vẫn phải hoàn thiện đầy đủ các trạng thái vận hành này.

Quy định về hiệu ứng chuyển động (motion) trong Skill cũng rất tỉ mỉ: khi phần tử tiến vào khung nhìn (viewport) thì làm mờ dần hiện lên (<code>blur fade-in</code>), khi mở menu điều hướng thì từng mục xuất hiện nối tiếp nhau (<code>staggered reveal</code>), và tốc độ chuyển đổi của nút bấm không được dùng chung một gia tốc mặc định.

Tuy nhiên, tôi khuyên bạn <strong>không nên bê nguyên xi 100% đoạn quy tắc hiệu ứng động này một cách máy móc</strong>. Trong tệp Skill, ngay cả hiệu ứng chữ hiện ra từng từ một cho khẩu hiệu lớn cũng được đặt làm mục bắt buộc — nếu trang web nào cũng áp dụng y hệt như vậy thì chẳng mấy chốc sẽ lại sinh ra một thứ “mùi khuôn mẫu” kiểu mới. Khi người dùng mong muốn giảm bớt hiệu ứng chuyển động (<code>prefers-reduced-motion</code>), nội dung càng cần được hiển thị trực tiếp, rõ ràng và trọn vẹn ngay lập tức.

Ngoài ra, những khung hình bắt mắt trong bộ sưu tập thiết kế (portfolio) không thể thay thế cho việc kiểm chứng sản phẩm thực tế. Video trình diễn hiệu ứng trang web mượt mà không đồng nghĩa với việc đằng sau mỗi nút bấm đều đã có luồng nghiệp vụ hoàn chỉnh, và cũng không thể coi các logo thương hiệu, số lượng người dùng hay điểm đánh giá trong bản mẫu là những ca triển khai thương mại đã được kiểm chứng.

Còn một điểm cần đặc biệt lưu tâm: Để tránh cảm giác “dữ liệu giả đặt chỗ” (placeholder), tệp Skill gợi ý đổi những con số tròn chẵn giả tạo thành những con số lẻ trông tự nhiên hơn. Nhưng <strong>khi đưa sản phẩm lên vận hành thật (production), số lượng người dùng, điểm xếp hạng và đánh giá của khách hàng bắt buộc phải dùng tư liệu thật</strong>. Một con số có thêm phần thập phân đằng sau cũng không tự động biến thành bằng chứng xác thực.

Những bộ tài liệu quy tắc như thế này phù hợp nhất là vừa đọc vừa chắt lọc có chọn lọc. Tách bạch rạch ròi giữa <strong>thẩm mỹ giao diện</strong> và <strong>sự thật nghiệp vụ</strong> sẽ giúp chúng ta sử dụng bộ Skill này hiệu quả và bền vững hơn nhiều.

04. Đã có sẵn trang web rồi? Bộ Skill chẩn đoán và cải tạo giao diện tương ứng

Quy trình 5 bước của redesign-skill: Bắt bệnh code cũ thay vì đập đi xây lại

Nếu trong tay bạn đã có sẵn một trang web đang hoạt động, Elaya cũng công bố riêng một bộ Skill thứ hai mang tên <strong><code>redesign-skill</code></strong> (<code>elayadesign/redesign-skill</code>).

Điểm xuất phát của bộ Skill này sát với tình huống thực tế mà đại đa số anh em làm sản phẩm thường xuyên gặp phải: <strong>Hệ thống chạy ổn định rồi, tính năng cũng tương đối đầy đủ rồi, chỉ có điều nhìn giao diện vẫn thấy rời rạc, chưa ưng mắt.</strong>

Tệp quy tắc này <strong>cấm AI nhảy vào là đập đi xây lại từ đầu</strong>. Thay vào đó, nó bắt buộc AI phải khảo sát mã nguồn hiện tại trước: xem dự án đang dùng framework gì, tổ chức CSS/styling theo kiểu nào, những luồng tính năng nào đang chạy — rồi mới tiến hành chẩn đoán vấn đề.

Nó sẽ tự động rà soát các căn bệnh giao diện phổ biến: khối văn bản quá rộng tràn ngang màn hình, mọi nội dung đều căn giữa đơn điệu, ba cột thẻ tính năng bằng nhau chằn chặn, nút bấm thiếu phản hồi tương tác, bảng màu và đổ bóng (<code>box-shadow</code>) thiếu nhất quán, cùng những thành phần giao diện mặc định nhìn thoáng qua là lộ ngay.

Sau khi chẩn đoán xong, AI sẽ tiến hành tinh chỉnh theo đúng trình tự ưu tiên: <strong>(1) Chuẩn hóa phông chữ và bảng màu → (2) Bổ sung các trạng thái tương tác → (3) Căn chỉnh bố cục, khoảng cách đệm và hiệu ứng chuyển động</strong>, giữ nguyên dự án gốc và chỉ can thiệp từng phạm vi nhỏ có kiểm soát.

Đối với những người đã từng mệt mỏi vì cảnh sửa đi sửa lại một trang web nhiều vòng, trình tự cải tạo từng bước này có giá trị thực tiễn cao hơn nhiều so với việc lại bảo AI sinh mới một bộ trang khác từ con số 0.

Hướng dẫn cài đặt nhanh & Mẫu Prompt thực chiến áp dụng ngay

Hiện tại, cả hai bộ Skill của Elaya đều được mở mã nguồn dưới dạng tài liệu Markdown chuẩn theo giấy phép <strong>MIT</strong>, tương thích trực tiếp với <strong>Claude Code, Cursor, Codex, Antigravity, Windsurf</strong> và mọi công cụ đọc tệp quy tắc Markdown:

Tên bộ Skill	Kho mã nguồn GitHub	Mục đích sử dụng chính	Lệnh cài đặt nhanh (Skills CLI)
landing-page-design	github.com/elayadesign/ai-design-skills	Thiết kế Landing Page & Web UI mới từ đầu: bộ câu hỏi chiến lược, khung nội dung chuyển đổi và hệ thống quy tắc thị giác định lượng	npx skills add elayadesign/ai-design-skills
redesign-existing-projects	github.com/elayadesign/redesign-skill	Chẩn đoán lỗi thẩm mỹ và nâng cấp giao diện cho dự án web đang chạy mà không làm hỏng tính năng sẵn có	npx skills add elayadesign/redesign-skill

# Cài đặt bộ Skill thiết kế Landing Page mới (Claude Code / Cursor / Codex / Antigravity)
npx skills add elayadesign/ai-design-skills --skill landing-page-design

# Hoặc cài đặt bộ Skill cải tạo & nâng cấp giao diện web sẵn có
npx skills add elayadesign/redesign-skill

Nếu chỉ muốn tham khảo tư duy thiết kế, bạn cứ mở trực tiếp tệp <code>SKILL.md</code> trên GitHub ra đọc. Nếu muốn áp dụng vào dự án thực tế, bước đầu tiên cũng không cần bắt AI sửa toàn bộ trang web ngay lập tức; hãy yêu cầu nó đối chiếu bộ quy tắc với trang hiện tại để liệt kê các vấn đề và đề xuất phương án sửa màn hình đầu tiên (Hero section) trước, xem xét hợp lý rồi mới bắt tay vào sửa code.

Chẳng hạn, bạn có thể bắt đầu ngay bằng mẫu câu lệnh (Prompt) thực chiến dưới đây:

Hãy đọc kỹ bộ quy tắc thiết kế (SKILL.md) này cùng mã nguồn trang web hiện tại của tôi.
Trang web hướng tới những người lần đầu tìm hiểu về sản phẩm, hành động chuyển đổi chính là Đặt lịch xem Demo.
Vui lòng liệt kê trước những vấn đề đang ảnh hưởng đến khả năng truyền tải thông điệp và tính nhất quán thị giác,
sau đó đưa ra đề xuất chỉnh sửa cho khu vực màn hình đầu tiên (Hero section), giữ nguyên toàn bộ tính năng hiện có.
Tuyệt đối không tự ý bịa thêm đánh giá của khách hàng hay số liệu thống kê không có căn cứ.

Tất nhiên, những gì Elaya chia sẻ trong video là tuyển tập tác phẩm anh trau chuốt trong suốt hai tháng qua. <strong>Higgsfield</strong> (tạo tư liệu hình ảnh/video), <strong>Claude</strong>, <strong>Cursor</strong>, khâu tuyển chọn hình ảnh minh họa, cùng chính nhãn quan thẩm mỹ và phán đoán của người thiết kế đều tham gia vào quá trình đó — bài đăng gốc không công bố bản ghi đầy đủ từ câu prompt đầu tiên đến thành phẩm cuối cùng của từng trang.

Điều cuốn hút tôi nhất ở bộ tài liệu này là việc tác giả sẵn sàng <strong>mổ xẻ cảm giác “chưa ưng mắt” thành từng nguyên nhân kỹ thuật cụ thể</strong>: Rốt cuộc là do chữ nghĩa rời rạc, hình ảnh không kể cùng một câu chuyện với tiêu đề, hay do các trạng thái nút bấm, báo lỗi và trang trống căn bản vẫn chưa được làm tới nơi tới chốn?

Lời kết: Khi những phán đoán thẩm mỹ tinh tế của nhà thiết kế được viết ra thành quy tắc rõ ràng và lưu giữ lại trong dự án, lần tới mở AI lên làm web, chúng ta sẽ không bao giờ phải bắt đầu bằng câu nói vô định 'Hãy giúp tôi làm cho nó trông cao cấp hơn một chút' nữa.