⚡ Claude Code + Webflow MCP: Bộ đôi build site khách trong 1 buổi sáng
Tưởng tượng sáng thứ Hai bạn nhận brief site mới, trưa cùng ngày đã giao bản demo cho khách. Nghe phi lý? Với combo Claude Code + Webflow MCP, đây là chuyện hoàn toàn làm được.
🚀 Webflow MCP Server là gì?
Webflow MCP Server là cầu nối trực tiếp giữa Claude Code và site Webflow của bạn. Thay vì click chuột mỏi tay trong GUI Webflow để tạo collection, thêm item, hay publish CMS, giờ bạn chỉ cần ra lệnh bằng ngôn ngữ tự nhiên cho Claude.
Mọi thao tác như tạo CMS Collection, thêm field, set metadata SEO, gán category, chọn publish date đều được Claude Code thực hiện qua API. GUI vẫn còn đó, nhưng bạn sẽ ít cần đụng tới hơn rất nhiều.
🛠️ Setup chỉ mất 30 giây
Một dòng lệnh duy nhất để cài MCP server:
claude mcp add webflow https://api.webflow.com/mcp
Sau đó, Claude Code sẽ yêu cầu bạn auth bằng API token Webflow (lấy trong Workspace Settings, Integrations). Xong. Mở session mới và bắt đầu prompt như bình thường, mọi tool Webflow đã sẵn sàng để Claude gọi.
🎯 Workflow build site khách hàng trong 1 buổi sáng
Một agency dev đang chạy 5 đến 10 site khách mỗi tháng có thể áp dụng pipeline sau:
Bước 1: Đọc design Figma qua MCP Figma, extract toàn bộ design tokens (color, typography, spacing, shadow).
Bước 2: Áp tokens vào Webflow qua Webflow MCP, tự động tạo CSS variables, áp dụng đồng bộ cho mọi component.
Bước 3: Generate nội dung blog bằng Claude (research, viết, biên tập), sau đó push thẳng vào Webflow CMS qua MCP, không cần copy paste thủ công.
Bước 4: QA cuối, Claude review accessibility WCAG, kiểm tra alt text, contrast ratio, đồng thời rà soát SEO meta tag (title, description, OG image).
Kết quả: tiết kiệm 60 đến 70% thời gian so với làm GUI thuần. Một site landing page nhẹ có thể từ brief tới publish chỉ trong vài giờ.
🧠 Tip nâng cao cho agency
Đây là phần ăn tiền thực sự. Với mỗi khách hàng, viết một file SKILL.md riêng chứa brand voice, color palette, prompt template chuẩn. Lần sau cần update site cho khách đó, Claude tự động load đúng context, không phải dạy lại từ đầu.
Combo full automation pipeline gồm ba mảnh ghép:
CLAUDE.mdlưu project context (tech stack, convention, file structure)- Hooks chạy auto eslint sau mỗi lần edit file
- MCP Webflow kết nối site live
Khi cả ba ăn khớp, bạn có một dây chuyền sản xuất site nhỏ gọn, ổn định, và scale được mà không cần thuê thêm dev junior.
💡 Tại sao bạn nên thử ngay tuần này?
GUI Webflow rất xịn, nhưng repetitive task vẫn ngốn thời gian khủng khiếp. Webflow MCP cho phép bạn dồn năng lượng vào phần sáng tạo (design, brand, content strategy), giao việc lặp đi lặp lại cho Claude Code lo. Khách hàng vui vì giao nhanh, bạn vui vì biên lợi nhuận tăng, không ai phải OT cuối tuần.
Bạn đã thử bộ đôi này chưa, hay vẫn đang clone manual từng collection trong Webflow?
