Claude Design và sự chuyển dịch quyền lực: Khi Code trở thành "Nguồn Chân lý" mới

Tôi đã thử Claude Design ngày hôm qua và tôi có một lý thuyết về cách mọi thứ sẽ diễn ra trong tương lai gần.

Khi các đội ngũ sản phẩm mở rộng quy mô và thiết kế cần chứng minh giá trị của mình trong các tổ chức kỹ thuật, nó bị đẩy hướng tới hệ thống hóa — và Figma đã phát minh ra các nguyên thủy (primitives) riêng của mình để đạt được điều đó: components, styles, variables, props, v.v. Một số khái niệm được vay mượn từ lập trình, một số thì không, và toàn bộ hệ thống này không ánh xạ chính xác vào bất cứ thứ gì. Hướng dẫn phát triển liên tục thay đổi, các lần di chuyển (migration) chồng chất lên nhau, và nếu bạn muốn tự động hóa bất kỳ thứ nào trong số đó, bạn sẽ bị mắc kẹt với một vài plugin tồi tàn. Con quái vật này đủ rối rắm đến mức các vai trò thiết kế hiện nay chuyên biệt hóa chỉ để quản lý chính hệ thống đó.

Luôn luôn có sự giằng co căng thẳng giữa Figma và code về việc đâu mới là "nguồn chân lý" (source of truth). Figma đã đánh bại Sketch một phần là nhờ khẳng định vị thế của mình ở đây — công cụ của họ sẽ là chuẩn mực.

Chiến thắng đó đi kèm cái giá ẩn giấu. Bản chất của việc có một định dạng bị khóa kín, phần lớn không được tài liệu hóa và đau đớn khi làm việc theo chương trình, Figma đã vô tình loại bỏ chính mình khỏi dữ liệu huấn luyện mà lẽ ra có thể khiến họ phù hợp trong kỷ nguyên của các tác nhân AI (agentic era). Các Mô hình Ngôn ngữ Lớn (LLM) được huấn luyện trên code, không phải trên các nguyên thủy của Figma, vì vậy các mô hình chưa bao giờ học được chúng. Khi việc viết code trở nên dễ dàng hơn đối với các nhà thiết kế và các tác nhân AI tiếp tục cải thiện, nguồn chân lý sẽ tự nhiên di chuyển ngược lại thành code. Và tất cả cơ sở hạ tầng rườm rà mà Figma phải đưa ra trong thập kỷ qua sẽ trông có vẻ điên rồ so với bây giờ. Tại sao phải lăn xả trong một bản xấp xỉ mất mát (lossy approximation) của vật thể khi bạn có thể làm việc trực tiếp trên phương tiện mà nó thực sự tồn tại? Nếu chúng ta muốn làm gốm, tại sao chúng ta lại vẽ tranh màu nước của cái bình thay vì trực tiếp nặn đất sét?

Biến màu trong Figma

Tại công ty, chúng tôi đã dành khá nhiều thời gian để đưa các thay đổi thiết kế được thực hiện trực tiếp trong code ngược lại vào Figma và thực sự không thú vị chút nào. Tôi không thể chia sẻ file đó, nhưng để so sánh công bằng, đây là file hệ thống thiết kế của chính sản phẩm Figma. Tôi phải giả định rằng nó được xây dựng bởi đội ngũ hệ thống thiết kế giỏi nhất mà bạn có thể tìm thấy. Và thế là...

Bảng biến (variables) của Figma hiển thị 946 biến màu được tổ chức thành các nhóm lồng nhau như "bg/desktopBackgrounded", với một biến được chọn hiển thị tám giá trị cụ thể theo chế độ: Light, Dark, FigJam-Light, FigJam-Dark, DevMode-Light, DevMode-Dark, Slides-Light, và Slides-Dark.

Hãy tưởng tượng việc gỡ lỗi (debug) một màu trông sai sai. Bạn kiểm tra component. Component sử dụng một biến. Biến đó là bí danh (alias) cho một biến khác. Biến đó tham chiếu đến một chế độ (mode). Chế độ bị ghi đè ở cấp độ phiên bản (instance). Phiên bản nằm bên trong một component lồng nhau với một hoán đổi thư viện (library swap) được áp dụng. Tại thời điểm này, bạn đang cân nhắc việc học code hoặc chuyển về nông thôn trở thành một người chăn cừu, vì thêm một phút nữa với thứ này sẽ khiến bạn phát điên.

