Taste Skill V2 đã ra mắt, website do AI làm liệu còn bị nhận ra ngay từ cái nhìn đầu tiên?

Chuyên mục: WaytoAGI · Tác giả / Nguồn: · Cập nhật:

Tóm tắt cốt lõi: Vẫn đang đau đầu vì website do AI tạo ra quá rập khuôn, thiếu nét riêng? Taste Skill - bộ Skill thiết kế web này sẽ giúp bạn ưu tiên khai thác những chi tiết câu chuyện độc đáo của dự án, sau đó khớp với tư liệu phong cách, đồng thời tự kiểm tra lỗi trang web trên nhiều thiết bị. Bài viết đính kèm nhiều case study đối chiếu, cung cấp sẵn lệnh triển khai và task prompt có thể sao chép trực tiếp. Hãy thử trải nghiệm ngay!

Bản đồ hoạ thông tin (AI tạo)
Bản đồ hoạ thông tin (AI tạo)

Link bài viết gốc: https://mp.weixin.qq.com/s/PxO6TuZFXdahD...

Kim Tiên Sinh là người Triều Tiên à · Official Account · Lão Kim dẫn bạn vọc AI · 2026-10-20 17:04

Bài viết này được chia sẻ lại, bản quyền thuộc về tác giả gốc, toàn văn căn cứ theo link bài gốc

001-a0.jpg
001-a0.jpg

Website do AI làm thường gặp một vấn đề: rõ ràng là các mô hình kinh doanh khác nhau, nhưng trang web trông lại y hệt một khuôn mẫu.

Tiêu đề lớn, đường phân cách mảnh, từng hàng thẻ. Chỉ cần đổi cái tên, quán cà phê dùng được, mà website chính thức của sản phẩm cũng dùng được.

Vì vậy sau khi Taste Skill cập nhật V2, Lão Kim xem xét hiệu quả đầu tiên. Đây là một bộ kỹ năng thiết kế web dành cho các AI lập trình như Claude Code, Codex; nhà phát triển đã tung ra một bộ ảnh đối chiếu quán cà phê: Cùng một AI, cùng một prompt, chỉ khác nhau ở chỗ có cài Skill hay không.

Khi chưa cài, AI để tên quán to khổng lồ, chữ trắng nền xanh, xung quanh viền các đường nét mảnh.

002-a1.jpg
002-a1.jpg

Sau khi cài V2, một hạt đậu lớn đi kèm hai hạt đậu nhỏ trở thành nhân vật chính của trang web. Cuộn trang xuống dưới, các hạt đậu cũng chuyển động theo.

003-a2.jpg
003-a2.jpg

Tôi thích phiên bản sau hơn, lý do nằm ở chính ba hạt đậu này.

Quán này do một người cha và hai con trai vận hành, chủ quán mang họ Bohne, trong tiếng Đức có nghĩa là hạt đậu. Một lớn hai nhỏ, vừa khắc họa được họ của gia đình, vừa thể hiện được tình phụ tử.

Thứ tôi muốn AI tạo ra chính là những trang web mang đậm dấu ấn riêng như thế này.

Nó làm rõ trước xem quán của bạn có điểm gì đặc biệt

Taste Skill bản cũ dựa vào 3 tham số để kiểm soát bố cục, hiệu ứng động và mật độ thông tin. V2 đã đổi sang cách làm mới: trước khi bắt tay vào làm, để AI tổng hợp thông tin dự án trước: tên gọi có ý nghĩa gì, quán mở ở đâu, bán gì, có những bức ảnh nào, chi tiết nào là độc nhất của quán này.

Khi đọc ghi chú cập nhật, tôi thấy trình tự này rất chuẩn xác.

Nếu chỉ bảo AI làm web cho một quán cà phê, nó rất dễ đưa cho bạn tách cà phê, hạt cà phê và phông nền màu nâu. Khi đưa thêm chi tiết người cha cùng hai con trai mở quán vào, nó mới có cơ hội nghĩ ra ba hạt đậu như lúc nãy.

Tiếp theo mới đến bước chọn định hướng thiết kế. Nhà phát triển Taste Skill đã tổng hợp kho tư liệu từ 247 website trưng bày thiết kế, đúc kết ra 20 phong cách định hướng.

Script mỗi lần sẽ đưa ra 3 gợi ý, để AI kết hợp với đặc thù dự án chọn lấy 1, rồi phối font chữ, màu sắc và bố cục.

