Tôi đã xây dựng một trang landing page mà không cần mở Figma lần nào. Các công cụ tôi sử dụng chủ yếu là Claude Design và Claude Code. Thời gian sản xuất là một tuần, với tổng cộng hơn 300 lượt tương tác qua lại với AI.
Điều tôi học được từ 300 lượt tương tác đó là, mặc dù hành động tạo ra sản phẩm đã trở nên dễ dàng hơn đáng kể nhờ AI, giới hạn trên của chất lượng cuối cùng vẫn do khả năng phán đoán của con người quyết định. AI xử lý mọi thứ cho đến khi đưa ra các phương án. Từ đó, nâng nó lên đúng tông màu mong muốn là công việc của người đánh giá chất lượng và gửi lại để chỉnh sửa.
Tôi đã xây dựng trang tài liệu cho Design Harness, một framework xử lý thiết kế qua bốn lớp: ràng buộc, bối cảnh, xác minh và đánh giá. Vì đây là một trang web về thiết kế, tôi cũng có một chủ đề phụ là xem mình có thể đi xa đến đâu với các chi tiết và tương tác bề mặt.
https://x.com/kgsi/status/2072829167285207077
Tôi sẽ xem lại các bước tôi đã thực hiện và nơi tôi đã dành 300 lượt tương tác đó, bao gồm cả ảnh chụp màn hình thực tế.
Cách Tôi Sử Dụng Claude Design và Claude Code Khác Nhau
Tôi đã xây dựng LP này bằng cách phân chia vai trò giữa hai công cụ chính. Claude Design là một công cụ tạo thiết kế đối thoại, nơi bạn đưa ra hướng dẫn qua chat và một nguyên mẫu HTML trực tiếp xuất hiện ngay lập tức. Claude Code là một tác nhân mã hóa chạy trong terminal và trực tiếp triển khai codebase.
Sự phân công lao động rất rõ ràng: Claude Design rất giỏi trong việc định hình các nguyên mẫu ở giai đoạn đầu. Lần này, tôi đã cung cấp một tài liệu tóm tắt chính sách thiết kế và wireframe, trả lời một vài câu hỏi, và LP đầu tiên đã được xuất ra. Phương pháp này hiệu quả trong giai đoạn thử nghiệm các hướng đi và phá vỡ các giới hạn.
Mặt khác, đối với công việc đưa nó lên chất lượng sản xuất—chẳng hạn như hỗ trợ responsive và các chi tiết về khả năng truy cập—bạn cần phải tinh chỉnh nó với Claude Code.
Quyết định thiết kế với Design, và hoàn thiện nó với Code. Tôi đã sử dụng chúng theo thứ tự này.
Diễn Đạt Mọi Thứ Bằng Lời Trước Khi Thực Hiện
Vào thời điểm tôi quyết định tạo trang web này, hướng đi đã được xác định. Điều tôi có trong đầu là "điều gì sẽ xảy ra nếu bạn thêm các kiểu chữ và hiệu ứng hiện đại vào một tông màu phong cách nước ngoài cổ điển." Bản thân khái niệm này được lấy từ tài liệu Design Harness.
Lưu ý rằng vì Claude không thể tự tạo hình ảnh, tôi đã để việc đó cho ChatGPT Images 2.0. Tôi đã rút ra các ý tưởng thay thế từ hình ảnh của các trang web mẫu, xây dựng một mood board cho trang web tôi muốn tạo và tạo ra các hình ảnh nền. Tôi đã đặt mọi thứ thành lời và hình ảnh trước để xác định hướng đi 'tốt'. Tất cả các tương tác tiếp theo về cơ bản là đối chiếu chéo với điều này.
Khám phá các tông màu trực quan với Codex (ChatGPT Image 2.0), tìm kiếm qua nhiều hình ảnh và mood board khác nhau.
Tinh Chỉnh Cần Hàng Trăm Lượt Tương Tác (Ít Nhất)
Sau khi chuẩn bị xong, quá trình qua lại với Claude Design bắt đầu. Nhìn lại các ảnh chụp màn hình, có tổng cộng hơn 200 lượt tương tác (khoảng một tuần về tổng thời gian sản xuất). Dưới đây là sự phân chia của các phiên:
- "Yêu cầu tạo trang LP": khoảng 80 lượt
- "Hoạt ảnh Design Harness": khoảng 80 lượt
- "Hoạt ảnh hiển thị nền văn bản KV": khoảng 50 lượt
- "Cải thiện phần giải thích Design Harness": khoảng 10 lượt
Hoạt ảnh tải mở đầu và các hiệu ứng Key Visual (KV) yêu cầu đặc biệt nhiều lượt tương tác. Các hiệu ứng không được thực hiện một lần; tôi đã xếp lớp các hướng dẫn để trau chuốt chúng (ví dụ: hiệu ứng đến từ phía dưới, hiệu ứng làm mờ chồng lấn, v.v.).
Ảnh chụp màn hình của Claude Design. Vì độ chính xác giảm khi ngữ cảnh tăng lên, tôi đã tạo các phiên mới cho mỗi tác vụ quan trọng để khám phá.
Riêng biệt, tôi đang tinh chỉnh hỗ trợ responsive và khả năng truy cập với Claude Code, vì vậy tổng cộng là khoảng 300 lượt tương tác. Về mặt cảm nhận, tôi nghĩ phần Hero đã mất nhiều thời gian nhất.
Khi chuyển từ Claude Design sang Claude Code, tôi đã sử dụng chức năng Share, nhưng tôi khuyên bạn nên chuyển toàn bộ tệp zip qua "Export." Mặc dù "Send to" dễ dàng hơn, nhưng nó có giới hạn truyền hình ảnh và độ chính xác tái tạo không cao.
Nhìn vào các con số, nó có vẻ như một công việc tẻ nhạt, nhưng việc đưa ra hướng dẫn đã trở nên dễ dàng hơn. Bạn không còn cần phải hiểu đầy đủ về HTML và CSS nữa. Claude Design có tính năng chú thích, nơi bạn có thể thêm nhận xét trực tiếp vào các phần tử trên màn hình. Nếu bạn chỉ vào phần bạn muốn sửa, hầu như mọi hướng dẫn chi tiết đều sẽ được thực hiện. Do đó, các hướng dẫn tôi đưa ra chủ yếu thuộc ba loại:
Chỉ vào các phần tử bằng chú thích để sửa các chi tiết. Truyền đạt các chuyển động bằng lời nói, như hiển thị nền văn bản KV. Điều chỉnh lại tông màu cho phù hợp với "phong cách nước ngoài cổ điển"... Kỹ năng cần thiết duy nhất còn lại là khả năng diễn đạt chuyển động và tông màu bằng lời.
Hãy lấy thanh điều hướng làm ví dụ về quá trình qua lại.
Ban đầu, nó là một hiệu ứng nơi một đường gạch dưới trượt khi di chuột qua. Thật khó hiểu, vì vậy tôi đã cung cấp một URL triển khai tham khảo và yêu cầu thay đổi nó thành hiệu ứng xáo trộn ký tự. Sau đó, chiều rộng ký tự thay đổi trong quá trình xáo trộn, khiến vị trí menu bị dịch chuyển. Khi tôi yêu cầu cố định chiều rộng, khoảng cách trở nên không đều. Ngay cả sau khi gửi lại và nói "nó vẫn không đều", nó vẫn không được sửa. Cuối cùng, tôi đã ngừng cố gắng điều chỉnh chiều rộng và giải quyết nó bằng cách thay đổi kiểu chữ điều hướng sang monospace có chiều rộng cố định. Nếu chiều rộng ký tự là không đổi, sẽ không có gì di chuyển ngay cả khi xáo trộn. Việc này mất 5 lượt tương tác.
300 lượt tương tác chủ yếu là sự lặp lại của chu kỳ này. Cung cấp URL của các trang web hoặc triển khai mà tôi muốn tham khảo để chỉ ra hướng đi. Diễn đạt ngắn gọn sự khó chịu với những gì được tạo ra, như "khoảng cách không còn đều nữa," và gửi lại. Nếu cùng một cách sửa thất bại hai lần, tôi ngừng tinh chỉnh và thay đổi tiền đề. Cuối cùng, tôi chưa bao giờ viết một tài liệu đặc tả dài.
Nhân tiện, mặc dù lần này tôi hầu như không sử dụng nó, nhưng có một tài liệu có tên là Animation Vocabulary and Skills, sẽ giúp các hướng dẫn hiệu quả hơn nếu được sử dụng. https://animations.dev/vocabulary
Hành Động Tạo Ra và Hành Động Phán Đoán
Nhìn lại nội dung của các tương tác, đó là một quá trình đánh giá chất lượng của những gì được tạo ra và liên tục gửi lại. Bản thân hành động tạo ra giờ đây gần như có thể được xử lý hoàn toàn bởi AI. Nếu bạn đưa ra hướng dẫn, các phương án xuất hiện ngay lập tức. Nhưng thời gian hoạt ảnh có đúng không? Có đủ khoảng trắng không? Cái gì tốt và cái gì xấu? AI không thể đánh giá điều này. Vẫn không thể làm cho AI đưa ra tông màu mong muốn ngay trong một lần. Nếu bạn muốn nâng cao chất lượng, bạn không còn cách nào khác ngoài việc phán đoán và gửi lại.
Đây có lẽ là lý do tại sao các đầu ra đơn giản không đạt được mức chất lượng này. Một nghiên cứu của Trường Thông tin UC Berkeley, đã quan sát 13 phiên làm việc của các nhà thiết kế sử dụng các công cụ AI tạo sinh, gọi hiện tượng đầu ra có xu hướng hướng tới một phong cách trông có vẻ "chất lượng cao" nhưng quen thuộc là "Bẫy Hội Tụ."
https://x.com/kgsi/status/2074250174986362999
Nếu không có sự phán đoán để gửi lại, đầu ra sẽ ổn định ở một sự gọn gàng chung chung không thuộc về ai. Hầu hết 300 lượt tương tác đã được sử dụng để kéo nó trở lại tông màu mong muốn từ đó.
Điều Gì Xảy Ra Với Những Người Có Thể Phán Đoán?
Có quan điểm cho rằng cuối cùng AI sẽ có thể xử lý hoàn toàn những phán đoán về thẩm mỹ và chất lượng này. Tôi nghĩ điều đó sẽ xảy ra trong một số lĩnh vực.
Tuy nhiên, trong mỗi lần trong số hơn 300 lượt tương tác, tôi là người đã nhận ra sự khó chịu và gửi lại, và không có dấu hiệu nào cho thấy điều đó được tự động hóa trong quá trình đó. Tất nhiên, đây chỉ là n=1 từ việc xây dựng một LP. Tôi chưa biết liệu điều tương tự có thể được nói cho các công việc thiết kế khác hay không.
Sau khi hoàn thành quá trình này, dự đoán của tôi là "chỗ ngồi" cho những người tạo ra sản phẩm sẽ giảm đi. Một công việc mất một tuần để thiết kế một LP sẽ được thay thế bằng một công việc liên quan đến nửa ngày qua lại với AI. Vào thời điểm đó, những người ở lại vị trí của họ sẽ là những người có kiến thức và tiêu chí phán đoán để nói trong vài giây, "Chọn đề xuất bên phải, nhưng làm lại chuyển động," trước các phương án được xếp hàng. Tôi nghĩ nhu cầu về những người có thể phán đoán trong khi thành thạo AI thực sự sẽ tăng lên.
Điều các nhà thiết kế nên trau dồi sẽ chuyển từ đôi tay sang đôi mắt của họ. Những phán đoán tôi đưa ra trong 300 lượt tương tác đó cuối cùng dựa trên kinh nghiệm tạo ra sản phẩm bằng chính đôi tay của mình. Nếu vậy, trong một thế giới nơi số lần chúng ta tạo ra sản phẩm giảm đi, liệu có cách nào để chỉ phát triển đôi mắt không?
Như một lưu ý phụ, trang web tuyển chọn "Parascope," nơi bạn có thể có được các kỹ năng "thiết kế," hiện đang hoạt động thành công 👉 http://parascope.design/
