- Công cụ có thể chuyển đổi HTML của trang web thành mã React hoặc thiết kế Figma
- Người dùng có thể nhập thiết kế hiện có và chuyển thành mã React, hoặc chuyển thành thiết kế có thể chỉnh sửa trong Figma
- Cung cấp tính năng dùng AI để tùy biến và chỉnh sửa các thiết kế hiện có
- Tính năng chính
- Có thể nhập ngay thiết kế hiện có mà bạn thích và chuyển đổi thành mã React có thể dùng cho dự án của mình
- Có thể nhập, chỉnh sửa và làm việc trên các thiết kế hiện có nên không cần bắt đầu từ đầu
- Có thể tận dụng AI để tùy biến và chỉnh sửa thiết kế
7 bình luận
Đánh giá
Khó sao chép toàn bộ website trong một lần.
Càng sao chép các component lớn thì khả năng phát sinh lỗi càng cao, nên phải sao chép riêng các component chính như header, main, article, sidebar, footer, còn layout container thì lập trình viên phải tự viết.
Tính năng styling
Inline mặc định là tạo thẻ style cho từng component hoặc gán thuộc tính style cho từng phần tử HTML, nhưng từ góc độ lập trình viên thì cách này khiến việc bảo trì cảm thấy kém tách biệt khỏi JS và khá lộn xộn.
Tính năng chuyển đổi sang Tailwindcss thực sự rất tốt.
Tính năng tách component
Có thì có, nhưng gần như có thể xem là không có. Thêm vào đó là một lượng CSS nhiều đến phát điên, và khá nhiều component có thể tái sử dụng vẫn bị dùng nguyên dạng HTML.
Vì vậy cuối cùng tạo ra mã JSX dài tới hàng nghìn dòng.
Cập nhật AI
Có thể thay đổi concept thiết kế bằng chat AI, tuy không tạo ra thứ gì quá đột phá như kỳ vọng, nhưng cứ khoảng 3 lần thì có 1 lần ra được thiết kế mới mẻ.
Nhưng vì là tính năng trả phí nên tôi cũng không thử được nhiều lần.
Tạo file tĩnh
Điểm hay là nó gộp các icon bằng kỹ thuật image sprite, tức là hợp nhất các file như SVG hoặc PNG thành một file duy nhất.
Kết luận
Giống như khi dùng AI tạo sinh hiện có,
nó tạo ra "mã nhìn chung ổn nhưng thiếu chi tiết nên lập trình viên vẫn phải chỉnh tay".
Đặc biệt, vì tính năng tách component còn thiếu, nên hiện tại có vẻ nó chỉ hữu ích ở mức "trình trích xuất layout và file tĩnh".
Trước đây với AI như GPT, việc xử lý các vấn đề liên quan đến layout CSS trong thiết kế, thay vì business logic, hơi khó hơn một chút; còn cái này thì tôi nghĩ cần dùng thêm để xem liệu nó có thể bù đắp được khía cạnh đó hay không.
Tại sao phải chuyển HTML sang React(?) vậy?
Ăn cắp ý tưởng UI..
Đỉnh thật...
Hoạt động tốt quá..
À, tuyệt quá.
Ý kiến Hacker News
Sản phẩm thực tế rất hấp dẫn. Chỉ với thử nghiệm cơ bản cũng có thể thấy nó tạo ra thiết kế tinh tế hơn nhiều so với các mô hình LLM thông thường. Tôi dự định sẽ dùng nó cho việc tạo mẫu trong tuần này
Công cụ này là một cách hay để lấy các phần của trang dưới dạng HTML sạch và có thể in được. Ví dụ, giao diện web của Claude không thể in toàn bộ lịch sử trò chuyện mà chỉ in những gì đang hiển thị trên màn hình
Tôi thắc mắc bản quyền của đầu ra từ kiểu công cụ này sẽ ra sao. Vì không phải website nào cũng kèm giấy phép, nên điều này có thể còn mơ hồ hơn cả LLM thông thường
Đây là một tiện ích mở rộng trình duyệt rất hữu ích. Tôi đặc biệt thích việc nó có thể chuyển style sang TailwindCSS. Rất thông minh
Công cụ này thực sự rất tuyệt. Tôi đã thử trên khoảng 10 website và nó hoạt động tốt với khoảng 80% các thành phần trên web
Công cụ thật tuyệt. Thật đáng tiếc khi frontend ngày nay đã trở nên phức tạp đến mức cần đến những công cụ như thế này. Tôi nhớ thời kỳ
view-sourcevà một filestyle.cssduy nhấtTôi đã kiểm tra font của logo Hacker News và thấy nó khác
Làm rất tốt. Tôi muốn biết liệu có kế hoạch làm cho nó tương thích với Firefox hay không
Tôi tự hỏi liệu nó có hoạt động với trang Framer của tôi để tôi có thể tự host hay không
Đây là một cách rất hữu ích để lấy HTML và CSS của website