Trong bản demo của nhà phát triển, hình ảnh hạt đậu trong tên quán trở thành họa tiết đồ họa lặp lại xuyên suốt trang, ngay cả ảnh chụp cũng được lồng vào khung viền hình hạt đậu.

004-a3.jpg
004-a3.jpg

Cùng một bộ Skill đó khi làm web cho sự kiện âm nhạc, phong cách hình ảnh lại thay đổi hoàn toàn. Trang sự kiện đêm mà nhà phát triển công bố đã đặt ngày diễn ra sự kiện vào trong bức ảnh phong cách công nghiệp cổ điển, với máy móc, khung thép và những con số kích thước lớn phủ kín màn hình.

005-a4.jpg
005-a4.jpg

Việc phiền toái như tìm ảnh cũng giao hết cho AI

Nhưng muốn làm ra trang web như vậy, chỉ có ý tưởng thôi là chưa đủ, mà phải có tư liệu.

V2 ưu tiên sử dụng ảnh riêng của dự án. Nếu trong tay không có ảnh, nó sẽ tìm hình ảnh và video liên quan trong các kho lưu trữ mở, bộ sưu tập bảo tàng; khi tải về sẽ ghi lại tác giả gốc, nguồn và thông tin bản quyền.

Tư liệu mà nhà phát triển trình bày trong bản demo vừa có bản đồ cổ, ảnh công nghiệp, vừa có vân gỗ và ảnh cận cảnh hạt cà phê.

006-a5.jpg
006-a5.jpg

Phần giới thiệu quá trình rang cà phê của quán là một ví dụ điển hình.

Trang web do nhà phát triển cung cấp đã đặt 4 giai đoạn: hạt nhân xanh, nổ lần một, kết thúc rang và làm nguội cạnh nhau; màu sắc hạt đậu và thiết bị đều có tư liệu thực tế để xem.

007-a6.jpg
007-a6.jpg

Lão Kim thấy điều này rất thiết thực với những nhóm nhỏ chỉ có trong tay một bản copywriting giới thiệu.

Viết web và tìm ảnh minh họa có thể gộp chung vào một nhiệm vụ để thực hiện, AI khi chọn ảnh cũng hiểu rõ đoạn này rốt cuộc muốn truyền tải điều gì.

Viết mã xong, nó còn phải tự mở trang web lên xem lại một lượt

V2 còn một điểm thay đổi mà tôi đánh giá rất cao: Sau khi làm xong, AI phải tự mở trang web, xem ảnh chụp màn hình, rồi quay lại chỉnh sửa.

Tiêu đề bị dồn thành 4 dòng, chữ đè lên hình ảnh, nút bấm hiển thị đẹp trên máy tính nhưng sang điện thoại lại tràn ra ngoài màn hình... những vấn đề này chỉ nhìn code thì rất khó phát hiện.

Nó sẽ khởi chạy trình duyệt, kiểm tra theo 3 kích thước chiều rộng tương ứng 1440, 768 và 390 pixel, bao quát cả máy tính, máy tính bảng và điện thoại.

Script sẽ kiểm tra lỗi tràn viền, che khuất, kích thước font chữ; AI sau đó xem ảnh chụp màn hình, chọn ra 3 vấn đề nghiêm trọng nhất để sửa, tối đa thực hiện 3 vòng lặp.

008-a7.gif
008-a7.gif

Nhà phát triển Taste Skill còn đưa các lỗi thiết kế phổ biến như tag nhỏ, đường phân cách mảnh, gradient và bóng đổ vào quy tắc kiểm tra.

Ở vòng kiểm tra cuối cùng, cả 3 trang V2 đều không có hạng mục nào không đạt, trong khi các trang tạo theo mặc định có từ 8 đến 13 hạng mục không đạt chuẩn.

Tôi cũng đã xem đánh giá mù về thẩm mỹ do nhà phát triển công bố.

Ở 3 đề bài của vòng cuối, V2 thắng 2 đề, điểm trung bình là 7,7 điểm, trong khi khi chưa cài Skill là 7,8 điểm. Điểm số do model chấm vẫn chưa tạo ra khoảng cách rõ rệt.

Điều tôi đánh giá cao là nó buộc AI phải làm thêm vài bước: tìm đặc điểm dự án, tìm tư liệu, kiểm tra thành phẩm.

Ba hạt đậu của quán cà phê có sức thuyết phục tôi hơn nhiều so với việc chỉ bớt đi vài đường kẻ mảnh.

