Làm theo ảnh chụp: bài tập mô phỏng đầu tiên
Ở bài trước, chúng ta yêu cầu AI viết một chương trình từ một câu. Lần này, ta bắt đầu bằng thứ dễ nhìn hơn: chọn một ảnh chụp bạn thích và nhờ AI làm dựa trên ảnh đó.
Cách này giống như lắp ghép mô hình khi nhìn vào hình mẫu. Bạn không cần mô tả trước từng màu sắc, khoảng cách hay vị trí nút; ảnh chụp đã truyền đạt phần lớn thông tin ấy.
Bài này giúp bạn làm được gì?
1. Chọn loại sản phẩm bạn muốn làm
Trước khi mở công cụ, hãy quyết định hôm nay bạn muốn có một kết quả nhỏ nào.
Mục tiêu không phải là sản phẩm đầy đủ mọi tính năng. Ta chỉ cần một màn hình mở được, dễ hiểu và có một tương tác đơn giản. Phạm vi càng nhỏ thì lần làm đầu càng dễ thành công.
Bạn có thể chọn một trong ba loại:
- Trang chủ sản phẩm: tiêu đề, phần giới thiệu, hình ảnh và nút.
- Bảng điều khiển SaaS: thanh bên, thẻ dữ liệu và biểu đồ.
- Trò chơi đơn giản: di chuyển, nhấp chuột hoặc một mục tiêu nhỏ.
Khi chọn ảnh tham khảo, hãy kiểm tra ba điều:
- Chỉ bằng một ảnh chụp, bạn có hiểu được nội dung chính không?
- Trang đó có điểm nào bạn thật sự thích không?
- Sau khi làm xong, bạn có nhanh chóng nhận ra kết quả giống đến đâu không?
Nếu thích tiêu đề lớn và màu sắc của một trang chủ, hãy chụp màn hình đầu tiên. Nếu thích thế giới khối trong trò chơi, hãy lưu một ảnh thể hiện rõ thế giới đó.
Cần giống đến mức nào?
Kết quả càng gần, bạn càng quan sát kỹ chi tiết và càng biết cách mô tả khác biệt cho AI. Cuối cùng, đặt ảnh tham khảo và sản phẩm cạnh nhau: bạn thấy giống 50%, 70% hay 90%?
Chỉ làm một màn hình
Đừng bắt đầu cùng lúc với đăng nhập, thanh toán, chat, trang quản trị và ứng dụng di động. Bài này chỉ làm lại màn hình đang ở trước mắt.
2. Làm một trang web cùng giảng viên
Trước hết, hãy xem toàn bộ quy trình. Khi đã hiểu, bạn sẽ làm lại bằng ảnh của mình.
Giảng viên tạo một thư mục trống và mở nó trong Trae. Dự án có tên trae-screenshot-demo; ban đầu chưa có trang web hay mã nguồn.
2.1 Đưa ảnh tham khảo cho Trae
Ảnh tham khảo đến từ trang giới thiệu của Framer. Tiêu đề lớn, thanh điều hướng, cảnh núi màu tím và các nút điều khiển nhỏ đều nhìn thấy rõ.
Nguồn ảnh: Framer Website Builder
Sau khi kéo ảnh vào khung chat của Trae, giảng viên chỉ viết một yêu cầu ngắn:
Hãy làm một trang web giống ảnh này. Khi xong, mở trang đó cho tôi xem.Ảnh cho Trae biết trang nên trông như thế nào; câu lệnh nói rõ ảnh cần được biến thành một trang web.
Sau khi gửi, hãy chờ Trae tạo xong tệp. Đừng gửi thêm nhiều yêu cầu khi yêu cầu đầu tiên chưa hoàn tất.
2.2 Xem phiên bản đầu tiên
Trae tạo index.html, styles.css và script.js, sau đó mở trang trong trình duyệt. Đây là kết quả thực tế trong bài học:
Chưa cần đọc mã. Hãy nhìn trang và so sánh với ảnh tham khảo:
- Không khí bầu trời và núi màu tím vẫn còn.
- Một tiêu đề lớn vẫn nằm ở giữa.
- Phía trên có thanh điều hướng, phía dưới có hàng nút điều khiển.
- Văn bản, nút và hình ảnh tạo thành một màn hình đầu tiên hoàn chỉnh.
Đây chưa phải bản sao chính xác, nhưng đã giữ được cấu trúc và cảm giác dễ thấy nhất. Như vậy là đủ tốt cho phiên bản đầu.
2.3 Phiên bản đầu tiên chỉ cần nhìn thấy được
Đừng xóa hết chỉ vì phông chữ hoặc vị trí nút hơi khác. Trước tiên xác nhận trang mở được, sau đó chọn vấn đề rõ nhất.
Nếu tiêu đề quá nhỏ, hãy nói:
Hãy làm tiêu đề ở giữa lớn hơn.Mở lại trang sau khi sửa. Nếu kết quả gần với mong muốn hơn thì lần chỉnh sửa này đã có ích.
Nói bằng lời bình thường là đủ
Bạn đang cùng Trae làm một sản phẩm, không phải thi viết prompt. Cứ mô tả điều nhìn thấy bằng những từ bạn vẫn dùng hằng ngày.
3. Tự làm với ảnh của bạn
Mở Trae, tạo một thư mục trống và mở thư mục đó. Một tên đơn giản như my-first-page là đủ.
Sau đó làm theo các bước:
- Tìm ảnh chụp một trang web hoặc trò chơi bạn thích.
- Chọn nút hình ảnh cạnh khung chat và chọn ảnh.
- Xác nhận ảnh đã xuất hiện trong tin nhắn.
- Viết một yêu cầu ngắn rồi gửi.
Hãy làm một trang web giống ảnh này.
Khi xong, mở trang đó cho tôi xem.Trong bài đầu tiên, bạn chưa cần chỉ định framework, cấu trúc thư mục hay tên tệp. Hãy để Trae tự chọn.
Nếu chỉ muốn dùng phong cách, không muốn sao chép tên và nội dung, hãy thêm:
Dùng phong cách của ảnh này, nhưng thay tên và nội dung bằng nội dung mới.Chờ Trae làm xong. Nếu công cụ hỏi quyền tạo tệp hoặc chạy dự án, hãy đồng ý. Nếu trang không tự mở, nói:
Hãy chạy dự án này. Tôi muốn xem kết quả.Khi trang xuất hiện, dành mười giây để kiểm tra trang mở được, nội dung chính đã có và nút chính phản hồi. Đừng bắt đầu bằng việc sửa năm thứ cùng lúc.
4. Cách này cũng dùng được với sản phẩm khác
Làm từ ảnh chụp không chỉ dành cho trang chủ. Để kiểm tra, giảng viên đã tạo thêm hai dự án trống: một bảng dữ liệu và một trò chơi khối.
Ví dụ 1: bảng điều khiển SaaS
Sản phẩm SaaS thường dùng bảng điều khiển để hiển thị tiến độ dự án, doanh số hoặc người dùng. Trong ảnh Linear này, thanh điều hướng ở bên trái và nội dung ở bên phải.
Tài liệu tham khảo trên lớp: Linear Dashboards
Giảng viên đưa ảnh vào Trae và nói:
Hãy làm một bảng dữ liệu giống bảng này.
Trước mắt dùng dữ liệu mẫu.Trae tạo thanh bên, thẻ dữ liệu và biểu đồ. Đây là trang đang chạy trong trình duyệt:
Các con số chưa phải dữ liệu kinh doanh thật, và điều đó không sao. Bài đầu tiên chỉ xây cấu trúc bảng. Khi trang chạy ổn định, bạn mới thay nhãn và số liệu.
Ví dụ 2: trò chơi khối
Nếu trang web thông thường không làm bạn hứng thú, hãy dùng ảnh trò chơi. Giảng viên chọn một ảnh thế giới khối của Minecraft.
Tài liệu tham khảo trên lớp: ví dụ Minecraft trên Microsoft Learn
Yêu cầu vẫn rất ngắn:
Hãy làm một trò chơi khối giống ảnh này.
Nhân vật phải di chuyển và đặt được khối.Trae tạo một trò chơi chạy trong trình duyệt, nhân vật có thể di chuyển, đặt hoặc bỏ khối:
Kết quả này là trò chơi 2D nhìn ngang. Nhân vật di chuyển trên mặt phẳng, không có chiều sâu tiến hoặc lùi. Vì yêu cầu chỉ nói “trò chơi khối”, Trae đã chọn cách hiểu đơn giản hơn.
Mở trang, nhấn các phím mũi tên và nhấp vào cảnh. Nếu nhân vật di chuyển và bạn đặt được khối thì phiên bản 2D đầu tiên đã hoạt động.
Làm thêm một phiên bản 3D
Nếu muốn góc nhìn thứ nhất gần với Minecraft, hãy ghi rõ “3D” trong yêu cầu. Giảng viên mở một dự án trống mới, thêm cùng ảnh và nói:
Hãy làm một trò chơi khối 3D giống ảnh này.
Người chơi phải đi lại, xoay camera và đặt được khối.Lần này Trae tạo một thế giới khối ba chiều thực sự:
Sau khi chọn “Start Game”, dùng WASD để đi và chuột để xoay. Chuột trái bỏ khối, chuột phải đặt khối và các phím số đổi loại khối.
Không phải lúc nào 2D hoặc 3D cũng tốt hơn. 2D dễ hơn cho trò chơi đầu tiên. Nếu việc đi sâu vào thế giới là phần quan trọng trong ý tưởng, hãy nói rõ bạn muốn 3D.
Tạo điểm khác biệt
Ảnh tham khảo chỉ là điểm bắt đầu. Hãy đổi màu sắc, chủ đề, văn bản, hình ảnh hoặc tương tác để kết quả dần trở thành sản phẩm của bạn.
5. Nếu phiên bản đầu chưa tốt thì sao?
Phiên bản đầu trông khác hoặc có nút không phản hồi là chuyện bình thường. Một dự án hiếm khi hoàn tất chỉ bằng một câu. Hãy xem, sửa một chút rồi xem lại.
Lỗi thường gặp của người mới là đưa mọi vấn đề vào cùng một tin nhắn. Khi quá nhiều thứ thay đổi cùng lúc, bạn không biết thay đổi nào tạo ra kết quả.
Hãy dùng một quy tắc đơn giản: mỗi lượt chỉ chọn vấn đề rõ nhất.
Trang trông chưa đúng
Nếu thẻ phía trên quá cao:
Thẻ ở trên quá cao. Hãy làm nó thấp hơn.Nếu ảnh chính quá nhỏ:
Ảnh ở giữa quá nhỏ. Hãy làm nó lớn hơn.Nếu nền quá tối:
Nền quá tối. Hãy dùng màu sáng hơn.Trang hoạt động không đúng
Nếu nút không làm gì:
Nút này không phản hồi khi tôi nhấp. Hãy sửa nó.Nếu nhân vật không di chuyển:
Các phím mũi tên không có tác dụng. Hãy sửa phần di chuyển.Bạn không biết mô tả vấn đề
Chụp lại trang hiện tại và nói:
Đây là kết quả hiện tại. Hãy so sánh với ảnh tham khảo và sửa điểm khác biệt lớn nhất.Bạn chưa cần biết những từ như “margin” hay “bố cục đáp ứng”. “Trang hơi chật”, “chữ khó đọc” hoặc “trên điện thoại trông lộn xộn” đều là mô tả hữu ích. Sửa xong một vấn đề rồi mới sang vấn đề tiếp theo.
6. Kiểm tra trên lớp
Đừng chỉ nhìn ảnh tĩnh. Hãy mở kết quả và tự nhấp hoặc tự chơi.
Kiểm tra bốn điều:
- Mở được: tải lại không xuất hiện trang trắng hoặc lỗi.
- Dễ hiểu: người khác nhận ra đây là trang chủ, bảng điều khiển hay trò chơi.
- Có phản hồi: nút chính hoặc điều khiển cơ bản hoạt động.
- Vẫn dễ đọc: thu nhỏ cửa sổ không làm chữ và ảnh chồng lên nhau.
Nếu một mục chưa đạt, hãy nói đúng điều bạn quan sát được và yêu cầu Trae chỉ sửa vấn đề đó. Khi cả bốn mục đều đạt, bài tập hoàn tất.
Hoàn thành một sản phẩm nhỏ
Đăng nhập, thanh toán, chat nhóm và chơi nhiều người không nằm trong bài hôm nay. Một trang nhỏ đã hoàn thành có giá trị hơn mười phần mở đầu còn dang dở.
📚 Bài tập
Tạo trang của bạn từ một ảnh chụp
Chọn ảnh một trang web hoặc trò chơi bạn thích, đưa cho AI và chỉ làm lại một màn hình.
- Giữ lại ảnh tham khảo.
- Tạo trang và cải thiện một phần bạn chưa thích.
- Lưu ảnh chụp của phiên bản đã sửa.
Khi trình bày, đặt ảnh tham khảo và sản phẩm cạnh nhau rồi giải thích thay đổi bạn đã yêu cầu.
Điều cần nhớ
Chúng ta không bắt đầu bằng mã nguồn mà bằng một ảnh chụp. Toàn bộ bài tập có bốn bước:
- Chụp hoặc lưu một ảnh.
- Đưa ảnh cho AI.
- Mô tả sản phẩm bằng một câu.
- Mỗi lần sửa một khác biệt có thể nhìn thấy.
Ảnh cho AI biết sản phẩm nên trông thế nào. Lời của bạn cho biết sản phẩm cần làm gì. Khi phiên bản đầu xuất hiện, việc nhấp, quan sát và chụp màn hình sẽ giúp bạn mô tả thay đổi tiếp theo.
Prompt không cần giống tài liệu kỹ thuật. Hãy nói một việc đơn giản, làm cho sản phẩm chạy rồi tiếp tục trò chuyện dựa trên thứ đang ở trước mắt. Việc xây một dự án sẽ bớt xa lạ hơn rất nhiều.