Bạn biết không, tôi đã từng thức trắng đêm vật lộn với một cái nút. Không phải nút bấm hạt nhân, mà là cái nút “Submit” tưởng chừng đơn giản. Căn lề, chỉnh padding, đổi màu hover… CSS nhấn chìm tôi trong cảm giác bất lực. Tôi là developer – kẻ nói chuyện với server bằng giao thức, giải thuật phức tạp như ăn cơm, nhưng giao diện web? Nó như trò đùa nghiệt ngã của vũ trụ. Rồi tôi gặp Onlook – hay còn gọi là “The Cursor for Designers”. Và mọi thứ thay đổi.
1. Đây Không Phải “Cứu Cánh” – Đây Là Cuộc Cách Mạng
Hãy quên đi câu chuyện “tool cho dev không biết design”. Onlook là tư duy mới: Visual Vibecoding. Bạn không viết code UI, bạn cảm nó bằng trực giác:
Kéo thả? Có.
Chỉnh CSS bằng chuột? Có.
Vừa làm vừa chửi thề vì sung sướng? Hoàn toàn.
Nó như chơi Lego: Bạn lắp ghép khối màu (components), xoay chỉnh vị trí (layout), rồi nhìn thành quả hiện ra ngay trước mắt – mã React/Tailwind sạch sẽ nằm chờ trong codebase. Không Figma, không Photoshop, không “anh designer ơi cứu em!”.
“Trời ơi, tôi vẽ ra cái sidebar xong, nó tự sinh code?!” – Dev nào đó sau 10 phút dùng Onlook.
2. Cứ Tưởng Phép Màu – Hóa Ra Công Nghệ Thật
🔥 Sống Lại Với “Visual Vibecoding”
Thao tác trực tiếp trên DOM: Click vào button trên trình duyệt → chỉnh border radius bằng thanh trượt → code Tailwind tự update. Không refresh, không reload.
AI làm đồng đội: Gõ “/thêm carousel ảnh travel” → AI sinh component ngay lập tức. Bạn chỉ việc kéo thả chỗ cần đặt.
Xem code bất cứ đâu: Click phải → “Open in VS Code” → file JSX mở ra đúng chỗ cần sửa. Không lạc, không mò.
⚡️ Tích Hợp “Độc”
Next.js + Tailwind: Cặp bài trùng được Onlook ôm ghì. Khởi tạo dự án bằng
npx onlook createlà xong.Supabase, Auth0: Kéo thả form đăng nhập → tích hợp Supabase authentication chỉ bằng 3 click.
Host mọi nơi: Export code → deploy lên Vercel/Netlify. Không lock-in, không bí mật.
Lời khuyên chân thành: Đừng dùng khi bạn… sợ cảm giác “ôi dễ quá, mình giỏi vậy sao?”
3. Lợi Ích Thật – Không Phải Quảng Cáo Rỗng
Tiết kiệm 4 tiếng/ngày: Không còn cảnh “Figma → chuyển code → ngồi sửa lỗi căn lề”.
Designer trong bạn thức tỉnh: Tôi – thằng dev chân đất – giờ tự tin làm landing page startup không thua kém agency.
Học UI/UX bằng… sai: Kéo thả → thấy xấu → chỉnh → hiểu ngay “À, margin này phải lớn hơn padding!” – Trực quan hơn bất kỳ khoá học nào.
4. Nhược Điểm: Đừng Ảo Tưởng Thành “God of UI”
Onlook không phải phép màu vô hạn:
Tailwind là “xương sống”: Bỏ Tailwind? Coi như… tự cầm dao đâm chân.
Complex logic vẫn cần tay: Animation phức tạp, state management rối rắm – bạn vẫn phải tự code. Nó chỉ cởi trói phần giao diện tĩnh.
Community còn non: Ít template hơn Webflow, plugin chưa phong phú. Nhưng nhìn 18k stars trên GitHub (github.com/onlook-dev) thì biết: Cộng đồng đang lớn dần!
5. So Sánh “Máu Mặt” Với Đối Thủ
| Công Cụ | Điểm Mạnh | Điểm Yếu Chí Tử | Dành Cho Ai? |
|---|---|---|---|
| Onlook | Sinh code React sạch | Phụ thuộc Tailwind | Dev muốn tự design |
| Webflow | Mạnh animation | Code “đóng”, khó tùy biến | Designer không biết code |
| Figma | Collaboration tuyệt vời | Xuất code = đồ bỏ | Team có designer riêng |
| V0 (Vercel) | AI mạnh, tích hợp sẵn | Đắt, không mã nguồn mở | Startup có ngân sách |
“Dùng Onlook như tập xe đạp: Khi đã vững, bạn vẫn cần đạp (code) để đi xa.”
6. Tương Lai: Khi “Visual Vibecoding” Thống Trị
AI sẽ “đọc” ý tưởng bạn: Vẽ nguệch ngoạc trên giấy → chụp ảnh → Onlook sinh UI hoàn chỉnh.
Hỗ trợ Vue/Svelte: React giờ, framework khác tương lai gần.
A/B testing trực tiếp: Kéo thả 2 version → Onlook tự chạy test → Báo bạn chọn bản “convert” cao.
7. Lời Từ Trái Tim Của Một Dev Từng “Sợ CSS”
Tôi đã nghĩ mình dốt design cho đến khi dùng Onlook. Nó dạy tôi hiểu bố cục qua việc kéo thả, cảm nhận khoảng cách khi chỉnh margin, và quan trọng – cho tôi sự tôn trọng với nghề design.
Bạn không cần thành designer, bạn chỉ cần công cụ biến trực giác thành code.
Onlook không xoá bỏ ranh giới design – code, nó khiến ranh giới ấy đáng yêu hơn. Với tôi, nó là cây cầu nối giữa logic khô khan và cảm xúc thị giác – thứ tưởng chừng không bao giờ hoà hợp.
“Thử đi. Một ngày bạn sẽ thấy mình ngồi cười khúc khích… vì vừa ‘vẽ’ ra cả một trang web.”
Onlook đang chờ bạn tại:
🌐 onlook.dev
💻 github.com/onlook-dev/onlook
P.S: Nếu lỡ mê, đừng trách tôi khi bạn bỏ cả ngày chỉ để… chỉnh gradient bằng chuột!
