Cầm đồ nghề đúng cách

Kho này bán gì?

Prompt và source code lấy từ dự án ông chú đã giao cho khách thật — không phải template sưu tầm trên mạng về bán lại.

Hỏi AI "làm cho tôi cái website" thì nó trả về trung bình cộng của mọi thứ nó từng thấy: hero căn giữa, ba cái card, gradient phẳng lì. Không phải AI dở — là nó không có gì tử tế để bám vào.

Mỗi món trong kho là một điểm bám: bố cục, chuyển động, hệ màu của một trang đã chạy thật, gói thành prompt (hoặc kèm luôn source). Anh/chị copy về, đổi chữ đổi màu thành của mình — phần khó nhất đã có người làm trước rồi.

Mua rồi dùng thế nào?

Ba việc: lấy prompt về, dán nguyên văn vào AI đang dùng, rồi sửa kết quả theo thương hiệu của mình. AI lo phần thực thi — prompt lo phần chỉ đạo.

1. 01

   Chọn món trong kho

   Món miễn phí copy dùng luôn. Món trả phí xem trước mô tả, bản demo chạy thật và đoạn prompt rút gọn.

2. 02

   Thanh toán qua PayOS

   Chuyển khoản hoặc quét QR — hệ thống tự xác nhận, không chờ duyệt tay. Prompt đầy đủ mở khoá ngay trên web.

3. 03

   Dán prompt vào AI, NGUYÊN VĂN

   Đừng cắt xén hay viết lại — prompt đã kèm ghi chú bố cục, hệ màu và motion cho AI, cắt là mất đồ.

4. 04

   Sửa lại cho hợp thương hiệu

   Đổi màu, đổi chữ, đổi ảnh trên kết quả vừa sinh ra. Prompt viết theo hệ design token nên sửa một chỗ là đổi cả trang.

5. 05

   Full Source thì chạy thẳng, khỏi sinh

   Giải nén .zip, npm install, npm run dev — kèm ghi chú biến môi trường và cách deploy Vercel.

Prompt lẻ với Full Source khác gì nhau?

Prompt là bản chỉ đạo để AI dựng lại trang — linh hoạt, đổi stack được. Full Source là chính code ông chú đã build — tải về chạy ngay, y như bản demo, không qua bước sinh.

Kho có 3 loại hàng. MIỄN PHÍ: prompt công khai, copy dùng luôn. PROMPT LẺ: mua xong mở khoá prompt đầy đủ, nguyên văn. FULL SOURCE: prompt đầy đủ + file .zip dự án Next.js chạy được ngay + ghi chú triển khai.

Chọn prompt khi anh/chị muốn dựng bằng stack khác, hoặc đằng nào cũng sửa nát bố cục — AI dựng thẳng theo ý mình từ đầu. Chọn full source khi muốn đúng cái đã thấy ở demo, chạy được liền, và muốn đọc code thật để học cách người ta làm.

Prompt qua AI thì kết quả mỗi lần sinh có thể lệch nhẹ — đó là bản chất của đường prompt. Source thì không có chỗ cho lệch: tải gì chạy nấy.

Vì sao source lại là Next.js mà không phải framework khác?

Vì hàng của ông chú nhiều animation, mà animation nặng là thứ hay giết SEO nhất. Next.js cho server-side rendering và tách bundle — trang vẫn lộng lẫy với người xem, vẫn đọc được với Google.

Trang immersive kiểu thường gặp là một cục JavaScript to đùng phía client: bot của Google ghé vào, thấy cái div trống trơn, rồi bỏ đi. Chữ nghĩa nằm hết trong JS mà bot không buồn chạy.

Server-side rendering phá thế kẹt đó: markup dựng sẵn từ server, bot nhận được tài liệu hoàn chỉnh có heading có nội dung thật — còn trình duyệt của khách thì "thổi hồn" nó thành bản đầy đủ animation. Tách bundle lo phần còn lại: code motion nặng tải sau khi trang đã dùng được, không chặn màn hình đầu.

Nhờ vậy trang nhiều chuyển động vẫn đạt điểm PageSpeed tốt. Nói trước cho sòng phẳng: không phải món nào cũng tối ưu sẵn 100% — có món anh/chị vẫn cần dặm thêm cho hoàn cảnh của mình.

Nếu anh/chị không dùng Next.js thì đừng ép source vào — đó chính là lý do tồn tại của đường prompt: thiết kế không dính chặt vào framework nào.

Muốn dựng bằng Vue, Astro, WordPress... thì sao?

Hai đường: sinh bản chuẩn trước rồi nhờ AI port sang stack của mình, hoặc thêm một dòng vào prompt bảo AI dựng thẳng bằng stack đó. Đường nào cũng chạy — khác nhau ở chỗ có được nhìn bản chuẩn trước khi biến hình hay không.

Prompt của ông chú viết mặc định cho Next.js + Tailwind, nhưng phần đáng tiền — bố cục, hệ màu, nhịp chuyển động — không dính chặt vào framework nào.