Người khác áp dụng để làm website thì hiệu quả thế nào?

Ngoài các case study chính thức, tôi còn tìm thêm thử nghiệm V2 mới được 2 người dùng trong cộng đồng công bố vào ngày 15 tháng 10.

Đầu tiên là Luneri. Anh ấy dùng Opus 5.5 để làm trang giới thiệu cho cùng một công cụ quản lý dự án Orbit, chạy thử hai phiên bản: có cài Skill và không cài Skill.

Dưới đây là ảnh bìa gốc trong video đối chiếu của anh ấy. Bên trái chưa cài, bên phải đã cài V2. Ý nghĩa tiêu đề tiếng Anh ở hai bên khá tương đồng: không cần đi hỏi từng người mà vẫn nắm rõ tiến độ dự án.

009-a8.jpg
009-a8.jpg

Bên trái đưa ngay cho bạn một giao diện sản phẩm hoàn chỉnh, thông tin rất tập trung. Bên phải đặt danh sách nhiệm vụ vào giữa, tiêu đề tách sang hai bên, bố cục táo bạo hơn hẳn.

Luneri thích bên phải hơn, cho rằng nó mang phong thái thương hiệu riêng. Lão Kim nhìn ảnh đối chiếu này thì lại thấy mỗi bên có một ưu điểm: bên phải dễ giữ chân người xem, còn bên trái giúp giải thích nhanh hơn phần mềm có những tính năng gì.

Làm sao cho thật khác biệt, và làm sao để người ta nhìn là hiểu ngay, là hai việc đều cần cân nhắc.

Anh ấy cũng công bố thời gian thực hiện và chi phí ước tính cho đợt này: khi chưa cài Skill là 27 phút 30 giây, khoảng 5,64 USD; sau khi cài là 36 phút 19 giây, khoảng 17,58 USD. Đây là số liệu từ bài test của anh ấy, khi làm dự án riêng của bạn, chi phí vẫn phụ thuộc vào model và phương thức tính phí.

Còn một chi tiết nữa, prompt anh ấy gửi cho AI vốn đã rất cụ thể, nêu rõ từ ảnh tham khảo, tính năng sản phẩm cho đến những kiểu thiết kế không mong muốn. Việc mô tả nhu cầu thật rõ ràng vẫn là khâu không thể bỏ qua.

Tiếp tục xem trường hợp của Pratham. Anh ấy dùng Grok 4.7 Extra High Fast trong Grok Build, kết hợp với V2 mới để tạo ra một trang giới thiệu workflow nhóm mang tên OrbitFlow.

010-a9.jpg
010-a9.jpg

Câu tiếng Anh ở màn hình đầu tiên có nghĩa đại ý là “hoàn thành công việc đúng hạn và bàn giao lại cho bạn”. Phía bên phải đặt một vòng tròn màu cam khổng lồ, ở giữa lồng một bản đồ thiên văn cổ.

Bức hình này vì sao lại đặt ở đây, cuộn xuống dưới bạn sẽ hiểu ngay:

Trang web dùng một đường quỹ đạo tròn để minh họa luồng xử lý nhiệm vụ: từ tiếp nhận yêu cầu, soạn thảo, phê duyệt, tài chính, cho đến bàn giao. Nửa dưới trang lại xuất hiện bản đồ thiên thể, các hình khối đồ họa trước sau có sự kết nối liền mạch.

011-a10.jpg
011-a10.jpg

Điểm tôi thích ở case study này là nó không biến mọi màn hình thành những chiếc thẻ giống hệt nhau.

Tiêu đề lớn, workflow, bản đồ thiên văn cổ điển, quả thực khiến người ta nhớ mãi.

Nhưng nếu lấy để làm website chính thức cho mình, tôi sẽ yêu cầu AI sửa lại một câu: Nói rõ ngay từ màn hình đầu tiên rằng đây là công cụ giúp đội ngũ xử lý các công việc lặp đi lặp lại.

Hình ảnh có làm bắt mắt đến đâu thì cũng phải để người lần đầu ghé thăm hiểu bạn đang cung cấp thứ gì.

Nếu muốn thử nghiệm, bạn có thể giao nhiệm vụ như thế này

Bản này chủ yếu dùng để làm các trang giới thiệu ra bên ngoài như cửa hàng, sản phẩm, portfolio.

Trang web cabin studio do nhà phát triển công bố lại sử dụng ảnh rừng cây, cảnh biển và tiêu đề so le.

