Google Stitch + Claude Code: thiết kế website không còn “diện mạo AI”

Bạn có thể xem thêm hướng dẫn làm việc với Ailoot trong tài liệu.

Vì sao website tạo bằng Claude Code trông như “rác AI”?#

Trong trường hợp thực tế được mô tả ở đây, việc làm trang chủ cho một ứng dụng gọi điện bắt đầu từ một dự án trống và yêu cầu Claude Code dựng trang đích. Kết quả vẫn là kiểu quen thuộc: slate-950 làm nền, indigo-500 làm màu nhấn, Inter đậm ở tiêu đề và ba thẻ giống hệt nhau có bóng đổ bên dưới. Bố cục y như v0 đầu tiên, Lovable đầu tiên và sản phẩm ChatGPT đầu tiên. Tôi viết lại prompt năm lần, thêm “cao cấp”, “không giống người khác”, “hiện đại”—trang web vẫn trông như một giao diện WordPress từ năm 2015.

Lý do rất đơn giản: khi không có ràng buộc, mô hình lấy trung bình thống kê những gì nó đã thấy. Và nó đã thấy hàng triệu trang đích giống nhau được dựng bằng Bootstrap và Tailwind. Muốn có kết quả không tầm thường, bạn cần đưa cho tác nhân các chi tiết cụ thể: màu nào, phông chữ nào, khoảng cách nào và thành phần nào cần được xem là chuẩn. Với mô hình, từ “đẹp” có nghĩa là “trung vị của năm 2020”. Tính từ không làm thay đổi kết quả; bạn cần thông số chính xác.

Tôi đã xem xét khoảng cách tương tự trong hướng dẫn về các hệ thống thiết kế có sẵn với Refero—ở đó, bạn lấy phong cách của người khác (Apple, Linear, Stripe) rồi đưa cho tác nhân. Google Stitch tiếp cận từ hướng ngược lại: thay vì mượn phong cách của người khác, bạn tự tạo phong cách của mình từ mô tả.

Google Stitch là gì và giúp ích như thế nào?#

Stitch là một thử nghiệm của Google Labs, được giới thiệu tại Google I/O vào tháng 5 năm 2025. Bạn viết trong ô prompt mô tả giao diện ứng dụng mình muốn (hoặc tải lên ảnh chụp màn hình, bản phác thảo trên bảng trắng hay trang của đối thủ), rồi Stitch tạo các màn hình giao diện trên một canvas vô hạn. Phía sau, công cụ dùng Gemini 2.5 Pro và Flash; Gemini 3 được bổ sung vào tháng 12 năm 2025 để tạo bố cục tinh chỉnh hơn.

Những điểm hữu ích với chúng ta:

• Vibe Design—mô tả cảm giác bằng lời (“tối giản và cao cấp như Stripe”) để nhận một số hướng thiết kế trực quan cho bạn lựa chọn.
• Hình tham chiếu—tải hình từ Dribbble hoặc Pinterest; Stitch giữ nguyên bố cục và áp dụng các yêu cầu của bạn.
• Xuất theo ba định dạng: sang Figma (có các lớp có thể chỉnh sửa), HTML/CSS gọn gàng và qua MCP—đưa thẳng vào tác nhân.

Sự khác biệt với các phong cách có sẵn như Refero rất đáng lưu ý. Refero là thư viện các hệ thống thiết kế đã được trích xuất từ website thật; bạn lấy một thương hiệu có sẵn. Stitch tạo hệ thống cho sản phẩm của bạn từ đầu. Bạn không có thiết kế tham chiếu và muốn có phong cách riêng? Hãy dùng Stitch. Cần nhanh chóng áp dụng phong cách của một sản phẩm nổi tiếng? Dùng Refero. Chúng đảm nhiệm những bước khác nhau và bổ trợ tốt cho nhau.

Claude cũng có chế độ thiết kế tích hợp; tôi đã đề cập trong hướng dẫn về Claude Design. Stitch khác ở chỗ cung cấp một hệ thống có sẵn trong tệp bên ngoài để tác nhân đọc mỗi khi xây dựng thứ gì đó.

Các yêu cầu về tính khả dụng của Google Stitch#

Stitch không khả dụng ở mọi quốc gia: một đại diện Google đã viết trên diễn đàn chính thức rằng dịch vụ dành cho người dùng từ 18 tuổi trở lên tại 212 quốc gia và danh sách này đang mở rộng. Ở các khu vực bị hạn chế, bạn sẽ chỉ thấy đúng một thông báo khi truy cập: “Sorry, Stitch is unavailable.”

