The Kit: duyệt, xem trước và thêm mô-đun

Trình khám phá có đúng ba cấp, và mỗi cấp đều nằm trong địa chỉ của chính trang, không chỉ trong trạng thái thành phần: lưới danh mục (/projects/kit hoặc /projects/<id>/kit), danh sách mô-đun của một danh mục (thêm ?cat=<key>), và trang chi tiết đầy đủ của một mô-đun (thêm &module=<id>). Nhờ vậy, nút Quay lại của trình duyệt luôn hoạt động đúng, và trang chi tiết của một mô-đun cụ thể là một liên kết thật có thể chia sẻ — gửi cho ai đó thẳng đến "đây là chính xác những gì Biểu mẫu yêu cầu báo giá hoặc ước tính mang lại" thay vì chỉ họ chỗ bấm. Phím Esc quay lại từng cấp một, giống như Quay lại.

Khi mở từ bên trong một dự án (/projects/<id>/kit), trang biết bạn đang xem dự án nào, nên có thể hiển thị những gì đã có trong đó và cho phép bạn thêm trực tiếp vào. Khi mở độc lập (/projects/kit, từ liên kết trên tab Bộ công cụ hoặc truy cập trực tiếp), trang vẫn có ba cấp như vậy nhưng không có nội dung riêng của dự án nào — hữu ích để duyệt trước khi bạn quyết định xây gì, hoặc để cho ai đó xem danh mục mà không cần mở một dự án cụ thể.

Ở đầu lưới danh mục, nút chuyển hai chiều giống như ở mọi nơi khác trong aiKit chia toàn bộ danh mục: Bộ công cụ trang web gồm các phần và tính năng trở thành một phần của chính website hoặc ứng dụng (trang, biểu mẫu, thư viện ảnh, cửa hàng, đặt lịch, SEO); Bộ công cụ kinh doanh gồm các công cụ chạy song song với dự án thay vì nằm bên trong nó (tự động hóa tiếp thị, lập hóa đơn, CRM, công cụ nhân viên, báo cáo). Mỗi ô danh mục hiển thị số mô-đun và huy hiệu "N sẵn sàng ngay" bất cứ khi nào có ít nhất một mô-đun Sẵn sàng ngay (xem bên dưới).

Hộp tìm kiếm phía trên các danh mục khớp với tên hoặc mô tả mô-đun trong TOÀN BỘ danh mục cùng lúc — cả Bộ công cụ trang web lẫn Bộ công cụ kinh doanh, bất kể nút nào đang được chọn — nên tìm "hóa đơn" sẽ thấy kết quả ngay cả khi bạn đang xem Bộ công cụ trang web.

Khi mở từ bên trong một dự án và chỉ khi bạn không đang tìm kiếm, một hàng "Đề xuất cho dự án này" xuất hiện phía trên lưới danh mục khi aiKit có gợi ý thực sự: các quy tắc đơn giản, không dùng AI, khớp với loại dự án (một website được gợi ý biểu mẫu báo giá, biểu mẫu liên hệ, khu trưng bày đánh giá, SEO địa phương và trang câu hỏi thường gặp; cửa hàng trực tuyến được gợi ý giỏ hàng và thanh toán, khôi phục giỏ hàng bị bỏ, và đánh giá sản phẩm; và tương tự với trang đích, ứng dụng, hệ thống quản trị, bảng điều khiển, cổng khách hàng, blog và dự án tự động hóa tiếp thị) cùng vài kết quả khớp từ khóa trong mục tiêu văn bản của dự án (nhắc đến "báo giá," "đặt lịch," "đánh giá," "email," "hóa đơn" hoặc "bán trực tuyến" sẽ hiển thị mô-đun tương ứng kèm lý do ngắn riêng). Những gì đã có trong dự án sẽ bị loại khỏi danh sách, và danh sách được giới hạn tối đa sáu mục.

