Thiết kế chính là mã nguồn

The Design is the Code

 

Logic của automata tế bào sẽ định hình lại các hệ thống thiết kế tác tử (Agentic Design Systems) như thế nào, và vì sao tương lai của phát triển web có thể đã được viết sẵn trong những quy tắc đơn giản

Một cuộc chuyển mình sâu sắc đang diễn ra ở giao điểm giữa hệ thống thiết kế, trí tuệ nhân tạo và lý thuyết tính toán. Sự thay đổi này căn bản đến mức khiến ta phải nghĩ lại "thiết kế" thực sự nghĩa là gì trong thời đại của các tác tử tự trị.

 

 

 

Suốt nhiều thập kỷ, chúng ta coi thiết kế và mã nguồn là hai lĩnh vực tách biệt: thiết kế là địa hạt của sự sáng tạo và óc thẩm mỹ con người, còn mã nguồn là việc cơ học chuyển những ý tưởng ấy thành dạng có thể thực thi. Nhưng khi các tác tử AI ngày càng tự động lắp ráp giao diện người dùng, dùng hệ thống thiết kế như một hạ tầng máy đọc được, và sinh mã từ các token ngữ nghĩa, chúng ta đang tiến đến một điểm hội tụ vang vọng một ý tưởng cũ hơn nhiều trong lý thuyết tính toán.

 

Ý tưởng đó là gì? Thiết kế chính là mã nguồn.

 

Đây không chỉ là một câu nói cho kêu. Nó thừa nhận rằng ta có thể đang đi tới một thế giới nơi các hệ thống thiết kế vận hành như automata tế bào: những quy tắc đơn giản sinh ra các hành vi phức tạp, nảy sinh (emergent). Nơi ranh giới giữa "thiết kế" một thứ và "lập trình" nó hoàn toàn tan biến. Nơi các tác tử tự trị không chỉ dùng hệ thống thiết kế mà còn chính là hệ thống thiết kế đang vận hành.

Khoảnh khắc hội tụ

Ngày 11 tháng 12 năm 2025, Brad Frost (tác giả của Atomic Design) cùng Dominic Nguyen (đồng sáng lập Chromatic) có một buổi trực tiếp về "Hệ thống thiết kế tác tử năm 2026". Thông điệp của họ rất rõ ràng: các tác tử AI đã và đang lắp ráp giao diện bằng chính những thành phần mà các đội ngũ con người sử dụng. Hệ thống thiết kế phải tiến hóa thành hạ tầng máy đọc được, nếu không sẽ có nguy cơ trở thành di vật của một thời đã qua.

 

 

Như đội ngũ Storybook đã thông báo: "AI đang bắt đầu sử dụng hệ thống thiết kế đúng như những gì được ghi trong tài liệu. Những khoảng trống trong ví dụ, trạng thái & ràng buộc sẽ dẫn thẳng đến giao diện đầu ra khó lường."

Bài viết này khám phá mối liên hệ sâu xa giữa automata tế bào, hành vi nảy sinh và tương lai của các hệ thống thiết kế tác tử. Chúng ta sẽ lần theo nền tảng lý thuyết, từ những cỗ máy tự sao chép của von Neumann cho đến các bầy tác tử AI ngày nay.

 

Chúng ta cũng sẽ xem Drupal và các nền tảng CMS hiện đại đang tích hợp AI ra sao thông qua các module như Schema.org Blueprints và Drupal AI. Và ta sẽ suy ngẫm xem tất cả điều đó có ý nghĩa gì với nhà thiết kế, nhà phát triển và tương lai của việc tạo ra sản phẩm số.


Automata tế bào và logic của sự nảy sinh

Vẻ đẹp của những quy tắc đơn giản

Năm 1970, nhà toán học John Conway giới thiệu Trò chơi của sự sống (Game of Life), một "trò chơi không người chơi" về sau trở thành một trong những hệ thống được nghiên cứu nhiều nhất trong lý thuyết tính toán. Các quy tắc đơn giản đến mức đáng kinh ngạc:

  1. Mọi ô sống có ít hơn hai ô láng giềng sống sẽ chết (quá thưa thớt)
  2. Mọi ô sống có hai hoặc ba ô láng giềng sống sẽ tiếp tục sống
  3. Mọi ô sống có nhiều hơn ba ô láng giềng sống sẽ chết (quá đông đúc)
  4. Mọi ô chết có đúng ba ô láng giềng sống sẽ sống lại (sinh sản)

Từ bốn quy tắc này, được diễn đạt chỉ bằng vài điều kiện nhị phân, một vũ trụ phức tạp đến kinh ngạc hiện ra. Các glider lướt qua những lưới vô hạn. Các bộ dao động đập theo nhịp điệu bất tận. Các khẩu súng bắn ra từng dòng mẫu hình xuyên không gian tế bào. Và đáng chú ý nhất, Game of Life đã được chứng minh là đầy đủ Turing: bất cứ thứ gì có thể tính toán bằng thuật toán, về nguyên tắc đều có thể tính được trong chiếc lưới đơn giản của Conway.

 

 

