Link bài viết gốc： https://x.com/pamelaaaaa1218/status/2111...
PamelaAI·H · X · @pamelaaaaa1218 · 2026-10-18 00:14
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
Khi xây dựng website cá nhân, nếu để AI làm trực tiếp từ đầu thì hiệu quả thường rất kém và thiếu tính cá nhân hóa. Cách tiếp cận tối ưu nhất là: Tìm các website đẹp mắt → Nhờ AI bóc tách code / ảnh chụp màn hình / từ khóa phong cách → Tổng hợp và tinh chỉnh thành sản phẩm.
Dưới đây là hơn 60 tài nguyên web thuộc 8 nhóm lớn—— Thư viện component, animation, Landing/Hero, UI di động, tương tác, tư liệu phối màu, công cụ tạo website bằng AI, Claude Skills . Hầu hết các tài nguyên này đều có thể lấy trực tiếp code, trích xuất prompt để tái sử dụng, đồng thời mỗi mục đều đi kèm đặc điểm nổi bật và cách dùng; những công cụ đã đổi tên hoặc chuyển đường dẫn cũng có chú thích rõ ràng. Nếu bạn muốn xây dựng website từ con số 0 hoặc tối ưu hóa lặp lại, danh sách này là hoàn toàn đủ dùng, nhớ lưu lại nhé.
01 Tạo tài liệu Feishu mới để làm rõ nội dung
Khi dùng AI để làm website cá nhân hoặc thương hiệu, trước tiên bạn cần giúp AI hiểu bạn là ai và muốn thể hiện điều gì.
Tôi khuyên bạn nên gom tất cả những gì muốn hiển thị như phần giới thiệu bản thân, case study dự án, tư liệu tác phẩm và nội dung dịch vụ vào một tài liệu Feishu, rồi để AI dùng Feishu CLI gọi dữ liệu. Đây là phương pháp tôi học được từ Vương Đại Tiên tại "Feishu Tuyệt Kỹ Hội", cốt lõi là làm rõ mạch nội dung trước khi bắt tay vào làm.
Làm như vậy có hai lợi ích:
- Nội dung không bị phân mảnh, rời rạc : Tránh được phiền toái khi phải sửa lung tung và đồng bộ qua lại nhiều lần, hiệu suất cao hơn rất nhiều.
- Dùng Feishu làm kho tài nguyên và nguồn link : Sau này nếu có thay đổi gì, bạn chỉ cần sửa trực tiếp trong tài liệu rồi gửi link cho AI là có thể cập nhật gần như theo thời gian thực; AI cũng có thể liên tục dựa vào nội dung này để bảo trì website của bạn.
02 Component: Chọn sẵn các mảnh ghép rồi lắp ráp thành trang web
Nút bấm, biểu mẫu, thanh điều hướng, card — những component nhỏ cấu thành trang này bạn hoàn toàn có thể tìm mẫu có sẵn trước, sau đó giao cho AI ghép nối lại sao cho phù hợp với website của mình.
1. shadcn/ui ｜Component cơ bản · Source code tùy biến được · Style đồng nhất
Các component thông dụng như nút bấm, form, modal/popup khá đầy đủ; source code component có thể đưa trực tiếp vào dự án để tiếp tục chỉnh sửa.
Cách dùng: Trước tiên hãy chọn các component cần thiết, đưa hướng dẫn cài đặt tương ứng cho AI để tích hợp vào dự án, sau đó tinh chỉnh đồng bộ màu sắc, bo góc và kích thước. Rất thích hợp để dựng trước một giao diện cơ bản có phong cách đồng nhất.
2. Aceternity UI ｜Card 3D · Background hiệu ứng ánh sáng · Visual effect
Các hiệu ứng thị giác như đèn rọi (spotlight), chùm sáng nền, card 3D có độ nhận diện rất cao, thích hợp đặt ở màn hình đầu tiên (hero section) hoặc các khu vực hiển thị trọng tâm.
Cách dùng: Trước tiên hãy trải nghiệm hiệu ứng khi rê chuột hay cuộn trang trong phần xem trước, sau đó gửi hướng dẫn cài đặt component cho AI, thay thế bằng hình ảnh và chữ của bạn, rồi tinh chỉnh độ mạnh yếu của hiệu ứng.
3. Magic UI ｜Hiệu ứng chữ · Số nhảy động · Viền chuyển động
Thư viện component animation chủ yếu dựa trên React và Tailwind CSS, rất thích hợp để thêm thắt chi tiết cho tiêu đề hero section, phần hiển thị số liệu và nút bấm.
Cách dùng: Chọn một hiệu ứng chữ, số hoặc viền, xem trước và đọc hướng dẫn tích hợp trên trang component, rồi giao cho AI cài đặt. Sau đó đổi thành nội dung của bạn, tùy chỉnh màu sắc, tốc độ và kích thước, rồi đặt vào khu vực cần tạo điểm nhấn.
4. React Bits ｜Hiệu ứng chữ · Background động · Tham số tùy biến
Bạn có thể chọn các hiệu ứng biến đổi văn bản, animation nền, đồng thời lựa chọn phiên bản code phù hợp với dự án.
Cách dùng: Trước tiên hãy xác định cần thêm hiệu ứng cho đoạn chữ hoặc khu vực nào, sau đó chọn component, xem code và dependency, rồi nhờ AI điều chỉnh copywriting, màu sắc, tốc độ. Rất thích hợp để tạo thêm một vài điểm nhấn hút mắt cho trang.
5. Cult UI ｜Card đặc sắc · Mockup thiết bị · Component shadcn
Cung cấp các component giàu tính thiết kế xoay quanh shadcn/ui; các mẫu card, khung hiển thị thiết bị và animation rất phù hợp để trình bày sản phẩm/dự án.
Cách dùng: Khi giới thiệu dự án app hoặc website, bạn có thể chọn trước một mockup thiết bị hoặc card giới thiệu dự án, thay ảnh chụp màn hình, tên và link vào, sau đó nhờ AI đồng bộ lại khoảng trắng (padding/margin) và tương tác.
6. KokonutUI ｜Component tương tác · Giao diện AI · Khối nội dung
Bao gồm các component như nút bấm, thanh điều hướng, card, đồng thời cũng cung cấp nhiều mẫu tham khảo giao diện sản phẩm AI như khung nhập chat.
Cách dùng: Chọn component theo trang cần làm, xem trước bản demo, rồi đưa hướng dẫn tích hợp chính thức cho AI. Ví dụ dựng xong khung nhập liệu và nút thao tác trước, sau đó thay đổi copywriting, icon và phản hồi sau khi gửi.
7. HyperUI ｜Tailwind CSS · Khối tiếp thị · Component ứng dụng
Phân loại các component Tailwind CSS theo mục đích như website marketing, giao diện ứng dụng, rất phù hợp để dựng nhanh khung cấu trúc trang.
Cách dùng: Khi cần thanh điều hướng, bảng giá hoặc phần FAQ, bạn tìm khối tương ứng rồi copy code, nhờ AI tích hợp theo cấu trúc dự án, sau đó chuẩn hóa font chữ, khoảng cách và màu sắc thương hiệu.
8. Float UI ｜Component responsive · Đa framework · Template website
Cung cấp component và template Tailwind CSS, cho phép chọn phiên bản HTML, React, Vue tùy theo nhu cầu dự án.
Cách dùng: Trước tiên hãy xác định framework dự án đang dùng, sau đó chọn phiên bản phù hợp cho thanh điều hướng, phần giới thiệu đội ngũ hoặc khối biểu mẫu. Sau khi tích hợp, thay nội dung của bạn vào và kiểm tra xem trên điện thoại có cần xuống dòng hay chỉnh lại bố cục không.
9. Park UI ｜Design System · Ark UI · Panda CSS
Xây dựng các component dựa trên Ark UI và Panda CSS, thích hợp để thiết lập một bộ quy chuẩn giao diện đồng nhất cho dự án.
Cách dùng: Trước tiên hãy đọc hướng dẫn cài đặt theo framework của dự án, tích hợp các component cần thiết như nút bấm, input, popup, rồi tinh chỉnh đồng bộ màu chủ đề, kích thước và khoảng cách. Với các dự án có sẵn, hãy nhờ AI kiểm tra trước xem có tương thích để tích hợp giải pháp này không.
10. Tailwind UI ｜Nay là Tailwind Plus · Khối giao diện chính thức · Template trả phí
Hiện có tên là Tailwind Plus , là kho tài nguyên component và template chính thức từ Tailwind, phù hợp cho những ai muốn sử dụng trực tiếp các bộ thiết kế hoàn chỉnh.
Cách dùng: Hãy xem trước template và các khối giao diện để xác nhận xem có đáp ứng đủ nhu cầu website hay ứng dụng của bạn không; khi cần dùng tài nguyên trả phí, hãy mua gói tương ứng rồi giao cho AI thay thế copywriting, tư liệu và cấu trúc trang, đồng thời giữ nguyên bộ style có sẵn.
11. shadcn blocks ｜Khối giao diện chính thức · Sidebar điều hướng · Đăng nhập và trang quản trị
Đây là trang Blocks chính thức của shadcn/ui, hoàn chỉnh hơn nhiều so với từng nút bấm đơn lẻ, cho phép bạn tham khảo trực tiếp cấu trúc của cả một phân đoạn trang.
Cách dùng: Khi cần trang đăng nhập, sidebar hay layout trang quản trị, hãy xem trước khối tương ứng, thêm vào dự án theo hướng dẫn cài đặt, sau đó thay menu, các trường trong form và dữ liệu thành của bạn.
12. shadcnblocks.com ｜Trang tiếp thị · Các khối hoàn chỉnh · Hệ sinh thái shadcn
Đây là thư viện khối giao diện bên thứ ba, xoay quanh shadcn/ui để cung cấp các khối trang như màn hình hero, giới thiệu tính năng, bảng giá và đánh giá của khách hàng, giúp bạn dễ dàng dựng nên một landing page hoàn chỉnh.
Cách dùng: Trước tiên hãy liệt kê các khối mà website cần, sau đó chọn theo thứ tự: màn hình hero, dự án/tính năng, đánh giá từ người dùng, thông tin liên hệ. Sau khi tích hợp, hãy đồng bộ lại font chữ và màu sắc để các khối khác nhau trông liền mạch như cùng một website.
13. 21st.dev ｜Bộ sưu tập component · Khối giao diện · prompt cho AI
Bạn có thể so sánh tập trung các component như thanh điều hướng, hero section, card... từ nhiều tác giả khác nhau; mỗi trang component đều cung cấp sẵn prompt để đưa vào các công cụ AI.
Cách dùng: Chọn một khối giao diện, sau khi xem trước thì copy prompt của nó, bổ sung thêm các thông tin: "đặt ở trang nào, thay bằng nội dung gì, giữ nguyên tông màu nào", rồi đưa cho AI tinh chỉnh phù hợp.
14. Origin UI ｜Nay là coss ui · Base UI · Component giao diện cơ bản
Đường dẫn gốc hiện chuyển hướng sang coss ui , bạn có thể tìm kiếm các component giao diện dựa trên Base UI cùng nhiều biến thể khác nhau.
Cách dùng: Khi cần ô nhập liệu, dropdown hay bảng biểu, trước tiên hãy chọn kiểu dáng phù hợp với ngữ cảnh, tích hợp theo tài liệu hiện hành, sau đó nhờ AI bổ sung đầy đủ các trạng thái như disabled, báo lỗi, loading... và đồng bộ style cho toàn trang.
15. Skiper UI ｜Tương tác sáng tạo · Hiệu ứng lộ ảnh · Hiệu ứng chuột
Thiên về các component tương tác giàu tính biểu cảm, cung cấp các hiệu ứng như lộ ảnh (image reveal), kéo thả, cuộn trang và di chuyển theo con trỏ chuột.
Cách dùng: Hãy chọn trước một hiệu ứng phù hợp để trưng bày tác phẩm, trải nghiệm sự thay đổi của nó khi hover, kéo thả hoặc cuộn chuột, sau đó tích hợp theo hướng dẫn của component. Thay bằng tư liệu của bạn, rồi tinh chỉnh biên độ chuyển động và vị trí kích hoạt.
Mỗi loại component này đều có môi trường phát triển được hỗ trợ riêng. Trước khi tích hợp, hãy đưa hướng dẫn cài đặt cho AI kiểm tra xem có tương thích với dự án hiện tại hay không.
03 Animation & 3D: Làm cho các phần tử trên trang chuyển động sinh động
Nếu muốn tự kiểm soát nhịp điệu, thứ tự của animation hoặc bổ sung nội dung 3D có thể tương tác, bạn nên tham khảo nhóm này.
1. Chuyển động ｜Fade in/out · Tương tác kéo thả · Chuyển cảnh bố cục
Rất thích hợp để xử lý animation giao diện như phản hồi nút bấm, mở rộng card, hiệu ứng xuất hiện/biến mất của phần tử, giúp các trạng thái chuyển đổi trên trang mượt mà tự nhiên hơn.
Cách dùng: Chọn một hiệu ứng gần với nhu cầu nhất từ ví dụ chính thức, rồi đưa cả ví dụ lẫn mục tiêu của bạn cho AI. Chẳng hạn: "nhóm card này lần lượt xuất hiện, khi rê chuột vào thì nâng nhẹ lên", sau đó tùy chỉnh tốc độ và biên độ.
2. GSAP ｜Timeline animation · Liên kết cuộn trang · Dàn dựng nhiều phần tử
Thích hợp để sắp xếp một chuỗi animation liên tiếp, chẳng hạn tiêu đề xuất hiện trước, hình ảnh di chuyển theo sau, hình nền thay đổi theo thao tác cuộn.
Cách dùng: Trước tiên hãy xác định rõ "cái nào chuyển động trước, cái nào chuyển động sau, khi nào kích hoạt", sau đó nhờ AI tham khảo ví dụ chính thức để tích hợp; khi cần chuyển động theo thao tác cuộn, hãy thêm plugin cuộn tương ứng.
3. Anime.js ｜Animation JavaScript · SVG path · Biên đạo chuyển động
Có thể điều khiển chuyển động của các phần tử web, đồ họa SVG thông qua code, rất thích hợp cho các animation cục bộ cần tinh chỉnh chi tiết.
Cách dùng: Trước tiên hãy tìm hiệu ứng sát với nhu cầu từ các ví dụ chính thức, chẳng hạn vẽ từng nét icon, tiêu đề lần lượt xuất hiện, sau đó nhờ AI thay thế phần tử mục tiêu, điều chỉnh thời lượng, độ trễ và đường cong chuyển động.
4. LottieFiles ｜Vector animation · Tư liệu animation · Trạng thái loading
Cho phép tìm kiếm và xem trước animation Lottie, đồng thời cung cấp công cụ chỉnh sửa và bàn giao, rất thích hợp cho các animation nhỏ như trạng thái loading hay thông báo thành công.
Cách dùng: Tìm tư liệu theo các kịch bản như loading, success, xem trước nhịp điệu và chỉnh sửa màu sắc, sau đó chọn player tích hợp phù hợp với tech stack của website. Nhờ AI thiết lập kích thước, chế độ lặp lại, cũng như thời điểm bắt đầu hoặc dừng phát.
5. Shadertoy ｜Tác phẩm shader · Hiệu ứng ánh sáng và chất lỏng · Thị giác lập trình
Các nhà sáng tạo trong cộng đồng dùng code shader để tạo hiệu ứng thị giác như noise, chất lỏng, ánh sáng và bóng đổ; bạn có thể vừa xem tác phẩm vừa nghiên cứu mã nguồn.
Cách dùng: Trước tiên hãy chọn một hiệu ứng thích hợp làm nền, ghi lại màu sắc, chuyển động và mật độ bạn thích. Khi cần dùng code công khai, hãy kiểm tra giấy phép của tác phẩm, sau đó nhờ AI điều chỉnh tương thích với trang web, hạ bớt cường độ và kiểm tra hiển thị trên điện thoại.
6. The Book of Shaders ｜Nhập môn shader · Nguyên lý đồ họa · Ví dụ tương tác
Đây là hướng dẫn giải thích nguyên lý shader, rất thích hợp để hiểu cách các hiệu ứng dải màu, hình khối, noise được tạo ra như thế nào.
Cách dùng: Khi quan tâm đến một hiệu ứng nền nào đó, trước tiên hãy đọc chương tương ứng, chỉnh màu sắc và tham số trong ví dụ tương tác; sau khi chốt được hiệu ứng, hãy gửi ví dụ kèm yêu cầu cho AI để tiếp tục hoàn thiện phiên bản phù hợp với trang web.
7. Three.js Examples ｜Ví dụ 3D chính thức · Vật liệu và ánh sáng · Tương tác scene
Danh mục ví dụ chính thức của Three.js, cho phép xem cách triển khai chất liệu, ánh sáng, model 3D và tính năng tương tác theo từng hiệu ứng.
Cách dùng: Trước tiên hãy tìm ví dụ gần gũi với phần giới thiệu sản phẩm của bạn, mở mã nguồn nhờ AI giải thích cấu trúc, sau đó thay thế model, phông nền và góc camera. Hãy dựng một scene nhỏ trước, kiểm tra tải trang và thao tác mượt mà rồi mới đưa vào website.
8. Spline ｜3D trực quan · Tương tác chuột · Nhúng vào web
Bạn có thể chỉnh sửa các vật thể và scene 3D ngay trong trình duyệt, sau đó thiết lập các tương tác như nhấp chuột, di chuyển theo con trỏ chuột.
Cách dùng: Hãy chọn một scene cho phép Remix từ cộng đồng, tùy biến model, màu sắc và tương tác, sau đó thông qua mục Viewer trong phần Export để dán mã nhúng vào website. Cách này rất phù hợp để trưng bày một sản phẩm tương tác hoặc làm điểm nhấn thị giác chính.
9. Rive ｜Animation tương tác · Chuyển đổi trạng thái · Phản hồi nhấp chuột
Kết hợp thiết kế đồ họa, animation và logic tương tác lại với nhau, rất phù hợp để tạo các icon, nút bấm hoặc nhân vật có khả năng phản hồi theo thao tác người dùng.
Cách dùng: Trước tiên hãy thiết kế các trạng thái mặc định, hover, click... rồi dùng máy trạng thái (state machine) kết nối chúng lại; sau khi xuất file, hãy tích hợp runtime tương ứng với framework của dự án, rồi nhờ AI ánh xạ các sự kiện trên trang web vào input của animation.
04 Cảm hứng toàn trang: Khám phá diện mạo tiềm năng của website
Nhóm này rất thích hợp để tìm phong cách tổng thể, cấu trúc nội dung và tham khảo layout. Sau khi chọn được case study ưng ý, tốt nhất bạn nên truy cập website thực tế để trải nghiệm trực tiếp.
1. Godly ｜Hiện là Recent · Website sáng tạo · Nhận diện thương hiệu
Địa chỉ của Godly hiện đã chuyển sang Recent , cho phép bạn duyệt các case study thiết kế web, giao diện, thương hiệu và hiệu ứng chuyển động.
Cách dùng: Trước tiên hãy chọn hai đến ba case study phù hợp với định vị thương hiệu, ghi lại font chữ, bảng màu và bố cục hero section. Hãy mô tả rõ ràng phần bạn muốn học hỏi, rồi nhờ AI kết hợp với nội dung của bạn để dựng nên một phiên bản thiết kế.
2. Land-book ｜Lọc theo ngành · Lọc theo phong cách · Block giao diện
Cho phép tìm kiếm case study theo ngành nghề, loại website và phong cách thị giác, đồng thời cung cấp các block giao diện đã được bóc tách để tham khảo.
Cách dùng: Trước tiên hãy tìm các website gần với mục đích sử dụng của bạn để xác định định hướng tổng thể; nếu chỉ thiếu hero section, bảng giá hoặc phần giới thiệu tính năng, hãy vào mục Sections để tìm block tương ứng, chụp màn hình và đánh dấu bố cục bạn muốn học hỏi.
3. Lapa Ninja ｜Tuyển tập landing page · Phân loại theo ngành · Tham khảo hero section
Thu thập các case study landing page theo danh mục, rất thích hợp để so sánh các cách thể hiện giao diện khác nhau cho cùng một loại hình kinh doanh.
Cách dùng: Trước tiên hãy chọn ngành nghề hoặc mục đích sử dụng sát với bạn, tìm ba case study để so sánh cách tiêu đề, hình ảnh và nút bấm phối hợp với nhau, sau đó sắp xếp các điểm bán hàng của bạn vào theo thứ tự hợp lý.
4. One Page Love ｜Website một trang · Portfolio cá nhân · Cấu trúc nội dung
Tập trung tuyển chọn các website một trang, rất thích hợp để tham khảo cách trang cá nhân, portfolio hoặc trang sự kiện truyền tải trọn vẹn thông tin chỉ trong một trang duy nhất.
Cách dùng: Hãy tìm một case study có mục đích tương tự, liệt kê trình tự nội dung của nó, ví dụ: "Tôi là ai → Trưng bày tác phẩm → Giới thiệu dịch vụ → Thông tin liên hệ", sau đó thay thế bằng nội dung của bạn và nhờ AI dựng nên trang web.
5. SaaS Landing Page ｜Trang chủ phần mềm · Giới thiệu tính năng · Block bảng giá
Thu thập các trang chủ và trang tiếp thị xoay quanh sản phẩm phần mềm, rất phù hợp để tham khảo các block chức năng, bảng giá hay câu hỏi thường gặp (FAQ).
Cách dùng: Khi xây dựng website công cụ hoặc dịch vụ, trước tiên hãy tìm các sản phẩm cùng loại, bóc tách cấu trúc: "Giải quyết vấn đề gì, sử dụng ra sao, có minh chứng nào, bước tiếp theo làm gì", sau đó yêu cầu AI sắp xếp lại trang bằng thông tin của chính bạn.
6. httpster ｜Website độc lập · Trưng bày ảnh lớn · Tham khảo phong cách
Tuyển chọn các website mang phong cách thị giác độc đáo, rất thích hợp để quan sát mối tương quan tổng thể giữa hình ảnh, chữ viết và bố cục trang web.
Cách dùng: Trước tiên hãy chọn case study bạn ưng ý, rồi cụ thể hóa gu thẩm mỹ thành các yêu cầu chi tiết như: tiêu đề lớn, cột văn bản hẹp, hình ảnh tràn viền hoặc phối màu táo bạo; sau đó gửi kèm tài liệu tham khảo cho AI thiết kế, tránh đưa ra yêu cầu chung chung như "làm cho xịn hơn một chút".
7. Awwwards ｜Website đạt giải · Tương tác sáng tạo · Trải nghiệm cuộn trang
Rất thích hợp để chiêm ngưỡng các website có độ hoàn thiện cao, cũng như cách thao tác cuộn chuột, tương tác con trỏ và hiệu ứng hình ảnh phối hợp nhịp nhàng với nhau.
Cách dùng: Hãy truy cập website thực tế tương ứng với case study để trải nghiệm trọn vẹn thao tác cuộn và tương tác, chọn ra một chi tiết bạn muốn học hỏi, rồi mô tả lại cho AI theo quy tắc: "Thao tác nào sẽ kích hoạt thay đổi gì".
8. CSS Design Awards ｜Website đạt giải · Thiết kế thị giác · Trải nghiệm tương tác
Tôn vinh các tác phẩm xuất sắc về mặt thị giác, trải nghiệm người dùng và tính đổi mới sáng tạo thông qua bình chọn website, rất thích hợp để tìm kiếm những cách thể hiện độc đáo.
Cách dùng: Hãy bấm vào website thực tế của case study để trải nghiệm, chọn một chi tiết liên quan đến nội dung của bạn (ví dụ như hiệu ứng mở menu điều hướng hoặc chuyển đổi phân đoạn), mô tả rõ điều kiện kích hoạt cùng hiệu ứng thay đổi, sau đó nhờ AI làm bản mẫu thử nghiệm trước.
9. SiteInspire ｜Lọc theo phong cách · Loại website · Tham khảo bố cục
Sắp xếp các case study web theo tiêu chí phong cách, thể loại..., giúp bạn dễ dàng thu hẹp phạm vi tham khảo từ hàng loạt website.
Cách dùng: Trước tiên hãy lọc theo mục đích sử dụng như portfolio, trang web cá nhân..., sau đó so sánh kích thước chữ, hệ thống lưới (grid) và tỷ lệ hình ảnh giữa các case study. Giữ lại cấu trúc bố cục phù hợp nhất với nội dung của bạn rồi giao cho AI xây dựng trang.
10. Minimal Gallery ｜Case study tuyển chọn · Phân cấp kiểu chữ · Tỷ lệ khoảng trắng
Rất thích hợp để quan sát chuyên sâu cách phân bổ chữ, hình ảnh và khoảng trắng, đồng thời hỗ trợ tìm kiếm theo danh mục như website cá nhân hay portfolio.
Cách dùng: Hãy chụp lại một phần trang web bạn thích, đánh dấu kích thước tiêu đề, độ rộng văn bản chính và tỷ lệ hình ảnh, rồi yêu cầu AI tham khảo các tương quan này. Cách này rất hiệu quả để cụ thể hóa gu thẩm mỹ của bạn ngay từ đầu.
11. MotionSites ｜prompt thiết kế web AI · Thiết kế hero section · Tham khảo animation
Cung cấp các prompt thiết kế website AI kèm bản xem trước trực quan, cho phép tìm kiếm ý tưởng theo từng block trang như hero section, bảng giá.
Cách dùng: Trước tiên hãy xem bản preview, chọn phương án phù hợp với định hướng dự án, lấy prompt tương ứng rồi bổ sung thương hiệu, copywriting, bảng màu và yêu cầu kỹ thuật của bạn, sau đó đưa vào công cụ dựng web để khởi tạo và tinh chỉnh.
12. Variant ｜Khám phá thiết kế web · Tham khảo phong cách · Đường dẫn chờ xác nhận
Được lưu lại như một cổng khám phá phong cách và thiết kế website. Lần này chưa thể mở bình thường địa chỉ này, tính năng và trạng thái khả dụng hiện tại vẫn chưa được xác nhận.
Cách dùng: Bạn có thể lưu lại liên kết gốc để kiểm tra tính năng thực tế khi truy cập lại được. Nếu hiện tại cần khám phá nhiều phương án giao diện, bạn có thể tạm dùng Google Stitch: hãy mô tả rõ mục đích của trang, định vị thương hiệu và nội dung rồi so sánh các phương án.
05 Giao diện và luồng sản phẩm: Tham khảo cách vận hành của sản phẩm thực tế
Nếu website còn có các tính năng như đăng ký, đăng nhập, tìm kiếm, gói thuê bao, thanh toán..., bạn có thể tham khảo cách xử lý từ các sản phẩm thực tế.
1. Mobbin ｜Sản phẩm thực tế · Tra cứu giao diện · Design pattern
Tuyển tập giao diện và flow của các sản phẩm đã vận hành thực tế, rất thích hợp để so sánh đối chiếu cùng một loại trang thì có những cách triển khai nào.
Cách dùng: Hãy tìm kiếm loại giao diện bạn định làm, chẳng hạn như trang đăng nhập hoặc trang đăng ký thuê bao, so sánh các trường dữ liệu, nút bấm và thứ tự thông tin giữa nhiều sản phẩm, sau đó đúc kết thành yêu cầu cụ thể của riêng bạn để giao cho AI.
2. Page Flows ｜Video quay màn hình thao tác · Chú thích từng bước · Quy trình hoàn chỉnh
Tập trung xem một tác vụ được hoàn thành như thế nào, ví dụ người dùng vào đăng ký từ đâu, sau khi điền xong sẽ thấy gì, bước tiếp theo đi tới đâu.
Cách dùng: Tìm kiếm tác vụ tương ứng, sau khi xem xong một luồng quy trình hãy ghi lại "Lối vào → Thao tác → Phản hồi → Bước tiếp theo", rồi để AI bổ sung các trang và trạng thái cần thiết. Rất phù hợp để chuẩn hóa sự liên kết giữa các trang.
3. screenlane ｜Tham khảo giao diện thực tế · Lối vào trang cũ · Đã sáp nhập vào Page Flows
Ban đầu dùng để thu thập giao diện web và thiết bị di động, sau đó đã sáp nhập với Page Collective thành Page Flows. Liên kết cũ vẫn được lưu lại ở đây, hiện tại bạn có thể trực tiếp dùng Page Flows .
Cách dùng: Khi cần tham khảo trang đăng nhập, đăng ký gói dịch vụ hoặc trang cài đặt, hãy chuyển sang Page Flows tìm tác vụ tương ứng, đối chiếu các trường trong trang, nút bấm và phản hồi thao tác, rồi tổng hợp lại yêu cầu giao diện của riêng bạn.
4. UI Sources ｜Hiện là ScreensDesign · Giao diện App · Video quay màn hình quy trình
Lối vào ban đầu hiện chuyển hướng sang ScreensDesign , thích hợp để quan sát giao diện App thực tế và quá trình thao tác liên tục.
Cách dùng: Mang theo một tác vụ cụ thể khi xem video quay màn hình, chẳng hạn từ lúc mở ứng dụng lần đầu đến khi hoàn tất đăng ký, ghi lại lối vào, thao tác và phản hồi của từng bước, rồi để AI bổ sung các trạng thái trang và điều hướng chuyển trang cho riêng bạn.
5. Refero ｜Sản phẩm thực tế · Web & App · Bố cục thông tin
Thu thập tư liệu tham khảo giao diện sản phẩm thực tế, thích hợp để đối chiếu cách sắp xếp điều hướng, thông tin và thao tác trên những trang có lượng nội dung lớn.
Cách dùng: Trước tiên hãy tìm kiếm trang cụ thể, chẳng hạn dashboard số liệu hoặc cài đặt tài khoản, sau đó đối chiếu phân cấp thông tin của một vài case study. Thay thế các module trong bố cục bằng nội dung và dữ liệu của bạn, rồi để AI dựng thành trang phù hợp với nghiệp vụ.
06 Cảm hứng cục bộ và vi tương tác: Làm tốt từng chi tiết nhỏ
Một nút bấm, một menu hay một animation tải trang cũng đều có thể tìm tư liệu tham khảo riêng biệt.
1. CodePen ｜Xem trước trực tuyến · Thử nghiệm code · Sao chép và chỉnh sửa
Cho phép bạn vừa xem hiệu ứng trang web vừa xem code triển khai, rất phù hợp để nghiên cứu các hiệu ứng cục bộ như nút bấm, animation tải trang, hiệu ứng di chuột (hover).
Cách dùng: Tìm tác phẩm công khai gần với nhu cầu của bạn, Fork một bản sao về, chỉnh trước màu sắc, kích thước hoặc tốc độ animation, sau đó đưa code và dependency cho AI để điều chỉnh khớp với dự án.
2. Codrops ｜Hướng dẫn tương tác · Demo hiệu ứng · Ý tưởng triển khai
Phù hợp để đi sâu từ một hiệu ứng thị giác nhằm hiểu cách tạo ra nó; một số hướng dẫn có kèm bản demo và code mẫu.
Cách dùng: Trước tiên hãy trải nghiệm bản demo hiệu ứng, chọn ra phần cần thiết, sau đó xem kỹ thuật và điểm bắt đầu của code trong bài hướng dẫn. Hãy để AI làm trước một bản mẫu độc lập, sau khi xác nhận hiển thị ổn thỏa mới đưa vào website.
3. UI Movement ｜Cảm hứng tương tác · Tên trang cũ · Chi tiết UI
Đây là trang web lấy cảm hứng từ hiệu ứng động UI đời đầu, sau đó đổi tên thành Screenlane, rồi tiếp tục được sáp nhập tài nguyên vào Page Flows. Mục này lưu lại lối vào cũ, để xem các quy trình hiện tại bạn có thể dùng Page Flows .
Cách dùng: Hiện tại bạn có thể xem nút bấm, menu và phản hồi chuyển đổi ngay trong video quay thao tác thực tế của Page Flows, ghi lại "thao tác nào kích hoạt thay đổi nào", rồi nhờ AI lập trình tương tác phù hợp cho trang web của mình.
4. Dribbble ｜Tác phẩm thiết kế · Bố cục giao diện · Nhận diện thương hiệu
Thích hợp để so sánh cách các designer xử lý màu sắc, card, hình minh họa và cách trình bày giao diện, đồng thời có thể tìm hướng thể hiện thương hiệu.
Cách dùng: Dùng các từ khóa trang như landing page, portfolio, dashboard để tìm kiếm, chọn ra những tác phẩm yêu thích, đánh dấu chi tiết màu sắc hoặc bố cục cụ thể, rồi thiết kế lại bằng nội dung của chính bạn. Tác phẩm trưng bày không nhất thiết phải kèm theo code.
5. Behance ｜Dự án hoàn chỉnh · Thiết kế thương hiệu · Trình bày tác phẩm
Các designer trưng bày thương hiệu, giao diện và thành quả thị giác dưới dạng dự án hoàn chỉnh, giúp bạn nghiên cứu cách triển khai đồng bộ một bộ thiết kế tốt hơn là chỉ xem một hình mockup đơn lẻ.
Cách dùng: Tìm kiếm các dự án gần gũi với lĩnh vực của bạn, quan sát xuyên suốt từ phong cách thương hiệu, phối màu phông chữ cho đến các trang ứng dụng thực tế, chắt lọc các quy tắc có thể học hỏi, rồi để AI dùng tư liệu của bạn tạo ra một bộ thiết kế liền mạch.
07 Phối màu, icon và tư liệu: Thống nhất phong cách toàn trang web
Hãy cố gắng cân nhắc đồng thời màu chủ đạo, font chữ, icon, minh họa và hình ảnh, website tạo ra sẽ dễ dàng duy trì tính nhất quán hơn.
1. CSS Gradient ｜Tạo gradient · Điều chỉnh góc · Mã CSS
Bạn có thể điều chỉnh các điểm màu gradient, vị trí và góc trực tiếp trên trang, đồng thời xem trước hiệu ứng và mã CSS được tạo ra.
Cách dùng: Đầu tiên nhập màu chủ đạo của thương hiệu, sau đó thêm màu phối kèm, điều chỉnh góc gradient và vị trí chuyển tiếp. Khi đã hài lòng thì sao chép CSS, chỉ dẫn AI áp dụng vào background màn hình đầu tiên, nút bấm hay card.
2. uiGradients ｜Gradient có sẵn · Xem trước toàn màn hình · Tổ hợp màu sắc
Rất phù hợp khi bạn chưa có định hướng phối màu cần xem qua các gradient có sẵn, dùng chế độ xem trước toàn màn hình để đánh giá xem sự kết hợp màu sắc có hài hòa hay không.
Cách dùng: Hãy chọn trước một nhóm màu gần với phong cách thương hiệu, sao chép mã màu hoặc CSS, rồi nhờ AI tinh chỉnh độ sáng tối cùng độ trong suốt, áp dụng vào khu vực chỉ định và kiểm tra xem chữ hiển thị có rõ ràng hay không.
3. Coolors ｜Tạo bảng màu · Khóa màu chủ đạo · Trích xuất màu từ ảnh
Thích hợp để tiếp tục phối màu từ một màu sẵn có, hoặc trích xuất bảng màu từ một bức ảnh bạn yêu thích.
Cách dùng: Khi đã có màu logo chủ đạo, hãy nhập và khóa nó lại trước, rồi tạo tiếp các màu phối còn lại; khi chưa có định hướng, bạn có thể lấy màu từ hình ảnh. Sau khi chọn xong, hãy cung cấp mã màu cho AI và nêu rõ màu nào dùng cho background, văn bản và nút bấm.
4. Realtime Colors ｜Xem trước trang web · Thử nghiệm phối màu · Phối hợp font chữ
Đặt trực tiếp màu sắc và font chữ vào trang web mẫu, giúp bạn dễ dàng xem hiệu ứng thực tế khi áp dụng cho tiêu đề, nội dung và nút bấm.
Cách dùng: Điền màu sắc và font chữ dự định sử dụng, cảm nhận trải nghiệm đọc của toàn trang, kiểm tra độ tương phản giữa chữ và nền có rõ ràng không, sau đó xuất cấu hình cần thiết để giao cho AI.
5. TweakCN ｜Chỉnh sửa theme · Hỗ trợ shadcn · Tinh chỉnh trực quan
Thích hợp cho các dự án sử dụng shadcn/ui, cho phép bạn tinh chỉnh và so sánh theme của component ngay trên giao diện trực quan.
Cách dùng: Bắt đầu sửa đổi từ theme gần với thương hiệu của bạn nhất, xem trước hiệu ứng tổng thể của các component như nút bấm, card, rồi áp dụng cấu hình theme vào dự án để toàn bộ trang web dùng chung một phong cách.
6. Hero Patterns ｜Pattern SVG · Background lặp lại · Tùy chỉnh độ trong suốt
Cung cấp các mẫu hoa văn SVG có thể lặp lại trải dài, cho phép tùy chỉnh màu nền trước, màu nền và độ trong suốt.
Cách dùng: Khi muốn background đơn sắc có thêm chút chi tiết, hãy chọn một pattern, đổi màu theo nhận diện thương hiệu, giảm độ trong suốt, sau đó sao chép đoạn CSS background được tạo ra để AI đưa vào khu vực chỉ định.
7. Hero Icons ｜Đội ngũ Tailwind · Icon SVG · Outline và Solid
Thư viện icon do đội ngũ Tailwind CSS phát triển, có thể dùng trực tiếp SVG hoặc tích hợp qua React, Vue...
Cách dùng: Hãy xác định trước nên dùng phong cách outline hay solid, sau đó chọn icon cho thanh điều hướng, phần giới thiệu tính năng và thông tin liên hệ. Cung cấp file SVG hoặc hướng dẫn cài đặt cho AI để đồng bộ kích thước, màu sắc và cách căn chỉnh.
8. Lucide ｜Icon nét mảnh · Phong cách thống nhất · Tùy chỉnh màu sắc & độ dày nét
Các icon tuân theo nguyên tắc thiết kế thống nhất, rất phù hợp cho thanh điều hướng, phần giới thiệu tính năng và nút thao tác.
Cách dùng: Tìm kiếm ý nghĩa cần diễn đạt, sau khi chọn xong icon hãy đồng bộ kích thước, màu sắc và độ dày nét vẽ, rồi cung cấp SVG hoặc cách dùng component cho AI tích hợp, đảm bảo tính nhất quán của icon trên toàn bộ website.
9. Phosphor Icons ｜Đa dạng độ đậm nét · Bộ icon · Phong cách thống nhất
Cùng một icon nhưng cung cấp nhiều độ dày nét vẽ và phong cách hiển thị khác nhau, giúp dễ dàng hòa hợp với nhiều sắc thái trang web từ thanh thoát đến vững chắc.
Cách dùng: Hãy chọn trước một độ đậm nét phù hợp với thương hiệu, sau đó chọn icon điều hướng và tính năng trong cùng bộ đó. Hãy yêu cầu AI giữ nguyên kích thước và nét vẽ đồng nhất, khi cần thì dùng style nổi bật hơn để phân biệt trạng thái đang được chọn.
10. unDraw ｜Minh họa theo ngữ cảnh · Đổi màu chủ đạo · Hình ảnh nhận diện thương hiệu
Cung cấp hình minh họa cho các bối cảnh như công việc, học tập, cộng tác..., bạn có thể đổi màu chủ đạo để phù hợp với website.
Cách dùng: Tìm kiếm chủ đề liên quan đến nội dung trang, đổi màu chủ đạo của hình minh họa thành màu thương hiệu của bạn rồi tải về, đặt vào phần giới thiệu dịch vụ, trạng thái trống hoặc khu vực hướng dẫn.
11. Storyset ｜Minh họa theo ngữ cảnh · Đa dạng phong cách · Đổi màu & tạo animation trực tuyến
Cung cấp hình minh họa theo ngữ cảnh, cho phép chuyển đổi phong cách vẽ, chỉnh sửa màu sắc và background, đồng thời có thể thêm animation ngay trên trình chỉnh sửa trực tuyến.
Cách dùng: Trước tiên hãy tìm kiếm ngữ cảnh theo nội dung dịch vụ, sau đó chọn một phong cách vẽ và đổi màu chủ đạo thành màu thương hiệu. Tải xuống định dạng phù hợp đưa vào phần giới thiệu dịch vụ hoặc khu vực hướng dẫn; nếu cần hiệu ứng động, hãy tinh chỉnh chuyển động của từng phần tử cụ thể.
12. Pexels ｜Ảnh nhiếp ảnh · Tư liệu video · Tìm kiếm theo ngữ cảnh
Có thể tìm ảnh và video theo chủ đề, phù hợp để bổ sung hình ảnh bối cảnh thực tế như nhân vật, không gian, quá trình làm việc.
Cách dùng: Trước tiên hãy xác định hình ảnh cần truyền đạt điều gì, sau đó tìm kiếm bằng từ khóa bối cảnh cụ thể, chọn tư liệu có tone màu tương đồng và dễ cắt cúp, tải xuống theo vị trí sử dụng rồi giao cho AI đưa vào hero section hoặc khu vực nội dung.
13. Unsplash ｜Tư liệu nhiếp ảnh · Ảnh mood · Tìm kiếm theo chủ đề
Tư liệu nhiếp ảnh bao quát từ con người, kiến trúc, thiên nhiên đến bối cảnh làm việc, rất thích hợp để định hình phong cách thị giác cho website.
Cách dùng: Trước tiên hãy tìm một ảnh chính phù hợp cho hero section, sau đó chọn thêm ảnh bổ trợ theo tone màu và bối cảnh tương đồng. Nhắc AI thống nhất tỷ lệ cắt cúp và chừa đủ khoảng trống cho tiêu đề cũng như nút bấm.
08 AI tạo giao diện và dựng website: Hãy hoàn thiện phiên bản đầu tiên trước
Sau khi chuẩn bị xong mục đích của website, nội dung trang và tài liệu tham khảo, bạn có thể bắt đầu với những công cụ này rồi tiến hành chỉnh sửa qua từng vòng.
1. v0 ｜Tạo giao diện · Ứng dụng web · Hệ sinh thái Vercel
Sản phẩm của Vercel, cho phép tạo giao diện web thông qua mô tả và tài liệu tham khảo, tiếp tục bổ sung tính năng, xem trước và xuất bản ứng dụng web.
Cách dùng: Hãy ghi rõ nghề nghiệp, đối tượng khách truy cập mục tiêu, tác phẩm và thông tin liên hệ, đính kèm hình ảnh tham khảo để hoàn thiện trang chủ; sau đó tinh chỉnh từng phần như hero section, khu vực trưng bày tác phẩm và bố cục trên thiết bị di động, kiểm tra kỹ các liên kết rồi tiến hành xuất bản.
2. Đáng yêu ｜Dựng web bằng hội thoại · Chỉnh sửa trực quan · Tích hợp tính năng
Phù hợp để dựng website thông qua trò chuyện, đồng thời có thể tiếp tục điều chỉnh các phần tử trên trang trong bản xem trước, bổ sung biểu mẫu hoặc tính năng tài khoản.
Cách dùng: Trước tiên hãy cung cấp phần giới thiệu bản thân, dịch vụ cung cấp và hành động mong muốn khách truy cập thực hiện để tạo một website thương hiệu đầy đủ nội dung; sau đó điều chỉnh các phần tử trang, thêm form tư vấn và kiểm tra xem có gửi biểu mẫu thành công hay không.
3. Bolt.new ｜Phát triển trên trình duyệt · Chạy xem trước · Chỉnh sửa mã nguồn
Có thể tạo, chạy và chỉnh sửa dự án ngay trên trình duyệt, đồng thời linh hoạt chuyển đổi giữa việc sửa đổi qua trò chuyện và chỉnh sửa code trực tiếp.
Cách dùng: Mô tả rõ các yêu cầu như bộ lọc tác phẩm, giới thiệu dịch vụ, cổng liên hệ để tạo trước một phiên bản có thể chạy được; sau đó click kiểm tra từng trang, nêu cụ thể các vấn đề để công cụ chỉnh sửa, cuối cùng xác nhận và bấm xuất bản.
4. Google Stitch ｜Thiết kế giao diện · Khám phá phương án · Prototype tương tác
Thích hợp để thăm dò hướng đi giao diện của trang web hoặc ứng dụng trước, sau đó sắp xếp sự kết nối và tương tác giữa các trang.
Cách dùng: Nhập yêu cầu trang và tài liệu tham khảo, so sánh các phương án thiết kế khác nhau, sau đó kết nối các giao diện đã chọn thành prototype, tinh chỉnh luồng người dùng rồi bàn giao cho công cụ lập trình tiếp tục triển khai.
5. Figma Make ｜Hệ sinh thái Figma · Prototype AI · Trang web có khả năng tương tác
Có thể tạo prototype tương tác thông qua prompt, đồng thời cũng rất phù hợp để biến thiết kế Figma sẵn có thành các trang có thể thao tác được.
Cách dùng: Giao thiết kế sẵn có hoặc yêu cầu trang cho công cụ, mô tả rõ hành động sau khi nhấn nút, cách thức chuyển trang để tạo phiên bản thao tác được trước, sau đó xác thực từng phần như menu, form biểu mẫu và tính liền mạch giữa các trang.
6. Subframe ｜Canvas thiết kế · Xem trước trên trình duyệt · Coding agent
Kết hợp thiết kế trực quan, bản xem trước trên trình duyệt và coding agent, rất thích hợp để vừa quan sát trang vừa điều chỉnh thiết kế và hiện thực hóa code.
Cách dùng: Trước tiên hãy sắp xếp nội dung và bố cục trang, tinh chỉnh các module trên canvas, sau đó để coding agent đưa các thay đổi vào dự án. Đối chiếu với bản xem trước để tiếp tục chỉnh font chữ, khoảng cách và bố cục trên thiết bị di động.
7. Galileo AI ｜Công cụ giao diện AI trước đây · Đã chuyển sang Stitch · Cổng truy cập cũ vẫn giữ lại
Địa chỉ Galileo AI trước đây hiện sẽ chuyển hướng sang Google Stitch . Hai cổng này hiện trỏ về cùng một công cụ.
Cách dùng: Sau khi mở ra, hãy làm theo quy trình của Stitch: mô tả mục đích, nội dung và phong cách của trang, bổ sung tài liệu tham khảo, so sánh các phương án được tạo rồi chọn một phiên bản để tiếp tục hoàn thiện chi tiết trang và tính tương tác.
09 Skill thiết kế và prompt: Để AI làm việc theo một bộ quy chuẩn thiết kế
Skill có thể hiểu là bộ hướng dẫn công việc dành cho trợ lý lập trình AI, trong đó bao gồm các nguyên tắc thiết kế, danh mục kiểm tra và phương pháp thực hiện. Nhóm này cũng tập hợp các danh mục tra cứu Skill và tài liệu prompt hỗ trợ diễn đạt nhu cầu.
1. UI Skills ｜Thư mục Skill · Tra cứu theo danh mục · Kỹ thuật thiết kế
Đây là thư mục tra cứu các Skill liên quan đến thiết kế, cho phép bạn chọn quy tắc và năng lực tùy theo nhu cầu.
Cách dùng: Trước tiên hãy xác định cần xử lý font chữ, hoạt ảnh, bố cục hay các chi tiết khác, sau đó tìm kiếm Skill tương ứng, bấm vào chi tiết để xem công cụ hỗ trợ và cách cài đặt, rồi chọn Skill cần thiết để đưa vào workflow của bạn.
2. Anthropic frontend-design ｜Thiết kế frontend · Định hướng thị giác · Hiện thực hóa trang
Skill thiết kế frontend chính thức do Anthropic cung cấp, giúp AI cân nhắc về font chữ, bảng màu, bố cục và cách thể hiện thị giác khi xây dựng trang web.
Cách dùng: Làm theo hướng dẫn chính thức để cài đặt và kích hoạt trong công cụ AI có hỗ trợ. Sau đó mô tả rõ mục đích website, định vị thương hiệu và các nội dung bắt buộc để AI kết hợp những yêu cầu này vào việc thiết kế và xây dựng trang.
3. Skill thiết kế pbakaus ｜Impeccable · Đánh giá thiết kế · Tinh chỉnh chi tiết
Có thể tìm thấy các dự án thiết kế như Impeccable trên trang chủ của tác giả; Impeccable cung cấp các chỉ dẫn đánh giá thiết kế và cải tiến dành riêng cho trợ lý lập trình AI.
Cách dùng: Trước tiên hãy cài đặt theo hướng dẫn của dự án, bổ sung thông tin bối cảnh thương hiệu và thiết kế của bạn. Khi trang đã có bản thảo đầu tiên, hãy để AI đánh giá lại hệ thống phân cấp, bố cục văn bản và khoảng cách, sau đó tiến hành sửa đổi từng mục theo thứ tự ưu tiên.
4. Kho prompt z1han ｜Tài liệu prompt · Yêu cầu web · Tham khảo cách diễn đạt
Cung cấp các mẫu prompt tham khảo, rất thích hợp để học cách mô tả cho AI về hướng thiết kế, cấu trúc trang và yêu cầu triển khai kỹ thuật.
Cách dùng: Tìm prompt gần nhất với nhiệm vụ thiết kế web của bạn, giữ lại khung mô tả hữu ích, thay thế toàn bộ thông tin thương hiệu, đối tượng, nội dung và các ràng buộc bằng dữ liệu của chính mình, sau đó gửi cho AI và tiếp tục bổ sung yêu cầu dựa trên kết quả đầu tiên.
Lời kết: Bạn không cần phải dùng hết tất cả các công cụ trên cùng một lúc~ Hãy chọn một công cụ dựng web, một trang tham khảo và một bộ màu sắc để làm ra trang đầu tiên của mình trước, sau đó liên tục lặp lại để cải tiến và hoàn thiệ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