Điểm nổi bật
- Định vị rõ: Repo tự nhận là “The Cursor for Designers”, nhắm thẳng vào khoảng trống giữa Figma, site builder và coding agent.
- Khả năng chính: Tạo app Next.js từ text hoặc ảnh, import từ Figma hoặc GitHub, chỉnh trực tiếp trong giao diện thị giác rồi phản ánh ngược vào code.
- Điểm khác biệt: Kết hợp AI chat, visual editor và mapping DOM-to-code trong cùng một workflow thay vì tách rời thiết kế và phát triển.
- Độ mở: Dự án Apache 2.0, khuyến khích cộng đồng đóng góp và đã có tài liệu kiến trúc khá rõ.
Biểu đồ
Tóm tắt
Onlook là repo đáng theo dõi vì nó đưa logic “AI-first” sang lớp thiết kế và dựng giao diện web, thay vì chỉ tập trung vào trợ lý code thuần văn bản. Dự án mô tả khả năng tạo app Next.js bằng prompt, chỉnh trực tiếp trên preview, nhập asset và template, đồng thời cho phép nhảy ngược từ phần tử đang nhìn thấy về đúng vị trí trong code.
Điểm chiến lược ở đây là Onlook muốn làm cầu nối giữa designer và developer. Nếu làm tốt, nó có thể rút ngắn chu kỳ từ ý tưởng, mockup đến mã triển khai, đặc biệt ở các team startup hoặc product squad nhỏ.
Chi tiết
Trong làn sóng AI cho lập trình, phần lớn chú ý đang dồn vào coding agent thuần CLI hoặc IDE. Onlook đi theo hướng khác: biến quá trình thiết kế và dựng giao diện thành một vòng lặp liên tục giữa hình ảnh, thao tác trực quan và code thật. Repo tự định vị như “The Cursor for Designers”, và chỉ riêng cách định vị đó đã cho thấy thị trường mà dự án muốn chiếm lấy, tức lớp người dùng không hài lòng với việc phải chuyển qua lại giữa Figma, builder, code editor và công cụ AI riêng lẻ.
README cho thấy Onlook không dừng ở mức chat tạo màn hình. Nó có thể khởi tạo ứng dụng Next.js từ text hoặc ảnh, import từ Figma, import từ GitHub repo, hiển thị preview thời gian thực và cho phép sửa trực tiếp trên browser DOM bằng visual editor kiểu Figma. Quan trọng hơn, hệ thống còn ánh xạ phần tử giao diện về đúng vị trí trong mã nguồn, để khi chỉnh trên bề mặt thị giác, thay đổi có thể phản ánh vào code thật. Đây là điểm rất đáng chú ý, vì phần lớn AI builder thường sinh mã một chiều, còn khâu sửa sâu và duy trì lâu dài lại đẩy về cho lập trình viên.
Về kiến trúc, Onlook dựa trên Next.js, TailwindCSS, tRPC, Supabase, Drizzle, AI SDK, OpenRouter và CodeSandboxSDK. Tập hợp này cho thấy dự án được thiết kế cho web app hiện đại chứ không phải demo đơn giản. Việc hỗ trợ import repo, tạo PR và duy trì code side-by-side với preview cũng mở ra hướng sử dụng thực dụng hơn cho team sản phẩm: designer có thể đề xuất thay đổi, AI hỗ trợ triển khai, còn developer vẫn giữ quyền kiểm soát ở lớp codebase.
Từ góc nhìn chiến lược, Onlook phản ánh một xu hướng đang mạnh dần: AI không chỉ viết code nhanh hơn, mà đang ép quá trình thiết kế số phải dịch sang cấu trúc có thể thao tác được bằng mã. Nếu UI có thể được tạo, sửa và kiểm thử ngay trong một chu trình design-to-code liền mạch, ranh giới giữa designer và frontend engineer sẽ tiếp tục mờ đi. Điều đó đặc biệt quan trọng với startup và nhóm tăng trưởng, nơi tốc độ thử nghiệm quan trọng hơn phân chia vai trò cứng.
Rủi ro nằm ở độ bền của workflow khi dự án phức tạp hơn, nhất là ngoài Next.js và Tailwind. Nhưng ở thời điểm hiện tại, Onlook là một trong số ít repo open source đang thử nghiêm túc việc biến AI-first design thành hạ tầng làm việc thực, không chỉ là video demo đẹp mắt.