Hình 1: Súng lướt Gosper (Gosper's Glider Gun) trong Trò chơi Cuộc sống của Conway. Mẫu hình này liên tục phóng ra một dòng các tàu lượn (glider), cho thấy những quy tắc đơn giản có thể sinh ra sự phức tạp vô tận, tự duy trì như thế nào.

 

 

Đây là bài học đầu tiên của automata tế bào: sự phức tạp không phải là điều kiện tiên quyết để có hành vi phức tạp. Những quy tắc đơn giản, được áp dụng nhất quán trên một nền, có thể làm nảy sinh những mẫu hình và hành vi mà không ai từng lập trình một cách tường minh.

Video cần xem: Nhập môn automata tế bào

Phần giới thiệu về automata tế bào, gồm Trò chơi Cuộc sống của Conway và Vòng lặp Langton (Langton's Loops) có khả năng tự sao chép

Video này trình chiếu nhiều đoạn hoạt ảnh, trong đó có cảnh tự hủy diệt sẽ xảy ra nếu để Vòng lặp Langton sao chép trên một hình xuyến (torus) lớn, nơi các cạnh đối diện của lưới được nối liền với nhau.

 

 

 

 

Tài liệu bổ sung từ video:


Vòng lặp Langton và sự tự sao chép

Năm 1984, Christopher Langton đã đưa nguyên lý này đi xa hơn với các vòng lặp tự sao chép của ông: một automata tế bào thể hiện những nguyên lý đích thực của sự sống nhân tạo. Nếu Trò chơi Cuộc sống của Conway cho thấy sự phức tạp trỗi dậy, thì Vòng lặp Langton cho thấy sự trỗi dậy của khả năng sinh sản.

Mỗi vòng lặp gồm một đường biên tuần hoàn bao quanh một "bộ gen" được mã hóa trong trạng thái của các ô. Bộ gen này chảy liên tục quanh vòng lặp rồi đi ra theo một cánh tay kiến tạo, cánh tay này xây nên một vòng lặp con trong 151 bước thời gian. Khi hoàn tất, vòng con tách khỏi vòng mẹ, và cả hai tiếp tục sao chép.

 

Grid art of a red path with blue, yellow, and cyan tiles, on a dark background.

Hình 2: Vòng lặp Langton ở cấu hình ban đầu. Thông tin di truyền lưu chuyển quanh vòng lặp và điều khiển việc xây dựng các vòng lặp con thông qua cánh tay vươn dài.

 

"Nếu một cỗ máy tự sinh sản có thể tồn tại trong một automata tế bào, thì chính sự sống cũng có thể do máy móc tạo ra."

- Christopher Langton, "Studying Artificial Life with Cellular Automata" (1986)

Hệ quả của điều này thật sâu sắc. Vòng lặp Langton chứng minh rằng sự tự sao chép không đòi hỏi độ phức tạp của tế bào sinh học, hay năng lực kiến tạo vạn năng trong thiết kế gốc của von Neumann. Nó chỉ cần:

  • Một tập hợp các quy tắc đơn giản, mang tính cục bộ
  • Một cơ chế để mã hóa chỉ dẫn
  • Một quá trình để thực thi những chỉ dẫn đó

Các quy tắc chính là sinh vật. Bản thiết kế chính là mã.

Năm 1999, Hiroki Sayama giới thiệu evoloops, những biến thể tích hợp khả năng phân rã cấu trúc và tương tác kiểu hình, cho phép đột biến tự phát và các động lực tiến hóa. Các vòng lặp này tiến hóa thông qua những va chạm vật lý trực tiếp trong quá trình sao chép, dẫn đến biến đổi kiểu gen, đa dạng hình thái tăng lên và độ phức tạp tăng dần qua các thế hệ. Khác với cách sao chép cố định của Langton, evoloops cho thấy các đột biến có thể di truyền mà không cần can thiệp từ bên ngoài.

 

 

Quy tắc 110 và tính toán vạn năng

Hành trình khám phá các automata tế bào sơ cấp của Stephen Wolfram đã đạt đến một phát hiện gây kinh ngạc: Quy tắc 110, một trong chỉ 256 quy tắc khả dĩ cho loại automata tế bào một chiều đơn giản nhất, có khả năng tính toán vạn năng.

Quy tắc 110 có thể được xác định hoàn toàn chỉ bằng cách cho biết kết quả của từng trong tám tổ hợp có thể có của một ô và hai ô lân cận. Vậy mà quy tắc đơn giản đến mức tầm thường này—tám quyết định nhị phân—lại có thể mô phỏng một máy Turing vạn năng.

 

Rull 110 cellular automaton - Triangle pattern with black and white abstract geometric design.

Hình 3: Automaton tế bào Quy tắc 110. Dù định nghĩa rất đơn giản, Quy tắc 110 thể hiện hành vi Lớp 4—những mẫu hình phức tạp, không hoàn toàn ổn định mà cũng không hoàn toàn hỗn loạn—và đã được chứng minh là Turing đầy đủ.

 

"Để tính toán vạn năng, ta không cần đến cả một CPU máy tính. Chỉ cần quy tắc nhỏ bé này là đủ."

- Stephen Wolfram, "A New Kind of Science"

Năm 2004, Matthew Cook công bố một chứng minh rằng Quy tắc 110 với một mẫu nền lặp lại nhất định là Turing đầy đủ. Chứng minh cho thấy Quy tắc 110 có thể mô phỏng các hệ thẻ chu kỳ (cyclic tag system), và đến lượt chúng lại có thể mô phỏng bất kỳ máy Turing nào. Trong 88 automaton tế bào sơ cấp khác biệt có thể có, Quy tắc 110 là quy tắc duy nhất được chứng minh trực tiếp là Turing đầy đủ.

Nguyên lý Tương đương Tính toán mà Wolfram đề xuất còn gợi ra một điều triệt để hơn: những hệ thống vượt qua một ngưỡng phức tạp tối thiểu thì về bản chất tương đương nhau về năng lực tính toán. Bộ não con người, một hệ thống thời tiết và Quy tắc 110 đều, ở một tầng sâu nào đó, tương đương nhau về mặt tính toán.

Bốn lớp automaton tế bào của Wolfram

  • Lớp 1: Quá trình tiến hóa dẫn đến một trạng thái đồng nhất
  • Lớp 2: Quá trình tiến hóa dẫn đến các cấu trúc tuần hoàn tách biệt
  • Lớp 3: Quá trình tiến hóa dẫn đến các mẫu hình hỗn loạn, ngẫu nhiên
  • Lớp 4: Quá trình tiến hóa dẫn đến các mẫu hình phức tạp với cấu trúc cục bộ—có khả năng tính toán vạn năng

Quy tắc 110 thể hiện hành vi Lớp 4, thứ mà Wolfram mô tả là tồn tại ở "rìa của hỗn loạn"—một ranh giới tới hạn nơi những quy tắc đơn giản tạo ra sức mạnh tính toán cực đại.

Metacell 0E0P: Tự sao chép đúng nghĩa

Vào tháng 10 năm 2018, Adam P. Goucher đã hoàn thành việc xây dựng metacell 0E0P—một mẫu hình trong Trò chơi Cuộc sống của Conway có khả năng tự sao chép thực sự. Không như các metacell trước đây cần có sẵn các bản sao ở gần, metacell 0E0P có thể tự dựng các bản sao của chính nó từ con số không, kể cả băng chỉ thị của riêng nó.

Thành tựu này là một cột mốc của sự sống nhân tạo: một hệ thống có thể tự lan truyền trong một nền tảng tính toán chỉ bằng các quy tắc cục bộ. Ngày 23 tháng 11 năm 2013, Dave Greene đã xây dựng bộ sao chép đầu tiên trong Trò chơi Cuộc sống tạo ra một bản sao hoàn chỉnh của chính nó, bao gồm cả băng chỉ thị—cho thấy ngay cả automaton hai trạng thái đơn giản của Conway cũng có thể hỗ trợ sự tự tái tạo không giới hạn.

 

Khám phá thêm: Video về automaton tế bào

 

Tìm thêm nhiều nội dung hấp dẫn về automaton tế bào:

▶️ Tìm trên YouTube: "cellular automata the design is the code"


Hệ thống thiết kế như nền tảng tính toán

Từ Atomic Design đến Agentic Design

Phương pháp Atomic Design của Brad Frost, ra đời năm 2013, đã làm cách mạng hóa cách chúng ta nghĩ về hệ thống thiết kế. Bằng cách chia giao diện thành nguyên tử (atoms, các phần tử cơ bản như nút bấm và ô nhập liệu), phân tử (molecules, những tổ hợp đơn giản), sinh thể (organisms, các khu vực giao diện phức tạp), mẫu trang (templates, bố cục trang) và trang (pages, bản triển khai cuối cùng), Atomic Design mang đến một cấu trúc phân cấp để quản lý sự phức tạp.

Nhưng nhìn lại thì có một điều đáng chú ý: Atomic Design vốn đã chứa đựng các nguyên lý của automaton tế bào mà không hề gọi tên chúng.

Nguyên lý automaton tế bàoTương đương trong Atomic Design
Quy tắc cục bộMỗi cấp thành phần đều có quy tắc riêng về cách kết hợp với các cấp khác
Tính trồiNhững trang phức tạp trồi lên từ sự kết hợp của các phần tử đơn giản hơn
Khả năng tái lậpCùng những nguyên tử, kết hợp theo cùng những quy tắc, sẽ cho ra kết quả nhất quán
Khả năng mở rộngHệ thống mở rộng được mà không cần điều khiển tập trung: mỗi thành phần "biết" hành vi của chính nó
Tự tổ chứcDesign token lan truyền mọi thay đổi khắp hệ thống một cách tự động

"Khi hệ thống thiết kế trở nên nhàm chán, nó giải phóng các nhà thiết kế và lập trình viên để họ làm những điều mới, giải quyết những vấn đề mới. Hệ thống thiết kế gánh phần việc nhàm chán, để nhà thiết kế và lập trình viên không phải gánh nữa."

- Josh Clark, "The Most Exciting Design Systems Are Boring"

Vào tháng 2 năm 2023, Brad Frost đã viết về "Design Systems in the Time of AI":

"AI là một người dùng hệ thống thiết kế rất tự nhiên... Thực tế là rất nhiều công việc làm thành phần cho hệ thống thiết kế mang tính cơ học và có thể đoán trước. Chúng ta vốn đã dùng những công cụ như PlopJS để sinh nhanh phần khung mẫu của một thành phần, khớp với hình dạng của phần còn lại trong thư viện. Tôi rất sẵn lòng để AI giúp tạo ra hàng loạt đoạn mã khung mẫu thông dụng cho mình."

- Brad Frost

Chính bản chất cơ học và dễ đoán của các hệ thống thiết kế khiến chúng phù hợp với kiểu vận hành theo mô hình tự động tế bào. Khi quy tắc rõ ràng, mang tính cục bộ và được áp dụng nhất quán, các tác tử có thể tự vận hành, giống như các ô trong Trò chơi Sự sống của Conway không cần bộ điều khiển trung tâm vẫn tạo ra được các glider và oscillator.

Yêu cầu bắt buộc về khả năng đọc bằng máy

Storybook MCP (Model Context Protocol) là một bước tiến quan trọng theo hướng này. Được công bố vào cuối năm 2025, Storybook MCP cung cấp cho các tác tử lập trình AI siêu dữ liệu thành phần có thể đọc bằng máy, lấy từ những bản cài đặt Storybook sẵn có.

Điểm mấu chốt là các tác tử không cần mã thô hay tài liệu trực quan. Chúng cần:

  • Manifest thành phần: Siêu dữ liệu có cấu trúc về mọi thành phần: props, biến thể, liên kết design token và ví dụ sử dụng
  • Cách đặt tên có ngữ nghĩa: Các token giàu ý đồ như action.primary.confirm truyền đạt ý nghĩa cho tác tử, chứ không chỉ là giá trị
  • Vòng lặp kiểm chứng: Khả năng chạy kiểm thử, thấy chỗ lỗi và tự sửa

"Storybook MCP giúp các tác tử đi theo các mẫu của bạn và vượt qua các bài kiểm thử của bạn. Nó trang bị cho tác tử hai thứ chưa từng có: siêu dữ liệu thành phần có thể đọc bằng máy và một vòng lặp để tự sửa lỗi của mình."

- Đội ngũ Storybook

Storybook MCP có một vòng lặp tự hiệu chỉnh. Nó cho phép các tác tử chạy kiểm thử thành phần của bạn (tương tác và khả năng truy cập), xem cái nào không đạt rồi tự sửa lỗi của mình. Lập trình viên chỉ cần vào cuộc sau khi các bài kiểm thử đã đạt. Không còn cảnh phải kèm cặp từng câu lệnh nữa.

Đây chính là kiến trúc của một automaton tế bào áp dụng vào thiết kế: quy tắc cục bộ (đặc tả thành phần), tương tác giữa các lân cận (mẫu kết hợp) và cập nhật lặp (kiểm chứng và tự sửa).

 

Manifest thành phần như bộ gen

Phép so sánh với Langton's Loops càng thích hợp hơn khi ta xét cách các manifest thành phần vận hành. Trong hệ của Langton, "bộ gen" mã hóa trong các ô tuần hoàn chứa chỉ dẫn để xây một vòng lặp mới. Trong một hệ thống thiết kế đọc được bằng máy, manifest thành phần chứa chỉ dẫn để lắp ráp giao diện.

Một manifest thành phần có thể quy định:

{
  "name": "Button",
  "variants": ["primary", "secondary", "destructive"],
  "sizes": ["sm", "md", "lg"],
  "props": {
    "label": "string",
    "disabled": "boolean",
    "onClick": "function"
  },
  "tokens": {
    "background": "color.action.primary",
    "borderRadius": "radius.md",
    "padding": "space.3"
  },
  "constraints": [
    "Must have accessible contrast ratio",
    "Label required for non-icon buttons",
    "Minimum touch target 44x44px"
  ],
  "examples": [
    { "variant": "primary", "label": "Submit", "size": "md" },
    { "variant": "destructive", "label": "Delete", "size": "sm" }
  ]
}

Bản manifest này đồng thời là đặc tả thiết kế và là mã thực thi - hay đúng hơn, là những chỉ dẫn để từ đó có thể sinh ra mã thực thi. Agent sử dụng manifest này không cần hiểu thẩm mỹ hay trải nghiệm người dùng theo nghĩa của con người. Nó cần tuân theo các quy tắc, kết hợp các phần tử theo ràng buộc của chúng và tạo ra đầu ra hợp lệ.

 

Tôi đồng ý với Brad Frost về việc dùng định dạng YAML.

 

Các component của Drupal đang dùng định dạng YAML. Đại khái như sau

$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
name: Button
status: experimental
description: Use Bootstrap custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
props:
  type: object
  properties:
    html_tag:
      type: string
      title: The HTML tag to use for the button (button | a). Defaults to `button`.
      default: button
      enum:
        - button
        - a
    url:
      type: string
      title: URL Link
      description: URL link for the button when the HTML tag is an anchor link.
      $ref: "ui-patterns://url"
    color:
      type: string
      title: Color
      description: Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
      default: ''
      enum:
        - ''
        - primary
        - secondary
        - success
        - danger
        - warning
        - info
        - dark
        - light
        - link
    outline:
      type: boolean
      title: Outline
      description: In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.
      default: false
    size:
      type: string
      title: Size
      description: Bootstrap button size
      default: ''
      enum:
        - ''
        - btn-sm
        - btn-lg
    disabled:
      type: boolean
      title: Disabled
      description: Disabled button
      default: false
    button_utility_classes:
      type: array
      title: Utility Classes
      default: []
      items:
        type: 'string'
      description: An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.
    attributes:
      type: object
      title: Attributes
      description: HTML attributes for the containing element.
      $ref: 'ui-patterns://attributes'
slots:
  content:
    type: string
    title: Content
    description: The content for the button
    minLength: 1
    examples:
      - Press
      - Submit now
      - Save
      - Login
      - Read more

 

Thiết kế chính là mã nguồn.

  • Biến thể (Variants)
  • Token
  • Props
  • Ràng buộc (Constraints) (chúng ta có thể bổ sung vào component)

  • Quy tắc cho slot (những gì có thể đặt vào các slot khác, hoặc những gì được phép đặt vào slot của tôi)

  • Quy tắc

  • Ví dụ 

  • Hiệu ứng chuyển động  ( Được phép dùng hoặc được hướng dẫn dùng )

Sau đó hãy quan sát và thử nghiệm hành vi của nó.

như trong https://storybook.demo.varbase.vardot.com/?path=/story/atoms-button--primary 

 

Design token như những biến môi trường

Design token là một mảnh ghép quan trọng khác. Trong automata tế bào, mỗi tế bào phản ứng với môi trường ngay quanh nó - trạng thái của các tế bào lân cận. Trong hệ thống thiết kế, component phản ứng với design token - những giá trị theo ngữ cảnh quyết định diện mạo và hành vi của chúng.

Kiến trúc token hiện đại dùng nhiều lớp:

  • Core token: Các giá trị thô như color.blue.500: #3B82F6
  • Semantic token: Các tham chiếu theo ý định như color.action.primary: color.blue.500
  • Component token: Các ứng dụng theo phạm vi như button.background.primary: color.action.primary

Khi một agent tạo ra component Button, nó không cần biết "primary" nghĩa là màu xanh. Nó chỉ cần tham chiếu tới button.background.primary và tin rằng hệ thống token sẽ tự phân giải ra giá trị đúng. Môi trường (lớp token) chứa thông tin; component (tế bào) chỉ cần phản ứng với nó.

Các công cụ như Tokens Studio đã phát triển để coi design token như những đồ thị tính toán với các bộ phân giải (resolver) - những nút đưa ra quyết định ngữ nghĩa về việc dùng token cơ sở nào tùy theo ngữ cảnh. Nhờ vậy, design token chuyển từ những giá trị tĩnh thành những hệ thống động, vận hành theo quy tắc.


Hệ sinh thái Drupal và tích hợp AI

Việc tích hợp AI vào các hệ quản trị nội dung (CMS) là một phòng thí nghiệm hoàn hảo để khám phá nguyên lý "thiết kế chính là mã nguồn". Các CMS như Drupal vốn đã hiện thực hóa những khái niệm cốt lõi: kiểu nội dung có cấu trúc, định nghĩa trường, các mối quan hệ và quy tắc kết hợp.

Tôi chưa từng nghĩ sẽ có ngày chúng ta nói được điều như thế này. Với tôi, đây từng là một tuyệt tác của công nghệ.

 Bộ máy tính tối thượng mà chúng ta có thể có. Những lập trình viên như bước ra từ Star Trek của tương lai, nói chuyện với máy tính để nó lập trình thay mình.

 

 

Trải nghiệm của agent (AX) và kiểu người dùng mới

Thiết kế cho máy móc

Đầu năm 2025, Mathias Biilmann, CEO của Netlify, đã giới thiệu khái niệm "Agent Experience" (AX) - một lĩnh vực mới tập trung vào cách các AI agent tương tác với sản phẩm và nền tảng.

Đây là một sự dịch chuyển mang tính nền tảng. Suốt nhiều thập kỷ, UX (Trải nghiệm người dùng) được tối ưu cho nhận thức, cảm nhận và hành vi của con người. DX (Trải nghiệm nhà phát triển) được tối ưu cho các lập trình viên là con người khi xây dựng phần mềm. AX thừa nhận rằng các agent đang trở thành người dùng chính của các hệ thống số - và nhu cầu của chúng hoàn toàn khác:

  • Chúng không quan tâm đến vẻ đẹp thị giác - chỉ cần dữ liệu có cấu trúc, phân tích được
  • Chúng không điều hướng giao diện - chúng gọi API và đọc manifest
  • Chúng không đọc tài liệu như con người - chúng cần ngữ cảnh mà máy đọc được
  • Chúng không đưa ra phán đoán chủ quan - chúng tuân theo quy tắc và ràng buộc

"AI Agent không phải con người: chúng không quan tâm nút bấm to hay nhỏ, kiểu chữ có dễ đọc không, bảng màu trên website của bạn đẹp đến đâu, hay những hiệu ứng chuyển động hào nhoáng trong ứng dụng. Vậy AI Agent 'quan tâm' đến điều gì? Hiện nay câu hỏi này chưa có lời đáp cụ thể, nhưng sẽ ngày càng quan trọng trong những năm tới."

- Nghiên cứu về AX

Câu trả lời: quy tắc rõ ràng, hành vi có thể dự đoán, dữ liệu có cấu trúc tốt và các vòng phản hồi giúp chúng tự kiểm chứng và sửa lại hành động của mình.

Thách thức của giao diện kép

Thiết kế cho AX nghĩa là xây dựng đồng thời hai giao diện:

  1. Giao diện giữa con người và Agent: Nơi con người giám sát, phê duyệt, chỉnh sửa và định hướng hành vi của agent, tức lớp "trung tâm điều khiển". Hãy nghĩ đến bảng điều khiển và hàng đợi phê duyệt, chứ không phải biểu mẫu và nút bấm.
  2. Giao diện giữa Agent và hệ thống: Nơi agent làm việc với API, cơ sở dữ liệu và công cụ, tức lớp "vận hành". Lớp này phải vững chắc, có tài liệu đầy đủ và được tối ưu cho hiệu quả của máy.

Điều này phản chiếu kiến trúc của automata tế bào, nơi hai góc nhìn riêng biệt cùng tồn tại:

  • Góc nhìn cục bộ: Mỗi tế bào (agent) tuân theo những quy tắc đơn giản dựa trên các tế bào lân cận trực tiếp của nó
  • Góc nhìn toàn cục: Những mẫu hình phức tạp xuất hiện và chỉ có thể nhìn thấy ở quy mô lớn

"Thiết kế trải nghiệm agent (AX) phải mang lại khả năng sử dụng tốt cho agent và từ phía agent. Vì vậy, AX tốt sẽ dẫn đến trải nghiệm người dùng (UX) tốt. Nếu AI agent gặp một quy trình hỏng, một giao thức lỗi, hay thậm chí cách dùng từ không nhất quán giữa các hệ thống, nó sẽ không thể hoàn thành nhiệm vụ. Đó là một trải nghiệm tệ đối với agent, và đến lượt nó, dẫn đến trải nghiệm tệ cho khách hàng hoặc nhân viên."

- Kat Holmes, Giám đốc Trải nghiệm (Chief Experience Officer), Salesforce

Từ UX đến AX: Sự tiến hóa của thiết kế số

UX (Người dùng)DX (Nhà phát triển)AX (AI Agent)
Giao diện trực quanAPI và SDKManifest máy có thể đọc được
Gắn kết cảm xúcTài liệuNgữ cảnh có cấu trúc
Luồng điều hướngVí dụ mãĐịnh nghĩa công cụ
Khả năng tiếp cậnAn toàn kiểu dữ liệuĐặc tả ràng buộc
Thông báo lỗiStack traceVòng phản hồi để tự sửa lỗi


Stigmergy và giao tiếp gián tiếp

Một trong những khái niệm mạnh mẽ nhất của trí tuệ bầy đàn là stigmergy, tức sự phối hợp gián tiếp thông qua dấu vết để lại trong môi trường. Loài kiến không báo cho nhau trực tiếp nơi có thức ăn; chúng để lại vệt pheromone cho những con khác lần theo. Môi trường trở thành phương tiện giao tiếp.

Trong các hệ thống thiết kế agentic, stigmergy mang những hình thức sau:

  • Thư viện thành phần dùng chung: Agent "nhìn thấy" những thành phần nào đang có và chúng đã được dùng ra sao
  • Design token: Các giá trị ngữ nghĩa mã hóa quyết định thiết kế thành những dữ kiện của môi trường
  • Tài liệu mẫu hình: Các ví dụ sử dụng đóng vai trò như vệt pheromone cho những agent sau này
  • Bộ kiểm thử: Các quy tắc xác thực giới hạn không gian của những kết quả đầu ra hợp lệ
  • Lịch sử Git: Bản ghi các quyết định trong quá khứ mà agent có thể tham chiếu

Khi một agent tạo giao diện bằng một thành phần, nó để lại dấu vết: trong codebase, trong tài liệu, trong các mẫu hình mà nó thiết lập. Những agent sau này gặp tác vụ tương tự sẽ chịu ảnh hưởng của các dấu vết đó, tạo nên một dạng trí tuệ tập thể mà không agent đơn lẻ nào có được.

Các mẫu thiết kế agentic

Andrew Ng và nhiều người khác đã xác định bốn mẫu hình chính cho các hệ thống AI agentic:

  1. Phản chiếu (Reflection): AI đánh giá chính kết quả của mình và cải thiện nó qua từng vòng lặp
  2. Dùng công cụ (Tool Use): AI tương tác với các công cụ, API và hệ thống bên ngoài
  3. Lập kế hoạch (Planning):AI chia nhỏ các tác vụ phức tạp thành những tác vụ con và thực thi lần lượt
  4. Đa tác tử: Nhiều tác tử chuyên biệt cùng phối hợp để xử lý các tác vụ phức tạp

Những mẫu hình này tương ứng trực tiếp với các khái niệm của tự động tế bào:

Mẫu hình tác tửTương đương trong tự động tế bào
Phản chiếu (Reflection)Các ô cập nhật dựa trên việc đánh giá trạng thái hiện tại
Sử dụng công cụCác ô tương tác với các biến của môi trường
Lập kế hoạchTiến hóa qua nhiều thế hệ để đạt đến các cấu hình ổn định
Đa tác tửCác loại ô khác nhau với quy tắc chuyên biệt (tự động đa tế bào)

Thiết kế chính là mã: một cách đọc sâu hơn

“Thiết kế chính là mã” thực sự có nghĩa là gì

Khi nói “thiết kế chính là mã”, chúng ta đồng thời đưa ra nhiều luận điểm:

1. Tương đương về ngữ nghĩa

Các quyết định thiết kế, khi được mã hóa đúng cách, sẽ trở nên có thể thực thi. Một design token không chỉ là một giá trị mà là một chỉ thị. Một đặc tả thành phần không chỉ là tài liệu mà là một chương trình. Khi các tác tử sử dụng những sản phẩm này, họ đang thực thi thiết kế chẳng kém gì việc triển khai nó.

2. Năng lực sinh tạo

Cũng như Rule 110 có thể tính toán mọi thứ tính toán được, một hệ thống thiết kế đủ hoàn chỉnh có thể sinh ra bất kỳ giao diện hợp lệ nào. Hệ thống chứa đựng tiềm năng của mọi biểu hiện hợp lệ của nó. Điều gì xuất hiện chỉ phụ thuộc vào điều kiện ban đầu (yêu cầu) và các quy tắc (ràng buộc).

3. Độ phức tạp trồi lên

Những giao diện tinh vi nhất không được thiết kế từ trên xuống; chúng trồi lên từ việc áp dụng nhất quán các quy tắc đơn giản. Một nút bấm được thiết kế tốt, được dùng nhất quán, sẽ tạo nên một ngôn ngữ thị giác mạch lạc mà không ai cần lên kế hoạch rõ ràng cho sự mạch lạc đó.

4. Tính bất khả quy giản về tính toán

Một số kết quả thiết kế không thể dự đoán nếu không thực sự chạy hệ thống. Bạn không thể biết một giao diện do tác tử lắp ráp sẽ trông ra sao nếu không để tác tử lắp ráp nó. Đây là nguyên lý bất khả quy giản về tính toán của Wolfram được áp dụng vào thiết kế.

5. Tự biến đổi

Giống như các evoloop đột biến trong quá trình tự sao chép, các hệ thống thiết kế sẵn sàng cho tác tử có thể tiến hóa qua quá trình sử dụng. Các thành phần do tác tử tạo ra trở thành một phần của thư viện mà những tác tử sau này sẽ dùng. Hệ thống học hỏi, thích nghi và lớn lên.

Mở rộng phép ẩn dụ tự động tế bào

Tự động tế bàoHệ thống thiết kế tác tử
Lưới các ôCanvas của các phần tử UI
Trạng thái ôCác thể hiện thành phần và props của chúng
Vùng lân cậnNgữ cảnh bố cục và các thành phần kề cận
Quy tắc cập nhậtRàng buộc bố cục và design token
Các thế hệChu kỳ kết xuất và cập nhật trạng thái
Các mẫu hình trồi lênGiao diện hoàn chỉnh và luồng người dùng
Tự sao chépThư viện thành phần cho phép tạo ra các thành phần mới
Tính toán phổ quátCác hệ thống thiết kế có thể biểu đạt bất kỳ UI hợp lệ nào
Glider (các mẫu hình di chuyển)Các mẫu hình tái sử dụng lan tỏa qua các sản phẩm
Still life (các mẫu hình ổn định)Các thành phần đã định hình, không thay đổi
Dao động tửCác thành phần hoạt họa, trạng thái tải, hiệu ứng chuyển cảnh

Vượt khỏi phép ẩn dụ: sự hội tụ thực sự

Nhưng đây không chỉ là phép ẩn dụ. Sự hội tụ này là có thật và đang diễn ra ngay lúc này:

  • Storybook MCP biến các thư viện thành phần thành những chỉ dẫn máy đọc được để các tác tử thực thi
  • Model Context Protocol chuẩn hóa cách các tác tử truy cập công cụ và ngữ cảnh, tạo nên một nền tảng chung cho các hoạt động của tác tử
  • Kiến trúc đa tác tử phân chia công việc giữa các tác tử chuyên biệt (kiến trúc sư, lập trình viên, người rà soát) tương tác theo các giao thức, như những ô có chức năng phân hóa
  • Vòng lặp tự chữa lànhCho phép các tác nhân chạy kiểm thử, phát hiện lỗi và lặp lại - chính là cơ chế phản hồi mà các automata tế bào dùng để tiến hóa thành những cấu hình ổn định
  • Schema.org Blueprints giúp cấu trúc nội dung vừa máy đọc được vừa có ý nghĩa ngữ nghĩa
  • Drupal AI cung cấp hạ tầng để các tác nhân AI tự chủ tạo, chỉnh sửa và quản lý nội dung

Chúng tôi không xem "thiết kế chính là mã nguồn" như một lập trường triết học. Chúng tôi đang xây dựng nó như một hạ tầng kỹ thuật.


Hệ quả và chặng đường phía trước

Dành cho nhà thiết kế

Vai trò của nhà thiết kế đang chuyển từ "người vẽ hình chữ nhật" sang "người định nghĩa quy tắc". Như Brad Frost nhận xét:

"Những nhà thiết kế và lập trình viên coi công việc của mình là vẽ hình chữ nhật thì có rất nhiều điều phải lo. Nhưng những người coi công việc của mình là giải quyết vấn đề - và tình cờ phải tạo ra hay sử dụng vài hình chữ nhật để giải quyết những vấn đề đó - thì ít phải sợ hơn nhiều."

- Brad Frost

Trong tương lai của các tác nhân, nhà thiết kế sẽ:

  • Định nghĩa các token ngữ nghĩa và mối quan hệ giữa chúng
  • Thiết lập các ràng buộc và mẫu kết hợp
  • Tạo ra các quy tắc kiểm định mà tác nhân phải đáp ứng
  • Chọn lọc và phát triển những quy tắc điều khiển sự trồi hiện (emergence)
  • Thiết kế các cơ chế phản hồi giúp hệ thống tự sửa lỗi
  • Định hình các "hàm thích nghi" quyết định đầu ra nào được chấp nhận

 

Man in blue shirt examines colorful flowchart.

 

 

Đây là thiết kế ở một tầng trừu tượng cao hơn - thiết kế những quy tắc tạo ra thiết kế, thay vì tự tay làm ra từng thiết kế. Giống như việc định nghĩa quy tắc của một automata tế bào thay vì vẽ từng ô một.

 

Dành cho lập trình viên

Lập trình viên trở thành kiến trúc sư của các hệ thống tác nhân. Như Anthropic mô tả:

"Lĩnh vực phát triển phần mềm đã cho thấy tiềm năng đáng kinh ngạc đối với các tính năng LLM, với năng lực phát triển từ hoàn thành mã đến tự giải quyết vấn đề."

Lập trình viên sẽ cần:

  • Tạo các giao diện máy đọc được giữa tác nhân và hệ thống
  • Thiết kế các vòng phản hồi và cơ chế kiểm định
  • Xây dựng giàn khung để hành vi trồi hiện có thể diễn ra bên trong
  • Giữ vai trò giám sát của con người như người quyết định cuối cùng
  • Định nghĩa các giao thức để tác nhân giao tiếp với nhau
  • Triển khai "mã keo" (glue code) kết nối các hệ thống tác nhân khác nhau
Man with laptop amidst web development icons and chatbot graphic.

 

Dành cho phát triển web và các nền tảng CMS

Việc tích hợp AI vào các nền tảng như Drupal cho thấy một tương lai nơi:

  • Mô hình nội dung trở nên tác nhân dùng được thông qua các chuẩn như Schema.org
  • Quy trình biên tập có tác nhân hỗ trợ với việc soạn thảo, kiểm duyệt và tối ưu hóa bằng AI
  • Tìm kiếm tiến hóa từ khớp từ khóa sang hiểu ngữ nghĩa nhờ embedding và cơ sở dữ liệu vector
  • Cá nhân hóa trở nên tự chủ khi các tác nhân học sở thích người dùng và điều chỉnh nội dung theo thời gian thực
  • Phát triển tăng tốc khi các tác nhân tạo ra thành phần, kiểm thử và tài liệu

Việc hệ sinh thái Drupal đón nhận AI - qua các module như Drupal AI, Drupal Canvas, Schema.org Blueprints và tích hợp các nhà cung cấp AI - cho thấy tương lai này đã và đang được xây dựng.

 

 

 

Dành cho các tổ chức

Lợi thế cạnh tranh sẽ thuộc về những tổ chức có hệ thống thiết kế "sẵn sàng cho tác nhân" nhất. Các hệ thống sẵn sàng cho tác nhân có:

  • Độ phủ đầy đủ các trạng thái và biến thể của thành phần
  • Cách đặt tên ngữ nghĩa thể hiện rõ ý định
  • Tài liệu và ngữ cảnh máy đọc được
  • Hạ tầng kiểm định và kiểm thử
  • Các ràng buộc rõ ràng giới hạn không gian của các đầu ra hợp lệ
  • API được thiết kế cho tác nhân sử dụng (ưu tiên AX)
  • Kiến trúc nội dung ưu tiên Schema.org

 

 

 

Cho tương lai của các sản phẩm số

Trạng thái cuối cùng sẽ giống một hệ sinh thái số: vô số tác tử (agent) vận hành theo các quy tắc cục bộ, tạo ra những giao diện nổi sinh (emergent) mà không một nhà thiết kế hay lập trình viên nào lên kế hoạch trước, nhưng vẫn kết dính được với nhau vì các quy tắc nền tảng đủ vững.

Điều này không viển vông như nghe có vẻ. Đó chính là cách các hệ sinh học vận hành, cách các thành phố lớn lên, cách thị trường hoạt động. Câu hỏi không phải là liệu ta có đến được trạng thái ấy hay không, mà là ta sẽ đi qua giai đoạn chuyển tiếp này như thế nào.

 

Kết luận: Mã nguồn đang sống

John von Neumann, nhà thông thái đã phát minh ra automata tế bào, bị thôi thúc bởi một câu hỏi căn bản: Độ phức tạp tối thiểu cần có để một hệ tự sinh sản là bao nhiêu? Câu trả lời của ông, bộ dựng phổ quát von Neumann, cho thấy tự sao chép không cần đến cơ chế sinh học. Nó chỉ cần những quy tắc mã hóa chính cách áp dụng của mình.

Bảy mươi năm sau, ta đang khám phá ra nguyên lý ấy cũng đúng với các hệ thống thiết kế. Điều kiện tối thiểu để giao diện tự sinh không phải là trí tuệ nhân tạo tổng quát hay khả năng sáng tạo ngang con người. Đó là một bộ quy tắc đầy đủ, nhất quán và máy đọc được để các tác tử có thể thực thi.

Khi các Langton's Loops sao chép lan khắp một lưới tế bào, ta không nói rằng những vòng lặp ấy đang "thiết kế" ra vòng lặp mới. Sự sao chép đơn giản là thứ mà các quy tắc tạo ra. Thế nhưng kết quả, những quần thể ngày một mở rộng gồm các mẫu hình tự tương tự, rõ ràng mang tính sinh tạo, và sáng tạo theo một nghĩa chức năng nào đó.

Khi các tác tử AI lắp ráp giao diện từ các thành phần của hệ thống thiết kế, tuân theo các token ngữ nghĩa và ràng buộc bố cục, chúng cũng đang làm điều tương tự. "Sự sáng tạo" không nằm ở các tác tử mà ở những quy tắc chúng thực thi, những quy tắc do con người thiết kế nhưng giờ đây vận hành một cách tự chủ.

Ý nghĩa sâu xa nhất

Đây là ý nghĩa sâu xa nhất của câu "thiết kế chính là mã": không chỉ là các đặc tả thiết kế trở nên thực thi được, mà là các hệ thống thiết kế trở nên giống sự sống. Chúng lớn lên. Chúng sao chép các mẫu hình của mình. Chúng tiến hóa qua quá trình sử dụng. Chúng thể hiện những hành vi mà không ai từng lập trình một cách tường minh.

Ta đang đứng trước ngưỡng cửa của một kỷ nguyên mới trong sáng tạo số. Các tác tử đã có mặt. Các giao thức đang thành hình. Các hệ thống thiết kế đang trở thành nền cho sự sống nhân tạo.

Thiết kế chính là mã.
Và mã đang sống dậy.

 

Các bài viết và dự án tiêu biểu

Tài nguyên về Drupal AI

Tài nguyên về automata tế bào


Khám phá những ý tưởng ở giao điểm của lý thuyết tính toán, hệ thống thiết kế, trí tuệ nhân tạo và phát triển web.

 Những quan điểm trình bày ở đây là các suy đoán khám phá về xu hướng đang nổi lên, không phải dự báo chắc chắn về tương lai.

 

Tôi thấy rằng chúng ta đang tạo ra các AI Agent hoạt động trong một vòng lặp và tương tác với các AI Agent khác trong những vòng lặp bổ sung.

Thiết kế chính là mã khi hệ thống vận hành theo một vòng lặp, như vòng đời, trong một canvas và một bộ quy tắc đã được chọn.

The Design is the Code