Mỗi mô-đun mang một trong hai nhãn trạng thái, và cách diễn đạt được cố ý theo nghĩa đen, không mang tính quảng cáo. "Sẵn sàng ngay" có nghĩa là mô-đun thuộc nhóm mô-đun đã được thử nghiệm của công cụ xây dựng — mã thực sự hiển thị một trang thật với dữ liệu mẫu thay cho thông tin của bạn, đúng cùng mẫu mà một website đang hoạt động nhận được. "Được xây dựng cho bạn" có nghĩa là mô-đun là một phần thực sự, đã được lên kế hoạch trong danh mục nhưng chưa có gì hiển thị: chọn nó sẽ thêm vào kế hoạch và tạo một công việc thực tế, và mô-đun sẽ được xây dựng vào mã của website, với thương hiệu và cách diễn đạt riêng, giống như mọi chỉnh sửa AI khác — chỉ là hiện chưa có mẫu đã thử nghiệm sẵn sàng.

Cả hai trạng thái đều không có nghĩa là "không có thật" hay "giả định." Cả hai đều là những thứ aiKit sẽ thực sự xây dựng cho bạn. Điểm khác biệt duy nhất mà nhãn cho biết là bạn có thể thấy hình dạng hoàn chỉnh của nó ngay bây giờ hay phải hình dung nó từ mô tả và sơ đồ.

Khi mở một danh mục, mọi mô-đun trong đó hiển thị dưới dạng thẻ: ảnh thu nhỏ, tên mô-đun, nhãn trạng thái, mô tả ngắn một dòng, hàng nhãn "Phù hợp nhất cho" (tối đa ba), và "Có trong dự án này" nếu đã được thêm (khi bạn đang duyệt bên trong một dự án). Ảnh thu nhỏ của mô-đun Sẵn sàng ngay là bản xem trước trực tiếp nhỏ của trang thật — chỉ được tải khi cuộn tới, và tối đa sáu ảnh thu nhỏ trực tiếp trên màn hình cùng lúc để một danh mục dài không làm chậm trang; mọi thứ vượt quá giới hạn đó hiển thị một ô chờ tải đơn giản cho đến khi thực sự hiển thị. Ảnh thu nhỏ của mô-đun Được xây dựng cho bạn là sơ đồ minh họa được mô tả bên dưới, chỉ nhỏ hơn — ngoại trừ các mô-đun có bản xem trước hoạt động (xem bên dưới), thẻ của chúng hiển thị trang mẫu thật được thu nhỏ, huy hiệu "Bản xem trước hoạt động · N biến thể", và nút "Xem cách hoạt động" thay vì "Xem chi tiết". "Xem chi tiết" mở trang riêng của mô-đun.

