Bạn có thể chuyển từ một thiết kế Figma thành một website được triển khai trực tiếp trong một buổi chiều bằng Claude — không cần kinh nghiệm lập trình. Quy trình rất đơn giản: thiết kế trong Figma, xuất hoặc mô tả thiết kế cho Claude, tạo code, triển khai trên Vercel hoặc Netlify. Toàn bộ quá trình không tốn gì nếu bạn sử dụng các gói miễn phí.
Mọi người đang đăng những đoạn "Website 5.000 USD trong 2 giờ" trên X, nhưng hầu hết họ bỏ qua các bước thực tế. Hướng dẫn này lấp đầy khoảng trống đó. Mọi prompt đều được kèm theo, mọi điểm quyết định đều được giải thích, và những sự đánh đổi là thực tế.
Tại Sao Điều Này Hoạt Động Bây Giờ (Và Không Hoạt Động Một Năm Trước)
Một năm trước, việc chuyển đổi thiết kế thành code bằng AI có nghĩa là dán một ảnh chụp màn hình và nhận lại một xấp xỉ thô sơ cần hàng giờ dọn dẹp. Ngày hôm nay, cửa sổ ngữ cảnh 1 triệu token của Claude có nghĩa là bạn có thể cung cấp cho nó một toàn bộ hệ thống thiết kế — màu sắc, kiểu chữ, khoảng cách, chi tiết thành phần — và nhận lại code chất lượng sản xuất khớp chặt chẽ với thiết kế của bạn từ lần đầu tiên.
Điểm mấu chốt: chất lượng của những gì bạn nhận được phụ thuộc gần như hoàn toàn vào cách bạn mô tả thiết kế. Các mô tả mơ hồ tạo ra các website mơ hồ. Các mô tả cụ thể, có cấu trúc tạo ra các website cụ thể, bóng bẩy.
Bạn Cần Cái Gì
Ba công cụ, tất cả đều có gói miễn phí:
Figma — cho thiết kế của bạn. Gói miễn phí hoạt động tốt. Nếu bạn không có thiết kế, lấy một mẫu miễn phí từ Figma Community và tùy chỉnh nó.
Claude — để tạo code. Gói miễn phí cung cấp cho bạn Sonnet, nó xử lý điều này rất tốt. Pro (20 USD/tháng) cung cấp cho bạn Opus 4.7 cho các website phức tạp hơn.
Vercel hoặc Netlify — để triển khai. Cả hai đều có gói miễn phí. Kết nối kho lưu trữ GitHub của bạn, đẩy code, website được trực tiếp.
Bước 1: Chuẩn Bị Thiết Kế Figma Của Bạn
Trước khi liên quan đến Claude, hãy tổ chức tệp Figma của bạn. Bước này quyết định chất lượng của mọi thứ theo sau.
Thiết kế của bạn nên có các trang được xác định rõ ràng (Trang chủ, Giới thiệu, Liên hệ, v.v.), khoảng cách và căn chỉnh nhất quán, một bảng màu hiển thị (ghi lại các giá trị hex chính xác), các phông chữ được xác định, và các điểm ngắt đáp ứng cho máy tính để bàn và di động nếu có thể.
Đừng lo lắng về sự hoàn hảo từng pixel. Claude xử lý các chi tiết triển khai rất tốt. Điều quan trọng là thiết kế của bạn giao tiếp rõ ràng về cấu trúc, hệ thống phân cấp và phong cách trực quan.
Mẹo chuyên gia: Đặt tên các lớp Figma của bạn một cách có ý nghĩa. "Hero Section," "Feature Cards," "Pricing Table" hữu ích hơn nhiều cho bạn khi viết prompt so với "Frame 247."
Bước 2: Xuất Thông Tin Thiết Kế Của Bạn
Claude không thể đọc tệp Figma trực tiếp, vì vậy bạn cần dịch thiết kế của mình thành thông tin mà Claude có thể làm việc với. Bạn có ba cách tiếp cận, từ dễ nhất đến chính xác nhất:
Cách A: Ảnh chụp màn hình + mô tả. Chụp ảnh toàn trang của từng trang trong thiết kế của bạn. Tải chúng lên Claude cùng với mô tả bằng văn bản về bố cục, màu sắc và tương tác. Đây là cách tiếp cận nhanh nhất và hoạt động tốt một cách ngạc nhiên.
Cách B: Xuất Chế độ Dev của Figma. Nếu bạn có gói trả phí của Figma, hãy sử dụng Chế độ Dev để xuất các giá trị CSS, mã thông báo khoảng cách và thông số kỹ thuật thành phần. Cung cấp những thứ này cho Claude cùng với ảnh chụp màn hình để có đầu ra chính xác hơn.
Cách C: Đặc tả thiết kế bằng văn bản. Viết mô tả chi tiết về mỗi phần — tiêu đề, anh hùng, tính năng, lời chứng thực, chân trang — bao gồm màu sắc, phông chữ, kích thước và bố cục. Điều này mất thêm thời gian nhưng cung cấp cho bạn quyền kiểm soát tối đa đối với đầu ra. Nếu bạn xây dựng mà không có thiết kế Figma, đây là con đường của bạn.
Bước 3: Viết Prompt Ban Đầu Của Bạn
Đây là nơi hầu hết mọi người sai lầm. Họ viết "xây dựng một website trông như ảnh chụp màn hình này" và nhận được đầu ra chung chung. Đây là cấu trúc prompt mà liên tục tạo ra kết quả chất lượng:
Xây dựng một website [số]-trang với các thông số kỹ thuật sau:
HỆ THỐNG THIẾT KẾ:
- Màu chính: [hex]
- Màu thứ cấp: [hex]
- Nền: [hex]
- Văn bản: [hex]
- Phông chữ: [tên phông chữ] cho tiêu đề, [tên phông chữ] cho nội dung
- Bán kính viền: [giá trị]
- Thang cách: [giá trị]
TRANG 1 — TRANG CHỦ:
- Phần hero: [mô tả chính xác — văn bản tiêu đề, văn bản phụ, văn bản nút CTA, xử lý nền]
- Phần tính năng: [số] thẻ, mỗi thẻ có [biểu tượng/hình ảnh, tiêu đề, mô tả]
- Lời chứng thực: [mô tả bố cục]
- Phần CTA: [mô tả]
- Chân trang: [liên kết và bố cục]
TRANG 2 — GIỚI THIỆU:
[cùng mức độ chi tiết]
CÔNG NGHỆ:
- Sử dụng Next.js với Tailwind CSS
- Đáp ứng di động
- Cuộn mượt mà giữa các phần
- Tất cả hình ảnh là các div giữ chỗ có màu nền (tôi sẽ thêm hình ảnh thực sau)Bạn càng cụ thể về những gì người dùng thấy, đầu ra càng tốt. Đừng mô tả code — mô tả trải nghiệm. Nếu bạn cần trợ giúp làm sắc nét prompt này trước khi gửi nó, trình tối ưu hóa prompt miễn phí của chúng tôi có thể giúp cấu trúc nó để có kết quả tốt hơn.
Bước 4: Xem Xét Và Lặp Lại
Đầu ra đầu tiên của Claude thường nắm bắt 60–80% thiết kế của bạn. 20–40% còn lại đến từ lặp lại. Đây là bước mà hầu hết các hướng dẫn "vibe coding" kết thúc, nhưng nó là nơi chất lượng thực sự xảy ra.
Xem xét đầu ra bằng cách kiểm tra ba điều: bố cục có khớp với thiết kế của bạn không? Có cảm thấy màu sắc và kiểu chữ phù hợp không? Nó có trông tốt trên di động không?
Sau đó lặp lại với phản hồi cụ thể. Đừng nói "làm cho nó tốt hơn." Hãy nói:
- "Phần hero cần thêm khoảng cách dọc — thêm 120px trên và dưới"
- "Các thẻ tính năng nên ở trong lưới 3 cột trên máy tính để bàn, một cột trên di động"
- "Nút CTA nên có hiệu ứng di chuột — làm tối nền thêm 10% và phóng to nhẹ"
- "Các liên kết chân trang nên được sắp xếp thành 4 cột: Sản phẩm, Công ty, Tài nguyên, Pháp lý"
Mỗi vòng phản hồi nên giải quyết 3–5 vấn đề cụ thể. Ba vòng thường đưa bạn đến 95% thiết kế của bạn.
Đang nhận giá trị từ điều này? Chúng tôi xuất bản một bài sâu sắc mỗi tuần về quy trình làm việc AI, công cụ và hướng dẫn thực tế. Tham gia những độc giả nhận được nó trước tiên →
Bước 5: Thêm Nội Dung Thực Và Hình Ảnh
Thay thế văn bản giữ chỗ bằng nội dung thực tế của bạn. Thay thế các div hình ảnh giữ chỗ bằng hình ảnh thực. Nếu bạn cần trợ giúp viết nội dung website, Claude rất xuất sắc trong việc này — cung cấp cho nó mô tả thương hiệu của bạn và yêu cầu nó viết nội dung trang chủ phù hợp với tông của bạn.
Đối với hình ảnh, hãy sử dụng tài nguyên miễn phí từ Unsplash hoặc Pexels, hoặc tạo hình ảnh tùy chỉnh bằng công cụ hình ảnh AI. Thả các tệp hình ảnh vào thư mục /public của dự án của bạn và cập nhật các thuộc tính src.
Bước 6: Triển Khai Bằng Một Clic
Nếu bạn sử dụng Next.js (được đề xuất), việc triển khai trên Vercel mất 60 giây:
- Đẩy code của bạn đến kho lưu trữ GitHub
- Vào vercel.com và đăng nhập bằng GitHub
- Nhấp vào "Import Project" và chọn kho lưu trữ của bạn
- Vercel tự động phát hiện Next.js và cấu hình mọi thứ
- Nhấp vào "Deploy"
Website của bạn đang trực tiếp với URL .vercel.app. Kết nối một tên miền tùy chỉnh trong cài đặt Vercel nếu bạn có.
Netlify hoạt động gần như giống nhau — nhập từ GitHub, tự động phát hiện khung công tác, triển khai. Cả hai nền tảng xử lý SSL, CDN và triển khai liên tục tự động. Mỗi khi bạn đẩy đến GitHub, website của bạn cập nhật.
Không chắc nên sử dụng nền tảng triển khai nào? Chúng tôi đã viết một so sánh đầy đủ: Bạn Triển Khai Ở Đâu Sau Khi Vibe Coding?
Những Sai Lầm Phổ Biến Gây Bối Rối Cho Mọi Người
1. Cung cấp cho Claude một ảnh chụp màn hình mà không có ngữ cảnh bằng văn bản. Ảnh chụp màn hình có giúp, nhưng Claude cần các mô tả bằng văn bản về màu sắc, phông chữ, khoảng cách và bố cục để tạo ra code chính xác. Ảnh chụp màn hình là một tham khảo — văn bản là hướng dẫn.
2. Cố gắng xây dựng mọi thứ trong một prompt. Một website 6 trang với hoạt ảnh, biểu mẫu và CMS quá nhiều cho một lần. Xây dựng trang theo trang, phần theo phần. Bắt đầu với trang chủ, làm cho nó đúng, sau đó chuyển sang trang tiếp theo.
3. Bỏ qua khả năng đáp ứng di động. Nếu bạn không đề cập đến di động trong prompt của mình, Claude sẽ xây dựng một bố cục chỉ dành cho máy tính để bàn. Luôn đưa "đáp ứng di động" vào các yêu cầu kỹ thuật của bạn và kiểm tra đầu ra ở chiều rộng 375px.
4. Không kiểm tra tương tác. Nhấp vào mọi nút, điền vào mọi biểu mẫu, cuộn mọi trang. Code được tạo bởi AI thường trông đúng nhưng có các liên kết bị hỏng, biểu mẫu không hoạt động hoặc các trạng thái di chuột bị thiếu. Kiểm tra trước khi triển khai.
5. Hoàn hảo trước khi triển khai. Tàu ở 90% và lặp lại. Triển khai đầu tiên của bạn không cần phải hoàn hảo — nó cần phải trực tiếp. Bạn có thể đẩy các bản cập nhật trong vài giây.
Xây dựng cho khách hàng? Đọc hướng dẫn của chúng tôi về 5 sai lầm bảo mật mà mọi người vibe coder mắc phải trước khi bạn giao hàng.
Dòng Cuối Cùng
Quy trình Figma-to-Claude-to-deploy là cách nhanh nhất để chuyển đổi thiết kế thành website hoạt động mà không cần tự mình viết code. Chất lượng phụ thuộc vào tính đặc thù của các prompt của bạn, không phải kỹ năng lập trình. Ba vòng lặp lại thường đưa bạn từ bản thảo đầu tiên đến sẵn sàng sản xuất.
Bắt đầu với một dự án đơn giản — một danh mục hoặc trang đích — và làm việc thông qua toàn bộ chu kỳ một lần. Lần thứ hai sẽ mất nửa thời gian vì bạn sẽ biết chính xác cách cấu trúc các prompt của bạn.
Không chắc công cụ AI nào là tốt nhất cho quy trình làm việc của bạn? Thực hiện Bài Kiểm Tra Model Picker 60 giây của chúng tôi để tìm ra hoặc xem đầy đủ So sánh Trạng thái AI Models.
Đây là những gì chúng tôi làm mỗi tuần. Một bài sâu sắc về công cụ AI, quy trình làm việc và các quan điểm thành thật — không hype, không chuyện lạc đề. Tham gia chúng tôi →
Tiết lộ: Một số liên kết trong bài viết này là liên kết liên kết. Chúng tôi chỉ đề xuất các công cụ mà chúng tôi đã kiểm tra cá nhân và sử dụng thường xuyên. Xem chính sách tiết lộ đầy đủ của chúng tôi.