Vì vậy, khi nguồn chân lý chuyển dịch ngược lại thành code, Figma bị bỏ lại trong một vị thế kỳ lạ: nắm giữ một hệ thống chủ yếu thủ công, tiền-kỷ nguyên-tác nhân mà không một người tỉnh táo nào sẽ thiết kế lại từ đầu vào ngày nay.

Tôi nghĩ rằng công cụ thiết kế sẽ chia làm hai hướng riêng biệt từ đây — và có gần như một sự đặt lại đồng hồ giữa Figma và mọi công cụ khác đang cạnh tranh để trả lời cùng một câu hỏi mà họ đã trả lời vào năm 2016: ai có thể giúp tôi, một nhà thiết kế, đưa ý tưởng của mình ra ngoài nhanh nhất?

Spoiler: Đó không phải là Figma Make. Figma Make cảm thấy như nó chủ yếu mang lại lợi ích cho những người đã uống "thuốc tiên" của họ — nó đọc từ các kiểu Figma, thư viện component và các props độc quyền (hoặc như tôi thích gọi, Prop Props), và đó là công cụ duy nhất trong cảnh quan mới này vẫn giả vờ rằng file thiết kế là chuẩn mực. Đó là công cụ dành cho những người muốn (hoặc không có lựa chọn nào khác ngoài việc) ở lại trong hệ thống.

Claude Design là công cụ đầu tiên trong số hai công cụ đó, và đặt cược theo hướng ngược lại. Có một nguyên tắc của phong trào Arts and Crafts gọi là "trung thực với vật liệu" (truth to materials) — ý tưởng rằng một vật thể nên trung thực về việc nó là gì và cách nó được tạo ra, thay vì ngụy trang thành một thứ gì khác. Figma kết thúc lại là điều ngược lại: một tập hợp các lược đồ cực kỳ cứng nhắc với một bộ trang phục "chỉ là vibes, ông bạn" tự do bên trên. Như một người tính cách Type-A không thể thư giãn về mặt thể chất, bị ép buộc diễn vẻ thư thái trong khi đang hét lên trong nội tâm rằng các khung (frames) của bạn không được lồng nhau, các token của bạn bị tách rời và không có gì nằm trên lưới. Claude Design, với tất cả sự thô ráp của nó, ít nhất cũng trung thực về bản chất của nó: HTML và JS tận cùng cùng.

Bàn đèn Gustav Stickley

Và nó có một lợi thế cấu trúc khổng lồ: "người anh em" của nó là Claude Code. Cuối cùng, tôi có thể hình dung Claude Design chỉ cần đổ thẳng mọi thứ vào Claude Code và ngược lại. Qu trình onboarding của Claude Design đã cho phép bạn nhập các kho lưu trữ (repos) của mình. Vòng lặp phản hồi giữa thiết kế và triển khai — vốn là nguồn gây ma sát từ thời sơ khai — trở thành một cuộc hội thoại duy nhất.

Công cụ khác sẽ xuất hiện từ thời điểm này sẽ không có kỳ vọng về code whatsoever. Nó sẽ là một môi trường khám phá thuần túy — nơi để thả các hình chữ nhật, xếp các kiểu lớp, lăn xả với các chế độ hòa trộn và gradient, và phát điên hoàn toàn, không bị ràng buộc bởi các hệ thống hay quy ước gợi ý. Có thể đó là một ứng dụng iPad với hỗ trợ bút Pencil nơi bạn chỉ cần phác thảo nhanh một loạt các hình chữ nhật. 37signals có thể làm điều gì đó thực sự hài hước ngay bây giờ. Hoặc có thể nó đi theo hướng ngược lại — một thứ gì đó giống Photoshop hơn, đi tất tay vào việc tổng hợp độ trung thực cao (high-fidelity compositing) và để trí tưởng tượng của chúng ta chạy hoang, bây giờ chúng ta không còn bị trói buộc bởi trần glass của những gì bạn có thể làm với các hiệu ứng CSS. Có phải có vẻ hơi kỳ lạ khi trong 90% cuộc đời của nó, hiệu ứng lớp duy nhất của Figma chỉ là đổ bóng hoặc làm mờ không?

Khoảnh khắc "Sketch" của Figma đang đến gần rất nhanh.

Hiệu ứng đổ bóng trong Figma