Pencil MCP: Biến bản thiết kế thành code trong tích tắc, tăng tốc độ phát triển frontend lên 8 lần

Chào mọi người, tôi là Lương Tiêu, người đang làm sản phẩm ra nước ngoài, sắp đến Tết rồi, trước Tết tôi sẽ đăng một bài viết để chia sẻ với mọi người những thành quả mới nhất gần đây.

Khi làm trang web, làm App, bạn có bao giờ có cảm giác này không:

Muốn làm một trang đẹp, nhưng khả năng thiết kế của bản thân lại không tốt

Thuê nhà thiết kế thì quá đắt, tìm mẫu miễn phí thì lại không phù hợp

Khó khăn lắm mới có được bản thiết kế, nhưng khi chuyển thành code lại gặp một đống vấn đề

Thật lòng mà nói, trước đây khi tôi làm dự án frontend, chỉ riêng việc căn chỉnh style theo bản thiết kế thôi cũng mất cả buổi. Khoảng cách sai lệch 2px, màu sắc không đúng, quên thêm bo tròn... Cứ lặp đi lặp lại, thật là bực mình.

Tin tốt là: Giờ đây đã có Pencil MCP, những vấn đề này cơ bản đều có thể giải quyết được.

Gần đây tôi đã dùng nó để làm một vài trang, và thấy nó thực sự rất tuyệt vời - từ bản thiết kế đến code, hiệu quả tăng lên gấp nhiều lần. Và điều quan trọng nhất là, chất lượng bản thiết kế do AI tạo ra cũng khá tốt, độ chính xác của code cũng rất cao.

Bài viết này sẽ nói về: Pencil là gì, tại sao đáng để sử dụng và làm thế nào để bắt đầu nhanh chóng.

01. Pencil là gì? Giải thích một cách dễ hiểu

Nói một cách đơn giản, Pencil là một công cụ có thể kết nối thiết kế và code.

Quy trình trước đây là như thế này:

Thiết kế bản vẽ trong Figma

Nhà thiết kế chú thích kích thước, màu sắc, khoảng cách

Nhà phát triển viết code từng dòng theo bản thiết kế

Sau khi viết xong, so sánh với bản thiết kế, phát hiện độ chính xác chỉ đạt 70%-80%

Điều chỉnh, trao đổi nhiều lần...

Giải pháp của Pencil là:

Bạn chỉ cần mô tả yêu cầu bằng ngôn ngữ tự nhiên (ví dụ: !

Sau đó, trong hộp thoại AI ở bên phải, hãy cho nó biết bạn muốn thiết kế gì.

Ví dụ:

"Thiết kế cho tôi một trình phát nhạc theo phong cách Apple"

"Tạo một Landing Page đơn giản, tông màu chủ đạo là màu xanh lam"

"Tham khảo phong cách của trang web này, giúp tôi tạo một trang tương tự"

AI sẽ tạo ra bản thiết kế trên canvas. Nếu bạn không hài lòng, bạn có thể tiếp tục yêu cầu nó điều chỉnh:

"Phông chữ quá nhỏ, phóng to một chút"

"Khoảng cách lớn hơn một chút"

"Đổi sang màu dịu hơn"

Điều chỉnh cho đến khi bạn hài lòng.

Bước 4: Tạo mã

Sau khi bản thiết kế hoàn tất, bạn có thể yêu cầu AI giúp bạn tạo mã.

Bạn có thể nói trực tiếp:

"Tạo mã Next.js cho tôi"

"Tạo mã Flutter"

"Tạo mã Vue 3"

AI sẽ tự động tạo mã tương ứng dựa trên bản thiết kế của bạn.

Hiệu quả thực tế:

04. Một số trải nghiệm sử dụng thực tế

Sau khi sử dụng vài lần, tôi có một vài cảm nhận muốn chia sẻ:

1) Mô tả yêu cầu phải cụ thể

Ban đầu tôi sẽ nói "Giúp tôi tạo một trang web", kết quả là những gì AI tạo ra hoàn toàn không phải là những gì tôi muốn.

Sau đó, tôi phát hiện ra rằng mô tả càng cụ thể thì hiệu quả càng tốt.

Ví dụ:

Mô tả không tốt: "Giúp tôi tạo một trang đăng nhập"