Bạn cần có tài khoản Google—chỉ có thể đăng nhập bằng tài khoản này.

Khi xác thực Stitch MCP chặn quy trình Claude Code#

Setup được mô tả gặp lỗi cấp quyền với remote MCP https://stitch.googleapis.com/mcp trong Claude Code. Bài không cung cấp cấu hình MCP tương thích đã chứng minh nên đường đầy đủ dưới dùng xuất HTML/CSS cục bộ.

Lần thử remote này gặp Incompatible auth server. Lỗi quan sát không là recipe hoạt động hoặc bằng chứng mọi cấu hình hiện tại thất bại. Không tiếp tục bước “nối MCP” không chỉ rõ; dùng xuất thủ công dưới tới khi đúng cấu hình tương thích được xác minh. Các lệnh proxy/API-key chưa được kiểm không hoàn tất đường này.

DESIGN.md là gì và vì sao tốt hơn ảnh chụp màn hình?#

Đây là chi tiết quan trọng mà hầu hết hướng dẫn đều nói sai: Stitch không có nút “Export DESIGN.md”. Tác nhân tự tập hợp tệp này. Theo codelab chính thức của Google, prompt có nội dung đại khái như sau: “đi đến dự án qua Stitch MCP, trích xuất bảng màu và kiểu chữ, rồi tập hợp chúng thành DESIGN.md”. Codelab đó giả định MCP hoạt động. Trong đường thủ công ở đây, Claude Code đọc HTML/CSS đã xuất rồi ghi tệp có cấu trúc ở gốc; phải chỉ token thiếu thay vì đoán từ ảnh.

DESIGN.md nêu chi tiết cụ thể thay vì tính từ:

# DESIGN.md
## Colors
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Typography
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Spacing (base 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Layout
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Components
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)

Để Claude Code dùng tệp này, hãy trỏ đến nó từ CLAUDE.md (ví dụ, bằng dòng “Dùng thiết kế trong DESIGN.md cho tất cả thành phần”)—và tác nhân sẽ nạp cùng các token trong mọi phiên. Nút tạo vào thứ Hai và thẻ tạo vào thứ Sáu sẽ có cùng phong cách vì chỉ có một nguồn chuẩn duy nhất.

Hai tham chiếu cục bộ kết hợp: DESIGN.md giữ quy tắc màu, chữ, khoảng cách, component; HTML/CSS và asset Stitch xuất cấp bố cục màn cụ thể. MCP tùy chọn, không là điều kiện đường này.

Xây dựng website như thế nào: toàn bộ quy trình từ văn bản đến thiết kế?#

Đây là toàn bộ quy trình theo thứ tự:

1. Mở Stitch. Kiểm khả dụng nước và đăng nhập stitch.withgoogle.com bằng Google account.
2. Mô tả sản phẩm. Nêu màn và hành trình; xác nhận hoặc sửa danh sách màn đề xuất.
3. Thêm tham chiếu. Tải ảnh định dùng, chỉ màu, chữ, bố cục muốn giữ.
4. Tạo và tinh chỉnh. Chọn một màn, sửa trước mở rộng.
5. Xuất màn chọn thành HTML/CSS. Lưu tệp và asset cần vào thư mục tham chiếu dự án. Mở HTML cục bộ kiểm đúng màn; ảnh đơn lẻ không có CSS chính xác.
6. Tạo DESIGN.md từ bản xuất local. Yêu cầu đọc HTML/CSS, ghi giá trị màu, font, spacing, layout, component thật, liệt kê thứ thiếu để quyết. Không cần khóa Stitch API hay xác thực MCP.
7. Dựng và kiểm một trang. Thay đường bằng thư mục xuất thật trong prompt:

Đọc bản xuất Stitch HTML/CSS ở refs/stitch-export/. Tạo DESIGN.md tại gốc dự án bằng giá trị có trong tệp. Chỉ ra giá trị thiếu, không tự bịa.

Dựng một trang từ DESIGN.md và bản xuất Stitch local. Giữ component dạng module. So trang render với bản xuất ở desktop/di động, rồi kiểm điều hướng và trạng thái tương tác riêng.

Từ đây, Claude Code đảm nhiệm mọi thứ: điều hướng giữa các màn hình, khả năng thích ứng tại các breakpoint trong DESIGN.md, hoạt ảnh và tính tương tác. Stitch cung cấp các màn hình tĩnh và một nguyên mẫu có thể nhấp thử, nhưng không xây dựng logic hoạt động hay xuất bản lên hosting—đó là việc của tác nhân.

