Ứng dụng AI

Design Words: Công cụ AI biến phong cách và thành phần thiết kế thành bộ prompt hoàn chỉnh

Design Words: Công cụ AI biến phong cách và thành phần thiết kế thành bộ prompt hoàn chỉnh

TL;DR: Thay vì bắt người dùng tự nghĩ prompt, công cụ cho phép họ chọn phong cách và thành phần thiết kế, xem ngay preview trực quan, sau đó copy phần mô tả thành prompt để đưa cho AI agent.

Ý tưởng của Design Words xuất phát từ một trở ngại quen thuộc khi dùng AI để làm website hay sản phẩm: người dùng có thể biết giao diện mình muốn trông như thế nào, nhưng khó diễn đạt bằng các từ đủ cụ thể để agent tạo ra đúng kết quả. Theo Tossell, các agent thường rơi vào những mẫu giao diện mặc định nếu không nhận được chỉ dẫn rõ ràng về bố cục, màu sắc, nút bấm, font chữ hay cảm giác tổng thể.

Thay vì bắt người dùng bắt đầu bằng một prompt dài, công cụ đặt phần nhìn lên trước. Người dùng chọn các style và thành phần giao diện có sẵn, xem thay đổi trên bản preview trực quan, sau đó mới sao chép phần mô tả dạng văn bản để dùng làm chỉ dẫn cho agent AI.

Từ ngôn ngữ thiết kế đến giao diện có thể nhìn thấy

Design Words hoạt động như một “style picker” — bộ chọn phong cách. Người dùng có thể duyệt và kết hợp các yếu tố như theme, góc bo hay không bo, đổ bóng, điểm nhấn trong menu, bảng màu, font và độ đậm chữ. Mục tiêu không phải là thay thế công cụ thiết kế hoàn chỉnh, mà giúp người dùng xác định một hướng giao diện đủ rõ để AI có thể tái tạo tương đối nhất quán.

Tossell nhấn mạnh prompt là đầu ra chứ không phải trung tâm của trải nghiệm. Theo cách tiếp cận này, người dùng cần nhìn thấy một trang web, tinh chỉnh nó bằng mắt và chỉ khi đã gần với lựa chọn mong muốn mới lấy prompt để gửi cho agent. Điều này đặc biệt hướng tới người không có vốn từ chuyên môn về thiết kế nhưng đang tự xây các trang web, công cụ hoặc prototype bằng AI.

Prototype qua nhiều vòng phản biện

Quá trình phát triển cho thấy đây vẫn là một thử nghiệm đang tiếp diễn. Tossell cho biết anh đã tạo 11 phiên bản prototype trong một vòng thử, chọn phiên bản thứ 8 làm nền rồi tiếp tục chỉnh sửa. Anh dùng Pi với Fable 5.1 để brainstorm ban đầu, sau đó dùng Droid của Factory cho phần xây dựng bản chạy thực tế.

Các subagent — agent phụ được giao những nhiệm vụ riêng — được dùng để đưa ra góc nhìn mới và phản biện UX, tức trải nghiệm sử dụng. Một vấn đề được nêu ra là các lựa chọn điều khiển ban đầu chưa tạo ra khác biệt thị giác đủ rõ, trong khi giao diện có nguy cơ trở nên nhiều chữ và khó điều hướng theo kiểu sản phẩm AI thường thấy.

Sau các vòng phản hồi, Tossell cho biết anh đã lược bớt nội dung hiển thị, làm preview lớn hơn và sắp xếp lại giao diện để công cụ dễ dùng hơn. Anh cũng tạo một tệp design.md để mô tả hệ thống thiết kế, nhằm giảm việc phải lặp lại bối cảnh khi giao nhiệm vụ cho nhiều agent.

Image credit: bensbites.com

Nút shuffle vẫn là phần cần cải thiện

Một ý tưởng quan trọng của Design Words là nút shuffle, dùng để tạo nhanh các biến thể trang web theo những tổ hợp style và thành phần khác nhau. Về lý thuyết, cơ chế này có thể giúp người dùng khám phá lựa chọn cho landing page, dự án dữ liệu, website cá nhân hoặc news feed mà không cần biết trước mình đang tìm phong cách nào.

Tuy vậy, Tossell thừa nhận cơ chế shuffle và preview ở thời điểm hiện tại chưa đạt yêu cầu: các phiên bản tạo ra chưa đủ khác biệt về bố cục và cách phối hợp yếu tố. Sau thêm nhiều lần thử nghiệm, anh nói đã có những prototype tốt hơn, nhưng sản phẩm vẫn là work in progress và đang cần phản hồi cùng đề xuất tính năng từ người dùng.

Một quy trình xây dựng bằng nhiều model

Theo Tossell, dự án được thực hiện trong hai ngày làm việc ngắt quãng, qua 38 session bao gồm các luồng subagent và 116 prompt. Anh sử dụng GLM 5.3 cho các thay đổi nhanh và việc sắp xếp lại, còn Fable được dùng cho những thay đổi lớn về thiết kế, UX và xác định đối tượng người dùng. Fable cũng được dùng để điều phối các model khác, trong đó có Luna cho việc mở site và kiểm tra nhanh.

Site được triển khai trên here.now. Do tên miền chính đang đặt trên Cloudflare, Tossell dùng Cloudflare Worker proxy để đưa địa chỉ của công cụ về bensbites.com/design-words mà không phải chuyển toàn bộ hạ tầng triển khai.

Vì sao đáng chú ý?

Design Words phản ánh một vấn đề thực tế của làn sóng “vibe coding”: AI đã giảm rào cản viết code, nhưng việc đưa ra định hướng thị giác vẫn khó với nhiều người. Công cụ này thử đảo thứ tự làm việc từ “nghĩ câu lệnh rồi chờ AI tạo ảnh” sang “nhìn, chọn và chỉnh giao diện trước, rồi mới xuất chỉ dẫn”. Hiệu quả của cách làm đó vẫn cần được kiểm chứng, nhất là ở khả năng tạo ra các biến thể thực sự đa dạng, nhưng nó cho thấy prompt có thể trở thành sản phẩm phụ của một giao diện trực quan thay vì là điểm khởi đầu bắt buộc.