Mô tả tốt: "Giúp tôi tạo một trang đăng nhập đơn giản, có Logo ở trên cùng, ở giữa là hộp nhập email và mật khẩu, ở dưới cùng là nút đăng nhập, phong cách tham khảo trang web chính thức của Apple"

2) Có thể tải lên ảnh tham khảo

Nếu bạn thấy thiết kế của một trang web nào đó đẹp, bạn có thể chụp ảnh màn hình và tải lên cho AI để tham khảo.

Bản thiết kế được tạo ra sẽ gần với mong đợi của bạn hơn.

3) Lặp đi lặp lại quan trọng hơn là hoàn thành ngay từ đầu

Đừng nghĩ rằng bạn có thể tạo ra một thiết kế hoàn hảo ngay từ đầu, điều này không thực tế.

Cách đúng đắn là: tạo ra một bản phác thảo trước, sau đó điều chỉnh từng chút một.

Mỗi lần chỉ điều chỉnh một hoặc hai chỗ, ví dụ như "Khoảng cách lớn hơn một chút", "Màu sắc dịu hơn một chút", cách này hiệu quả nhất.

4) Chất lượng mã khá tốt

Tôi đã thử vài lần và thấy chất lượng mã được tạo ra khá cao:

Cấu trúc mã rõ ràng

Độ chính xác của việc khôi phục kiểu dáng cao (98% +)

Bố cục đáp ứng cũng được thực hiện tốt

Về cơ bản, chỉ cần lấy về và sửa đổi một chút là có thể sử dụng được.

05. Một vài điểm cần lưu ý

Mặc dù Pencil rất dễ sử dụng, nhưng cũng có một số điều cần lưu ý:

1) Gu thẩm mỹ vẫn phải dựa vào chính bạn

AI có thể giúp bạn tạo ra bản thiết kế, nhưng đẹp hay không vẫn phải do bạn tự đánh giá.

Vì vậy, hãy thường xuyên xem những thiết kế đẹp để nâng cao gu thẩm mỹ của bạn, để khi sử dụng Pencil, bạn có thể đưa ra những hướng dẫn tốt hơn.

Gợi ý một vài nơi để tìm tài liệu tham khảo thiết kế:

Dribbble

Mobbin (chuyên thu thập UI trên thiết bị di động)

Ảnh chụp màn hình của các trang web xuất sắc khác nhau

2) Tương tác phức tạp vẫn phải tự viết

Pencil phù hợp để tạo các trang tĩnh và tương tác thông thường, nhưng nếu liên quan đến các hoạt ảnh, cử chỉ phức tạp, v.v., bạn vẫn cần phải tự viết mã.

Tuy nhiên, đối với hầu hết các trường hợp, Pencil đã đủ dùng.

3) Chọn đúng mô hình AI rất quan trọng

Tôi đã thử một vài mô hình và thấy Claude Opus 4.5 có hiệu suất hình ảnh tốt nhất.

Nếu bạn sử dụng các mô hình khác, chất lượng của bản thiết kế được tạo ra có thể kém hơn.

06. Dữ liệu so sánh hiệu quả

Cuối cùng, tôi xin chia sẻ một bộ dữ liệu do chính tôi đo lường:

Đối với tôi, giá trị lớn nhất là: chuyển sự tập trung từ "làm thế nào để thực hiện" sang "làm chức năng gì".

07. Tóm tắt

Pencil về bản chất là kết nối thiết kế và phát triển, cho phép bạn điều khiển toàn bộ quy trình bằng ngôn ngữ tự nhiên.

Nếu bạn cũng đang phát triển giao diện người dùng, tạo sản phẩm của riêng mình, tôi thực sự khuyên bạn nên dùng thử Pencil:Độ ổn định chất lượng code: Độ chính xác 98%+, cơ bản không cần chỉnh sửa style

Hỗ trợ đa dạng stack công nghệ: Next.js, Flutter, Vue, v.v. đều dùng được

Điều khiển bằng ngôn ngữ tự nhiên: Dùng ngôn ngữ đời thường để mô tả yêu cầu, AI tự động tạo ra

Cuối cùng, nếu bạn cũng đang làm phát triển độc lập, lập trình AI, hoan nghênh để lại bình luận trò chuyện:

Bạn thường làm thiết kế như thế nào?

Đã dùng Pencil chưa? Hiệu quả ra sao?

Tôi sẽ đọc cẩn thận từng bình luận. Hẹn gặp lại ở bài viết sau.