Hack không, đây là AI Hack: Khi tôi nhờ AI thiết kế lại giao diện website và cái kết bất ngờ!
Lê Lân0
Trải Nghiệm Thực Tế: Sử Dụng 100% AI Để Thiết Kế Lại Giao Diện Website Cá Nhân
Mở Đầu
Trong những năm gần đây, nỗi lo về việc trí tuệ nhân tạo (AI) sẽ thay thế con người trong nhiều công việc, đặc biệt là trong lĩnh vực công nghệ, đã trở thành chủ đề nóng tranh luận.
Bản thân tôi từng khá thờ ơ với các cảnh báo ấy, bởi trước đây trải nghiệm với các công cụ AI generative còn nhiều hạn chế, dễ lỗi và không thực sự ấn tượng. Tuy nhiên, từ năm 2024, khi lĩnh vực này có nhiều tiến bộ vượt bậc, tôi đã dành thời gian nghiên cứu kỹ hơn, đặc biệt là áp dụng AI để thay đổi giao diện website cá nhân của mình một cách hoàn toàn tự động. Qua bài viết này, tôi sẽ chia sẻ hành trình tương tác với các Large Language Models (LLMs), những khó khăn gặp phải, kết quả đạt được cũng như những suy ngẫm về vai trò thực sự của AI trong công việc phát triển phần mềm.
Khởi Đầu Với Website Và Công Nghệ Sử Dụng
Stack Ban Đầu
Website cá nhân của tôi được xây dựng vào năm 2021 bằng Angular (phiên bản 7 hoặc 8), với cấu trúc khá cơ bản, theo mô hình component-based, và giao diện lấy cảm hứng từ chủ đề không gian vũ trụ.
Giao Diện Và Thiết Kế Ban Đầu
Phiên bản gốc với phong cách thiết kế đơn giản đã là điểm xuất phát để tôi thử nghiệm việc chuyển đổi hoàn toàn giao diện bằng AI.
Cuộc Hành Trình Với Các LLMs: Claude Và Những Thử Thách Gặp Phải
Bắt Đầu Với Claude 3.7
Tôi bắt đầu với Claude 3.7 bằng prompt yêu cầu:
“Đây là một ứng dụng Angular XX, tôi muốn thay đổi giao diện thành phong cách cyberpunk. Các thư mục được tổ chức theo component, mỗi component tượng trưng cho một trang.”
Tuy nhiên, máy AI nhanh chóng lạc đề: nó tạo ra các file React trong dự án Angular, kèm theo nhiều lỗi phá vỡ cấu trúc.
Phần lớn thời gian là bạn sẽ nhận được các đầu ra không khớp, rối rắm và thậm chí là lỗi nghiêm trọng khi làm việc với các AI chưa đủ độ trưởng thành.
Cố Gắng Điều Chỉnh Prompt
Tôi thêm nhiều thông tin về phiên bản Angular, cấu trúc thư mục, và các file quan trọng — tuy nhiên vẫn không tránh khỏi lỗi giao diện hỏng, sai lệch bố cục, và mã nguồn hỗn độn.
Tình trạng này cho thấy rõ AI chưa thực sự hiểu và áp dụng được best practices trong phát triển web hiện đại.
Những “Delírios” Thường Gặp Của Claude 3.7
- Sinh ra code và thành phần UI không yêu cầu
- Không có cách nào để quay lại, hoàn tác dễ dàng
- Xóa sạch và bắt đầu lại vòng lặp liên tục
- Trùng lặp, lỗi logic, và nhầm lẫn framework
Thử Nghiệm Với Các LLM Khác
Chuyển sang Claude 3.5, tình hình khá hơn với khả năng tuân thủ yêu cầu chính xác hơn. Nhưng đa phần output vẫn còn nhiều lỗi về kỹ thuật, như trộn lẫn CSS và SASS, để JS trong HTML, tên file không hợp lý, và nhiều đoạn comment thừa thãi.
Sau đó, tôi cũng thử thêm Gemini 2.5, GPT o1 và GPT o4mini, nhưng kết quả vẫn là sự không ổn định và đòi hỏi chỉnh sửa thủ công mạnh mẽ.
Kết Quả Cuối Cùng Và Đánh Giá
Giao Diện Mới Sau 40 Prompt
Sau nhiều phiên làm việc mất thời gian và công sức để hiệu chỉnh, giao diện đã tiến bộ về mặt thẩm mỹ, nhưng vẫn còn tồn đọng nhiều vấn đề về mã nguồn, chưa thể sử dụng để triển khai thực tế trực tiếp.
Tác Động Và Nhận Định
AI làm tốt vai trò hỗ trợ ý tưởng thiết kế và tạo khung giao diện nhanh, nhưng chưa thể thay thế vai trò của kỹ sư phần mềm trong việc đảm bảo tính ổn định, hiệu quả và bảo trì cho dự án.
Những Vấn Đề Gặp Phải
Vấn đề | Mô tả |
|---|---|
Chất lượng code thấp | Cần nhiều chỉnh sửa thủ công, thậm chí làm lại toàn bộ |
Lịch sử lệnh hạn chế | Một số LLM không lưu trữ đủ dài khiến việc chỉnh sửa bị ngắt quãng |
Phạm vi kiến thức | AI còn hạn chế trong các ngôn ngữ và framework phức tạp hơn như Elixir, Clojure |
Chi phí sử dụng | Khoảng 8-14 USD cho dự án nhỏ, đội với thao tác nhiều lần |
Những Suy Ngẫm Cuối Cùng
AI Và Tương Lai Phát Triển Phần Mềm
LLMs vẫn chỉ là mô hình xác suất dựa trên văn bản đầu vào và đầu ra mà không có trí tuệ thực sự hay khả năng hiểu biết sâu sắc.
- Kết quả có tính ngẫu nhiên (non-deterministic), thay đổi theo kỹ thuật top-k, top-p.
- Những dự án phức tạp, đa tầng như backend, microservices, CI/CD cần sự can thiệp và hiểu biết chuyên sâu mà AI chưa thể thay thế.
- AI hữu ích nhất khi làm trợ thủ giúp tăng tốc nghiên cứu, viết tài liệu, và tạo cảm hứng sáng tạo.
Lời Khuyên Cho Các Developer
- Đừng đặt quá nhiều kỳ vọng lên AI trong các công việc đòi hỏi độ chính xác và tuân thủ code chuẩn.
- Sử dụng AI như một công cụ hỗ trợ, không phải là người thay thế.
- Không ngừng học hỏi, cập nhật kiến thức để thích nghi với sự chuyển đổi trong công nghệ.
Kết Luận
Dựa trên trải nghiệm thực tế, có thể khẳng định “singularity” vẫn còn xa vời. AI hiện tại vẫn là công cụ hỗ trợ tạo ra các output sơ khởi, nhưng không thể thay thế vai trò của con người trong những công đoạn quan trọng, đòi hỏi sự sáng tạo, hiểu biết tường tận và bảo trì lâu dài.
Tôi khuyến khích bạn đọc hãy thử nghiệm, khám phá các công nghệ AI, nhưng đồng thời cũng cần chuẩn bị kỹ năng để điều chỉnh và kiểm soát chúng hiệu quả.
Nếu bạn quan tâm hoặc có trải nghiệm về LLMs, đừng ngần ngại chia sẻ để cùng nhau tiến bộ.
Tham Khảo
- Rafael H. S. - Personal Website
- Dev.to Article - "My experience with AI modifying my Angular website"
- Nguyên lý hoạt động của LLMs - các bài viết chuyên ngành AI và Machine Learning 2023-2024
June 1, 2024
Loading...