ĐƯỜNG A (chắc ăn hơn): chạy prompt nguyên văn để có bản chuẩn Next.js trước, so với demo cho khớp, rồi đưa kết quả cho AI kèm dự án của mình và bảo: "Dựng lại trang này theo cấu trúc, component và quy ước của dự án tao." Có bản chuẩn để đối chiếu thì lúc port lệch chỗ nào — thường là nhịp animation — nhìn ra ngay.

ĐƯỜNG B (nhanh hơn): thêm một dòng cuối prompt: "Dựng bằng [stack của anh/chị], theo kiến trúc và quy ước của dự án này." Ít bước hơn nhưng không có bản chuẩn để so, nên khâu rà kết quả với bản demo phải kỹ hơn.

Cả hai đường đều cần chạy trong môi trường AI đọc được codebase của mình (Claude Code, Cursor...) — AI không thấy dự án thì code nó viết chạy được nhưng lạc quẻ với phần còn lại.

Chèn source Next.js vào dự án đang có thế nào?

Copy component vào giữ nguyên cấu trúc thư mục, cài package còn thiếu, gộp design token, trỏ route — bốn việc, không có phép màu nào ở giữa.

1. 01

   Tải source từ trang sản phẩm

   Link tải có hạn 1 tiếng — hết hạn vào lại trang là sinh link mới, hàng không mất đi đâu.

2. 02

   Copy component vào dự án, GIỮ NGUYÊN cấu trúc thư mục nội bộ

   Các component import chéo nhau theo đường dẫn tương đối — xáo thư mục là gãy dây chuyền.

3. 03

   Cài các package nó import mà dự án chưa có

   Ghi chú đi kèm liệt kê đủ — thường là motion và vài thứ nhỏ.

4. 04

   Gộp design token vào stylesheet của mình, hoặc scope riêng cho phần mới

   Quyết ngay lúc này, đừng để sau — token trộn nửa vời là nguồn bug màu mè khó lần nhất.

5. 05

   Trỏ một route vào view rồi chạy thử

   So với bản demo trên trang sản phẩm — nhịp animation là thứ hay trôi nhất khi ghép môi trường mới.

Dán prompt vào AI nào?

Ông chú viết và test chủ yếu trên Claude. Model khác vẫn chạy được — nhưng thứ rơi rớt đầu tiên là nhịp chuyển động và độ sâu: giữ được khung mà mất chất.

Prompt là ngôn ngữ có cấu trúc thuần, model coding đời mới nào cũng đọc được. Nhưng model càng yếu càng "nuốt" mất phần tinh: timing animation, lớp lang chiều sâu, sự tiết chế.

Kết quả nhìn đúng bố cục mà phẳng lì, animation cứng đơ? Kiểm tra model TRƯỚC TIÊN — model yếu hoặc cũ là thủ phạm của đa số ca "sao không giống demo". Sau model mới kiểm tới chuyện prompt có bị cắt xén.

"Bản chạy thật" trên trang sản phẩm là gì?

Là chính sản phẩm đang chạy trên một bản deploy riêng, nhúng thẳng vào trang — không phải ảnh chụp, không phải video. Cuộn được, bấm được.

Mặc định khung demo không nhận chuột để khỏi cướp thanh cuộn của trang — bấm "Bấm để tương tác" là nghịch được bên trong, xong bấm "Khoá lại" hoặc phím Esc để thoát ra.

Dữ liệu trong demo là dữ liệu mẫu — gõ gì vào cũng không ảnh hưởng tới ai. Muốn xem thoải mái hơn thì nút "Mở tab mới" đưa thẳng tới bản deploy.

Hàng miễn phí có điều kiện gì không?

Không cần tài khoản, không cần trả gì — nhưng khách vãng lai chỉ copy được 3 lượt mỗi ngày. Đăng ký tài khoản (miễn phí) là copy không giới hạn.

Món miễn phí là hàng thật, không phải bản demo bị cắt xén — ông chú đưa nguyên con để anh/chị thử chất lượng trước khi tin tưởng món trả phí.

Đăng nhập rồi thì mọi lượt copy đều không giới hạn, và món đã tim ❤️ nằm lại trong trang tài khoản để quay lại xem sau.

Mua rồi được làm gì với nó?

Dùng cho dự án thương mại và dự án khách hàng: thoải mái, không cần ghi nguồn. Cấm đúng một thứ: bán lại nguyên si chính prompt hay source đó như sản phẩm của mình.

Anh/chị mua một món, dựng web cho khách, thu tiền khách — hợp lệ. Dùng lại cho nhiều dự án — hợp lệ. Sửa nát bét thành của mình — càng tốt.

Đăng bán lại prompt/source y nguyên, hay đóng gói thành bộ sưu tập cạnh tranh — không được. Sòng phẳng vậy thôi.

Lời khuyên không nằm trong giấy phép nhưng nằm trong lương tâm nghề: đừng ship y nguyên. Sửa cho thành của mình rồi hãy giao khách.

FAQ & xử lý sự cố

Gặp gì lạ thì kiểm tra model trước tiên — đa số ca lệch demo là do model, không phải do prompt.