Loại bỏ “diện mạo AI” như thế nào: chính xác thì cần thay đổi gì?#

Đây là những điểm cụ thể khiến website không còn tự bộc lộ nguồn gốc:

• Màu sắc. Màu tím indigo-500 là dấu hiệu đầu tiên. Đặt màu chính và màu nhấn bằng giá trị hex chính xác ngay trong DESIGN.md. Mỗi tác nhân sẽ hiểu “xanh thương hiệu” theo cách riêng.
• Phông chữ. Inter là lựa chọn an toàn nhất, nên cũng là “phông AI” dễ nhận ra nhất. Chọn một cặp phông chữ giàu cá tính: chẳng hạn dùng sans serif cho nội dung và một phông có nét riêng cho tiêu đề. Thiết lập trong thiết kế của Stitch và ghi lại trong DESIGN.md.
• Hình tham chiếu thay vì tính từ. Mô hình hiểu “làm cho hiện đại” là “trung vị của năm 2020”. Nó hiểu theo nghĩa đen câu “dùng bố cục từ trang này” khi có ảnh chụp màn hình thật. Tải hình tham chiếu lên Stitch; bạn không thể truyền đạt gu thẩm mỹ bằng lời.
• Khoảng cách và độ thoáng. Có thể nhận ra bố cục theo mẫu nhờ những khối chật chội, giống hệt nhau. Đặt thang khoảng cách rộng rãi trong DESIGN.md—tác nhân sẽ sắp xếp các phần tử thoáng hơn.

Độ cụ thể hiệu quả hơn những tính từ chủ quan. Về cơ bản, Stitch là cỗ máy chuyển câu “Tôi muốn nó như thế này” thành các token chính xác, để tác nhân không còn gì phải đoán.

Nên chọn Google Stitch hay giải pháp thay thế?#

Tôi so sánh các công cụ theo những khía cạnh thực sự quan trọng khi viết code theo cảm hứng với ngân sách hạn chế:

Quy trình tôi tự dùng: Stitch để khám phá thiết kế → Claude Code để dựng và viết logic. Với người viết code theo cảm hứng có ngân sách hạn chế, Stitch thắng vì miễn phí và tạo diện mạo độc đáo cho sản phẩm của bạn từ đầu. Nếu muốn tìm hiểu toàn bộ công cụ trên thị trường, tôi đã đề cập đến chúng trong bài viết trụ cột dùng gì để viết code vào năm 2026.

Google Stitch có những hạn chế gì?#

Đây là danh sách thẳng thắn để bạn không thất vọng ngay từ màn hình thứ ba:

• Chỉ có giao diện. Không có backend, cơ sở dữ liệu hay xuất bản lên hosting. Bạn cần Claude Code để làm những việc đó (hoặc dùng Lovable nếu muốn mọi thứ ở cùng một nơi).
• Khả năng chỉnh sửa trong công cụ hạn chế. Bạn không thể dùng chuột di chuyển từng phần tử—chỉ có thể thay đổi chúng bằng prompt rồi tạo lại. Đây không phải Figma.
• Tính bất định. Cùng một prompt tạo ra các kết quả khác nhau. Điều này tốt khi khám phá ý tưởng, nhưng bất tiện nếu cần kết quả có thể tái tạo.
• Hạn mức. Bạn sẽ chạm giới hạn lượt tạo miễn phí (hiện giới hạn theo ngày); không thể mua thêm nên phải đợi hạn mức được đặt lại. Con số chính xác thay đổi, hãy kiểm tra trong giao diện.
• Trạng thái thử nghiệm. Google Labs không cam kết hỗ trợ lâu dài. Dịch vụ có thể thay đổi hoặc ngừng hoạt động.
• Hạn chế địa lý và vấn đề cấp quyền MCP trong Claude Code đã đề cập ở các phần về tính khả dụng và thiết lập.

Stitch không phù hợp nếu bạn có hướng dẫn thương hiệu nghiêm ngặt cho nhiều dự án, nếu thiết kế đã nằm trong Figma hoặc nếu bạn cần một ứng dụng có backend đã được xuất bản.

Tiếp theo là gì?#

Hãy xây dựng quy trình nhỏ nhất với một màn hình: mô tả sản phẩm trong Stitch, tạo trang chủ, xuất HTML/CSS rồi yêu cầu Claude Code tạo DESIGN.md và dựng trang từ các tệp local đó. Khi thấy dải màu chuyển sắc tím tự biến mất, mọi thứ còn lại sẽ dễ hơn.

Để tiếp tục làm việc với các mô hình, bạn có thể truy cập Ailoot.