- Khi việc hệ thống hóa thiết kế được tăng cường, Figma đã mở rộng một cấu trúc phức tạp xoay quanh các đơn vị riêng như component, style, variable, props, và tạo ra khoảng cách với phương tiện triển khai thực tế
- Định dạng độc quyền của Figma bị loại khỏi dữ liệu huấn luyện của LLM một cách tự nhiên, và trong kỷ nguyên agent, khi các công cụ dựa trên code trỗi dậy, source of truth của thiết kế lại chuyển về code
- Claude Design là một phương tiện trung thực trực tiếp xử lý HTML/JS, tiếp cận theo hướng làm việc ngay trên phương tiện triển khai thực tế thay vì đi qua lớp xấp xỉ có mất mát của code như Figma
- Thông qua mối quan hệ chị em với Claude Code, nó có lợi thế cấu trúc là có thể hợp nhất vòng phản hồi giữa thiết kế và triển khai vào trong một cuộc hội thoại duy nhất
- Khi thị trường công cụ thiết kế phân nhánh thành công cụ dựa trên code và công cụ khám phá thuần túy, đã xuất hiện khả năng Figma đi vào vết xe đổ của Sketch:
**Sketch moment**
Nghịch lý của việc hệ thống hóa Figma
- Khi quy mô đội ngũ sản phẩm tăng lên, thiết kế phải biện minh cho sự tồn tại của mình bên trong tổ chức kỹ thuật, và vì thế bị đẩy theo hướng hệ thống hóa(systematization)
- Để làm điều đó, Figma đã phát minh ra các primitive độc quyền như component, style, variable, prop..., nhưng một phần vay mượn từ lập trình, một phần thì không, nên tạo thành một cấu trúc không khớp gọn gàng với bất kỳ hệ nào
- Guideline liên tục thay đổi, migration chồng chất, và nếu muốn tự động hóa thì lại phải phụ thuộc vào một vài plugin chất lượng thấp
- Độ phức tạp tăng đến mức xuất hiện riêng một vai trò thiết kế chuyên để quản lý chính hệ thống này
Sự dịch chuyển của Source of Truth
- Giữa Figma và code luôn tồn tại một mối căng thẳng về việc cái gì mới nên là bản gốc(source of truth)
- Khi đánh bại Sketch, Figma đã chọn lập trường rằng công cụ của mình sẽ trở thành bản chuẩn(canonical)
- Nhưng chiến thắng đó có một cái giá ẩn: định dạng khóa kín(locked-down) và phần lớn không được tài liệu hóa khiến nó khó xử lý bằng lập trình, nên tự nhiên bị loại khỏi dữ liệu huấn luyện của LLM
- LLM được huấn luyện bằng code, chứ không phải bằng các primitive của Figma, nên mô hình không học được hệ thống của Figma
- Khi việc viết code cũng trở nên dễ hơn với designer và agent ngày càng tiến bộ, source of truth cho thấy xu hướng tự nhiên quay trở lại code
- So với điều này, hạ tầng phức tạp mà Figma đưa vào suốt 10 năm qua khó tránh khỏi việc trông có vẻ quá mức cần thiết
> "Nếu muốn làm đồ gốm thì tại sao lại đang vẽ tranh màu nước về đồ gốm? Sao không nặn đất sét luôn?"
Độ phức tạp của chính hệ thống thiết kế của Figma
- Trong công việc thực tế, việc back-port sang Figma các thay đổi thiết kế đã được chỉnh trực tiếp trong code là cực kỳ vất vả
- Tác giả đưa ra file hệ thống thiết kế của chính sản phẩm Figma làm ví dụ, và cho thấy rằng ngay cả thành quả do đội ngũ thiết kế hệ thống giỏi nhất tạo ra cũng ở trạng thái cực kỳ phức tạp
- 946 biến màu được tổ chức thành các nhóm lồng nhau như "bg/desktopBackgrounded", và một biến có giá trị theo 8 mode như Light, Dark, FigJam-Light
- Component footer của modal có 12 variant, cùng dropdown mang các giá trị như "DS Library Swap", "QA Plugin" và 8 props
- Effect style của component slider tồn tại dưới dạng một style được đặt tên riêng chỉ để biểu diễn một drop shadow 0.5px — vì đó là cách duy nhất để ghi lại quan hệ tương ứng với CSS variable
- Component combo input có 16 variant, và tên layer có dạng như "Default, Default, Close Button=False"
- Khi màu hiển thị sai, quy trình debug đòi hỏi truy vết nhiều bước: kiểm tra component → kiểm tra variable → kiểm tra variable khác được alias → kiểm tra mode → kiểm tra override ở cấp instance → kiểm tra component lồng nhau có áp dụng library swap
Figma Make vs Claude Design
- Khi source of truth dịch chuyển sang code, Figma rơi vào một vị thế gượng gạo khi đang mang theo một hệ thống thụ động và thuộc thời kỳ tiền-agent(pre-agentic)
- Công cụ thiết kế trong tương lai có thể tách ra thành hai hình thái rõ rệt
- Cuộc cạnh tranh quanh câu hỏi mà Figma từng trả lời vào năm 2016 lại bắt đầu: "Công cụ nào giúp một designer như tôi đưa ý tưởng ra nhanh nhất?"
- Figma Make là công cụ dành cho những người đã quen với hệ thống của Figma
- Nó đọc Figma style, thư viện component, và các prop độc quyền(Prop Props), đồng thời là công cụ duy nhất trong môi trường mới này vẫn giả định rằng file thiết kế mới là bản chuẩn
- Đây là công cụ dành cho những người muốn ở lại trong hệ thống đó, hoặc buộc phải ở lại
- Claude Design là một canh cược hoàn toàn ngược lại
- Nó phù hợp với nguyên tắc "truth to materials" của phong trào Arts and Crafts — tức là vật thể phải trung thực với chính nó và với cách nó được tạo ra
- Figma thì ngược lại: một dạng vỏ bọc "vibe" tự do phủ lên trên một schema cực kỳ cứng nhắc — được ví như một tính cách type A cố tỏ ra thư thái trong khi bên trong đang gào thét về frame lồng nhau và token tách rời
- Claude Design có thể thô ráp, nhưng ít nhất nó trung thực về bản chất của mình: đến cuối cùng vẫn là HTML và JS
Lợi thế cấu trúc của Claude Design
- Lợi thế cấu trúc cốt lõi là anh em của Claude Design chính là Claude Code, một công cụ xử lý code rất tốt
- Xét đến cùng, đây là một cấu trúc cho phép chuyển trực tiếp từ Claude Design sang Claude Code hoặc ngược lại
- Ngay trong quá trình onboarding của Claude Design đã có tính năng import repository(repo)
- Vòng phản hồi giữa thiết kế và triển khai — vốn trong lịch sử luôn là nguồn gốc của ma sát — được hội tụ thành một cuộc hội thoại duy nhất
Khả năng xuất hiện của một loại công cụ khác không liên quan đến code: môi trường khám phá thuần túy
- Ở nhánh còn lại của sự phân hóa, có thể sẽ xuất hiện các công cụ hoàn toàn không kỳ vọng gì ở code
- Một môi trường khám phá thuần túy nơi người dùng đặt hình chữ nhật, chồng layer style, tự do xử lý blend mode và gradient mà không bị ràng buộc bởi hệ thống hay quy tắc prompt
- Nó có thể là dạng ứng dụng hỗ trợ iPad + Pencil để phác nhanh hình chữ nhật, hoặc là lĩnh vực mà 37signals có thể tạo ra những thử nghiệm thú vị
- Ở hướng ngược lại, nó có thể đi theo con đường như Photoshop, dồn toàn lực vào composite độ trung thực cao(high-fidelity) để trở thành công cụ giải phóng trí tưởng tượng khỏi giới hạn của CSS effect
- Thật kỳ lạ khi Figma trong 90% vòng đời của mình chỉ cung cấp drop shadow và blur như layer effect
"Sketch moment" của Figma
- Sketch moment của Figma — khoảnh khắc Figma bị lấn át giống như cách Sketch từng bị Figma đẩy lùi — đang đến rất nhanh
1 bình luận
Ý kiến trên Hacker News
Trước đây tôi đã thử rà soát lại design system mình làm, thêm cả logo, branding và font; phải sửa đi sửa lại đến mức phát bực thì cuối cùng mới ra được kết quả tạm hài lòng
Nhưng khi nhìn lượng sử dụng thì hóa ra đã dùng hết 95% hạn mức Claude Design theo tuần rồi
Đến mức này thì tôi thấy nó giống đồ chơi demo hơn là công cụ thực chiến
Dù hoàn toàn không đúng với style chúng tôi muốn, vài đánh giá về nhóm nội dung và IA thì vẫn đáng để mang về áp dụng cho phần việc của tôi
Nhìn chung tôi có ấn tượng tốt, nhưng sau đó lên Twitter thấy ví dụ thành công của người khác gần như giống hệt mockup tôi nhận được nên cũng buồn cười
Tôi nghĩ vấn đề đồng nhất hóa kiểu này sẽ còn bám theo AI-generated text, code và image
Em dâu tôi điều hành một công ty quần áo nhỏ; trong 6 năm qua tay nghề đã tiến bộ nhiều, nhưng thời gian đầu cô ấy thực sự rất vất vả để biến ý tưởng thành sản phẩm thực tế
Với những người như vậy, bất kỳ công cụ nào giúp hạ rào cản gia nhập ban đầu đều rất đáng để thử
Dù vậy hiện tại nó vẫn đang ở giai đoạn research preview, nên tôi nghĩ sau này sẽ thay đổi
Với design system đầu tiên, tôi đã làm một section footer mới cho startup iPaaS của mình, và phương án thứ tư trong bốn phương án khá ổn
Sau đó tôi nối sang Claude Code để chỉnh thêm một chút, generate code và triển khai luôn. Nếu quan tâm thì có thể xem phần footer của tediware.com, cụ thể là phần "Origin story" bên trái và panel đăng ký bên phải
Không phải triển khai quá phức tạp, nhưng ý tưởng tạo ra và luồng tích hợp rất dễ nên tôi thấy tiềm năng rất lớn
Claude Design dùng Opus 4.7, nên đắt hơn model trước
Nó mới ra mắt được hai ngày nên chưa phải sản phẩm hoàn thiện, mà Anthropic vốn cải tiến rất nhanh
Hơn nữa nếu đã dùng Claude lâu rồi thì nó đã biết gu và phong cách của tôi; chuyển sang công cụ AI design khác là lại phải bắt đầu từ đầu
Bù lại vẫn export ZIP được, tôi thử đưa file đó vào Google Stitch nhưng độ tương thích không tốt lắm
Tôi không thực sự đồng ý với lập luận rằng Claude Design sẽ xóa bỏ mọi độ phức tạp của thiết kế
App vibe-coded bằng Claude trông đơn giản là vì phạm vi sản phẩm thực tế đơn giản
Nó giống cảm giác đem xe đạp và máy bay ra so cùng tiêu chuẩn rồi ngộ nhận về sự đơn giản
Nếu làm cùng một component của design system trong code và Figma thì code có thể gọn hơn nhờ câu lệnh điều kiện và control flow
Nhưng code kém linh hoạt hơn việc vẽ trực tiếp trên màn hình, và cũng khó tạo ra mức độ tự do sáng tạo hơn
Cuối cùng, độ phức tạp thường là thứ con người tự tạo ra khi chồng 8 mode cùng theme sáng/tối lên 4 sản phẩm
Claude có thể giúp việc bảo trì dễ hơn một chút, nhưng tôi không nghĩ nó xóa được nhiều bản thân độ phức tạp đó
Vì vậy tôi nghĩ xu hướng này sẽ là đòn đánh khá mạnh vào Figma
Tôi nghĩ phần mềm nào làm được điều đó sẽ thắng
Tôi muốn hỏi xem mình hiểu có đúng không
Tôi đã lập trình từ nhỏ nhưng không tự tin với CSS; nên tôi tò mò liệu trong thực tế có nhiều tổ chức, kể cả nơi có frontend developer, vẫn cộng tác với designer dùng Figma hoặc công cụ tương tự để quản lý toàn bộ thiết kế sản phẩm chứ không chỉ sketch logo hay landing page hay không
Và liệu mục tiêu của những designer đó có phải là duy trì một kiểu cơ sở dữ liệu style nào đó để xử lý giao diện mà không cần sửa code, hay thường frontend developer cũng dùng Figma nhưng lại ghét chuyện nó tách rời khỏi code
Khách hàng cũng xem trực tiếp nó, hoặc ít nhất xem bộ slide branding phản ánh kết quả Figma đó để duyệt
Sau đó frontend nhìn Figma và dựng lại bằng CSS, nhưng tính năng copy CSS của Figma thực chất gần như chỉ ở mức inline CSS vô dụng nên hầu như lúc nào cũng phải làm lại theo bản gần đúng tốt nhất
Hệ đơn vị cũng không khớp, quan hệ cha/con, CSS variable hay phân cấp class cũng không được phản ánh
Khi nhiều frontend developer tự triển khai component riêng thì lại còn sinh ra lệch pha
Vì thế người ta lại tạo thêm một chuẩn tham chiếu frontend khác bằng Storybook, rồi từ đó đưa vào React hoặc NextJS, hoặc dựng lại thành component cho CMS
Đến lúc đó sẽ nảy sinh câu hỏi đâu mới là source of truth thật sự, nhưng trên thực tế nó giống một chuỗi nhiều điểm tham chiếu nối tiếp nhau như trò truyền miệng hơn
Nếu còn phát sinh các landing page marketing làm ngoài dự án chính thì cùng một thiết kế lại bị triển khai thêm lần nữa trong một hệ thống khác
Cuối cùng, ở khoảng trống handoff từ design sang code, ý định của designer bị méo đi, hoặc developer bị buộc phải xử lý muộn các vấn đề thực tế như độ dài chuỗi, số lượng phần tử thay đổi, scroll thực tế hay thích ứng với nhiều kích thước màn hình
Video meme ngắn này vừa buồn cười vừa không buồn cười chính vì nó đâm trúng thực tế đó quá chuẩn
Thường thì designer không code, developer không design, và người làm tốt cả hai thì thật sự rất hiếm
Thành thật mà nói đây là cách làm khá kinh khủng, nhưng tôi vẫn thấy nó tốt hơn các phương án trước đây
Dù vậy, nó vẫn kém hơn những công cụ có thể tự động hóa phần lớn công việc tẻ nhạt của việc dịch thiết kế hình ảnh sang code và kết nối trực tiếp với code
Tôi chưa dùng Claude Design, nhưng với tôi code vẫn dễ chịu hơn rất nhiều so với vô số tùy chọn GUI trong Figma
Có lẽ vì nền tảng của tôi cũng giống người hỏi nên tôi bản năng thấy khó chấp nhận góc nhìn đó
Vì nếu muốn mọi engineer theo thời gian vẫn làm ra cách triển khai nhất quán mà không lệch style, bạn cần một chuẩn tham chiếu tập trung ở mức độ nào đó
Gần đây tôi đang reverse-engineer giao thức Figma bằng figma-kiwi-protocol, nên tôi thực sự đồng cảm với nhận định rằng "Figma đã tự loại mình khỏi dữ liệu huấn luyện cần thiết trong thời đại agent"
Format binary của Figma giống kiểu muốn tự xây lại mọi thứ; vì phải xử lý design cho web, Android, iOS và đủ mọi thứ khác nên cuối cùng nó rất đa dụng nhưng không thể ánh xạ 1:1 hoàn toàn với web
Mà để hữu ích cho agent thì ý định phải rõ ràng; ai từng hiện thực Figma do UX designer làm sẽ biết ngay là ngay cả con người cũng thường khó nắm chính xác ý đồ thiết kế
Khi chữ dài hơn như tiếng Đức thì button sẽ ra sao, chuyển sang CSS rồi vỡ thành hai dòng thì xử lý thế nào, trên điện thoại khác iPhone sẽ thế nào, gradient border mà CSS không làm được thì thay bằng gì, trên màn hình 4K thì sao — các câu hỏi kiểu đó cứ xuất hiện liên tục
Có thể trả lời một phần bằng props hay autolayout, nhưng UX ngoài đời không phải lúc nào cũng là thực thể thần thoại dùng Figma hoàn hảo
Vì vậy tôi mong các công cụ có nội bộ dựa trên HTML sẽ nhanh chóng bắt kịp, và nếu được thì còn có thể xem cả prompt mà product manager đã đưa cho UX nữa
Bài viết nhìn chung khá hay, và vài đoạn cuối thật sự rất buồn cười
Tôi đặc biệt thích chỗ nói rằng đừng giả vờ mình là thứ khác, mà hãy thành thật với bản sắc của chính mình
Đồng thời tôi chợt nghĩ PenPot có thể đang ở vị thế khá thuận lợi trong thời đại agent này
Không đi theo cách tiếp cận canvas kiểu fig mà lại hướng sang thiết kế dựa trên markup thực tế, nên nếu quan tâm đến hướng đó thì lại càng thấy có tiềm năng
Từ lúc InVision đóng cửa và xoay sang mảng whiteboard số, với tôi thị trường công cụ thiết kế này gần như đã hết thời
Tôi thấy đây là thị trường cực khó
Căn bản hơn nữa là việc duy trì design system nghiêm túc về lâu dài quá khó, nhất là khi nó gắn sâu với code và component library, trong khi designer hầu như không chạm vào lớp đó
Claude Design, Figma hay bất kỳ công cụ nào khác có lẽ cũng không giải quyết tận gốc địa ngục Storybook xoay quanh component và layout vừa tái sử dụng được vừa đẹp mắt
Có cảm giác lời giải phải nằm thấp hơn, tức ở cấp component
Hiện giờ chúng ta đang mắc kẹt trong tư duy tạo sẵn component để nhét vào mỗi thiết kế mới
Khi có một component ưng ý, chỉ cần lưu định nghĩa của nó bằng markdown, rồi ở thiết kế sau bảo công cụ đọc markdown đó và dùng component ấy mỗi khi cần
Tôi nghĩ như vậy sẽ tạo ra một luồng linh hoạt và thú vị hơn nhiều
Nó phải script được và cũng có thể vẽ trực tiếp; sửa thiết kế thì code frontend đổi ngay, và đổi code cũng phải phản ánh lại thiết kế ở cùng cấp độ như vậy
Hình thái cuối cùng theo tôi là mô hình designer và frontend engineer trở thành đồng tác giả không cần handoff
Dù vậy cũng có ý kiến rằng về sau việc sửa, trích xuất và sắp xếp sẽ gần như rẻ như cho không, nên bản thân chuyện cấu trúc hóa sẽ bớt quan trọng đi
Tôi chưa hoàn toàn bị thuyết phục, nhưng cũng hiểu vì sao người ta nói vậy
Với tư cách là người tự xây công cụ thiết kế trong vài năm qua, tôi thấy bài này hiểu sai khá căn bản cả về lĩnh vực thiết kế lẫn công ty Figma
Ngay từ đầu, Figma đã tập trung không kém vào việc xây một công ty thành công bên cạnh việc xây một sản phẩm thành công
Ban đầu cũng có hướng đi tham vọng hơn, và nhờ những người như Evan Wallace nên khả năng thực thi cũng mạnh, nhưng rốt cuộc họ trở thành doanh nghiệp như hôm nay vì tập trung vào sản phẩm cụ thể kiếm ra tiền hơn là demo WebGL
Tôi nghĩ việc thiếu các tính năng như 3D cũng là hệ quả của lựa chọn đó
Figma ngay từ đầu đã là công ty làm ra sản phẩm mà doanh nghiệp thực sự dùng, trước cả khi nó là một design tool thuần túy; đến lúc IPO thì mục tiêu đó về cơ bản đã đạt được phần lớn
Thị trường tới đây ra sao thì tôi không biết, nhưng phe có nguồn lực chiến tranh có thể sẽ lợi thế hơn rất nhiều so với các demo hào nhoáng về mặt kỹ thuật
Và các vấn đề mà bài viết nêu ra thì người ở Figma, hay thật ra bất kỳ ai từng làm design tool, đều đã biết rất rõ
Chuyện UI/UX nằm ở giao điểm giữa design, development và PM, hay việc nó nên tiến gần đến source of truth như code, đều là điều hiển nhiên
Vấn đề là khi thực sự cố hiện thực hóa nó, bài toán sẽ phình ra thành một thách thức khổng lồ vượt ra ngoài design tool, lan sang cả coding, quản lý dữ liệu và công cụ kiến trúc
Về AI thì tôi cũng chưa chắc, nhưng tôi có cảm giác các model SOTA gần đây quá đa dụng, đến mức sức mạnh suy luận của model nền có thể còn quan trọng hơn dữ liệu chuyên biệt
Vì UI design có rất nhiều thông tin lộ ra bên ngoài nên hoàn toàn có thể scrape từ web
Tôi không có lợi ích gì đặc biệt trong cuộc tranh luận này, cũng không chắc phân tích của bài gốc có đúng hay không
Nhưng nói thật, mỗi lần nghe chuyện ai đó tụt lại vì định dạng file độc quyền là tôi lại thấy chút hả hê trước nỗi bất hạnh của người khác
Có vài nhận xét khá hay, nhưng tổng thể thì tôi không hoàn toàn đồng ý
Theo tôi Sketch thua Figma là vì tooling thiết kế và trải nghiệm multiplayer
Cũng như sản phẩm vật lý vẫn phải được thiết kế trước khi sản xuất, tôi không nghĩ riêng trong sản phẩm số thì giai đoạn thiết kế sẽ biến mất
Ngược lại, tôi cho rằng Figma nên sớm quyết định bản sắc của mình là gì, thay vì cố làm cả bên này lẫn bên kia
Cách làm bắt người ta cài ứng dụng Mac rồi mở một file cụ thể theo thời gian chỉ càng khiến file cũ đi và khả năng truy cập kém hơn
Liên quan thì gần đây trên HN cũng có thread về Claude Design, và tính đến tháng 4/2026 đã có tới 732 bình luận, cho thấy phản ứng rất lớn