Hầu hết các công cụ AI bạn thử với tư cách là một nhà thiết kế đều không đáp ứng được kỳ vọng. Bạn yêu cầu một phần tiêu đề (hero section) và nhận được các mẫu Tailwind chung chung. Bạn cần thành phần nút của mình nhưng lại nhận được CSS ngẫu nhiên. Không có gì giống với thương hiệu của bạn. Không có gì tuân theo hệ thống thiết kế của bạn.
Tại sao điều này cứ xảy ra? Vì các công cụ này thiếu ngữ cảnh. Chúng không biết về lưới khoảng cách 8px của bạn. Chúng không biết bạn dùng phông chữ Inter cho tiêu đề. Chúng không biết nút chính của bạn có ba trạng thái cụ thể. Chúng đang đoán mò khi lẽ ra phải hiểu rõ.
Nhưng bạn đã có mã gian lận ngay trước mắt. Mỗi thành phần Figma bạn đã tạo. Mỗi mã màu thiết kế bạn đã định nghĩa. Mỗi mẫu thiết kế bạn đã thiết lập. Đây không chỉ là các sản phẩm thiết kế. Chúng chính là ngữ cảnh chính xác mà AI cần để xây dựng mọi thứ theo cách của bạn.
Trong bài viết này, bạn sẽ học cách cung cấp cho AI ngữ cảnh phù hợp để lần đánh giá thiết kế tiếp theo của bạn có thể là một yêu cầu kéo (pull request).
Kỹ thuật ngữ cảnh là nghệ thuật cung cấp cho AI tất cả thông tin nền cần thiết để xây dựng mọi thứ một cách chính xác. Các thiết kế của bạn, thư viện thành phần, mã nguồn hiện có và các mẫu mã của bạn giúp AI hiểu không chỉ những gì bạn muốn, mà còn cách bạn muốn nó được xây dựng theo hệ thống cụ thể của bạn.
Là một nhà thiết kế, bạn tạo ra ngữ cảnh mỗi khi đưa ra quyết định thiết kế. Các thành phần Figma của bạn với ba biến thể. Mã màu như color-primary. Lưới khoảng cách 8px và lựa chọn phông chữ Inter. Các mẫu hình ảnh đã thiết lập. Tất cả những thứ này trở thành ngữ cảnh giúp AI xây dựng mọi thứ theo cách của bạn.
Ngay cả mã mà các nhà phát triển của bạn viết cũng trở thành ngữ cảnh hỗ trợ bạn với tư cách là một nhà thiết kế. Các thành phần React mà họ đã xây dựng mà bạn có thể tái sử dụng. Giải pháp định kiểu mà họ đã chọn như Tailwind hoặc styled-components. Cấu trúc tệp và mẫu đặt tên mà họ đã thiết lập. Cách các tính năng tương tự đã được triển khai trong sản phẩm của bạn.
Khi bạn cung cấp cả hai loại ngữ cảnh, AI sẽ hiểu:
Ngữ cảnh là chìa khóa để xây dựng ý tưởng. Nhưng làm thế nào để bạn thực sự cung cấp tất cả ngữ cảnh này cho AI? Hãy để tôi chỉ cho bạn với một công cụ thực tế.
Trong bài viết này, tôi sẽ sử dụng Fusion, nền tảng phát triển hình ảnh của chúng tôi tại Builder.io.
Chúng tôi đã xây dựng Fusion vì muốn các nhà thiết kế có một công cụ thực sự hiểu toàn bộ ngữ cảnh của họ, không chỉ các gợi ý (prompt) của họ.
Muốn theo dõi? Bạn có thể đăng ký Fusion miễn phí và kết nối kho lưu trữ của riêng bạn.
Bây giờ, hãy khám phá cách mỗi loại ngữ cảnh thay đổi mọi thứ khi làm việc với AI.
Các tệp Figma của bạn nêu rõ khoảng cách, màu sắc, bố cục, mọi thứ.
Không có kỹ thuật ngữ cảnh:
Bạn yêu cầu AI "Tạo một trang cài đặt" và nó đưa ra một bố cục biểu mẫu chung với các trường nhập ngẫu nhiên và nhãn không thẳng hàng. Không giống với những gì bạn đã thiết kế. Bạn phải dành hàng giờ để gợi ý để khiến nó khớp.
Có kỹ thuật ngữ cảnh trong Fusion:
Bạn chia sẻ thiết kế Figma của mình và nói "Triển khai trang cài đặt này". Fusion xem xét thiết kế của bạn, tìm các mẫu mã và bố cục hiện có trong mã nguồn, và sử dụng chúng. Nó giữ các mã khoảng cách, kiểu chữ, mọi thứ. Những gì bạn thiết kế là những gì bạn nhận được.
Đôi khi bạn thấy một bố cục trực tuyến và nghĩ "Tôi muốn một thứ như vậy cho trang web của chúng ta."
Không có kỹ thuật ngữ cảnh:
Bạn cố gắng giải thích. Có thể là, "Làm giống như trang định giá của Stripe nhưng với màu sắc của chúng ta." AI không biết trang của Stripe trông như thế nào. Bạn phải mô tả từng chi tiết nhỏ và nó vẫn bỏ sót ý chính.
Có kỹ thuật ngữ cảnh trong Fusion:
Bạn sử dụng tiện ích mở rộng Chrome để lấy một phần cụ thể từ trang, sau đó nói với Fusion "Thêm cái này vào trang web của chúng ta." Nó nắm bắt cấu trúc và bố cục bạn thích nhưng xây dựng lại bằng các thành phần, mã màu thiết kế, thương hiệu của bạn. Bạn nhận được những phần tốt nhất của nguồn cảm hứng được điều chỉnh hoàn hảo cho hệ thống của bạn.
PRD, thông số thiết kế và tài liệu của bạn cũng là ngữ cảnh. Mọi yêu cầu mà PM của bạn viết, mọi trạng thái bạn cần thiết kế.
Không có kỹ thuật ngữ cảnh:
Bạn sao chép các phần từ một PRD 20 trang vào gợi ý AI, cố gắng nắm bắt tất cả các phần quan trọng. Nhưng AI bỏ sót các yêu cầu bạn không đề cập rõ ràng. Bạn nhận được các thiết kế thiếu trạng thái lỗi, trạng thái trống, hoặc hành vi đáp ứng. PM của bạn hỏi "nhưng còn yêu cầu này thì sao?" và bạn phải quay lại gợi ý với nhiều chi tiết hơn.
Có kỹ thuật ngữ cảnh trong Fusion:
Bạn đính kèm PRD và nói, "Cập nhật bảng điều khiển CRM để thêm phần đường ống bán hàng mới từ yêu cầu." Fusion đọc yêu cầu, hiểu các giai đoạn đường ống, số liệu cần hiển thị, cách nó nên tích hợp với bố cục bảng điều khiển hiện có, và tạo ra toàn bộ phần. Không bỏ sót gì vì ngữ cảnh đã có sẵn. Yêu cầu của PM trở thành thiết kế được triển khai của bạn.
Mỗi nhóm đều có quy tắc thiết kế. Sử dụng phông chữ này. Tuân theo lưới 8px. Đảm bảo khả năng truy cập.
Không có kỹ thuật ngữ cảnh:
Bạn lặp lại các quy tắc này trong mỗi gợi ý. Đôi khi bạn quên một quy tắc. Kết quả không nhất quán. Hệ thống thiết kế của bạn trở thành một gợi ý thay vì một tiêu chuẩn.
Có kỹ thuật ngữ cảnh trong Fusion:
Bạn đặt quy tắc một lần. "Luôn sử dụng phông chữ Inter, lưới khoảng cách 8px, đảm bảo điều hướng bằng bàn phím." Xong. Mọi gợi ý sau này tự động tuân theo các quy tắc này. Tiêu chuẩn của bạn thực sự là tiêu chuẩn.
Mã nguồn hiện có của bạn chứa các mẫu, thành phần và quy ước mà các nhà phát triển đã xây dựng. Hãy tận dụng chúng.
Không có kỹ thuật ngữ cảnh:
Bạn nói "Thêm một carousel" và AI xây dựng mọi thứ từ đầu. CSS mới, cấu trúc mới, không khớp với bất kỳ thứ gì khác trên trang web của bạn. Các nhà phát triển phải xây dựng lại.
Có kỹ thuật ngữ cảnh trong Fusion:
Bạn đính kèm thiết kế của mình, gõ "Thêm một carousel bằng thành phần DaisyUI". Fusion hiểu các thành phần của bạn, cách chúng hoạt động, và tạo ra một carousel phù hợp. Cùng mẫu, cùng phong cách mã, hòa hợp hoàn hảo. Không cần làm lại cho nhà phát triển.
Đôi khi bạn chỉ cần chỉnh sửa một thứ trên trang.
Không có kỹ thuật ngữ cảnh:
Bạn nói "Thêm nhiều tùy chọn màu sắc vào trang sản phẩm" nhưng AI không biết bạn đang nói đến phần tử nào. Nó có thể thêm màu vào sai phần, tạo một bộ chọn màu hoàn toàn mới, hoặc làm hỏng bố cục sản phẩm hiện có khi cố gắng tìm hiểu.
Có kỹ thuật ngữ cảnh trong Fusion:
Bạn chọn bảng màu "Chọn màu của bạn" trong trình chỉnh sửa trực quan và nói "Thêm các tùy chọn màu vàng hướng dương, xanh zombie và đỏ xe cứu hỏa." Fusion chỉ sửa đổi bộ chọn màu đã chọn, thêm ba màu mới trong khi giữ nguyên thiết kế và chức năng của bảng màu hiện có. Bạn nhận được một cập nhật chính xác tại nơi cần thiết.
Lorem ipsum thì ổn, nhưng nội dung thực tế thường phá vỡ các thiết kế lorem ipsum.
Không có kỹ thuật ngữ cảnh:
Bạn thiết kế một biểu mẫu bản tin hoặc phần đánh giá sản phẩm đẹp mắt. Chúng trông hoàn hảo nhưng không thực sự hoạt động. Các nhà phát triển của bạn phải kết nối với backend, xử lý việc lấy dữ liệu, thêm xác thực.
Có kỹ thuật ngữ cảnh trong Fusion:
Bạn kết nối máy chủ MCP cơ sở dữ liệu của mình và nói "Tạo một biểu mẫu đăng ký bản tin lưu vào cơ sở dữ liệu của chúng ta." Fusion xây dựng biểu mẫu, tạo các bảng cần thiết nếu chúng chưa tồn tại, và kết nối mọi thứ trực tiếp với Supabase. Gửi dữ liệu thực, lưu trữ dữ liệu thực, xác thực thực. Hoặc lấy các đánh giá sản phẩm thực tế với xếp hạng và dữ liệu người dùng trực tiếp từ cơ sở dữ liệu của bạn. Giao diện người dùng của bạn hoạt động ngay từ ngày đầu.
Điều tuyệt vời về ngữ cảnh là nó rất mạnh mẽ. Nó tích lũy. Mỗi mảnh ngữ cảnh bạn cung cấp không chỉ thêm vào đống. Chúng hoạt động cùng nhau để cung cấp cho AI một sự hiểu biết toàn diện về những gì bạn đang cố gắng xây dựng.
Giả sử bạn đang xây dựng một bảng điều khiển CRM. Bạn nhập thiết kế bảng điều khiển Figma của mình làm lớp ngữ cảnh đầu tiên. Mã nguồn của bạn đã có các mẫu thành phần và bố cục được thiết lập. Hướng dẫn tùy chỉnh của bạn bao gồm bảng màu biểu đồ và yêu cầu về khả năng truy cập. Tệp PRD đính kèm chỉ định yêu cầu cho phần đường ống bán hàng mới. Máy chủ MCP cung cấp dữ liệu người dùng thực từ cơ sở dữ liệu của bạn.
Bây giờ, khi bạn nói "Xây dựng bảng điều khiển này", bạn nhận được một bảng điều khiển sẵn sàng cho sản xuất, trông chính xác như ý muốn, sử dụng đúng các thành phần hiện có, bao gồm tất cả các yêu cầu từ PM của bạn, và hiển thị dữ liệu thực. Tất cả từ một gợi ý đơn giản, vì bạn đã cung cấp ngữ cảnh phù hợp ngay từ đầu.
Càng cung cấp nhiều ngữ cảnh, kết quả càng tốt. Nhưng bạn không cần mọi thứ cùng một lúc.
Hãy thử Fusion miễn phí và kết nối kho lưu trữ của bạn. Nhập một trong những thiết kế Figma của bạn. Xem điều gì xảy ra khi AI có đầy đủ ngữ cảnh về hệ thống thiết kế của bạn.