TL;DR
Leon Lin đưa ra một workflow rất thực dụng: đừng bắt coding agent vừa nghĩ taste, vừa thiết kế, vừa code trong một cú prompt. Hãy tạo ảnh thiết kế trước, chọn hướng đẹp, tách asset, rồi đưa từng section cho agent code và refine bằng screenshot. Nói ngắn: image first, code second.
Hầu hết website do AI tạo ra nhìn vẫn hơi “AI”. Không phải vì model dở hoàn toàn, mà vì workflow thường sai từ đầu. Người dùng gõ “make it modern”, “make it premium”, “make it clean”, rồi mong agent tự sinh ra gu thiết kế tốt, layout tốt, spacing tốt, asset tốt và code tốt trong cùng một lần.
Kết quả quen thuộc: hero căn giữa, gradient blob, vài card lơ lửng, spacing hơi ngẫu nhiên, nhìn qua thì ổn nhưng không có chất. Leon Lin gọi đúng bệnh: nhiều người đang bắt coding agent phát minh cả visual design lẫn implementation cùng lúc.
Vấn đề không nằm ở code, mà nằm ở target
Frontend là thứ thị giác trước khi là thứ kỹ thuật. Một trang tốt phụ thuộc vào hierarchy, khoảng trắng, typography, màu sắc, bố cục, ảnh, icon, nhịp giữa các section và hàng chục quyết định nhỏ. Nếu không có visual target rõ ràng, coding agent sẽ lấp chỗ trống bằng pattern quen thuộc nhất.
Đó là lý do image-to-code hấp dẫn. Thay vì nói “hãy làm đẹp”, bạn cho agent một đích đến cụ thể: ảnh hero này, section này, asset này, spacing kiểu này. Agent không cần đoán taste nữa; nó có thứ để bám.
“Instead of asking the model to invent taste, layout, assets, responsiveness, and implementation at once, you give it a visual target.”
— Leon Lin
Workflow image-to-code hoạt động thế nào?
1. Tạo ảnh trước
Generate các màn hình hoặc section website bằng image model, thay vì nhảy thẳng vào code.
2. Chọn hướng visual
So nhiều phiên bản, lấy hero tốt ở bản này, CTA tốt ở bản khác, rồi chốt art direction.
3. Tách asset
Dùng image generation để tạo lại object, icon, texture, mockup ở dạng sạch và có thể dùng trong web.
4. Code từng section
Đưa ảnh + asset + chỉ dẫn rõ ràng cho coding agent, build từng phần rồi screenshot để refine.
Đừng generate một ảnh full page khổng lồ
Một điểm rất đáng nhớ trong thread: không nên tạo một screenshot toàn trang quá dài. Ảnh kiểu đó thường mất chi tiết, bố cục yếu hơn và rất khó recreate chính xác. Cách tốt hơn là tạo từng section: hero, about, product showcase, services, testimonials, CTA, footer.
Điều này nghe nhỏ nhưng ảnh hưởng lớn. Khi mỗi section có đủ không gian, image model có thể xử lý composition tốt hơn. Coding agent cũng dễ copy hơn vì scope nhỏ, ít mơ hồ, ít đoán mò.
Prompt thiết kế phải có gu, không chỉ có chữ “modern”
Leon Lin nói thẳng: “modern” gần như vô nghĩa. Muốn ra thiết kế tốt, prompt phải mô tả được mood và constraints: minimal, editorial, calm, high-end, warm, natural; hoặc playful, structured, student-friendly. Quan trọng hơn, phải nói rõ thứ cần tránh: generic SaaS visuals, fake dashboard cards, gradient blobs, overdesigned AI aesthetics.
Ở đây có một nuance hay: “be creative” trong prompt code thường dễ làm layout rối, nhưng trong prompt ảnh lại có thể hữu ích nếu đi kèm ràng buộc. Ví dụ: sáng tạo hơn, nhưng vẫn realistic, premium, clean và dễ implement.
Asset mới là thứ kéo chất lượng lên
Một website đẹp thường không chỉ đẹp vì CSS. Nó đẹp vì có asset đúng: ảnh sản phẩm, 3D object, illustration, texture, icon hoặc device mockup. Nếu asset yếu, frontend sẽ yếu dù layout có gọn.
Workflow được đề xuất là: upload ảnh section, yêu cầu model “generate and extract” asset cần dùng, không chỉ crop. Sau đó xử lý background nếu cần transparency, convert sang WebP, rồi đưa vào project. Đây là chỗ nhiều người bỏ qua, nên trang AI-built nhìn vẫn rẻ tiền.
Khi code: kiên nhẫn, từng section một
Đừng đưa cả website cho agent rồi bảo “copy exactly”. Cách đó thường sinh ra HTML/CSS dài, lệch spacing và khó sửa. Hãy bắt đầu từ hero: đưa ảnh hero, asset, tên file, tech stack, project structure và yêu cầu recreate layout.
Sau lần đầu, chụp screenshot kết quả, so với reference, rồi feedback cụ thể: hero image quá nhỏ, headline thấp hơn reference, grid spacing rộng quá, button chưa đúng. Nếu cần, vẽ trực tiếp lên screenshot. Đây là loop quan trọng: reference image → code attempt → screenshot → visual feedback → refine.
Phản ứng cộng đồng: nhiều người thấy đây là framework thực dụng
Thread nhận phản ứng khá tích cực vì nó không bán mộng “AI tự làm web đẹp trong một prompt”. Nó mô tả đúng kiểu làm hơi tốn công nhưng ra kết quả tốt hơn. Một reply nói sẽ dùng nó như framework làm frontend; một reply khác xin thêm bản cho marketing screenshot. Điều đó cho thấy nhu cầu thật: ai cũng muốn dùng AI nhanh hơn, nhưng không muốn sản phẩm nhìn như template rẻ.
Cũng có người nói họ đã làm tương tự từ khi GPT image mới mạnh lên: dùng text-to-image để iterate app design, chọn phần tốt, rồi dùng ảnh làm reference để code. Tức đây không chỉ là mẹo cá nhân, mà là một pattern đang hình thành trong cộng đồng builder.
Nhận định: đây là “design brief” cho thời agentic coding
Điểm hay nhất của image-to-code là nó kéo bước design brief trở lại. Khi dùng agent, nhiều người bỏ qua design brief vì tưởng model sẽ tự hiểu. Nhưng agent càng mạnh, brief càng quan trọng. Nếu brief mơ hồ, model sẽ tạo ra thứ trung bình nhanh hơn. Nếu brief có visual target, model có cơ hội tạo ra thứ đáng dùng.
Dĩ nhiên, workflow này không thay thế taste. Bạn vẫn phải biết chọn ảnh nào tốt, section nào dùng được, asset nào quá giả, spacing nào lệch. AI giúp tăng tốc exploration và implementation, nhưng gu thẩm mỹ vẫn là lớp kiểm duyệt cuối.
Chốt một câu
Muốn frontend AI bớt generic, đừng bắt agent tưởng tượng giao diện từ chữ “modern”. Hãy cho nó một hình ảnh đủ tốt để bám vào, rồi code từng section và refine bằng screenshot.