012-a11.jpg
012-a11.jpg

Trước tiên hãy chuẩn bị Node 22 hoặc phiên bản mới hơn, cùng với Chrome, Edge hoặc Chromium; việc tìm ảnh cần có kết nối mạng. Mở terminal, điều hướng vào thư mục dự án web rồi chạy lệnh này để cài đặt skill chính của V2. Nếu đã có bản cũ thì cũng dùng lệnh này để cập nhật.

npx skills add Leonxlnx/taste-skill --skill "design-taste-frontend"

Nếu có lời nhắc chọn công cụ, hãy chọn Claude Code, Codex hoặc Cursor mà bạn đang dùng. Lệnh chính, tài liệu tham khảo, thư viện thiết kế và script sẽ được cài đặt đồng thời.

Nếu dùng nó để làm trang giới thiệu cửa hàng, tôi sẽ giao toàn bộ tài liệu và yêu cầu của quán cho nó, nhiệm vụ có thể viết như sau:

Dùng Taste Skill V2 để làm một landing page giới thiệu dạng single-page. Tên dự án: [điền tên]. Đối tượng truy cập chính: [điền ai sẽ ghé xem]. Hành động mong muốn khách truy cập thực hiện: [điền đặt lịch hẹn, xem sản phẩm hoặc liên hệ]. 3 điểm đặc biệt nhất của dự án này: [điền các chi tiết thực tế]. Tư liệu hiện có: [đính kèm văn bản, ảnh và tư liệu thương hiệu]. Hãy xác định định hướng thiết kế trước rồi mới dựng trang. Thiếu thông tin hãy hỏi tôi trước, copywriting sử dụng các sự thật tôi cung cấp. Làm xong hãy kiểm tra hiển thị trên máy tính, máy tính bảng và điện thoại, bàn giao kèm ảnh chụp màn hình, nguồn tư liệu và nhật ký sửa đổi.

Giờ mở cửa, địa chỉ, cách đặt lịch, cùng những câu hỏi khách hàng thường thắc mắc đều có thể cung cấp cùng lúc. Ví dụ quán cà phê của nhà phát triển Taste Skill đã đưa các vấn đề đặt bàn, mang laptop làm việc, lựa chọn loại sữa, mang theo thú cưng và thanh toán thành một tập thẻ màu sắc.

013-a12.jpg
013-a12.jpg

Sau khi hoàn thành, hãy yêu cầu nó bàn giao toàn bộ file web, ảnh chụp màn hình trên máy tính, máy tính bảng, điện thoại cùng nhật ký sửa đổi. Nếu bị kẹt ở bước kiểm tra trình duyệt, hãy kiểm tra xem trình duyệt có khởi động được không, phiên bản Node có đáp ứng yêu cầu không. Nếu không tìm được ảnh, hãy kiểm tra kết nối mạng và nguồn tư liệu.

Để chạy hoàn chỉnh một vòng, nhà phát triển Taste Skill ước tính cần 30 đến 45 phút, tiêu tốn hàng trăm nghìn token , chi phí thực tế tính theo model và gói dịch vụ bạn sử dụng.

Lời kết

Sau khi xem xong bản demo và các cập nhật của V2, điều Lão Kim ấn tượng nhất vẫn là quán cà phê chỉ có vỏn vẹn 20 chỗ ngồi đó.

Đối với chủ quán, việc mang họ gì, mở quán cùng ai có thể chỉ là lời tự giới thiệu bình thường. Nhưng khi đưa lên trang web, nó lại trở thành lý do để người khác nhớ đến quán.

Điều này cũng khiến tôi nhận ra rằng khi làm trang web cho riêng mình, rất đáng để dành thêm chút thời gian thu thập những mẩu chuyện nhỏ nhặt mà bình thường ta ngại kể. Cửa tiệm có gì, tại sao lại bán sản phẩm này, khách hàng hay hỏi những câu gì.

AI đã có thể thay bạn chọn font chữ, tìm hình ảnh, thì những chi tiết chỉ riêng bạn biết lại càng trở nên giá trị hơn.

Học tương tác với AI (NotebookLM)

Ngoài đọc , bạn có thể nghe , xem và xem hoạ thông tin ở đầu bài. Bài này còn có bộ công cụ tương tác do AI tạo: Bài kiểm tra trắc nghiệm, Thẻ ghi nhớ, Sơ đồ tư duy, Bản trình bày và Báo cáo chuyên sâu.

Mở không gian học tương tác