Với module Sẵn sàng ngay, phần xem trước là một iframe thật của trang đã kiểm thử, ở kích thước đầy đủ, được đặt trong khung giống cửa sổ trình duyệt nhỏ, kèm nút chuyển Máy tính/Điện thoại để thay đổi kích thước khung thật sự, giúp bạn kiểm tra cách hiển thị trên điện thoại (trên điện thoại thật, nút chuyển được thay bằng nhãn "Xem trước trên điện thoại" và khung mở cuộn tới ngay biểu mẫu, nên bạn thấy các ô nhập chứ không chỉ phần đầu trang). Khung mờ dần ở phía dưới; "Mở toàn bộ bản xem trước" bên dưới sẽ mở cả trang trong tab mới, và chú thích phía dưới ghi rõ tên doanh nghiệp mẫu có dữ liệu đang được dùng. Khi mở trong một dự án, nút "Hiển thị theo màu của trang này" sẽ yêu cầu lại chính bản xem trước đó với màu thương hiệu của dự án (lấy trực tiếp từ các mã #hex được nhập trong ghi chú thương hiệu của bản mô tả) và tên dự án được thay vào, nên bạn thấy gần với những gì trang web thật sự của mình sẽ hiển thị, chứ không phải một mẫu chung chung.

Với module Được thiết kế cho bạn, không có iframe trực tiếp — thay vào đó bạn thấy cùng bản phác minh họa khung giao diện như trong danh sách danh mục, nhưng vẽ lớn hơn: một sơ đồ SVG đơn giản, nét đơn, thể hiện hình dạng bố cục (các ô của biểu mẫu, lưới của lịch, các ô của bảng điều khiển, tùy loại màn hình phù hợp với module đó) kèm vài nhãn ngắn lấy từ dữ liệu xem trước của chính module. Dòng chú thích bên dưới là bắt buộc trên mọi module này và không bao giờ bị xóa: "Minh họa bố cục. Phiên bản của bạn được thiết kế để khớp với trang web của bạn." Dòng này có mặt chính để một bản phác hình dạng không bị nhầm với bản xem trước hoàn chỉnh, đúng thương hiệu.

Bản xem trước hoạt động (2026-10-04): một nhóm module Được thiết kế cho bạn ngày càng nhiều không dùng bản phác nữa mà mở một trang web mẫu đầy đủ, có thể nhấn, hiển thị toàn chiều rộng phía trên phần chi tiết. Cả mười hai module Thương mại điện tử / Cửa hàng trực tuyến đều mở cùng một cửa hàng gốm mẫu, Juniper Kiln, mỗi module tập trung vào phần liên quan của nó: danh mục (lọc, sắp xếp, tìm kiếm, mở sản phẩm và chọn men và kích cỡ — hình ảnh và giá thay đổi), giỏ hàng và thanh toán (thay đổi số lượng, xóa mục, nhập WELCOME10, FREESHIP hoặc GIFT-2580, ước tính phí giao hàng theo mã ZIP, và thanh toán để tới trang xác nhận), tùy chọn thanh toán (thẻ, Trả 4 lần, và các nút ví điện tử), phí vận chuyển, mã giảm giá và thẻ quà tặng, đánh giá sản phẩm (lọc theo số sao hoặc ảnh, đánh dấu hữu ích, viết đánh giá), sản phẩm combo và tiện ích thêm, thuế bán hàng (đổi tiểu bang giao hàng và dòng thuế sẽ thay đổi), tài khoản khách hàng (đăng nhập, mua lại, theo dõi kiện hàng, bắt đầu đổi trả), email đơn hàng (email xác nhận, đã giao, và đã nhận hàng, kèm trang theo dõi hoạt động), đổi trả (tìm đơn hàng, chọn sản phẩm và lý do, nhận nhãn đổi trả), và tồn kho (chế độ Chủ cửa hàng, nơi thay đổi tồn kho sẽ thay đổi những gì khách hàng thấy). Cả mười module Khóa học trực tuyến & Sản phẩm kỹ thuật số đều mở một trang trường học bánh mẫu, Rise & Crumb: phát bài học (tốc độ, phụ đề), đánh dấu hoàn thành, xem vòng tiến độ đầy dần, làm bài kiểm tra, đăng ký từ bản xem trước miễn phí, xem chứng chỉ, đặt câu hỏi dưới một bài học, mua tệp kỹ thuật số, chọn gói khóa học hoặc đánh dấu tiện ích thêm khi thanh toán, và chuyển sang chế độ Chủ sở hữu để đổi tên, sắp xếp lại, thêm hoặc gỡ bài học và đặt thời điểm mỗi tuần mở. Với module lịch phát hành, một dòng Thời gian xem trước phía trên khung có nút Bỏ qua một tuần (và Về hôm nay), để bạn xem các bài học bị khóa mở ra đúng ngày.

Phía trên khung: một hàng lựa chọn cho mỗi biến thể mà module cung cấp (ví dụ Bố cục cửa hàng: Lưới, Danh sách hoặc Nổi bật; Giỏ hàng: Giỏ trượt ra hoặc Trang giỏ hàng, cộng với Thanh toán: Một trang hoặc Từng bước; Quy tắc phát hành: Theo ngày đã đặt, Số ngày sau khi tham gia hoặc Sau khi hoàn thành bài học cuối). Chọn một mục sẽ vẽ lại trang web mẫu theo biến thể đó ngay lập tức và được lưu trong địa chỉ trang (?v=…), nên có thể chia sẻ liên kết tới một biến thể cụ thể. Máy tính và Điện thoại thay đổi kích thước khung để trang web mẫu tự sắp xếp lại như trên điện thoại (trên điện thoại thật, đây là nhãn "Xem trên điện thoại" đơn giản). Đặt lại sẽ đưa trang web mẫu về trạng thái ban đầu. Một hàng ngắn "Việc cần làm" liệt kê những gì nên nhấn đầu tiên, và mô tả của từng biến thể đã chọn nằm dưới khung. Khi ở trong dự án có màu thương hiệu trong bản mô tả, "Hiển thị theo màu của trang này" sẽ đổi màu chính của trang web mẫu thành màu của dự án (chỉ khi màu đó đủ tối để chữ trắng trên nút vẫn dễ đọc).

Không có gì trong bản xem trước hoạt động được gửi tới máy chủ. Không có kết nối thanh toán: thanh toán được ghi nhãn "Xem trước — không tính phí và không gửi đơn hàng," số thẻ là mẫu cố định chỉ đọc, và các nút ví điện tử (Apple Pay, Google Pay, PayPal) chỉ hiện một ghi chú. Không có email nào được gửi, không có đánh giá nào được đăng, và không có gì được lưu; rời khỏi trang sẽ xóa tất cả. Doanh nghiệp, sản phẩm, con người và giá trong mẫu đều được tạo ra. Dòng chú thích dưới khung nói rõ điều này: "Bản xem trước hoạt động với dữ liệu mẫu cho một doanh nghiệp hư cấu. Phiên bản của bạn dùng sản phẩm, giá, cách diễn đạt và thương hiệu riêng của bạn. Không có gì ở đây bị tính phí, lưu hoặc gửi đi." Mọi module Được thiết kế cho bạn khác vẫn hiển thị bản minh họa bố cục.

• Khách truy cập thấy gì — hướng dẫn có đánh số, bằng ngôn ngữ dễ hiểu, về những gì người dùng module thực sự trải nghiệm, từng bước một.
• Bạn nhận được gì — những gì module giao cho chủ dự án (khách hàng tiềm năng được ghi lại ở nơi thật, một trạng thái bạn có thể cập nhật, v.v.).
• Tính năng, và — chỉ với module có các biến thể được đặt tên rõ ràng trong danh mục — một bộ thẻ "Chọn biến thể" có thể chọn ngay trong phần này (thẻ đầu tiên được chọn sẵn, đánh dấu bằng một dấu kiểm nhỏ), để một lựa chọn thực sự (chứ không chỉ là tùy chỉnh nhập tự do) được chọn tại đây thay vì phải gõ thủ công.
• Vì sao quan trọng — lý do thực tế vì sao một doanh nghiệp nên muốn có nó.
• Cách tùy chỉnh (Sẵn sàng ngay) hoặc Biến thể bạn có thể chọn (Được thiết kế cho bạn) — những gì thực sự có thể được làm khác đi.
• Phù hợp nhất với — các nhãn loại hình doanh nghiệp giống như trên thẻ, hiển thị đầy đủ.
• Cách nó được tạo ra — một câu đơn giản nêu chính xác cách mô-đun này xuất hiện (một trang đã được kiểm thử mà engine hiển thị hiện nay, hoặc được AI xây dựng vào trang web trong quá trình build), kèm lưu ý nếu cần tài khoản bên thứ ba như thanh toán hoặc bản đồ.

Ở dưới cùng là "Thêm vào <tên dự án>" (hoặc "dự án của bạn" nếu đang xem mà chưa chọn dự án nào). Nếu mô-đun có sẵn ý tưởng tùy chỉnh, chúng sẽ hiện thành danh sách kiểm trước — có nhãn "Gợi ý tùy chỉnh" với mô-đun Sẵn sàng ngay, hoặc "Chọn các biến thể bạn muốn" với mô-đun Được xây dựng cho bạn — và việc chọn bất kỳ mục nào sẽ đưa đúng dòng đó vào nội dung được gửi đi, chứ không chỉ là một ô đánh dấu im lặng.

Với mô-đun có bản xem trước hoạt động, bảng thêm nằm ở cột bên trái, dưới bản xem trước, và bắt đầu bằng "Biến thể của bạn" — biến thể được chọn trong các hàng lựa chọn của bản xem trước (ví dụ "Giỏ hàng: Trang giỏ hàng · Thanh toán: Từng bước"). Bất cứ thứ gì đang hiển thị trong bản xem trước khi bạn nhấn Thêm sẽ được ghi lại: nó được lưu vào bản tóm tắt của dự án cùng mô-đun đó, và mục công việc ghi "Biến thể: …" để người xây dựng làm đúng bố cục đó. Mô-đun cũng có các tùy chọn được đặt tên trong phần Tính năng sẽ hỏi "Điều gì quan trọng nhất với bạn?" ở đó, để hai lựa chọn không bị nhầm lẫn.

"Điều gì cần khác đi với bạn?" là ô ghi chú tự do, có nút đọc chính tả giống như ở mọi nơi khác trong aiKit, cùng nút "Đính kèm ảnh hoặc PDF" (chỉ hình ảnh và PDF, tối đa 2,5 MB mỗi tệp) cho logo, ảnh tham khảo hoặc bảng thông số — các tệp đính kèm hiện thành thẻ có thể xóa ngay tại đó. Nếu mô-đun có những câu hỏi cụ thể cần được trả lời để xây dựng tốt, chúng sẽ hiện dưới "Chúng tôi sẽ hỏi bạn", mỗi câu có một ô văn bản tùy chọn riêng, để bạn có thể trả lời ngay từ đầu thay vì phải chờ được hỏi sau.

"Thêm vào kế hoạch" luôn có sẵn khi bạn đang ở một dự án thực: nó ghi lựa chọn vào bản tóm tắt của dự án (cùng kế hoạch mà màn hình Kế hoạch trang web và trang dự án đọc) và tạo một mục công việc thực, dành cho đội ngũ, trong tab Phản hồi, được đánh dấu "Đang chờ chúng tôi", giống hệt mọi yêu cầu khác. "Thêm và xây dựng ngay" xuất hiện cạnh đó chỉ khi dự án đã có tệp thực để chỉnh sửa — lần xây dựng đầu tiên đã hoàn tất, hoặc trang đã được đưa lên mạng; nó thực hiện hai việc trên rồi ngay lập tức chạy mục công việc đó qua cùng trình biên tập AI mà Sửa bằng AI sử dụng, không có hàng đợi riêng. Nếu cố thêm một mô-đun đã có trong dự án, yêu cầu sẽ bị từ chối hoàn toàn với thông báo đơn giản "đã có trong dự án này" thay vì tạo bản sao trùng lặp.

Sau khi gửi, một thông báo xác nhận sẽ thay thế các nút bằng kết quả thực tế — thông báo đơn giản "Đã thêm vào kế hoạch dưới dạng mục công việc", hoặc với yêu cầu xây dựng ngay, trạng thái thực tế (đã bắt đầu, hoặc lý do cụ thể khiến không thể bắt đầu, như đang tạm giữ để chờ duyệt trước) — cùng hai liên kết trực tiếp đến "Mở kế hoạch" và "Xem yêu cầu", để bạn không bao giờ phải tự hỏi nó đã đi đâu.

Tại /projects/kit — đăng nhập thực tế giống như phần còn lại của bảng điều khiển dự án được lưu trữ, không cần dự án — mọi thứ hoạt động y hệt, cho đến khi bạn thử thêm thứ gì đó. Nhấn "Thêm vào dự án" (nút hiển thị như vậy thay vì "Thêm vào kế hoạch" khi chưa tải dự án nào) sẽ mở "Thêm vào dự án nào?", một bộ chọn nhỏ liệt kê mọi dự án trong tài khoản của bạn. Chọn một dự án và bạn sẽ được đưa thẳng đến Kit Explorer của dự án đó với đúng mô-đun ấy vẫn đang mở, sẵn sàng để hoàn tất việc thêm. Nếu bạn chưa có dự án nào, bộ chọn sẽ nói rõ điều đó và đưa ra liên kết trực tiếp "Bắt đầu một dự án →" thay vì để bạn bị kẹt.